/* ═══════════════════════════════════════════════════════════════════════════
   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;
}

/* ── Die Kachel wächst mit ihrem Inhalt ─────────────────────────────────────
   Christopher, 22.10.2026: „hier sind bildfehler die icon kreise ragen aus der
   kachel raus . das ist nicht schlüssig programmiert"

   Ursache, gemessen: .kachel (grund.css) hat aspect-ratio:4/3.5, schiebt den
   Inhalt nach unten (justify-content:flex-end) und hat overflow:hidden. Mit
   overflow:hidden darf eine Box mit Seitenverhältnis nicht über ihre Höhe
   hinaus wachsen — der überzählige Inhalt ging also OBEN verloren, und oben
   steht der Kreis. Gemessen in der Viererreihe: 1200 px bis 69 px abgeschnitten,
   1366 px 37 px, ab 1440 px noch 10 px; Zweierreihe 640 px 30 px.

   Darum für diese vier Kacheln:
   · overflow sichtbar — sie tragen kein Foto, das beschnitten werden müsste;
     die Lichtebene ::before bekommt die Rundung selbst (sonst eckig).
   · in den Mehrspaltern kein festes Seitenverhältnis mehr: die Reihe gleicht
     auf die höchste Kachel aus (grid-auto-rows:1fr, alle Reihen gleich hoch).
   · die alte Höhe bleibt als MINDESThöhe, gerechnet aus der Rasterbreite
     (cqw des Rasters) — wo der Inhalt passte (700–1179 px), ändert sich
     gemessen kein Pixel: 269 / 428 / 460 px wie vorher.
   Gemessen nachher bei 390–1920 px: Kreis überall innerhalb (≥ 1 px unter dem
   Innenrand), jede Reihe gleich hoch. */
#vertrauen .kacheln.vier{
  container-type:inline-size;
  --vt-luecke:clamp(.9rem,1.6vw,1.3rem);   /* = gap von .kacheln (grund.css) */
  gap:var(--vt-luecke);
  grid-auto-rows:1fr;
}
#vertrauen .vt-kachel{ overflow:visible }
#vertrauen .vt-kachel::before{ border-radius:inherit }
@media (min-width:640px){
  #vertrauen .vt-kachel{ aspect-ratio:auto }
}
@media (min-width:640px) and (max-width:1179px){
  #vertrauen .vt-kachel{ min-height:calc((100cqw - var(--vt-luecke)) / 2 * .875) }
}
@media (min-width:1180px){
  #vertrauen .vt-kachel{ min-height:calc((100cqw - 3 * var(--vt-luecke)) / 4 * .875) }
}

/* ── 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 }
}