/* ═══════════════════════════════════════════════════════════════════════════
   teil-zm — „Nicht versprochen. Gewachsen.": Zeichen und kleine Bewegungen
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 7):

     „Der Abschnitt ‚Nicht versprochen, gewachsen — warum Brillen Voigt' ist
      sehr schön designt, aber die einzelnen Kacheln, 1929 … da müssen noch
      Bilder rein oder kleine Icons, Animationen, das muss noch grafisch ein
      bisschen aufgestaltet werden, und vielleicht auch die Kacheln noch mit
      einer kleinen Animation versehen."

   ── Drei Bewegungen, jede mit einem Grund ─────────────────────────────────
   1. Das Zeichen **zeichnet sich**, wenn die Kachel hereinkommt
      (stroke-dashoffset). Kein Bild wird geladen; der Theme-Vertrag verbietet
      fremde Icon-Schriften und CDN-Einbindungen, und vier gemalte Fotos an
      dieser Stelle wären Behauptungen statt Zeichen.
   2. Die **Zahl zählt hoch** — aber nur die echten Zahlen (1929 und die Zahl
      der Filialen, die aus bv_anzahl_filialen() kommt). „Meister" und
      „Wir bilden aus" sind Wörter und stehen einfach da.
   3. Der **Hub beim Überfahren** ist schon da (teil-bewegung.css gibt .kachel
      translate 0 -6px und scale 1.008). Hier kommt nur dazu, dass der
      Goldring hinter dem Zeichen dabei aufgeht — und zwar über opacity und
      scale des Rings, NICHT über ein zweites translate auf der Kachel. Die
      Falle ist bekannt: zwei Regeln auf derselben Eigenschaft schlagen sich
      gegenseitig tot, und translate gehört hier dem Überfahren.

   Gezeichnet wird mit stroke-dasharray:300 — großzügig über jeder
   Pfadlänge der vier Zeichen, damit kein Strichmuster entsteht, sondern eine
   durchgehende Linie, die aus dem Nichts wächst.
   ═══════════════════════════════════════════════════════════════════════════ */

#vertrauen .vt-kachel{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.1rem;
}

/* ── Der Ring mit dem Zeichen ───────────────────────────────────────────── */
.vt-rund{
  position:relative; display:grid; place-items:center;
  width:clamp(46px, 4.4vw, 58px); aspect-ratio:1;
  margin-bottom:clamp(.7rem, 1.1vw, 1rem);
  border-radius:50%;
  background:var(--gold-zart);
  color:var(--blau);
}
.vt-rund::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--gold);
  opacity:.35; scale:.92;
  transition:opacity .45s var(--weich), scale .45s var(--weich);
}
.vt-kachel:hover .vt-rund::before{ opacity:1; scale:1 }

.vt-zeichen{
  width:58%; height:58%; display:block;
  overflow:visible;                      /* der Strich darf am Rand nicht kappen */
}
/* Die Strichlänge kommt aus dem Skript (--l je Pfad, getTotalLength). Mit
   einem festen Wert wie 300 bei einer Pfadlänge von 66 passiert 78 % der Zeit
   gar nichts und der Strich springt am Ende hin — gemessen, sah nach Fehler
   aus. Erst die Klasse .vt-bereit schaltet das Verstecken ein; **ohne
   JavaScript steht das Zeichen also einfach vollständig da**, statt für immer
   unsichtbar zu bleiben. Das ist die Richtung, in der ein fehlendes Skript
   nichts kaputt machen kann. */
.vt-zeichen.vt-bereit *{
  stroke-dasharray:var(--l, 300); stroke-dashoffset:var(--l, 300);
  transition:stroke-dashoffset 1.15s var(--weich) .12s;
}
/* wirkung.js setzt .auf, sobald die Kachel hereinscrollt. */
.vt-kachel.auf .vt-zeichen.vt-bereit *{ stroke-dashoffset:0 }
/* Zweiter und dritter Strich leicht versetzt — das wirkt wie eine Hand,
   nicht wie ein Schalter. */
.vt-kachel.auf .vt-zeichen.vt-bereit > *:nth-child(2){ transition-delay:.28s }
.vt-kachel.auf .vt-zeichen.vt-bereit > *:nth-child(3){ transition-delay:.44s }
.vt-kachel.auf .vt-zeichen.vt-bereit > *:nth-child(4){ transition-delay:.58s }
.vt-kachel.auf .vt-zeichen.vt-bereit > *:nth-child(5){ transition-delay:.70s }

/* ── Zahl und Text ───────────────────────────────────────────────────────
   Gemessen am 04.10.2026: `.zahl` war hier **17 px** — genau so groß wie der
   Fließtext daneben. Eine Kennzahl, die aussieht wie ein Satzanfang, ist keine.
   (Das war schon vor diesem Auftrag so; in der Bühne oben trägt dieselbe Klasse
   1,55 rem.) Jetzt eine echte Ziffernzeile — und die beiden Wortkacheln
   bewusst kleiner: „Wir bilden aus" in 2 rem wäre eine Überschrift. */
#vertrauen .vt-kachel .zahl{
  font-size:clamp(1.55rem, 2.1vw, 2.05rem);
  line-height:1.04; letter-spacing:-.025em; font-weight:850;
  color:var(--blau);
  font-variant-numeric:tabular-nums;     /* beim Hochzählen springt sonst die Breite */
}
#vertrauen .vt-kachel .zahl.vt-wort{
  font-size:clamp(1.12rem, 1.35vw, 1.3rem);
  letter-spacing:-.01em;
}
#vertrauen .vt-kachel p{ margin-top:.45rem }

/* ── Netze ──────────────────────────────────────────────────────────────────
   Ohne JavaScript bekommt die Kachel nie .auf — dann stünde das Zeichen für
   immer auf stroke-dashoffset:300, also unsichtbar. Das ist genau der Fehler,
   der in diesem Theme schon einmal eine ganze Fläche verschluckt hat. Darum
   dieses dritte Netz, zusätzlich zu reduced-motion. */
@media (scripting: none){
  .vt-zeichen.vt-bereit *{ stroke-dashoffset:0; transition:none }
}
@media (prefers-reduced-motion: reduce){
  .vt-zeichen.vt-bereit *{ stroke-dashoffset:0; transition:none }
  .vt-rund::before{ opacity:.6; scale:1; transition:none }
}

/* ── Schmale Fenster ────────────────────────────────────────────────────── */
@media (max-width:620px){
  .vt-rund{ width:44px; margin-bottom:.6rem }
}