/* =========================================================================
   DAS BLATT ZU DEN LANDING-BAUSTEINEN
   (Vertrauens-Sektion `.vt-*` und Bezugswege `.hol-*`)
   =========================================================================

   Gehoert zu `vertrauen.js`. Steht als eigenes Blatt da, weil die Sektion
   auf zwei Seiten mit verschiedenen Grundblaettern erscheint: die
   Marketing-Landing laedt `bp2.css`, das Portal `app-neu.css`, und die
   Namen darin decken sich nicht. Dieselbe Lage wie beim Grafikblatt
   heute Nachmittag - und dieselbe Loesung:

     var(--linie, oklch(93.5% 0 155))

   ZWEI FEHLER, DIE HIER ZUERST DRINSTANDEN - beide gemessen gefunden,
   nicht gelesen:

   1. Der Rueckfall zeigte auf den Namen der ANDEREN Seite:
      `var(--linie, var(--line, ...))`. Das holt genau, was vermieden
      werden soll - jede Seite malt in ihrem eigenen Ton. Gemessen kam
      auf BEIDEN Seiten `oklch(0.9 0.01 150)` heraus, die Fremdfarbe aus
      bp2.css, nicht der Hauston. Der Rueckfall gehoert auf den HAUSWERT.

   2. Die Kette stand in `:root`. `--linie` ist aber an `body.bp-app`
      definiert (app-neu.css:98), auf `:root` also undefiniert - deshalb
      griff der Rueckfall auch im Portal. Eine Kette loest dort auf, wo
      sie STEHT, nicht dort, wo ihr Ergebnis benutzt wird. `body` ist die
      Ebene, auf der die Hausvariablen gelten.

   Die zwei Fehler haben sich gegenseitig getarnt: der Vergleich meldete
   "0 verschieden", weil beide Seiten denselben falschen Ton trugen.
   Gleichheit ist eben nicht Richtigkeit.
   ========================================================================= */

body {
  --vt-linie:   var(--linie, oklch(93.5% 0 155));
  --vt-tinte:   var(--tinte, oklch(28% 0.012 155));
  --vt-neben:   var(--tinte-2, oklch(42% 0.008 155));
  --vt-gruen:   var(--gruen, #2e4f35);
  --vt-flaeche: var(--karte, oklch(99.4% 0.003 150));
}

.vt-titel {
  font-size: 20px;
  font-weight: 650;
  color: var(--vt-tinte);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.vt-beischrift {
  font-size: 14.5px;
  color: var(--vt-neben);
  margin: 0 0 20px;
  max-width: 46em;
}

/* Vier Punkte, die sich auf schmalen Fenstern auf eine Spalte legen.
   `auto-fit` statt fester Spaltenzahl: bei 390px passt genau eine, und
   eine halbe Zusicherung neben einer halben liest niemand. */
.vt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-punkt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--vt-linie);
  border-radius: 12px;
  background: var(--vt-flaeche);
}

/* Das Symbol traegt das Gruen, nicht die Flaeche. Vier gefuellte gruene
   Kaesten neben der einen gefuellten Handlung der Seite wuerden das
   Verhaeltnis kippen - dieselbe Ueberlegung wie bei den Leistensymbolen. */
.vt-symbol {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  color: var(--vt-gruen);
}

.vt-punkt-titel {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--vt-tinte);
  margin-bottom: 3px;
}
.vt-punkt-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vt-neben);
}


/* =========================================================================
   ZWEI WEGE IN DIE SOFTWARE - `.hol-*`
   =========================================================================
   Emil: "man kann die App direkt auf der Marketing-Seite herunterladen,
   oder wird beim Klick auf 'Anmelden' auf die Web-Version weitergeleitet."

   Die Mac-App ist fertig verteiltbar; Windows wartet noch auf die
   Authenticode-Signatur. Jeder Weg zeigt deshalb seinen echten Zustand.
   KEIN Knopf, der ins Leere fuehrt.

   Und keine zweite gefuellte gruene Handlung: der Hero traegt schon
   "Kostenlos starten". Zwei gefuellte Knoepfe auf einem Bildschirm heben
   sich gegenseitig auf - dieselbe Regel, die `gruen.py` ueber acht Seiten
   bewacht. Der Weg, der funktioniert, ist deshalb ruhig ausgezeichnet,
   nicht gefuellt. */
.hol-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hol-weg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--vt-linie);
  border-radius: 12px;
  background: var(--vt-flaeche);
}
.hol-weg-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 650;
  color: var(--vt-tinte);
}
.hol-weg-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vt-neben);
  margin: 0;
  flex: 1;
}
/* Die Marke sagt den Zustand, nicht der Knopf. Ein Knopf mit "(bald)"
   im Text laedt trotzdem zum Klicken ein; eine Marke daneben nicht. */
.hol-marke {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--still, oklch(97.5% 0.002 155));
  color: var(--vt-neben);
}
.hol-marke-bereit {
  background: oklch(94% 0.045 150);
  color: var(--vt-gruen);
}
.hol-deaktiviert {
  cursor: not-allowed;
  opacity: 0.58;
  user-select: none;
}
.hol-weg .btn { align-self: flex-start; }