/* Seitenspezifische Styles für /loesungen/.
   Wird von functions.php über den Seiten-Slug automatisch nach styles.css,
   components.css und theme-extras.css geladen.

   Herkunft: der Inline-<style>-Block von loesungen.html. Anders als
   hello-os.html verlinkt diese Prototyp-Seite das gemeinsame styles.css und
   ergänzt es nur — es ist also eine echte Ergänzungsschicht, keine
   Abspaltung. Beim Übernehmen entfernt: 0 Regeln, die styles.css
   identisch enthält. Enthält nur noch, was es global nicht gibt. */


  .sol-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; scroll-margin-top: 90px; }
  @media (max-width: 880px) { .sol-block { grid-template-columns: 1fr; gap: 36px; } }
  .sol-block.flip .sol-text { order: 2; }
  @media (max-width: 880px) { .sol-block.flip .sol-text { order: 0; } }
  .sol-text h2 { font-size: clamp(26px,3.4vw,40px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px; }
  .sol-text > p { font-size: 16px; color: var(--text-muted); line-height: 1.7; margin-bottom: 22px; }
  .sol-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blau); margin-bottom: 12px; }
  /* Das Eyebrow ist im Prototyp ein <div>. Als Block-Absatz wird es ein <p>
     und verliert font-size, color und margin an `.sol-text > p` — Klasse plus
     Element (0,1,1) schlägt die Klasse allein (0,1,0). Deshalb hier mit der
     nötigen Spezifität; Werte identisch zur Regel darüber, line-height wie im
     Prototyp aus dem body geerbt. */
  .sol-text > p.sol-eyebrow { font-size: 11px; color: var(--blau); margin-bottom: 12px; line-height: inherit; }
  .sol-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .sol-list li { display: flex; gap: 12px; font-size: 15px; color: var(--dunkelblau); align-items: flex-start; line-height: 1.55; }
  /* img mitgeführt: die Häkchen-Liste erlaubt je Punkt ein eigenes Icon aus
     der Mediathek — es soll sich genauso verhalten wie das Standard-SVG. */
  .sol-list li svg,
  .sol-list li img { flex-shrink: 0; margin-top: 3px; }
  .sol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
  .sol-chips-label { width: 100%; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
  .sol-chip { border: 1px solid var(--linie); border-radius: 100px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--dunkelblau) !important; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
  .sol-chip:hover { border-color: var(--blau); color: var(--blau) !important; }
  .sol-visual { background: var(--dunkelblau); border-radius: 24px; padding: 48px; min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center; position: relative; overflow: hidden; }
  .sol-visual::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 75% 20%, rgba(60,87,225,0.42) 0%, transparent 58%); }
  .sol-visual.alt { background: var(--blau); }
  .sol-visual > * { position: relative; z-index: 2; }
  .sol-num { font-size: clamp(48px, 6vw, 72px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; }
  .sol-num .accent-gelb { color: var(--gelb); }
  .sol-lbl { font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.6; max-width: 34ch; }
  .sol-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 16px; border-radius: 100px; background: var(--gelb); color: var(--dunkelblau); }

  /* ---------- ENTWICKLER ABSORPTION ANIMATION ----------
     Pure CSS loop (~12s): the upper floors of a new build are still
     under construction (dashed, crane above), while the finished
     lower-floor units are taken one by one — a T+0h → T+48h clock
     advances and the absorption counter races to 30.6 %. Default
     (animation-less) state = the 48h end result, so
     prefers-reduced-motion shows the final figure. */
  .devx { --devx-t: 12s; }
  .devx-toprow { display: flex; align-items: center; gap: 10px; }
  .devx-clock { display: grid; border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; padding: 6px 14px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums; }
  .devx-clock span { grid-area: 1 / 1; white-space: nowrap; }
  .devx-t0 { opacity: 0; animation: devx-t0 var(--devx-t) linear infinite; }
  .devx-t1 { opacity: 0; animation: devx-t1 var(--devx-t) linear infinite; }
  .devx-t2 { opacity: 1; animation: devx-t2 var(--devx-t) linear infinite; }
  .devx-site { margin-top: 6px; }
  .devx-crane { display: block; margin: 0 auto -4px -14px; transform-origin: 12px 40px; animation: devx-crane 6s ease-in-out infinite; }
  .devx-grid { display: grid; grid-template-columns: repeat(6, 21px); gap: 5px; justify-content: center; }
  .devx-cell { width: 21px; height: 15px; border-radius: 3.5px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); }
  .devx-cell.bau { border-style: dashed; border-color: rgba(255,255,255,0.22); background: transparent; }
  .devx-cell.sold { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); }
  .devx-c1 { animation: devx-c1 var(--devx-t) linear infinite; }
  .devx-c2 { animation: devx-c2 var(--devx-t) linear infinite; }
  .devx-c3 { animation: devx-c3 var(--devx-t) linear infinite; }
  .devx-c4 { animation: devx-c4 var(--devx-t) linear infinite; }
  .devx-c5 { animation: devx-c5 var(--devx-t) linear infinite; }
  .devx-c6 { animation: devx-c6 var(--devx-t) linear infinite; }
  .devx-c7 { animation: devx-c7 var(--devx-t) linear infinite; }
  .devx-c8 { animation: devx-c8 var(--devx-t) linear infinite; }
  .devx-c9 { animation: devx-c9 var(--devx-t) linear infinite; }
  .devx-num { display: grid; justify-items: center; }
  .devx-num span { grid-area: 1 / 1; white-space: nowrap; }
  .devx-n0 { opacity: 0; animation: devx-n0 var(--devx-t) linear infinite; }
  .devx-n1 { opacity: 0; animation: devx-n1 var(--devx-t) linear infinite; }
  .devx-n2 { opacity: 0; animation: devx-n2 var(--devx-t) linear infinite; }
  .devx-n3 { opacity: 1; animation: devx-n3 var(--devx-t) linear infinite; }

  @keyframes devx-crane { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
  @keyframes devx-t0 { 0%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
  @keyframes devx-t1 { 0%, 33% { opacity: 0; } 35%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
  @keyframes devx-t2 { 0%, 53% { opacity: 0; } 55%, 100% { opacity: 1; } }
  @keyframes devx-c1 { 0%, 18% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 20%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c2 { 0%, 22% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 24%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c3 { 0%, 25% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 27%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c4 { 0%, 28% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 30%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c5 { 0%, 32% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 34%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c6 { 0%, 36% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 38%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c7 { 0%, 42% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 44%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c8 { 0%, 48% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 50%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-c9 { 0%, 54% { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); box-shadow: none; } 56%, 100% { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 8px rgba(248,255,118,0.4); } }
  @keyframes devx-n0 { 0%, 2% { opacity: 0; } 4%, 19% { opacity: 1; } 22%, 100% { opacity: 0; } }
  @keyframes devx-n1 { 0%, 20% { opacity: 0; } 23%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
  @keyframes devx-n2 { 0%, 34% { opacity: 0; } 37%, 53% { opacity: 1; } 56%, 100% { opacity: 0; } }
  @keyframes devx-n3 { 0%, 54% { opacity: 0; } 57%, 100% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .devx, .devx *, .devx *::before, .devx *::after { animation: none !important; }
  }

  /* ---------- EIGENTÜMER PRICING ANIMATION ----------
     Pure CSS loop (~12s), focus Preismaximierung + Vermarktungs-
     effizienz: eine Preiskurve bewegt sich in Stufen mit dem
     Realtime-Nachfragedruck — sie steigt, gibt kurz nach, wenn die
     Nachfrage nachlässt, und klettert dann über die Business-Case-
     Linie auf ihr Maximum. Die gelbe Fläche ist der Mehrertrag.
     Darunter landen die Effizienz-Kennzahlen. Default (animation-
     less) state = Endbild. */
  .owx { --owx-t: 12s; }
  .owx-chart { width: min(320px, 100%); }
  .owx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
  .owx-reveal { clip-path: inset(0 -2% 0 0); animation: owx-reveal var(--owx-t) linear infinite; }
  .owx-dot { transform-box: fill-box; transform-origin: center; animation-timing-function: linear; }
  .owx-d1 { animation: owx-d1 var(--owx-t) linear infinite; }
  .owx-d2 { animation: owx-d2 var(--owx-t) linear infinite; }
  .owx-d3 { animation: owx-d3 var(--owx-t) linear infinite; }
  .owx-price { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
  .owx-val { display: grid; font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
  .owx-val span { grid-area: 1 / 1; white-space: nowrap; }
  .owx-pr1 { opacity: 0; animation: owx-pr1 var(--owx-t) linear infinite; }
  .owx-pr2 { opacity: 0; animation: owx-pr2 var(--owx-t) linear infinite; }
  .owx-pr3 { opacity: 0; animation: owx-pr3 var(--owx-t) linear infinite; }
  .owx-pr4 { opacity: 1; animation: owx-pr4 var(--owx-t) linear infinite; }
  .owx-delta { background: var(--gelb); color: var(--dunkelblau); font-size: 11px; font-weight: 800; padding: 6px 11px; border-radius: 100px; white-space: nowrap; animation: owx-delta var(--owx-t) linear infinite; }
  .owx-eff { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
  .owx-pill { border: 1px solid rgba(255,255,255,0.35); border-radius: 100px; padding: 6px 13px; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; }
  .owx-e1 { animation: owx-e1 var(--owx-t) linear infinite; }
  .owx-e2 { animation: owx-e2 var(--owx-t) linear infinite; }

  @keyframes owx-reveal { 0%, 6% { clip-path: inset(0 100% 0 0); } 56%, 100% { clip-path: inset(0 -2% 0 0); } }
  @keyframes owx-d1 { 0%, 21% { opacity: 0; transform: scale(0.3); } 23.5% { opacity: 1; transform: scale(1.4); } 25%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes owx-d2 { 0%, 36% { opacity: 0; transform: scale(0.3); } 38.5% { opacity: 1; transform: scale(1.4); } 40%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes owx-d3 { 0%, 50% { opacity: 0; transform: scale(0.3); } 52.5% { opacity: 1; transform: scale(1.4); } 54%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes owx-pr1 { 0%, 2% { opacity: 0; } 4%, 19% { opacity: 1; } 22%, 100% { opacity: 0; } }
  @keyframes owx-pr2 { 0%, 20% { opacity: 0; } 23%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
  @keyframes owx-pr3 { 0%, 35% { opacity: 0; } 38%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } }
  @keyframes owx-pr4 { 0%, 49% { opacity: 0; } 52%, 100% { opacity: 1; } }
  @keyframes owx-delta {
    0%, 55% { opacity: 0; transform: scale(1.5); }
    59% { opacity: 1; transform: scale(0.95); }
    61%, 100% { opacity: 1; transform: scale(1); }
  }
  @keyframes owx-e1 {
    0%, 67% { opacity: 0; transform: translateY(5px); }
    70.5%, 100% { opacity: 1; transform: none; }
  }
  @keyframes owx-e2 {
    0%, 75% { opacity: 0; transform: translateY(5px); }
    78.5%, 100% { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .owx, .owx *, .owx *::before, .owx *::after { animation: none !important; }
  }

  /* ---------- VERWALTUNGEN EFFIZIENZ-ANIMATION ----------
     Pure CSS loop (~12s), Fokus: Wiedervermietungs-Effizienz und
     EBITDA der Verwaltung. Der HELLO Agent übernimmt die manuellen
     Aufgaben der Wiedervermietung nacheinander — der Aufwand pro
     Wiedervermietung fällt von 8 h auf 25 min, gleiche Mandate mit
     einem Bruchteil der FTE. Default (animation-less) state =
     alles automatisiert. */
  .vwx { --vwx-t: 12s; }
  .vwx-tasks { display: flex; flex-direction: column; gap: 7px; width: min(320px, 100%); margin-top: 4px; }
  .vwx-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 11px; padding: 8px 12px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.88); text-align: left; }
  .vwx-flip { display: grid; flex-shrink: 0; }
  .vwx-flip span { grid-area: 1 / 1; justify-self: end; align-self: center; white-space: nowrap; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 100px; }
  .vwx-man { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); opacity: 0; }
  .vwx-agt { background: var(--gelb); color: var(--dunkelblau); opacity: 1; }
  .vwx-m1 { animation: vwx-m1 var(--vwx-t) linear infinite; }
  .vwx-m2 { animation: vwx-m2 var(--vwx-t) linear infinite; }
  .vwx-m3 { animation: vwx-m3 var(--vwx-t) linear infinite; }
  .vwx-m4 { animation: vwx-m4 var(--vwx-t) linear infinite; }
  .vwx-a1 { animation: vwx-a1 var(--vwx-t) linear infinite; }
  .vwx-a2 { animation: vwx-a2 var(--vwx-t) linear infinite; }
  .vwx-a3 { animation: vwx-a3 var(--vwx-t) linear infinite; }
  .vwx-a4 { animation: vwx-a4 var(--vwx-t) linear infinite; }
  .vwx-num { display: grid; justify-items: center; }
  .vwx-num span { grid-area: 1 / 1; white-space: nowrap; }
  .vwx-h0 { opacity: 0; animation: vwx-h0 var(--vwx-t) linear infinite; }
  .vwx-h1 { opacity: 0; animation: vwx-h1 var(--vwx-t) linear infinite; }
  .vwx-h2 { opacity: 0; animation: vwx-h2 var(--vwx-t) linear infinite; }
  .vwx-h3 { opacity: 0; animation: vwx-h3 var(--vwx-t) linear infinite; }
  .vwx-h4 { opacity: 1; animation: vwx-h4 var(--vwx-t) linear infinite; }
  .vwx-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
  .vwx-p1 { background: var(--gelb); color: var(--dunkelblau); font-size: 11.5px; font-weight: 800; padding: 6px 13px; border-radius: 100px; white-space: nowrap; animation: vwx-p1 var(--vwx-t) linear infinite; }
  .vwx-p2 { border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 100px; white-space: nowrap; animation: vwx-p2 var(--vwx-t) linear infinite; }

  @keyframes vwx-m1 { 0%, 2% { opacity: 0; } 4%, 14% { opacity: 1; } 16.5%, 100% { opacity: 0; } }
  @keyframes vwx-a1 { 0%, 15% { opacity: 0; transform: scale(0.6); } 17.5% { opacity: 1; transform: scale(1.15); } 19%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes vwx-m2 { 0%, 2% { opacity: 0; } 4%, 27% { opacity: 1; } 29.5%, 100% { opacity: 0; } }
  @keyframes vwx-a2 { 0%, 28% { opacity: 0; transform: scale(0.6); } 30.5% { opacity: 1; transform: scale(1.15); } 32%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes vwx-m3 { 0%, 2% { opacity: 0; } 4%, 40% { opacity: 1; } 42.5%, 100% { opacity: 0; } }
  @keyframes vwx-a3 { 0%, 41% { opacity: 0; transform: scale(0.6); } 43.5% { opacity: 1; transform: scale(1.15); } 45%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes vwx-m4 { 0%, 2% { opacity: 0; } 4%, 53% { opacity: 1; } 55.5%, 100% { opacity: 0; } }
  @keyframes vwx-a4 { 0%, 54% { opacity: 0; transform: scale(0.6); } 56.5% { opacity: 1; transform: scale(1.15); } 58%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes vwx-h0 { 0%, 2% { opacity: 0; } 4%, 15% { opacity: 1; } 18%, 100% { opacity: 0; } }
  @keyframes vwx-h1 { 0%, 16% { opacity: 0; } 19%, 28% { opacity: 1; } 31%, 100% { opacity: 0; } }
  @keyframes vwx-h2 { 0%, 29% { opacity: 0; } 32%, 41% { opacity: 1; } 44%, 100% { opacity: 0; } }
  @keyframes vwx-h3 { 0%, 42% { opacity: 0; } 45%, 54% { opacity: 1; } 57%, 100% { opacity: 0; } }
  @keyframes vwx-h4 { 0%, 55% { opacity: 0; } 58%, 100% { opacity: 1; } }
  @keyframes vwx-p1 {
    0%, 64% { opacity: 0; transform: scale(1.4); }
    68% { opacity: 1; transform: scale(0.95); }
    70%, 100% { opacity: 1; transform: scale(1); }
  }
  @keyframes vwx-p2 {
    0%, 74% { opacity: 0; transform: translateY(5px); }
    77.5%, 100% { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .vwx, .vwx *, .vwx *::before, .vwx *::after { animation: none !important; }
  }

  /* ---------- VERMARKTER INTENT ANIMATION ----------
     Pure CSS loop (~12s), Fokus: Pipeline-Intelligenz. Mikro-
     interaktionen im Navigator treiben den Intent Score in Stufen
     über die Hochintent-Schwelle — der Nudge kommt innerhalb von
     60 Minuten, das Ergebnis sind 3× häufigere Bewerbungen.
     Default (animation-less) state = Endbild. */
  .vmx { --vmx-t: 12s; }
  .vmx-signals { display: flex; flex-direction: column; gap: 7px; width: min(320px, 100%); margin-top: 4px; }
  .vmx-signal { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); border-radius: 11px; padding: 8px 12px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.92); text-align: left; }
  .vmx-pts { flex-shrink: 0; font-size: 10px; font-weight: 800; color: var(--gelb); white-space: nowrap; }
  .vmx-s1 { animation: vmx-s1 var(--vmx-t) linear infinite; }
  .vmx-s2 { animation: vmx-s2 var(--vmx-t) linear infinite; }
  .vmx-s3 { animation: vmx-s3 var(--vmx-t) linear infinite; }
  .vmx-meter { width: min(320px, 100%); }
  .vmx-track { position: relative; height: 8px; border-radius: 100px; background: rgba(255,255,255,0.18); }
  .vmx-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 91%; border-radius: 100px; background: var(--gelb); animation: vmx-fill var(--vmx-t) linear infinite; }
  .vmx-th { position: absolute; left: 78%; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--gelb); animation: vmx-th var(--vmx-t) linear infinite; }
  .vmx-meter-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
  .vmx-score { display: grid; font-size: 12px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .vmx-score span { grid-area: 1 / 1; justify-self: end; white-space: nowrap; }
  .vmx-n0 { opacity: 0; animation: vmx-n0 var(--vmx-t) linear infinite; }
  .vmx-n1 { opacity: 0; animation: vmx-n1 var(--vmx-t) linear infinite; }
  .vmx-n2 { opacity: 0; animation: vmx-n2 var(--vmx-t) linear infinite; }
  .vmx-n3 { opacity: 1; animation: vmx-n3 var(--vmx-t) linear infinite; }
  .vmx-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .vmx-hi { border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 100px; white-space: nowrap; animation: vmx-hi var(--vmx-t) linear infinite; }
  .vmx-nudge { background: var(--gelb); color: var(--dunkelblau); font-size: 11.5px; font-weight: 800; padding: 6px 13px; border-radius: 100px; white-space: nowrap; animation: vmx-nudge var(--vmx-t) linear infinite; }
  .vmx-big { animation: vmx-big var(--vmx-t) linear infinite; }

  @keyframes vmx-s1 { 0%, 6% { opacity: 0; transform: translateY(6px); } 9%, 100% { opacity: 1; transform: none; } }
  @keyframes vmx-s2 { 0%, 22% { opacity: 0; transform: translateY(6px); } 25%, 100% { opacity: 1; transform: none; } }
  @keyframes vmx-s3 { 0%, 38% { opacity: 0; transform: translateY(6px); } 41%, 100% { opacity: 1; transform: none; } }
  @keyframes vmx-fill { 0%, 12% { width: 6%; } 15%, 28% { width: 36%; } 31%, 44% { width: 62%; } 47%, 100% { width: 91%; } }
  @keyframes vmx-n0 { 0%, 2% { opacity: 0; } 4%, 13% { opacity: 1; } 16%, 100% { opacity: 0; } }
  @keyframes vmx-n1 { 0%, 14% { opacity: 0; } 17%, 29% { opacity: 1; } 32%, 100% { opacity: 0; } }
  @keyframes vmx-n2 { 0%, 30% { opacity: 0; } 33%, 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
  @keyframes vmx-n3 { 0%, 46% { opacity: 0; } 49%, 100% { opacity: 1; } }
  @keyframes vmx-th { 0%, 46% { background: rgba(255,255,255,0.45); } 49%, 100% { background: var(--gelb); } }
  @keyframes vmx-hi { 0%, 50% { opacity: 0; transform: translateY(5px); } 53.5%, 100% { opacity: 1; transform: none; } }
  @keyframes vmx-nudge {
    0%, 55% { opacity: 0; transform: scale(1.4); }
    59% { opacity: 1; transform: scale(0.95); }
    61%, 100% { opacity: 1; transform: scale(1); }
  }
  @keyframes vmx-big {
    0%, 63% { opacity: 0; transform: scale(1.35); }
    67% { opacity: 1; transform: scale(0.97); }
    69%, 100% { opacity: 1; transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .vmx, .vmx *, .vmx *::before, .vmx *::after { animation: none !important; }
  }