/* ================================================================
   tqz-animation.css — Bewegung für die drei Startseiten-Vorschläge
   ================================================================

   Erzeugt am 2026-08-18 (PCF01/Fabio). Diese Datei ergänzt die HEUTIGE
   Startseite von techq.ch — sie ersetzt nichts. Kein Abstand, keine
   Schriftgrösse, keine Farbe der bestehenden Seite wird angefasst; hier
   steht ausschliesslich, was sich bewegt.

   WOHER DIE BEWEGUNG STAMMT
     Aus `/ueberuns/infrastruktur` und `/ueberuns/werte` (14.08.):
     Strichzeichnungen, die sich zeichnen, Bilder, die aufklaren statt
     aufzublitzen, Zahlen, die einmal hochzählen, Punkte, die im
     Augenwinkel pulsen. Dieselben Kurven, dieselben Dauern.

   WOHER DIE FARBEN KOMMEN
     Ausschliesslich aus den Tokens, die die Startseite selbst im Kopf
     definiert (`--accent`, `--text-muted`, …). Kein einziger Hexwert —
     sonst trüge ausgerechnet der Vorschlag eine zweite Farbtabelle.

     Die Startseite setzt `--accent` auf #1E5FBF (Logo-Blau hell) und
     nutzt es auch für Text. Für Strichzeichnungen ist das richtig:
     Grafik braucht 3.0:1. Deshalb steht hier nirgends eine eigene
     Textfarbe — blauer Text bleibt, wie die Seite ihn schon hat.

   BEWEGUNG IST ZUGABE, NIE VORAUSSETZUNG
     Jeder blasse oder verschobene Anfangszustand hängt an einer Klasse,
     die `tqz-animation.js` setzt (`.tqz-an`, `.zeichnet`, `.tqz-klart`).
     Stünde er im Grundzustand, bräuchte das Element JavaScript, um
     überhaupt zu erscheinen — und bei abgeschalteter Bewegung oder
     blockiertem Skript bliebe es für immer weg.
   ================================================================ */

/* ================================================================
   1) Aufmacher — der Text staffelt statt zu springen
   ================================================================

   Heute fährt die ganze Folie als ein Block ein (`techq-slidein` auf
   `.hero-slide.is-active`). Das liest sich wie ein Bildwechsel. Läuft
   stattdessen zuerst die Überschrift ein, dann der Satz, dann die
   Knöpfe, liest es sich wie ein Satz, der gesprochen wird.

   Die Staffelung ersetzt die Bewegung der Folie, sie kommt nicht
   obendrauf: sonst führe erst der Block und dann noch einmal jedes
   Kind — eine Bewegung, die zweimal dasselbe sagt. */

.tqz-an .hero-slide.is-active { animation: none; }

.tqz-an .hero-slide.is-active .hero-solo > div > *,
.tqz-an .hero-slide.is-active .hero-cols > div:first-child > * {
  animation: tqz-auf .52s cubic-bezier(0.23, 1, 0.32, 1) both;
}
/* 55 ms Versatz: gross genug, dass man die Reihenfolge sieht, klein
   genug, dass die Folie nicht wartet. Vier Kinder sind das Maximum
   dieser Folien — ein fünfter Schritt käme nach dem Blick. */
.tqz-an .hero-slide.is-active .hero-solo > div > *:nth-child(1),
.tqz-an .hero-slide.is-active .hero-cols > div:first-child > *:nth-child(1) { animation-delay: 0s; }
.tqz-an .hero-slide.is-active .hero-solo > div > *:nth-child(2),
.tqz-an .hero-slide.is-active .hero-cols > div:first-child > *:nth-child(2) { animation-delay: .055s; }
.tqz-an .hero-slide.is-active .hero-solo > div > *:nth-child(3),
.tqz-an .hero-slide.is-active .hero-cols > div:first-child > *:nth-child(3) { animation-delay: .11s; }
.tqz-an .hero-slide.is-active .hero-solo > div > *:nth-child(4),
.tqz-an .hero-slide.is-active .hero-cols > div:first-child > *:nth-child(4) { animation-delay: .165s; }

/* Die Bildspalte kommt zuletzt und ohne Versatz nach oben: sie ist
   gross, und eine grosse Fläche, die von unten einfährt, schiebt die
   ganze Folie optisch mit. Sie klart nur auf. */
.tqz-an .hero-slide.is-active .hero-visual {
  animation: tqz-klar .6s ease-out .16s both;
}

@keyframes tqz-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tqz-klar { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   2) Bilder klaren auf, statt aufzublitzen
   ================================================================

   Das Kundencenter-Bild sitzt eine Spur zu gross und fährt auf seine
   Grösse zurück, während es aufklart. Kein Federn — ein Bildschirmfoto
   hat keinen Schwung, den es ausleben könnte.

   Zwei Bedingungen müssen zusammenkommen, sonst fährt das Bild auf
   einem leeren Rahmen auf: im Blickfeld UND geladen. `tqz-animation.js`
   wartet auf beides. */

.tqz-klart {
  opacity: 0;
  transform: scale(1.035);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity .7s ease-out;
}
.tqz-klart.ist-da { opacity: 1; transform: none; }

/* ================================================================
   3) Strichzeichnungen in den Leistungskarten (Vorschlag 2 und 3)
   ================================================================

   `pathLength="1"` normiert jede Linie auf die Länge 1 — sonst bräuchte
   jede Form ihren eigenen Strichmuster-Wert, und die kurze Linie wäre
   fertig, bevor die lange begonnen hat.

   Gezeichnet wird EINMAL. Eine Zeichnung, die sich beim Zurückscrollen
   auflöst und neu entsteht, ist beim zweiten Mal kein Auftritt mehr,
   sondern ein Zucken. */

.tqz-bild { width: 44px; height: 44px; display: block; overflow: visible; color: var(--accent); margin-bottom: 2px; }
.tqz-bild .li { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tqz-bild .li--zart { stroke: var(--dot-idle); }
.tqz-bild .fl { fill: var(--bg-alt); }
.tqz-bild .pu { fill: currentColor; }

.tqz-bild.zeichnet .li { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(0.33, 1, 0.68, 1); }
.tqz-bild.zeichnet .fl,
.tqz-bild.zeichnet .pu { opacity: 0; transition: opacity .45s ease-out .4s; }
.tqz-bild.zeichnet.ist-da .li { stroke-dashoffset: 0; }
.tqz-bild.zeichnet.ist-da .fl,
.tqz-bild.zeichnet.ist-da .pu { opacity: 1; }

/* Gestaffelt, damit die Zeichnung entsteht statt auf einen Schlag da zu
   sein — die Reihenfolge erzählt, was zuerst kommt: erst der Kasten,
   dann sein Inhalt. */
.tqz-bild.zeichnet .li[data-nach="1"] { transition-delay: .06s; }
.tqz-bild.zeichnet .li[data-nach="2"] { transition-delay: .14s; }
.tqz-bild.zeichnet .li[data-nach="3"] { transition-delay: .22s; }
.tqz-bild.zeichnet .li[data-nach="4"] { transition-delay: .30s; }
.tqz-bild.zeichnet .li[data-nach="5"] { transition-delay: .38s; }

/* Der Punkt, der lebt: bewusst langsam und klein. Er soll im Augenwinkel
   sagen «das läuft gerade», nicht die Aufmerksamkeit halten. */
@keyframes tqz-puls { 0%, 100% { opacity: .32; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.tqz-bild .pulst { transform-box: fill-box; transform-origin: center; animation: tqz-puls 2.6s ease-in-out infinite; }
.tqz-bild .pulst--2 { animation-delay: .55s; }

/* ================================================================
   4) Häkchen, die sich zeichnen
   ================================================================

   Die drei Häkchen im Aufmacher und die vier in der Kundencenter-Liste
   stehen heute einfach da. Ein Haken, der gezogen wird, ist die
   kleinste mögliche Fassung derselben Idee wie die Strichzeichnungen —
   und sie kostet kein einziges neues Element. */

.tqz-haken { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(0.33, 1, 0.68, 1); }
.tqz-haken.ist-da { stroke-dashoffset: 0; }
.tqz-haken[data-nach="1"] { transition-delay: .06s; }
.tqz-haken[data-nach="2"] { transition-delay: .14s; }
.tqz-haken[data-nach="3"] { transition-delay: .22s; }
.tqz-haken[data-nach="4"] { transition-delay: .30s; }

/* ================================================================
   5) Listenzeilen laufen gestaffelt ein
   ================================================================

   Die Leistungsliste hat sechs gleich gebaute Zeilen. Als Block
   eingeblendet wirken sie wie eine Fläche; nacheinander wirken sie wie
   eine Aufzählung. 45 ms ist knapp genug, dass die sechste nicht auf
   sich warten lässt. */

.tqz-an .tqz-zeile { opacity: 0; transform: translateY(10px); transition: opacity .5s cubic-bezier(0.23,1,0.32,1), transform .5s cubic-bezier(0.23,1,0.32,1); }
.tqz-an .tqz-zeile.ist-da { opacity: 1; transform: none; }
.tqz-zeile[data-nach="1"] { transition-delay: .045s; }
.tqz-zeile[data-nach="2"] { transition-delay: .09s; }
.tqz-zeile[data-nach="3"] { transition-delay: .135s; }
.tqz-zeile[data-nach="4"] { transition-delay: .18s; }
.tqz-zeile[data-nach="5"] { transition-delay: .225s; }
.tqz-zeile[data-nach="6"] { transition-delay: .27s; }

/* ================================================================
   6) Karten und Pfeile
   ================================================================

   Die Karten heben sich heute schon beim Zeigen. Neu ist nur die Kurve
   — `ease` beschleunigt am Anfang zu träge — und der Pfeil, der
   mitgeht: er sagt, wohin der Klick führt, und das ist genau die
   Auskunft, die eine Hebung allein nicht gibt. */

.svc-card { transition: transform .22s cubic-bezier(0.23,1,0.32,1), box-shadow .22s cubic-bezier(0.23,1,0.32,1), border-color .22s ease; }
.svc-arrow { display: inline-block; transition: transform .22s cubic-bezier(0.23,1,0.32,1); }
.svc-card:hover .svc-arrow,
.svc-card:focus-visible .svc-arrow { transform: translateX(5px); }

/* Der Name in der Leistungsliste zeigt beim Zeigen, dass er ein Link
   ist — die Unterstreichung wächst aus der linken Kante, statt zu
   erscheinen. Erscheinen wäre ein Zustandswechsel, Wachsen ist eine
   Antwort auf den Zeiger. */
.svc-spec-name { position: relative; }
.svc-spec-name::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--accent); border-radius: 1px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(0.23,1,0.32,1);
}
.svc-spec-name:hover::after,
.svc-spec-name:focus-visible::after { transform: scaleX(1); }

/* ================================================================
   7) Kennzahlenband (nur Vorschlag 3)
   ================================================================

   Bauform 1:1 von `/ueberuns/infrastruktur`: ein Raster mit 1px Abstand
   auf farbigem Grund — so entstehen die Trennlinien aus dem Grund
   selbst, ohne dass jede Zelle einen eigenen Rahmen braucht, der sich
   an den Ecken verdoppelt. */

.tqz-zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.tqz-zahl { background: var(--bg); padding: clamp(18px, 2.2vw, 26px); }
.tqz-zahl__wert {
  display: block; font-size: clamp(22px, 2.7vw, 32px); line-height: 1.05; font-weight: 500;
  /* Grosse Schrift will engeren Satz — bei gleichbleibendem Wert sehen
     grosse Buchstaben zu weit auseinander aus. */
  letter-spacing: -0.03em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tqz-einheit { font-size: 0.55em; font-weight: 400; letter-spacing: 0; margin-left: 4px; color: var(--text-muted); }
.tqz-zahl__text { margin: 9px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* ================================================================
   8) Beleg-Karte (nur Vorschlag 3)
   ================================================================

   Balken links statt Rahmen rundum: ein Rahmen machte daraus einen
   zweiten Kasten neben dem Knopf; der Balken hängt sie an den Text an,
   zu dem sie gehört. */

.tqz-beleg {
  margin: 18px 0 0; padding: 15px 19px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--bg-alt);
  max-width: 56ch;
}
.tqz-beleg__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: var(--tq-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
}
.tqz-beleg__datum { color: var(--accent); }
.tqz-beleg p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }

/* ================================================================
   schmale Fenster
   ================================================================ */

@media (max-width: 900px) { .tqz-zahlen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tqz-zahlen { grid-template-columns: 1fr; } }

/* ================================================================
   weniger Bewegung
   ================================================================

   Wer `prefers-reduced-motion` gesetzt hat, bekommt den ENDZUSTAND —
   nicht den Anfangszustand ohne Animation. Das ist der Unterschied
   zwischen «ruhig» und «kaputt». `tqz-animation.js` setzt die Klasse
   `.tqz-an` dann gar nicht erst; die Regeln hier sind das zweite Netz
   für alles, was ohne diese Klasse auskommt. */

@media (prefers-reduced-motion: reduce) {
  .tqz-klart { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tqz-haken { stroke-dashoffset: 0 !important; transition: none !important; }
  .tqz-bild .pulst { animation: none !important; }
  .svc-arrow, .svc-spec-name::after { transition: none !important; }
}