/* vorhaben.css — der Vorhabenbestand.
 *
 * WARUM DIESE SEITE ANDERS AUSSIEHT ALS DAS KONKURRENTEN-RADAR
 *
 * Das Radar hat Kacheln, weil dort achtzehn Unternehmen nebeneinander
 * stehen und man eines davon SUCHT. Hier stehen sechsundvierzig
 * Vorhaben, und man will sie VERGLEICHEN: welcher Status, wie viele
 * bestellt, was gekostet. Ein Kachelfeld beantwortet keine dieser
 * Fragen -- eine Liste mit gleichen Spalten schon.
 *
 * Deshalb: links die Liste, rechts der Steckbrief. Kein Sprung, kein
 * Scrollen -- man geht die Liste durch und liest rechts mit.
 *
 * DER STECKBRIEF HAT EINEN FESTEN RAHMEN
 *
 * Elf Felder, immer dieselben, immer in derselben Reihenfolge,
 * gebuendelt nach dem, was sie beantworten:
 *
 *   Vertrag       Typ, Status, Auftragnehmer
 *   Stueckzahlen  Bestand, Bestellt, Bedarf
 *   Geld          Kosten, Finanzierung
 *   Zeit          Auslieferung, Verzoegerung
 *
 * Ein leeres Feld wird ANGEZEIGT und bleibt leer. Es wegzulassen
 * waere bequemer und falsch: der Leser saehe dann nicht, dass die
 * Angabe fehlt, sondern gar nichts -- und haette keinen Anlass, danach
 * zu fragen.
 *
 * FARBEN sind die des Hauses, ohne eigene Tokens. Was hier steht, ist
 * Mass und Anordnung.
 */

.vh-body {
  /* Creme, nicht Weiss (17.09.2026): der Grund der Seite liegt unter
     dem gruenen Kopf und soll dort creme sein. Die Abschnitte malen
     sich weiterhin selbst -- geaendert hat sich nur, was in den
     Luecken und unter dem letzten Abschnitt zu sehen ist. */
  background: var(--boden, #F9F2E4);
}

/* ── Kopfband ────────────────────────────────────────────────────────
   Flacher als das Hero des Radars. Das dort ist eine Startseite mit
   einem Versprechen; das hier ist ein Arbeitsmittel, ueber dem nicht
   mehr stehen muss als sein Name. */
.vh-band {
  background: linear-gradient(135deg, #003300 0%, #0D4A38 100%);
  color: #fff;
  padding: 34px 0 30px;
}
.vh-breit { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.vh-band__titel {
  font-family: var(--serif, Merriweather, Georgia, serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15; margin: 0 0 8px; color: #fff;
  text-wrap: balance;
}
.vh-band__dek {
  margin: 0; max-width: 62ch;
  font-size: 0.9375rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Filterzeile ─────────────────────────────────────────────────── */
.vh-filter {
  border-bottom: 1px solid var(--line, #E4E1D8);
  background: var(--hover, #F5F3EC);
  padding: 14px 0;
}
.vh-filter__in { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vh-filter .input { flex: 1 1 260px; min-width: 0; }
.vh-filter select.input { flex: 0 1 200px; cursor: pointer; }
.vh-zaehler {
  margin-left: auto; flex: none;
  font-size: 0.8125rem; color: var(--muted, #626A5C);
  font-variant-numeric: tabular-nums;
}

/* ── Die zwei Spalten ────────────────────────────────────────────── */
.vh-werk {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 0;
  align-items: start;
}

/* Liste links. Eigener Scroll, damit der Steckbrief stehen bleibt,
   waehrend man die Liste durchgeht. */
.vh-liste {
  border-right: 1px solid var(--line, #E4E1D8);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vh-zeile {
  display: block; width: 100%; text-align: left;
  background: none; border: 0;
  border-bottom: 1px solid var(--line, #E4E1D8);
  padding: 11px 20px; cursor: pointer;
  font-family: inherit; color: inherit;
}
.vh-zeile:hover { background: var(--hover, #F5F3EC); }
.vh-zeile:focus-visible { outline: 2px solid #003300; outline-offset: -2px; }
.vh-zeile--an { background: var(--hover, #F5F3EC); box-shadow: inset 3px 0 0 #003300; }
.vh-zeile__name {
  display: block; font-weight: 600; font-size: 0.875rem;
  line-height: 1.3; color: var(--ink, #191C15);
}
.vh-zeile__unter {
  display: flex; gap: 8px; align-items: center;
  margin-top: 3px; font-size: 0.75rem; color: var(--muted, #626A5C);
}
.vh-zeile__typ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Der Statuspunkt. Vier Zustaende, weil das Buchraster vier kennt --
   mehr Abstufung waere erfunden. */
.vh-punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.vh-punkt--bestellt   { background: #003300; }
.vh-punkt--beauftragt { background: #0D4A38; }
.vh-punkt--geplant    { background: #A04E27; }
.vh-punkt--offen      { background: #8A9182; }

/* ── Steckbrief rechts ───────────────────────────────────────────── */
.vh-brief { padding: 26px 30px 60px; min-width: 0; }
.vh-brief__kopf {
  border-bottom: 2px solid #003300;
  padding-bottom: 12px; margin-bottom: 4px;
}
.vh-brief__name {
  font-family: var(--serif, Merriweather, Georgia, serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.2; margin: 0; color: var(--ink, #191C15);
  text-wrap: balance;
}
.vh-brief__marke {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 2px 9px;
  border: 1px solid var(--line, #E4E1D8); border-radius: 999px;
  font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted, #626A5C); background: var(--surface, #fff);
}

/* Die vier Buendel. */
.vh-gruppe { border-bottom: 1px solid var(--line, #E4E1D8); padding: 16px 0; }
.vh-gruppe:last-of-type { border-bottom: 0; }
.vh-gruppe__titel {
  margin: 0 0 10px;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted, #626A5C);
}
.vh-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 26px; margin: 0;
}
.vh-feld { min-width: 0; }
.vh-feld__kopf {
  font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted, #626A5C); margin-bottom: 2px;
}
.vh-feld__wert {
  margin: 0; font-size: 0.9375rem; line-height: 1.45;
  color: var(--ink, #191C15);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Leer heisst leer und sieht auch so aus. */
.vh-feld__wert--leer { color: #B3B8AC; font-variant-numeric: normal; }

.vh-leer {
  padding: 60px 30px; color: var(--muted, #626A5C);
  font-size: 0.9375rem; max-width: 46ch;
}

@media (max-width: 860px) {
  .vh-werk { grid-template-columns: 1fr; }
  .vh-liste {
    border-right: 0; border-bottom: 1px solid var(--line, #E4E1D8);
    max-height: 42vh;
  }
  .vh-brief { padding: 22px 24px 48px; }
  .vh-zaehler { margin-left: 0; width: 100%; }
}