/* vivekaweb-Hinweis «Built by vivekaweb» mit Messpunkt — Vorlage (Entscheid 12.10.2026, Standard §3.2).
   Gebaut wie der Moontech-Mond: Zeichen, Text, Etikett beim Zeigen, gleiche Grösse und Stelle. Das Zeichen ist das
   Logo-Quadrat mit weissem v und Lime-Punkt, immer in Navy: Auf Weiss verschwände der Punkt bei 18 px (Kontrast
   1,3 : 1). Auf dunklem Grund bekommt das Quadrat einen feinen Rand.
   messpunkt.js setzt den Ton der Fusszeile (data-ton) und übernimmt die Textfarbe des Copyrights davor. Eigene
   Farben nur über --vw-text und --vw-text-hover am .vw-credit. Diese Datei steht zuletzt im Stylesheet. */
.vw-credit {
  --vw-line: rgba(244, 246, 248, .16);   /* Trennlinie links */
  --vw-tile: #0A1F3D;                    /* Navy aus dem Logo */
  --vw-rim: rgba(244, 246, 248, .34);    /* Rand des Quadrats auf dunklem Grund */
  --vw-v: #FFFFFF;
  --vw-dot: #C4F052;                     /* Lime aus dem Logo: das Messlicht */
  --vw-label-bg: #F4F6F8;
  --vw-label-text: #0A1F3D;
  --vw-ton-hover: #F4F6F8;
  --vw-ease: cubic-bezier(.25, 1, .5, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-left: 2.3rem;
  color: var(--vw-text, inherit);
  white-space: nowrap;
  transition: color .3s;
}
/* Trennlinie ausserhalb des Links, damit ein Fokusrahmen nur Zeichen und Text umschliesst */
.vw-credit::before { content: ""; position: absolute; left: -1.4rem; top: 0; bottom: 0; border-left: 1px solid var(--vw-line); }
.vw-credit[data-ton="hell"] {
  --vw-line: rgba(10, 31, 61, .14);
  --vw-rim: transparent;
  --vw-label-bg: #0A1F3D;
  --vw-label-text: #F4F6F8;
  --vw-ton-hover: #0A1F3D;
}
/* Linkregeln der Seite gelten hier nicht: a.vw-credit schlägt «.footer a» */
a.vw-credit, a.vw-credit:hover, a.vw-credit:focus-visible { text-decoration: none; }
a.vw-credit:hover, a.vw-credit:focus-visible { color: var(--vw-text-hover, var(--vw-ton-hover)); }
.vw-credit__mark { width: 1.15rem; height: 1.15rem; flex: none; overflow: visible; }
.vw-credit__tile { fill: var(--vw-tile); stroke: var(--vw-rim); stroke-width: 2.5; }
.vw-credit__v { fill: var(--vw-v); }
.vw-credit__dot, .vw-credit__ping { transform-box: fill-box; transform-origin: center; }
.vw-credit__dot { fill: var(--vw-dot); transition: transform .35s var(--vw-ease); }
.vw-credit__ping { fill: none; stroke: var(--vw-dot); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
a.vw-credit:hover .vw-credit__dot, a.vw-credit:focus-visible .vw-credit__dot { transform: scale(1.3); }
/* Einmal, wenn der Hinweis zum ersten Mal ganz zu sehen ist: Das Messlicht meldet sein Ergebnis */
.vw-credit--ping .vw-credit__ping { animation: vw-ping 1.2s var(--vw-ease) .25s both; }
@keyframes vw-ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
/* Etikett mit dem Messergebnis über dem Hinweis, ohne dass sich die Zeile verschiebt. Leer bleibt es unsichtbar;
   messpunkt.js hält es innerhalb des Bildschirms */
.vw-credit__label {
  position: absolute; right: 0; bottom: calc(100% + .6rem);
  display: none; width: max-content; max-width: calc(100vw - 1rem);
  padding: .36rem .66rem .34rem; border-radius: 3px;
  background: var(--vw-label-bg); color: var(--vw-label-text);
  font-size: .8rem; line-height: 1.35; text-align: left; white-space: normal;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .3s, transform .35s var(--vw-ease);
}
.vw-credit__label small { display: block; font-size: .75rem; opacity: .72; }
.vw-credit--befund .vw-credit__label { display: block; }
a.vw-credit:hover .vw-credit__label, a.vw-credit:focus-visible .vw-credit__label { opacity: 1; transform: none; }
/* Schmal: ohne Trennlinie, der Hinweis bricht als Ganzes um */
@media (max-width: 640px) {
  .vw-credit { margin-left: .6rem; }
  .vw-credit::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-credit, .vw-credit__dot, .vw-credit__label { transition: none; }
  .vw-credit--ping .vw-credit__ping { animation: none; }
}