/* Vorspann — der Q-Aufbau beim ersten Aufruf einer Sitzung. Gehoert zu assets/vorspann.js; im HTML steht kein Markup, das Skript erzeugt es. Geprueft von tools/vorspann_pruefstand.cjs. RUHIG UND SCHARF — die drei Regeln, an denen es haengt: 1. Animiert werden NUR opacity, transform und stroke-dashoffset. Alles andere (letter-spacing, width, top …) loest Layout aus: der Text wird bei jedem Bild neu umbrochen und die Buchstaben rasten auf ganze Pixel — das sieht man als Zittern. 2. Nichts wird vergroessert. Wortmarke und Label stehen in Endgroesse, der Flug verkleinert nur. Bei laufender Transform-Animation rastert der Browser eine Textur EINMAL und streckt sie danach — hochskaliert wird Text dadurch weich. Herunterrechnen bleibt scharf, auch auf Retina. 3. `will-change` sitzt nur auf dem fliegenden Schild, nicht zusaetzlich auf einem Kind: zwei geschachtelte Ebenen strecken die innere Textur. Die Datei ist absichtlich autark — sie erbt nur `--bg`. techq.ch/index.html und pakete.html laden site.css NICHT; eine Abhaengigkeit dorthin waere auf genau diesen beiden Seiten still wirkungslos. Nichts laeuft, solange `.tqv-los` fehlt. Die Klasse setzt das Skript erst, wenn das Flugziel ausgemessen ist — sonst fliegt die Marke ins Leere. */ :root{ --tqv-grund: var(--bg, #FFFFFF); --tqv-ink: #1c2024; --tqv-ring: #1e5fbf; --tqv-tail: #6a97dc; --tqv-sub: #656C76; --tqv-k: 1.25; /* Tempo 0,8x */ --tqv-anteil: .24; /* Wortmarkenbreite als Anteil der Bildbreite */ --tqv-h: clamp(26px, calc(100vw * var(--tqv-anteil) / 3.413), 260px); } [data-theme="dark"]{ --tqv-ink: #f4f5f6; --tqv-ring: #3f7fdf; --tqv-tail: #8bb2ea; --tqv-sub: #8A929B; } /* ---------- Telefon: dieselbe Marke, andere Proportion (02.09.2026) -------- `--tqv-anteil: .24` ist am Schreibtisch gerechnet: bei 1440 px ist die Wortmarke 333 px breit und das Kopfzeilenlogo 103 px — der Flug VERKLEINERT auf 0,296, und genau das verlangt Regel 2 oben. Bei 390 px ergibt derselbe Anteil 90 px Marke gegen 103 px Ziel: der Flug muesste auf 1,094 VERGROESSERN (bei 360 px auf 1,154). Damit wird die einmal gerasterte Textur weich — der Fehler, gegen den Regel 2 geschrieben wurde. Zugleich ist eine 90-px-Marke auf einem 390-px-Schirm kaum als Auftritt zu erkennen; genau das meinte die Meldung «man sieht ihn gar nicht». .62 gibt bei 390 px eine 242 px breite Marke (62 % der Bildbreite) und `--tqv-s = 0,42` — wieder verkleinernd, also scharf. Der `clamp`-Boden von 26 px wird dabei nicht mehr gestreift (bei 360 px sind es 65 px). Das Tempo geht auf 1.0: der Vorhang steht am Telefon zusaetzlich zu einer langsameren Ladezeit vor dem Inhalt. 1210 ms statt 1513 ms. `tempo()` in vorspann.js liest denselben Wert, Zeiten in CSS und Skript bleiben synchron. Beides nur unterhalb 700 px — der Desktop bleibt Zeile fuer Zeile, wie er war. */ @media (max-width: 700px){ :root{ --tqv-anteil: .62; --tqv-k: 1; } } /* DER VORHANG IST EIN ::before AM , KEIN ELEMENT. Er muss stehen, bevor das erste Bild gezeichnet wird. Ein Element kann das Skript erst einfuegen, wenn der Koerper da ist — bis dahin blitzt die Seite auf. Eine Klasse dagegen setzt es in seiner ersten Zeile, und das CSS steht blockierend darueber. Genau deshalb steuern Klassen an den ganzen Ablauf und nicht das eingefuegte Schild. */ html.tqv-an::before{ content:""; position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:2147483000; background:var(--tqv-grund); pointer-events:none; will-change:opacity; } /* Durchklicken bleibt moeglich: haengt das Skript, blockiert nichts. */ .tqv{ position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:2147483001; pointer-events:none; } .tqv-schild{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:grid; place-items:center; will-change:transform, opacity; } .tqv-lock{ display:flex; flex-direction:column; align-items:center; } .tqv-lock > svg{ display:block; height:var(--tqv-h); width:auto; } .tqv-sub{ /* Rueckfall IM var(): techq.ch definiert --tq-ui seit der Schriftumstellung vom 30.08.2026 (Systemschrift zuerst), die beiden Portale nicht. So loest dieselbe Datei auf allen drei Auftritten richtig auf und bleibt byte-identisch — was `vorspann_pruefstand` und `kopien_pruefen` verlangen. */ font-family:var(--tq-ui, 'Instrument Sans', system-ui, -apple-system, sans-serif); font-size:calc(var(--tqv-h) * .4545); font-weight:var(--tq-gewicht-kleinlabel, 600); letter-spacing:.10em; text-transform:uppercase; color:var(--tqv-sub); line-height:1; white-space:nowrap; opacity:0; /* Abstand am Label statt `gap` am Behaelter: Flexbox-gap fehlt in Safari unter 14.1, und dort klebte das Kleinlabel an der Wortmarke. */ margin-top:calc(var(--tqv-h) * .2273); } /* Grundstellung — ohne .tqv-los steht hier nur der gedeckte Vorhang. */ .tqv-gl{ fill:var(--tqv-ink); opacity:0; } .tqv-ring{ fill:none; stroke:var(--tqv-ring); stroke-dasharray:211.94; stroke-dashoffset:211.94; } .tqv-tail{ stroke:var(--tqv-tail); stroke-dasharray:46.5; stroke-dashoffset:46.5; } /* 110.95 = Abstand von der Lockup-Mitte zur Ringmitte: so steht das Q allein in der Bildmitte, bevor es nach rechts rueckt und `tech` davor entsteht. */ .tqv-g{ transform:translateX(-110.95px); } /* ---------- Ablauf. Grundtakt in ms, jede Zeit mal --tqv-k ---------- */ html.tqv-los .tqv-ring{ /* Die Drehung auf zwoelf Uhr sitzt als SVG-Attribut am , nicht hier: `transform-box` gibt es in Safari erst ab 16, davor begann der Ring bei drei Uhr. Ein SVG-transform-Attribut versteht dagegen jeder Browser. */ animation:tqv-draw calc(290ms * var(--tqv-k)) cubic-bezier(.32,.86,.3,1) calc(40ms * var(--tqv-k)) both; } html.tqv-los .tqv-tail{ animation:tqv-draw-t calc(150ms * var(--tqv-k)) cubic-bezier(.25,.9,.35,1) calc(280ms * var(--tqv-k)) both; } html.tqv-los .tqv-g{ animation:tqv-shift calc(190ms * var(--tqv-k)) cubic-bezier(.62,0,.2,1) calc(450ms * var(--tqv-k)) both; } html.tqv-los .tqv-gl{ animation:tqv-letter calc(170ms * var(--tqv-k)) cubic-bezier(.2,.8,.25,1) both; } html.tqv-los .tqv-gl-t{ animation-delay:calc(500ms * var(--tqv-k)); } html.tqv-los .tqv-gl-e{ animation-delay:calc(542ms * var(--tqv-k)); } html.tqv-los .tqv-gl-c{ animation-delay:calc(584ms * var(--tqv-k)); } html.tqv-los .tqv-gl-h{ animation-delay:calc(626ms * var(--tqv-k)); } html.tqv-los .tqv-lock{ animation:tqv-auftakt calc(320ms * var(--tqv-k)) cubic-bezier(.2,.8,.25,1) calc(40ms * var(--tqv-k)) both; } /* Shop: Halt 995 -> 1038, Flug, Uebergabe bei 1210. Gesamt 1513 ms bei 0,8x. */ html.tqv-los .tqv-schild{ animation: tqv-flug calc(380ms * var(--tqv-k)) cubic-bezier(.72,0,.16,1) calc(830ms * var(--tqv-k)) both, tqv-weg 1ms linear calc(1210ms * var(--tqv-k)) forwards; } html.tqv-los.tqv-an::before{ animation:tqv-aus calc(310ms * var(--tqv-k)) ease calc(900ms * var(--tqv-k)) both; } /* Kundencenter: ein Takt mehr fuer das Label, alles danach 80 ms spaeter. Gesamt 1613 ms bei 0,8x. Die Kennung sitzt auf , weil sie auch das Ziel in der Seitenleiste betrifft — das liegt nicht im Vorspann-Baum. */ html.tqv-kc.tqv-los .tqv-sub{ animation:tqv-sub-in calc(120ms * var(--tqv-k)) cubic-bezier(.2,.8,.25,1) calc(770ms * var(--tqv-k)) both; } html.tqv-kc.tqv-los .tqv-schild{ animation: tqv-flug calc(380ms * var(--tqv-k)) cubic-bezier(.72,0,.16,1) calc(910ms * var(--tqv-k)) both, tqv-weg 1ms linear calc(1290ms * var(--tqv-k)) forwards; } html.tqv-kc.tqv-los.tqv-an::before{ animation:tqv-aus calc(310ms * var(--tqv-k)) ease calc(980ms * var(--tqv-k)) both; } /* Kein sichtbares Ziel (Anmeldeseite, eingefahrene Schublade, eigene Kopfleiste): kein Flug, aber sehr wohl eine Marke. Bis zum 02.09.2026 setzte das Skript hier `display:none` aufs Schild — sichtbar war ein leerer Vorhang. Der Aufbau laeuft weiter, die fertige Marke haelt und blendet mit dem Vorhang zusammen aus. Die Regel steht NACH den beiden Flug-Regeln und traegt eine Klasse mehr (0,3,1 gegen 0,2,1) — sie gewinnt in beiden Faellen, Shop wie Kundencenter. */ html.tqv-ohneziel.tqv-los .tqv-schild, html.tqv-ohneziel.tqv-kc.tqv-los .tqv-schild{ animation: tqv-aus calc(310ms * var(--tqv-k)) ease calc(900ms * var(--tqv-k)) both; } /* Das echte Ziel bleibt verdeckt, bis das fliegende Schild darauf sitzt, und uebernimmt im GLEICHEN Bild. Versetzt stuenden kurz beide da — deckungs- gleich, aber unterschiedlich kantengeglaettet, also sichtbar doppelt. Bewusst als Animation, nicht als `opacity:0`: bricht das Skript ab, laeuft sie trotzdem durch und die Marke erscheint. */ .tqv-ziel{ animation:tqv-hand 1ms linear calc(1210ms * var(--tqv-k)) both; } html.tqv-kc .tqv-ziel{ animation-delay:calc(1290ms * var(--tqv-k)); } @keyframes tqv-draw { from{ stroke-dashoffset:211.94; } to{ stroke-dashoffset:0; } } @keyframes tqv-draw-t { from{ stroke-dashoffset:46.5; } to{ stroke-dashoffset:0; } } @keyframes tqv-shift { from{ transform:translateX(-110.95px); } to{ transform:translateX(0); } } @keyframes tqv-letter { from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:translateY(0); } } @keyframes tqv-auftakt{ from{ transform:scale(.965); } to{ transform:scale(1); } } @keyframes tqv-sub-in { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } @keyframes tqv-flug{ from{ transform:translate(0,0) scale(1); } to { transform:translate(var(--tqv-x,0px), var(--tqv-y,0px)) scale(var(--tqv-s,.3)); } } @keyframes tqv-aus { from{ opacity:1; } to{ opacity:0; } } @keyframes tqv-weg { from{ opacity:1; } to{ opacity:0; } } @keyframes tqv-hand{ from{ opacity:0; } to{ opacity:1; } } /* Wer Bewegung abbestellt hat, bekommt keinen Aufbau und keinen Flug — aber sehr wohl die Marke. Sie ganz wegzulassen war zu grob: auf Windows sind Animationen oft systemweit aus (Barrierefreiheit, Energiesparmodus), und dann sah man nur ein kurzes Aufblinken und hielt den Vorspann fuer kaputt. Jetzt steht die fertige Wortmarke still da und blendet aus — keine Bewegung, nur Opazitaet. Gesamt 700 ms. */ @media (prefers-reduced-motion: reduce){ .tqv-schild{ display:grid; } html.tqv-los .tqv-g, html.tqv-los .tqv-lock{ animation:none !important; transform:none !important; } html.tqv-los .tqv-gl{ animation:none !important; opacity:1 !important; transform:none !important; } html.tqv-los .tqv-ring, html.tqv-los .tqv-tail{ animation:none !important; stroke-dashoffset:0 !important; transform:none !important; } html.tqv-kc.tqv-los .tqv-sub{ animation:none !important; opacity:1 !important; transform:none !important; } html.tqv-los .tqv-schild, html.tqv-kc.tqv-los .tqv-schild{ animation:tqv-aus 260ms ease 440ms both !important; } html.tqv-los.tqv-an::before, html.tqv-kc.tqv-los.tqv-an::before{ animation:tqv-aus 260ms ease 440ms both !important; } .tqv-ziel{ animation:none !important; } }