/* KMS Hub Web-UI. Engine-Designsprache (references/engine-design-language.md):
   KMS White CI, Georgia-Display, Avenir-Body, Teal #006A6A + Gold #F0B020,
   Semantikfarben getrennt vom Markenakzent, tabular-nums auf Zahlen. */

:root {
  --teal: #006A6A; --teal-dark: #004F4F; --gold: #F0B020;
  --ink: #2A3B3B; --soft: #F4F7F6; --line: #E6EDEB; --muted: #6B7C76;
  --ok: #1F8A4C; --warn: #C9971B; --bad: #B0392A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

table, .kpi, .dash-num, .clr-stat-num { font-variant-numeric: tabular-nums; }

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: #2A3B3B;
  font-weight: 600;
}
h1 { font-size: 1.7rem; margin: 0.4rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.8rem 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 0.8rem 0 0.4rem; }

a { color: #006A6A; }

main { max-width: 1360px; margin: 0 auto; padding: 1.2rem 1.5rem 3rem; }

.muted { color: #6B7B7B; font-size: 0.88em; }
.red { color: #B3261E; }

/* Kopfleiste */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--teal);
  padding: 0.5rem 1.5rem;
  border-bottom: 2px solid var(--gold);
}
.topbar .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.topbar .brand img {
  height: 30px;
  width: auto;
  display: block;
}
.topbar nav { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.topbar nav a {
  color: #DCEDED;
  text-decoration: none;
  padding: 0.32rem 0.6rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.topbar nav a:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.topbar nav a.active { background: #FFFFFF; color: #006A6A; font-weight: 600; }
.topsearch { margin-left: auto; }
.topsearch input {
  border: none;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  min-width: 200px;
  font-size: 0.9rem;
}
.topbar .ext { color: #F0B020; text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
.topbar .ext:hover { text-decoration: underline; }

/* Kacheln */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
  margin: 0.8rem 0;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid #DCE5E5;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: #2A3B3B;
  background: #FFFFFF;
}
a.tile:hover { border-color: #006A6A; }
.tile-num { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #006A6A; }
.tile-num.red { color: #B3261E; }
.tile-label { font-size: 0.85rem; color: #5A6B6B; }
.tile-gold { border-color: #F0B020; background: #FEF9EC; }

/* Warnbox */
.warnbox {
  border: 1px solid #F0B020;
  border-left: 6px solid #F0B020;
  background: #FEF9EC;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  margin: 0.8rem 0 1.2rem;
}
.warnbox a { margin-left: 0.5rem; }

/* Buttons und Formulare */
.btn {
  display: inline-block;
  background: #006A6A;
  color: #FFFFFF;
  border: 1px solid #006A6A;
  border-radius: 5px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #00807F; }
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn-secondary { background: #FFFFFF; color: #006A6A; }
.btn-secondary:hover { background: #EAF3F3; }

.filterbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.6rem 0 1rem;
}
.filterbar input[type="search"],
.filterbar select,
.form-card input[type="text"],
.form-card input[type="number"],
.form-card select,
.form-card textarea,
.inline-edit select {
  border: 1px solid #C6D2D2;
  border-radius: 5px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: #2A3B3B;
  background: #FFFFFF;
}
.filterbar input[type="search"] { min-width: 240px; }
.filterbar .check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; }

/* Tabellen */
table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 1rem;
  font-size: 0.92rem;
}
table.data th {
  text-align: left;
  border-bottom: 2px solid #006A6A;
  padding: 0.45rem 0.6rem;
  font-weight: 600;
  white-space: nowrap;
}
table.data td { padding: 0.45rem 0.6rem; border-bottom: 1px solid #E7EDED; vertical-align: top; }
/* Lange Namen in Textspalten umbrechen statt die Tabelle breiter zu ziehen.
   Nur .num (Zahlen) und Badges bleiben einzeilig. So bleibt eine Tabelle in
   der Seitenbreite, statt horizontal zu scrollen (13.08.2026). */
table.data td { overflow-wrap: anywhere; }
table.data td .badge { white-space: nowrap; }
/* Dichte Variante fuer spaltenreiche Uebersichten: enger, kleiner, mit
   klaren Spaltenbreiten, damit alles ohne Swipe sichtbar ist. */
table.data-compact { font-size: 0.88rem; }
table.data-compact th, table.data-compact td { padding: 0.4rem 0.5rem; }
table.data-compact th { white-space: normal; }
table.data tbody tr:nth-child(even) { background: #F6F9F9; }
table.data tbody tr:hover { background: #EAF3F3; }
table.data .num, table.data th.num { text-align: right; white-space: nowrap; }
table.data td.fields { color: #6B7B7B; font-size: 0.85em; }
tr.rowlink { cursor: pointer; }
tr.rowlink a { text-decoration: none; color: #2A3B3B; font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* Karten */
.card {
  border: 1px solid #DCE5E5;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 0.6rem 0;
  background: #FFFFFF;
}
.headcard { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
.page-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.facts { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; margin: 0; }
.facts div { min-width: 140px; }
.facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6B7B7B; }
.facts dd { margin: 0; font-weight: 600; }
.inline-edit { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.inline-edit label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #6B7B7B; }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-teal { background: #006A6A; color: #FFFFFF; }
.badge-gold { background: #F0B020; color: #2A3B3B; }
.badge-outline { border: 1px solid #9FB3B3; color: #4A5B5B; background: #FFFFFF; }
.badge-danger { background: #B3261E; color: #FFFFFF; }

/* Wareneingang: ueberfaellige Zeilen rot getoent, zugestellte gedaempft. */
table.data tr.we-overdue td { background: #FDF3F2; }
table.data tr.we-done td { color: #7A8A8A; }
.we-items { margin: 0.35rem 0 0.1rem; padding-left: 1.1rem; }
.we-items li { margin: 0.1rem 0; }
/* Verknuepfte Plenty-Bestellnummern: reiner Text mit Tooltip (es gibt keine
   Order-Detailseite), gepunktete Linie signalisiert den Hover-Tooltip. */
.we-plenty-order {
  display: inline-block;
  margin: 0 0.4rem 0.2rem 0;
  border-bottom: 1px dotted #9FB3B3;
  cursor: help;
  white-space: nowrap;
}
select.js-we-assign { max-width: 240px; margin-top: 0.25rem; display: block; }

/* Deals in der 360-Ansicht */
.deal-columns { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.deal-col { flex: 1 1 320px; }
.deal-col-aufstellung h3 { color: #006A6A; }
.deal-card { padding: 0.6rem 0.8rem; }
.deal-title { font-weight: 600; }
.deal-meta { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.3rem; flex-wrap: wrap; }
.deal-value { font-weight: 700; color: #006A6A; }

.form-card form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-start; }
.form-card textarea { flex: 1 1 320px; resize: vertical; }
.form-card input[type="text"] { flex: 1 1 200px; }

/* Anruf-Schnellformular (Firmenseite): Ergebnis-Notiz, optionale
   Wiedervorlage, optionale E-Mail-Korrektur. Ein Rep telefoniert damit
   unterwegs Bestandskunden ab, siehe app.js initAnrufForm(). */
.callcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.anruf-hint { margin: 0.2rem 0 0.6rem; }
.anruf-msg {
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
  background: #FEF9EC;
  border: 1px solid #F0B020;
  color: #6B5312;
}
.anruf-msg-error { background: #FDF3F2; border-color: #B3261E; color: #7A241A; }

/* Timeline */
.timeline { list-style: none; margin: 0.4rem 0 1rem; padding: 0; }
.timeline li {
  display: flex;
  gap: 0.7rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid #EDF2F2;
  align-items: flex-start;
}
.t-badge {
  flex: 0 0 auto;
  min-width: 62px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: #EAF3F3;
  color: #006A6A;
  margin-top: 0.15rem;
}
.t-order .t-badge { background: #006A6A; color: #FFFFFF; }
.t-audit .t-badge { background: #EFEFEA; color: #6B7B6B; }
.t-body { flex: 1 1 auto; min-width: 0; }
.t-head { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: baseline; }
.t-detail { color: #4A5B5B; font-size: 0.88rem; margin-top: 0.1rem; overflow-wrap: anywhere; }

/* Kanban. Die .tk-*-Klassen sind das Aufgaben-Board auf /tasks: gleiche
   Optik, aber eigene Klassennamen, damit das Deal-Kanban-JS (initKanban)
   und das Aufgaben-JS (initTaskKanban) sich nie in die Quere kommen. */
.kanban, .tk-board {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 0.6rem;
}
.kanban-col, .tk-col {
  flex: 1 0 175px;
  max-width: 240px;
  background: #F4F8F8;
  border: 1px solid #DCE5E5;
  border-radius: 8px;
  padding: 0.5rem;
  min-height: 140px;
}
.kanban-col.drop-target, .tk-col.drop-target { outline: 2px dashed #006A6A; outline-offset: -3px; }
.kanban-head {
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem 0.4rem;
  color: #006A6A;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.kanban-head .count { color: #6B7B7B; font-weight: 400; font-size: 0.8rem; }
.kanban-card, .tk-card {
  background: #FFFFFF;
  border: 1px solid #D5E0E0;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  cursor: grab;
  font-size: 0.88rem;
}
.kanban-card:active, .tk-card:active { cursor: grabbing; }
/* Nur-Lese-Karten (viewer, Audit #93): kein Greif-Cursor. */
.tk-card.tk-fest, .tk-card.tk-fest:active { cursor: default !important; }
.kc-title { font-weight: 600; }
.kc-company { font-size: 0.82rem; color: #5A6B6B; overflow-wrap: anywhere; }
.kc-company a { color: #5A6B6B; }
.kc-value { margin-top: 0.25rem; font-weight: 700; color: #006A6A; font-size: 0.85rem; }
.tk-col[data-bucket="verzug"] .kanban-head { color: #B3261E; }
.tk-top { display: flex; gap: 0.45rem; align-items: baseline; }
.tk-top .kc-title { overflow-wrap: anywhere; }
.tk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  align-items: baseline;
  margin-top: 0.25rem;
  font-size: 0.8rem;
}
.tk-more { margin-top: 0.3rem; font-size: 0.82rem; }
.tk-more summary { cursor: pointer; color: #006A6A; font-size: 0.78rem; }
.tk-line { margin-top: 0.2rem; color: #4A5B5B; overflow-wrap: anywhere; }
.view-toggle { display: inline-flex; gap: 0.4rem; margin-left: auto; }

/* Mein Tag (dashboard_rep): ruhige Kachelzeile + Fokus-Block "Jetzt anrufen" */
.tiles-ruhig {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.tiles-ruhig .tile { flex: 1 1 140px; padding: 0.55rem 0.9rem; }
.tiles-ruhig .tile-num { font-size: 1.5rem; line-height: 1.15; }
.tiles-ruhig .tile-label { font-size: 0.75rem; }
.fokus-anrufen { margin: 1.2rem 0 1.6rem; }
.call-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}
.call-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid #DCE5E5;
  border-left: 6px solid #F0B020;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 0.9rem 1.1rem;
}
.call-firma a {
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #006A6A;
  text-decoration: none;
}
.call-firma a:hover { text-decoration: underline; }
.call-ort { font-size: 0.85rem; color: #5A6B6B; }
.call-telefon {
  font-family: Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #2A3B3B;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.call-telefon:hover { color: #006A6A; }
.call-telefon.fehlt { font-size: 1rem; font-weight: 400; color: #8A9A9A; }
.call-card .badge { align-self: flex-start; margin-top: 0.15rem; }

/* Aufgaben */
.task-section { margin: 1rem 0; }
.task-section.danger h2 { color: #B3261E; }
.task-section.danger .task-list { border-left: 4px solid #B3261E; padding-left: 0.8rem; }
.task-section.warn .task-list { border-left: 4px solid #F0B020; padding-left: 0.8rem; }
.task-list { list-style: none; margin: 0.3rem 0; padding: 0; }
.task-list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid #EDF2F2;
  flex-wrap: wrap;
}
.task-list li.overdue .task-title { color: #B3261E; font-weight: 600; }
/* Klickbarer Titel (Mein Tag): sieht aus wie Text, fuehrt zu Firma/Deal. */
a.task-title { color: inherit; text-decoration: none; border-bottom: 1px dotted #9BB0B0; }
a.task-title:hover { color: #006A6A; border-bottom-color: #006A6A; }
.task-title.done { text-decoration: line-through; color: #8A9A9A; }
.due { font-size: 0.85rem; color: #5A6B6B; }
.due.red { color: #B3261E; font-weight: 600; }
.done-block { margin: 1.2rem 0; }
.done-block summary {
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.3rem 0;
}

/* Merge */
.merge-card { margin-bottom: 1.4rem; }
.merge-meta { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.5rem; }
table.compare tr.diff td { background: #FBEED3; }
table.compare tr.diff td:first-child { font-weight: 700; }
.merge-actions { display: flex; gap: 0.7rem; margin-top: 0.5rem; }

/* Suche und Listen */
.result-list { list-style: none; margin: 0.3rem 0 1rem; padding: 0; }
.result-list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.3rem 0.2rem;
  border-bottom: 1px solid #EDF2F2;
  flex-wrap: wrap;
}
.count { color: #6B7B7B; font-size: 0.85rem; font-weight: 400; }

.pager { display: flex; gap: 0.8rem; align-items: center; margin: 0.8rem 0; }
.quicklinks { display: flex; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  main { padding: 0.8rem; }
  .topsearch { margin-left: 0; width: 100%; }
  .topsearch input { width: 100%; }
  .headcard { flex-direction: column; gap: 1rem; }
}

/* Opportunity Radar */
.radar-lead { transition: opacity 0.4s ease; }
.radar-lead-prio1 { border-left: 4px solid #F0B020; background: #fffdf6; }
.radar-lead.fade-out { opacity: 0; }
.radar-lead-head { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; }
.radar-lead .t-detail { margin-top: 0.3rem; }
.radar-source { margin-top: 0.3rem; font-size: 0.88rem; overflow-wrap: anywhere; }
.radar-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.radar-actions form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.radar-actions select,
.radar-actions input[type="number"] {
  border: 1px solid #C6D2D2;
  border-radius: 5px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: #2A3B3B;
  background: #FFFFFF;
}
.radar-actions input[type="number"] { width: 220px; }
.badge-red { background: #B3261E; color: #FFFFFF; }
.watchlist-links a { margin-right: 0.6rem; overflow-wrap: anywhere; }

/* Dashboard Command Center */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
  align-items: start;
}
.dash-card {
  border: 1px solid #DCE5E5;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  background: #FFFFFF;
}
.dash-card h2 { margin: 0; font-size: 1.1rem; }
.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.dash-head a { font-size: 0.85rem; white-space: nowrap; }
.dash-act {
  grid-column: 1 / -1;
  border-color: #F0B020;
  border-left: 6px solid #F0B020;
  background: #FFFDF7;
}
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid #EDF2F2;
}
.dash-list li:last-child { border-bottom: none; }
.dash-list li.row-compliance {
  border-left: 4px solid #B3261E;
  padding-left: 0.6rem;
  background: #FDF3F2;
}
.dash-subject { font-weight: 600; overflow-wrap: anywhere; }
.dash-num { margin-left: auto; font-weight: 700; color: #006A6A; white-space: nowrap; }
.dash-line { margin: 0.2rem 0 0.5rem; font-size: 0.92rem; }
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* Deal-Detail und Produkt-Previews */
.kc-title a { color: inherit; text-decoration: none; }
.kc-title a:hover { text-decoration: underline; }
.kc-devices { font-size: 0.8rem; color: #5A6B6B; margin-top: 0.2rem; }
.deal-title a { color: inherit; text-decoration: none; }
.deal-title a:hover { text-decoration: underline; color: #006A6A; }
.deal-products {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.3rem 0 0;
  border-top: 1px dashed #E0E8E8;
  font-size: 0.85rem;
  color: #4A5B5B;
}
.deal-products li { padding: 0.1rem 0; }

/* Next-Best-Action (Dashboard-Karte und Firmen-360-Banner) */
.dash-nba {
  grid-column: 1 / -1;
  border-color: #006A6A;
  border-left: 6px solid #006A6A;
  background: #F6FAFA;
}
.nba-row { display: block; }
.nba-main { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.nba-reason { margin-top: 0.15rem; }
.nba-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }
.btn-small { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.nba-banner {
  border: 1px solid #006A6A;
  border-left: 6px solid #006A6A;
  border-radius: 8px;
  background: #F6FAFA;
  padding: 0.8rem 1rem;
  margin: 0.6rem 0 1rem;
}
.nba-banner .nba-action { font-size: 1.02rem; }
.nba-draft { margin-top: 0.4rem; }
.nba-draft summary { cursor: pointer; font-size: 0.88rem; color: #006A6A; }
.nba-draft pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #FFFFFF;
  border: 1px solid #DCE5E5;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 0.88rem;
  margin: 0.4rem 0 0;
}

/* Segment-Leiste auf der Firmenliste */
.segmentbar { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.segmentbar label { margin-right: 2px; }

/* Raeumungs-Cockpit */
.clr-headline { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.8rem 0 1.2rem; }
.clr-stat {
  flex: 1 1 220px;
  border: 1px solid #F0B020;
  border-left: 6px solid #F0B020;
  border-radius: 8px;
  background: #FEF9EC;
  padding: 0.8rem 1.1rem;
}
.clr-stat-num { font-family: Georgia, serif; font-size: 1.7rem; font-weight: 700; color: #006A6A; }
.clr-stat-label { font-size: 0.85rem; color: #5A6B6B; }
.clearance-table .clr-detail td { background: #F6FAFA; }
.clr-buyers strong { display: block; margin-bottom: 0.4rem; }
.clr-buyer-list { list-style: none; margin: 0; padding: 0; }
.clr-buyer-list li {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.3rem 0;
  border-bottom: 1px solid #E7EDED;
}
.clr-buyer-list li:last-child { border-bottom: none; }
.clr-buyer-list li .btn { margin-left: auto; }

/* Cashflow-Verzahnung */
.cf-note { color: #6B7B7B; font-size: 0.85rem; margin: 0.2rem 0 1.2rem; }
table.data td.neg { color: #B3261E; }
.cf-note .neg, strong.neg { color: #B3261E; }

/* Steuerung / Cockpit-Zusatzmotoren (Cash, Burndown, Aufstellung, Margen, Team) */
.spark { display: block; width: 100%; max-width: 320px; height: auto; margin: 0.4rem 0; }

/* Cash-Vorschau */
table.data tr.lp-row td { background: #FDF3F2; }
table.data tr.lp-row:hover td { background: #FBE9E7; }
.cash-week { margin: 0.3rem 0; border-bottom: 1px solid #EDF2F2; }
.cash-week > summary { cursor: pointer; padding: 0.4rem 0.2rem; font-weight: 600; }
.cash-week-body { display: flex; gap: 1.4rem; flex-wrap: wrap; padding: 0.3rem 0.6rem 0.7rem; }
.cash-col { flex: 1 1 260px; }
.cash-col ul { list-style: none; margin: 0.3rem 0; padding: 0; }
.cash-col li { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.15rem 0; border-bottom: 1px solid #F0F4F4; }
.cash-col li .num { margin-left: auto; white-space: nowrap; }

/* Burndown-Aktionen */
.burndown-action .ba-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.3rem; }
.burndown-action .ba-buyers { margin: 0.2rem 0 0.4rem; overflow-wrap: anywhere; }

/* Aufstellungs-P&L */
.filterbar input[type="number"] {
  border: 1px solid #C6D2D2;
  border-radius: 5px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: #2A3B3B;
  background: #FFFFFF;
  width: 6rem;
}
.pl-card .facts { gap: 0.6rem 2rem; }
.pl-notes { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.pl-notes li { margin: 0.15rem 0; }

/* Team-Briefings */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 1rem 0;
}
.team-card h2 { margin: 0; font-size: 1.15rem; }
.team-card h3 { font-size: 0.95rem; margin: 0.8rem 0 0.3rem; color: #006A6A; }
.team-note { font-size: 0.88rem; color: #4A5B5B; margin: 0.2rem 0 0.6rem; }
.team-list { list-style: none; margin: 0.2rem 0; padding: 0; }
.team-list li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.25rem 0.1rem;
  border-bottom: 1px solid #EDF2F2;
}
.team-list li:last-child { border-bottom: none; }
.team-list li.overdue .task-title { font-weight: 600; }
.team-rev { margin-top: 0.7rem; font-weight: 600; }

/* Aufstellungs-Cockpit: links Standorte, rechts Rechner */
.auf-grid { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .auf-grid { grid-template-columns: 1fr; } }
.auf-main h2 { margin-top: 26px; }
.loc-card { border: 1px solid var(--line, #E3E8E8); border-left: 4px solid var(--gold, #F0B020);
  border-radius: 10px; padding: 14px 18px; margin: 12px 0; background: #fff; }
.loc-card.loc-live { border-left-color: var(--teal, #006A6A); }
.loc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.loc-title { font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: var(--teal, #006A6A); text-decoration: none; }
.loc-title:hover { text-decoration: underline; }
.loc-nums { display: flex; flex-wrap: wrap; gap: 20px 32px; margin: 12px 0 10px; }
.loc-nums > div, .calc-result > div { display: flex; flex-direction: column; }
.loc-nums .lbl, .calc-result .lbl { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mute, #5C6B6B); }
.loc-nums b { font-size: 17px; }
.loc-actions { display: flex; gap: 8px; }
.btn-small { padding: 4px 12px; font-size: 13px; white-space: nowrap; }

/* rechte Spalte */
.auf-aside { position: sticky; top: 16px; border: 1px solid var(--line, #E3E8E8); border-radius: 12px;
  padding: 16px 18px; background: #F8FAFA; }
.auf-aside h3 { font-family: Georgia, serif; color: var(--teal, #006A6A); margin: 18px 0 8px; font-size: 17px; }
.auf-aside h3:first-child { margin-top: 0; }
.calc-form { display: flex; flex-direction: column; gap: 8px; }
.calc-form label { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink, #2A3B3B); }
.calc-form input { width: 90px; padding: 5px 8px; border: 1px solid var(--line, #E3E8E8); border-radius: 6px; }
.calc-form .btn { margin-top: 4px; }
.calc-result { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  border-top: 1px solid var(--line, #E3E8E8); padding-top: 12px; }
.calc-result b { font-size: 15px; }
.calc-result b.hl { color: var(--teal, #006A6A); }
.calc-result .small { grid-column: 1 / -1; }

.mix-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mix-list li { padding: 8px 0; border-bottom: 1px solid var(--line, #E3E8E8); }
.mix-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mix-name { font-size: 14px; font-weight: 600; }
.mix-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 3px; font-size: 12.5px; align-items: center; }
.mix-rev { font-weight: 700; color: var(--teal, #006A6A); }
.tier { font-size: 11px; padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.tier-hero { background: #006A6A; color: #fff; }
.tier-stark { background: #F0B020; color: #3A2C05; }
.tier-solide { background: #E3E8E8; color: #2A3B3B; }
.tier-schwach { background: #F3D6D6; color: #7A2E2E; }
.badge-green { background: #006A6A; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.small { font-size: 12.5px; }

/* Aufklappbare Radar-Leads (details/summary) */
details.radar-lead { padding: 0; }
details.radar-lead > summary { list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
details.radar-lead > summary::-webkit-details-marker { display: none; }
details.radar-lead > summary::before { content: "▸"; color: var(--teal, #006A6A); font-size: 13px; margin-right: 2px; }
details.radar-lead[open] > summary::before { content: "▾"; }
details.radar-lead > summary:hover { background: #F6F8F8; }
details.radar-lead .deal-title { font-weight: 700; }
.radar-lead-body { padding: 0 18px 16px; }
.radar-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 10px; font-size: 14px; }
.radar-contact .lbl { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mute, #5C6B6B); }
.radar-contact .sep { color: var(--line, #CBD5D5); }
.radar-summary { background: #F8FAFA; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }

/* Aufgaben-Kontext (Anreicherung aus Mails/CRM) */
.task-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-ctx { margin: 3px 0 2px 26px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--mute, #5C6B6B); align-items: baseline; }
.task-ctx .ctx-item { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.task-ctx .ctx-item b { color: var(--ink, #2A3B3B); }
.task-ctx .ctx-desc { flex-basis: 100%; color: #7A8686; font-size: 12px; line-height: 1.4; }
.task-list li { padding: 8px 0; }

/* Aufgabe anlegen (details/summary ueber der Aufgabenliste). Bis 08/2026 gab
   es keinen Weg, im Hub eine Aufgabe von Hand anzulegen: die Seite war ein
   Bericht ueber Seeds und Importe, kein Arbeitsmittel. */
details.task-new { margin: 0 0 1.2rem; border: 1px solid #C6D2D2; border-radius: 8px; background: #F8FAFA; }
details.task-new > summary { cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 600; color: #006A6A; list-style: none; }
details.task-new > summary::-webkit-details-marker { display: none; }
details.task-new > summary::before { content: "+ "; font-weight: 700; }
details.task-new[open] > summary::before { content: "− "; }
details.task-new > summary:hover { background: #EAF3F3; border-radius: 8px 8px 0 0; }
.stackform { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.2rem 0.9rem 0.9rem; }
.stackform > label, .stackform .row > label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: #556767; }
.stackform .row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.stackform .row > label { flex: 1 1 8rem; }
.stackform input[type="text"], .stackform input[type="date"], .stackform select, .stackform textarea {
  border: 1px solid #C6D2D2; border-radius: 5px; padding: 0.4rem 0.6rem;
  font-size: 0.9rem; font-family: inherit; color: #2A3B3B; background: #FFFFFF;
}
.stackform textarea { resize: vertical; }
.stackform button { align-self: flex-start; }

/* ===========================================================================
   Mobil (~390px, iPhone im Hochformat): /buch, /tasks, Firmenseite bedienbar
   halten. Bewusst NUR ueber generische Klassen, die im Bestand schon existieren
   (table.data, .filterbar, .form-card, .stackform, .task-list, .deal-columns,
   .callcard, .topbar), damit keine fremde Baustelle (routes.py, base.html,
   buch.html) angefasst werden muss. Alles strikt in dieser Media-Query, das
   Desktop-Layout bleibt unveraendert.
   =========================================================================== */
@media (max-width: 480px) {
  main { padding: 0.6rem; }

  /* Kopfleiste: Navigation bleibt in einer Zeile, horizontal scrollbar statt
     umzubrechen, sonst frisst sie auf 390px die halbe Bildschirmhoehe. */
  .topbar { padding: 0.4rem 0.7rem; gap: 0.5rem; }
  .topbar nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
                min-width: 0; max-width: 100%; }
  .topbar nav a { white-space: nowrap; }
  /* Der rechte Block (Suche + Nutzer + Logout) war mit 442px der Grund fuer
     horizontales Scrollen der ganzen Seite auf 390px: als Flex-Kind schrumpft
     er ohne min-width:0 nicht unter seine Inhaltsbreite. Umbrechen lassen und
     die Suche auf Zeilenbreite begrenzen. */
  .topbar .tenantsel { gap: 0.5rem; flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .topbar .topsearch { width: 100%; }
  .topbar .topsearch input { width: 100%; min-width: 0; box-sizing: border-box; }

  /* Tabellen: horizontal scrollbar statt seitlich abgeschnitten. Generische
     Regel auf table.data selbst (nicht nur .table-scroll-Wrapper), damit auch
     Templates ohne eigenen Wrapper (z.B. buch.html/tasks-nahe Tabellen)
     profitieren, ohne dass deren Markup angefasst werden muss. display:block
     auf dem table-Element gibt dem Inhalt seine natuerliche (ggf. breitere)
     Breite zurueck, overflow-x macht sie scrollbar statt abgeschnitten. */
  table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Formulare stapeln, Inputs auf volle Breite, Touch-Ziele >= 40px. */
  .filterbar,
  .form-card form,
  .stackform .row,
  .callcard-head,
  .deal-columns,
  .headcard .inline-edit {
    flex-direction: column;
    align-items: stretch;
  }
  .filterbar input[type="search"],
  .filterbar input[type="number"],
  .filterbar select,
  .form-card input[type="text"],
  .form-card input[type="number"],
  .form-card select,
  .form-card textarea,
  .stackform input[type="text"],
  .stackform input[type="date"],
  .stackform select,
  .stackform textarea,
  .anruf-form input,
  .anruf-form textarea,
  .anruf-form select {
    width: 100%;
    min-height: 40px;
  }
  .btn, .btn-secondary, button, input[type="submit"] { min-height: 40px; }
  .btn-small { min-height: 34px; }
  input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }

  /* Kanban und Kacheln bleiben horizontal scrollbar (bereits so gebaut),
     aber schmaler, damit auf 390px mehr als eine Kartenkante sichtbar ist. */
  .kanban-col, .tk-col { flex-basis: 150px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Aufgaben-Kontext und Timeline: Einrueckung reduzieren, sonst bleibt auf
     390px kaum Platz fuer den Text selbst. */
  .task-ctx { margin-left: 0; }
  .lead-hero { flex-wrap: wrap; }
}

/* ---- Placement-Unterreiter + Indoor-Leads (Salesboard-Merge, Paket 5) ---- */
.subtabs { display: flex; gap: 0.4rem; margin: -0.35rem 0 0.9rem; }
.subtab {
  padding: 0.3rem 0.85rem; border: 1px solid #9FB3B3; border-radius: 999px;
  color: #4A5B5B; text-decoration: none; font-size: 0.9rem; background: #FFFFFF;
}
.subtab:hover { border-color: #006A6A; color: #006A6A; }
.subtab.active { background: #006A6A; border-color: #006A6A; color: #FFFFFF; }
.leads-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem;
  margin: 0.4rem 0 0.8rem; padding: 0.6rem 0.8rem;
  background: #F6F9F9; border: 1px solid #E7EDED; border-radius: 8px;
}
.leads-filter input[type="search"] { min-width: 220px; }
.leads-filter label { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.lead-fehlt { color: #B3261E; font-weight: 600; }
#leadmap { height: 420px; border: 1px solid #E7EDED; border-radius: 8px; }

/* ---- Kalender v2: Raster, Filter-Chips, Farben je Team-Kalender ---- */
/* KMS-Palette: Teal-Toene fuer die Arbeits-Kalender, Gold fuer Messen
   (+ dunkles Gold fuer Aufstellung), Grau-Teal fuer persoenlich. Das Raster
   nutzt ausschliesslich anteilige Spalten (minmax(0,1fr)): bei >=1280px
   passt die Woche ohne horizontales Scrollen, mobil scrollt NUR der
   Rasterbereich in sich (.kalender-raster-wrap). */
.kalender-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.kalender-ansicht { margin-left: auto; display: inline-flex; gap: 0.4rem; align-items: center; }
.kalender-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.9rem; }
.kal-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.65rem;
  border: 1px solid #9FB3B3; border-radius: 999px; background: #FFFFFF;
  color: #2A3B3B; text-decoration: none; font-size: 0.85rem; white-space: nowrap;
}
.kal-chip:hover { border-color: #006A6A; }
.kal-chip-aus { opacity: 0.4; }
.kal-punkt {
  display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: #9FB3B3; flex: none;
}
.kal-punkt.kal-oeffentlich { background: #006A6A; }
.kal-punkt.kal-tech { background: #1F4E4E; }
.kal-punkt.kal-messen { background: #F0B020; }
.kal-punkt.kal-sales { background: #2E8B8B; }
.kal-punkt.kal-aufstellung { background: #B8860B; }
.kal-punkt.kal-intern { background: #6B7B7B; }
.kal-punkt.kal-persoenlich, .kal-punkt.kal-meine { background: #9FB3B3; }

.kalender-raster-wrap { overflow-x: auto; }
.kalender-raster {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem; min-width: 640px;
}
.kalender-spalte {
  background: #FFFFFF; border: 1px solid #E7EDED; border-radius: 8px;
  padding: 0.3rem; min-height: 9rem; min-width: 0;
}
.kalender-spalte.kalender-heute { border-color: #006A6A; box-shadow: inset 0 0 0 1px #006A6A; }
.kalender-spalte-kopf { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; }
.kal-block {
  border-left: 3px solid #9FB3B3; background: #F4F4EF; border-radius: 4px;
  padding: 0.25rem 0.4rem; margin-bottom: 0.3rem; font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.kal-block-zeit { display: block; font-weight: 600; font-size: 0.72rem; }
.kal-block-titel { display: block; }
.kal-block-meta { display: block; color: #6B7B6B; font-size: 0.72rem; }
.kal-sync { color: #8A6D1A; font-style: italic; }
.kal-sync-fehler { color: #B3261E; }
.kal-block.kal-oeffentlich { border-left-color: #006A6A; background: #E4F0F0; }
.kal-block.kal-tech { border-left-color: #1F4E4E; background: #E2EAEA; }
.kal-block.kal-messen { border-left-color: #F0B020; background: #FBF1D8; }
.kal-block.kal-sales { border-left-color: #2E8B8B; background: #E7F3F3; }
.kal-block.kal-aufstellung { border-left-color: #B8860B; background: #F6EDD8; }
.kal-block.kal-intern { border-left-color: #6B7B7B; background: #EDEFEF; }
.kal-block.kal-persoenlich { border-left-color: #9FB3B3; background: #F4F4EF; }
.kalender-legende { font-size: 0.85rem; }

/* ------------------------------------------------------------------------
   Freigaben-Korb (GF): eine Zeile je Vorgang, daneben das Entscheidungsfeld.
   Aktionen stapeln auf schmalen Screens (mobil 390px), kein hscroll. */
.fg-intro { margin-top: -0.5rem; }
.fg-liste { list-style: none; margin: 1rem 0 0; padding: 0; }
.fg-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #FFFFFF;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.6rem;
  transition: opacity 0.35s ease;
}
.fg-row.fg-weg { opacity: 0; }
.fg-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
}
.fg-title { font-weight: 600; overflow-wrap: anywhere; }
.fg-chip {
  display: inline-block;
  min-width: 3.2em;
  text-align: center;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--line);
}
.fg-chip.gold { background: #FBF1D8; color: #8A6D1A; border-color: #F0B020; }
.fg-chip.rot { background: #FDF3F2; color: #B3261E; border-color: #E3B7B2; }
.fg-vertagt { color: #8A6D1A; border-color: #E0C98A; }
.fg-link { font-size: 0.85rem; white-space: nowrap; }
.fg-details { margin: 0.3rem 0 0 0.2rem; font-size: 0.88rem; }
.fg-details summary { cursor: pointer; color: var(--muted); }
.fg-desc { white-space: pre-wrap; margin: 0.3rem 0 0.2rem; color: #4A5B5B; }
.fg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
}
.fg-group { display: inline-flex; align-items: center; gap: 0.3rem; }
.fg-note { flex: 1 1 220px; min-width: 0; }
.fg-rep { max-width: 190px; }
.fg-confirm { color: var(--ok); font-weight: 600; padding: 0.2rem 0; }
@media (max-width: 480px) {
  .fg-actions { flex-direction: column; align-items: stretch; }
  .fg-group { display: flex; justify-content: space-between; }
  .fg-group .fg-rep, .fg-group .fg-datum { flex: 1 1 auto; min-width: 0; }
  .fg-note { flex: 1 1 auto; }
}
/* Dunkles Thema (Schalter in base.html setzt :root.dark) */
:root.dark .fg-row { background: #141c20; border-color: #263136; }
:root.dark .fg-chip { background: #1a2327; border-color: #263136; color: #8f9ca3; }
:root.dark .fg-chip.gold { background: #2a2413; color: #F0B020; border-color: #6b5a1a; }
:root.dark .fg-chip.rot { background: #2a1614; color: #ff8a80; border-color: #5a2a26; }
:root.dark .fg-desc { color: #b8c4c9; }

/* Pipeline-Revier (Justus 05.10.2026): Owner-Chips, Sperre, ruhend, Konflikt */
.own-chip { display: inline-block; min-width: 1.6rem; padding: 0 0.35rem; border-radius: 0.8rem;
  font-size: 0.72rem; font-weight: 700; line-height: 1.25rem; text-align: center; color: #FFFFFF; background: #6B7B7B; }
.own-s0 { background: #006A6A; }
.own-s1 { background: #B07A00; }
.own-s2 { background: #3B5B8C; }
.own-s3 { background: #7A3F6E; }
.own-free { background: #FFFFFF; color: #4A5B5B; border: 1px dashed #9FB3B3; }
.own-orphan { background: #B3261E; }
.kc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.35rem; }
.kc-touch { font-size: 0.75rem; color: #6B7B7B; }
.kc-lock { font-size: 0.72rem; color: #6B7B7B; border: 1px solid #C9D6D6; border-radius: 0.6rem; padding: 0 0.35rem; }
.kc-actions { margin-top: 0.35rem; }
.kc-actions select { font-size: 0.78rem; max-width: 100%; }
.kanban-card.kc-locked { cursor: default; background: #F6F8F8 !important; }
.kanban-card.kc-stale { border-left: 3px solid #B3261E !important; }
.kanban-card.kc-conflict { box-shadow: inset 0 0 0 2px #F0B020; }
.rev-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0; }
.rev-card { flex: 1 1 11rem; border: 1px solid #C9D6D6; border-radius: 8px; padding: 0.55rem 0.7rem;
  background: #FFFFFF; color: inherit; text-decoration: none; }
.rev-card:hover, .rev-card.rev-active { border-color: #006A6A; }
.rev-name { font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.rev-nums { display: flex; flex-wrap: wrap; gap: 0.7rem; font-size: 0.82rem; color: #4A5B5B; margin-top: 0.3rem; }
.rev-stale { color: #B3261E; }
.pl-requests ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.pl-requests li { margin: 0.3rem 0; }
.kc-act { font: inherit; font-size: 0.76rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 0.6rem;
  border: 1px solid #006A6A; background: #FFFFFF; color: #006A6A; cursor: pointer; }
.kc-act:hover { background: #EAF3F3; }
.kc-act-primary { background: #006A6A; color: #FFFFFF; }
.kc-act-primary:hover { background: #00807F; }
.kc-act:disabled { opacity: 0.5; cursor: wait; }

/* Pipeline-Ansichten wie Airtable (Justus 05.10.2026): Cockpit-Tabelle + Kanbans */
main:has(> .pl-wide) { max-width: 1680px; }
.pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }
.pl-head h1 { margin: 0; }
.pl-views { display: flex; gap: 0.25rem; background: #E4E9EB; border-radius: 9px; padding: 3px; }
.pl-view { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 7px;
  font-size: 0.85rem; font-weight: 600; color: #4A5B5B; text-decoration: none; }
.pl-view svg { width: 15px; height: 15px; }
.pl-view:hover { color: #0C1A2E; background: rgba(255,255,255,0.6); }
.pl-view.pl-view-active { background: #FFFFFF; color: #0C1A2E; box-shadow: 0 1px 3px rgba(12,26,46,0.15); }
.pl-intro { margin: 0.6rem 0 0.2rem; max-width: 980px; }

.pg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem; padding: 0.55rem 0.6rem;
  background: #FFFFFF; border: 1px solid #DDE3E6; border-bottom: none; border-radius: 10px 10px 0 0; margin-top: 0.8rem; }
.pg-toolbar input[type="search"] { flex: 1 1 14rem; min-width: 0; max-width: 22rem; }
.pg-toolbar input[type="search"], .pg-toolbar select { font: inherit; font-size: 0.84rem; padding: 0.3rem 0.5rem;
  border: 1px solid #C9D3D8; border-radius: 6px; background: #FFFFFF; color: inherit; }
.pg-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; color: #4A5B5B; }
.pg-count { margin-left: auto; font-size: 0.82rem; color: #5F6F69; white-space: nowrap; }

.pg-wrap { overflow: auto; max-height: calc(100vh - 240px); min-height: 18rem; overscroll-behavior: contain; background: #FFFFFF;
  border: 1px solid #DDE3E6; border-radius: 0 0 10px 10px; }
table.pg-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1320px; font-size: 0.84rem; }
.pg-grid th, .pg-grid td { padding: 0.38rem 0.6rem; border-bottom: 1px solid #ECF0F2; border-right: 1px solid #F1F4F5;
  text-align: left; vertical-align: middle; white-space: nowrap; background: #FFFFFF; }
.pg-grid thead th { position: sticky; top: 0; z-index: 3; background: #F6F8F9; color: #5F6F69; font-size: 0.74rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #DDE3E6; user-select: none; }
.pg-grid thead th[data-sort] { cursor: pointer; }
.pg-grid thead th[data-sort]:hover { color: #0C1A2E; }
.pg-grid thead th[aria-sort="ascending"]::after { content: " \2191"; }
.pg-grid thead th[aria-sort="descending"]::after { content: " \2193"; }
.pg-grid .pg-sticky { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 #DDE3E6; }
.pg-grid thead .pg-sticky { z-index: 4; }
.pg-grid tbody tr.pg-row:hover td { background: #F3F8FB; }
.pg-num { width: 2.6rem; color: #8A979C; text-align: right !important; font-variant-numeric: tabular-nums; }
.pg-num a { color: inherit; text-decoration: none; }
.pg-title { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pg-title a { color: #0C1A2E; text-decoration: none; }
.pg-title a:hover { text-decoration: underline; }
.pg-company { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.pg-company a { color: #4A5B5B; }
.pg-r { text-align: right !important; font-variant-numeric: tabular-nums; }
.pg-val .badge { margin-left: 0.3rem; }
.pg-sub { color: #8A979C; font-size: 0.76rem; margin-left: 0.15rem; }
.pg-owner { display: table-cell; }
.pg-owner .own-chip { margin-right: 0.35rem; }
.pg-owner select { font-size: 0.78rem; max-width: 10rem; }
.pg-owner-name { color: #2A3B3B; }
.pg-status .badge, .pg-status .kc-lock { margin-right: 0.25rem; }
.pg-grid tr.pg-locked .pg-title a { color: #4A5B5B; }

.pg-lane { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 0.7rem; font-size: 0.74rem; font-weight: 700; }
.pg-lane-sale { background: #E3F0FA; color: #0A406B; }
.pg-lane-aufstellung { background: #FDF0D2; color: #7A5200; }

.pg-pill { display: inline-block; padding: 0.08rem 0.55rem; border-radius: 0.7rem; font-size: 0.76rem; font-weight: 700;
  background: #ECEFF1; color: #3F4D52; border: 1px solid transparent; }
select.pg-pill { font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; padding-right: 0.3rem; }
.pg-pill[data-stage="qualified"], .pg-pill[data-stage="contacted"] { background: #E3F0FA; color: #0A406B; }
.pg-pill[data-stage="offer"], .pg-pill[data-stage="pitch"], .pg-pill[data-stage="site_visit"] { background: #D7EEFB; color: #00639A; }
.pg-pill[data-stage="negotiation"], .pg-pill[data-stage="contract"] { background: #FDF0D2; color: #7A5200; }
.pg-pill[data-stage="won"], .pg-pill[data-stage="installed"], .pg-pill[data-stage="live"] { background: #E6F4EC; color: #1F6B45; }
.pg-pill[data-stage="lost"] { background: #FBE4E2; color: #8E1F18; }
.pg-pill[data-stage="ended"] { background: #ECEFF1; color: #6B7B7B; }

.pg-grid tr.pg-group td { background: #F2F5F7; font-weight: 700; color: #0C1A2E;
  cursor: pointer; border-top: 1px solid #DDE3E6; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.pg-group-inner { position: sticky; left: 0.6rem; display: inline-block; }
.pg-group-caret { display: inline-block; width: 1rem; color: #5F6F69; transition: transform 0.12s; }
.pg-grid tr.pg-group.pg-collapsed .pg-group-caret { transform: rotate(-90deg); }
.pg-group-meta { font-weight: 400; color: #5F6F69; margin-left: 0.6rem; }
.pg-grid tfoot td { position: sticky; bottom: 0; z-index: 2; background: #F6F8F9; color: #3F4D52;
  border-top: 1px solid #DDE3E6; font-size: 0.8rem; }
.pg-empty { padding: 0.8rem 0.2rem; }

:root.dark .pl-views { background: #1A2327; }
:root.dark .pl-view { color: #9FB0B6; }
:root.dark .pl-view.pl-view-active { background: #263136; color: #DFE6E9; }
:root.dark .pg-toolbar, :root.dark .pg-wrap { background: #141C20; border-color: #263136; }
:root.dark .pg-toolbar input[type="search"], :root.dark .pg-toolbar select { background: #0E161A; border-color: #2C393F; color: #DFE6E9; }
:root.dark .pg-grid th, :root.dark .pg-grid td { background: #141C20; border-color: #1F292D; color: #DFE6E9; }
:root.dark .pg-grid thead th, :root.dark .pg-grid tfoot td, :root.dark .pg-grid tr.pg-group td { background: #1A2327; color: #B7C3C8; }
:root.dark .pg-grid tbody tr.pg-row:hover td { background: #18262C; }
:root.dark .pg-title a, :root.dark .pg-owner-name { color: #DFE6E9; }
:root.dark .pg-company a { color: #A9B6BB; }
:root.dark .rev-card { background: #141C20; border-color: #263136; color: #DFE6E9; }
:root.dark .kanban-card.kc-locked { background: #11181B !important; }

@media (max-width: 700px) {
  .pg-toolbar input[type="search"] { max-width: none; flex-basis: 100%; }
  .pg-count { margin-left: 0; flex-basis: 100%; }
  .pg-wrap { max-height: none; }
}
.pl-impact { display: block; margin-top: 0.2rem; color: #8E1F18; font-size: 0.82rem; }
.pl-lock .kc-act { margin-left: 0.5rem; }
:root.dark .warnbox { background: #2A2413 !important; border-color: #6B5A1A !important; color: #F3E3B5 !important; }
:root.dark .warnbox a { color: #F6D77A; }
:root.dark .rev-nums { color: #A9B6BB; }
:root.dark .pl-impact { color: #F2A29B; }
:root.dark .pg-grid tr.pg-locked .pg-title a { color: #A9B6BB; }
:root.dark .pl-view:hover { background: #263136; color: #DFE6E9; }
:root.dark .pg-check, :root.dark .pg-count, :root.dark .pg-group-meta, :root.dark .pg-sub { color: #A9B6BB; }

/* Entscheidungsfeld an ruhenden und Konflikt-Projekten (Justus 12.10.2026) */
.ent-slot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; vertical-align: middle; }
.ent-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; line-height: 1.35;
  padding: 0.05rem 0.45rem; border-radius: 0.6rem; border: 1px solid #C4D9E3; background: #E2EDF2; color: #094A6B;
  max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.ent-chip.ent-offen { border-color: #E5C77A; background: #FBF3DD; color: #6B4E0A; }
.ent-chip.ent-erledigt { border-color: #B7DCC5; background: #E8F4EC; color: #1F5C37; }
.ent-state { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; }
.ent-btn { font: inherit; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 0.6rem;
  border: 1px solid #0096D6; background: #FFFFFF; color: #0A6FA0; cursor: pointer; }
.ent-btn:hover, .ent-btn:focus-visible { background: #E6F4FB; }
.badge.ent-muted { opacity: 0.85; }
.pg-grid tr.pg-ent-row > td { background: #F6F8F9; border-top: 0; padding: 0.6rem 0.8rem 0.8rem; }
.ent-panel { display: flex; flex-direction: column; gap: 0.5rem; max-width: 62rem; }
.ent-panel-head { font-size: 0.85rem; color: #0C1A2E; }
.ent-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; }
.ent-field { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; color: #5F6F69; }
.ent-field[hidden] { display: none; }
.ent-field select, .ent-field input, .ent-field textarea { font: inherit; font-size: 0.85rem; color: #0C1A2E;
  padding: 0.3rem 0.45rem; border: 1px solid #C9D6D6; border-radius: 6px; background: #FFFFFF; min-width: 12rem; max-width: 100%; }
.ent-field-wide textarea { width: 100%; min-height: 3.2rem; resize: vertical; box-sizing: border-box; }
.ent-err { color: #8E1F18; background: #FBEAE8; border: 1px solid #F0C2BD; border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.82rem; }
.ent-err[hidden] { display: none; }
.ent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ent-note { font-size: 0.76rem; color: #5F6F69; }
.ent-panel-host { margin-top: 0.5rem; padding: 0.5rem; border-top: 1px dashed #C9D6D6; cursor: default; }
.ent-panel-host .ent-field select, .ent-panel-host .ent-field input { min-width: 0; width: 100%; }
.ent-panel-host .ent-row { flex-direction: column; align-items: stretch; }
.ent-hint { margin: 0.6rem 0; padding: 0.5rem 0.8rem; border: 1px solid #C4D9E3; border-left: 4px solid #0096D6;
  border-radius: 8px; background: #FFFFFF; font-size: 0.88rem; }
.ent-hint a { margin-left: 0.4rem; font-weight: 600; }
.ent-q-actions { display: inline-flex; gap: 0.3rem; margin-left: 0.3rem; }
@media (max-width: 700px) {
  .ent-field select, .ent-field input { min-width: 0; width: 100%; }
  .ent-row { flex-direction: column; align-items: stretch; }
  .ent-chip { max-width: 100%; }
}
:root.dark .ent-chip { background: #10293A; border-color: #1E4A63; color: #BFE3F5; }
:root.dark .ent-chip.ent-offen { background: #2A2413; border-color: #6B5A1A; color: #F3E3B5; }
:root.dark .ent-chip.ent-erledigt { background: #12291C; border-color: #2B5A3D; color: #B9E2C8; }
:root.dark .ent-btn { background: #141C20; border-color: #2B7FAE; color: #9FD6F2; }
:root.dark .ent-btn:hover { background: #18303D; }
:root.dark .pg-grid tr.pg-ent-row > td { background: #11181B; }
:root.dark .ent-panel-head { color: #DFE6E9; }
:root.dark .ent-field, :root.dark .ent-note { color: #A9B6BB; }
:root.dark .ent-field select, :root.dark .ent-field input, :root.dark .ent-field textarea {
  background: #0E161A; color: #DFE6E9; border-color: #263136; }
:root.dark .ent-err { background: #3A1714; border-color: #6B2A24; color: #F2A29B; }
:root.dark .ent-hint { background: #141C20; border-color: #263136; border-left-color: #0096D6; color: #DFE6E9; }
:root.dark .ent-panel-host { border-top-color: #263136; }

/* Nachbesserung Entscheidungsfeld 12.10.2026: Status-Spalte bricht um,
   damit Chip und "Entscheiden" bei 1440 px ohne seitliches Scrollen
   sichtbar sind; Dark Mode fuer ruht-Zahlen und Nebenknoepfe. */
.pg-grid td.pg-status { white-space: normal; min-width: 10rem; max-width: 19rem; }
.pg-status .ent-chip { max-width: 12rem; }
.pg-status .ent-btn { white-space: nowrap; }
:root.dark .rev-stale { color: #FF8A80; }
:root.dark .kc-act { background: #141C20; color: #7FD4D4; border-color: #3A8F8F; }
:root.dark .kc-act:hover { background: #1A2A2E; }
:root.dark .kc-act.kc-act-primary { background: #006A6A; color: #FFFFFF; border-color: #006A6A; }
:root.dark .kc-act.kc-act-primary:hover { background: #00807F; }

/* Aufklappbare Kurzakte im Cockpit (13.10.2026): Pfeil in der Nummernspalte,
   Akte als Zeile unter dem Projekt, drei Spalten, Dark Mode. */
.pg-grid td.pg-num { white-space: nowrap; }
.pg-exp { font: inherit; line-height: 1; padding: 0 0.25rem 0 0; border: 0; background: transparent; color: #5F6F69; cursor: pointer; vertical-align: middle; }
.pg-exp:hover, .pg-exp:focus-visible { color: #0A6FA0; }
.pg-exp-caret { display: inline-block; transition: transform 0.12s ease; }
.pg-exp[aria-expanded="true"] .pg-exp-caret { transform: rotate(90deg); }
.pg-grid tr.pg-detail-row > td { background: #FBFCFD; border-top: 0; padding: 0.7rem 0.9rem 0.9rem; white-space: normal; }
.pk-wrap { display: flex; flex-direction: column; gap: 0.6rem; max-width: 96rem; font-size: 0.84rem; color: #0C1A2E; }
.pk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.pk-title { font-size: 0.92rem; }
.pk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pk-actions .kc-act { text-decoration: none; }
.pk-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.pk-col { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.pk-block { border: 1px solid #E3E9EC; border-radius: 8px; background: #FFFFFF; padding: 0.5rem 0.7rem; }
.pk-h { margin: 0 0 0.35rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #5F6F69; }
.pk-kv { display: flex; gap: 0.5rem; padding: 0.12rem 0; border-bottom: 1px dotted #ECF0F2; }
.pk-kv:last-child { border-bottom: 0; }
.pk-k { flex: 0 0 9rem; color: #5F6F69; font-size: 0.78rem; }
.pk-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pk-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; max-height: 14rem; overflow: auto; }
.pk-list { margin: 0; padding-left: 1rem; }
.pk-list li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.pk-list .pk-text { max-height: 6rem; color: #3F4D52; }
.pk-note { margin-top: 0.1rem; }
@media (max-width: 1100px) { .pk-cols { grid-template-columns: 1fr; } }
:root.dark .pg-exp { color: #A9B6BB; }
:root.dark .pg-exp:hover { color: #9FD6F2; }
:root.dark .pg-grid tr.pg-detail-row > td { background: #0F1619; }
:root.dark .pk-wrap { color: #DFE6E9; }
:root.dark .pk-block { background: #141C20; border-color: #263136; }
:root.dark .pk-h, :root.dark .pk-k { color: #A9B6BB; }
:root.dark .pk-kv { border-bottom-color: #1F292D; }
:root.dark .pk-list .pk-text { color: #B7C3C8; }
/* Notizformular der Kurzakte: hidden gewinnt gegen display:flex der Panel-Klasse. */
.pk-note[hidden] { display: none; }
/* Support-Owner (13.10.2026): Chip "+XX" und schmale Auswahl neben dem Owner. */
.own-chip.own-support { background: #EEF4F2; color: #2F6B5E; border: 1px dashed #7FB3A4; }
.pg-owner { white-space: nowrap; }
.pg-support { display: inline-block; margin-left: 0.25rem; }
select.own-support { font: inherit; font-size: 0.74rem; color: #2F6B5E; border: 1px dashed #7FB3A4; border-radius: 6px; background: #FFFFFF; padding: 0.1rem 0.2rem; max-width: 9rem; }
.kc-actions select.own-support { margin-top: 0.25rem; }
:root.dark .own-chip.own-support { background: #11261F; color: #9ED8C6; border-color: #2F6B5E; }
:root.dark select.own-support { background: #0E161A; color: #9ED8C6; border-color: #2F6B5E; }
/* Rueckkehr in die Zeile nach dem Neuladen (13.10.2026): kurzes Aufleuchten. */
.pg-grid tbody tr.pg-row.pg-flash td { background: #FFF4D6; transition: background 1.2s ease; }
:root.dark .pg-grid tbody tr.pg-row.pg-flash td { background: #3A2F12; }