/* Hero-Visual der Maerkte-Seite — .mkx

   ERZEUGT von tools/build-hero-maerkte.py — NICHT VON HAND AENDERN.
   Ein Lauf schreibt diese Datei und
   plugins/beyonity-core/tools/maerkte-bespoke/hero-mkx.html neu.

   Reines CSS, kein Skript, keine Bibliothek — wie die uebrigen
   Hero-Visuals. Ein Durchlauf dauert --mkx-t; die 6 Standorte
   leuchten zwischen 5 und 46 Prozent nacheinander auf, der Datenkern
   wird bei 55 Prozent aktiv, danach haelt das Bild bis zum Neustart.

   ZUSTAND OHNE ANIMATION = ENDBILD. Jede Regel unten setzt den fertigen
   Stand, die Keyframes fangen davor an. Wer prefers-reduced-motion
   gesetzt hat, sieht damit die vollstaendige Karte statt einer
   eingefrorenen Startpose.

   Diese Datei wird ueber den Seiten-Slug automatisch nur auf /maerkte/
   geladen (functions.php, assets/<slug>.css) und steht zusaetzlich in
   add_editor_style, damit die Szene auch im Backend richtig aussieht.
   Alle Selektoren beginnen mit .mkx — ausserhalb der Szene greift nichts. */

.mkx {
  --mkx-t: 14s;
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--linie-w);
  border-radius: var(--r-600);
  padding: 20px;
  backdrop-filter: blur(12px);
  box-shadow: var(--elev-500);
}

.mkx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.mkx-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gelb); white-space: nowrap; }
.mkx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 8px var(--gelb); animation: c2c-blink 2s ease-in-out infinite; }
.mkx-tag { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; text-align: right; }

/* Die Szene: Karte plus Beschriftungen. aspect-ratio haelt den Kasten
   stabil, damit die Beschriftungen (in Prozent gesetzt) beim Laden nicht
   springen. */
.mkx-scene { position: relative; aspect-ratio: var(--mkx-ar); }
.mkx-map { display: block; width: 100%; height: 100%; overflow: visible; }
.mkx-coast { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 0.8; stroke-linejoin: round; stroke-linecap: round; }

/* Verbindungslinien zum Kern. Sie werden gezeichnet, indem der
   Strichversatz auf 0 laeuft — deshalb steht die exakte Pfadlaenge in
   stroke-dasharray, vom Generator berechnet. */
.mkx-links { fill: none; }
.mkx-link {
  stroke: var(--gelb);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  opacity: 1;
  animation-duration: var(--mkx-t);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.mkx-l1 { stroke-dasharray: 208.9; animation-name: mkx-l1; }
.mkx-l2 { stroke-dasharray: 236.2; animation-name: mkx-l2; }
.mkx-l3 { stroke-dasharray: 173.1; animation-name: mkx-l3; }
.mkx-l4 { stroke-dasharray: 220.3; animation-name: mkx-l4; }
.mkx-l5 { stroke-dasharray: 153.2; animation-name: mkx-l5; }
.mkx-l6 { stroke-dasharray: 222.3; animation-name: mkx-l6; }

/* Standortpunkte. mkx-halo ist der einmalige Ring beim Aufleuchten,
   mkx-dot der Punkt, der stehen bleibt. */
.mkx-marks circle {
  animation-duration: var(--mkx-t);
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.mkx-marks circle { transform-box: fill-box; transform-origin: center; }
.mkx-dot { fill: var(--gelb); opacity: 1; transform: scale(1); filter: drop-shadow(0 0 5px rgba(248,255,118,0.85)); }
.mkx-halo { fill: none; stroke: var(--gelb); stroke-width: 1.2; opacity: 0; transform: scale(3.8); }
.mkx-p1 { animation-name: mkx-p1; }
.mkx-p2 { animation-name: mkx-p2; }
.mkx-p3 { animation-name: mkx-p3; }
.mkx-p4 { animation-name: mkx-p4; }
.mkx-p5 { animation-name: mkx-p5; }
.mkx-p6 { animation-name: mkx-p6; }
.mkx-h1 { animation-name: mkx-h1; }
.mkx-h2 { animation-name: mkx-h2; }
.mkx-h3 { animation-name: mkx-h3; }
.mkx-h4 { animation-name: mkx-h4; }
.mkx-h5 { animation-name: mkx-h5; }
.mkx-h6 { animation-name: mkx-h6; }

/* Beschriftungen. Der Anker sitzt auf dem Punkt, --mkx-tx/--mkx-ty
   schieben das Schild auf die freie Seite — das ist die 'richtung' aus
   der Standortliste. Beide Groessen sind Variablen, damit die Keyframes
   ihre Einblendbewegung ohne Kenntnis der Richtung fahren koennen. */
.mkx-pin {
  --mkx-tx: -50%;
  --mkx-ty: -50%;
  position: absolute;
  z-index: 2;
  transform: translate(var(--mkx-tx), var(--mkx-ty));
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(2,12,52,0.82);
  border: 1px solid rgba(248,255,118,0.34);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
  opacity: 1;
  animation-duration: var(--mkx-t);
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.mkx-pin.is-oben   { --mkx-ty: -170%; }
.mkx-pin.is-unten  { --mkx-ty:   70%; }
.mkx-pin.is-links  { --mkx-tx: -112%; }
.mkx-pin.is-rechts { --mkx-tx:   12%; }
.mkx-n1 { animation-name: mkx-n1; }
.mkx-n2 { animation-name: mkx-n2; }
.mkx-n3 { animation-name: mkx-n3; }
.mkx-n4 { animation-name: mkx-n4; }
.mkx-n5 { animation-name: mkx-n5; }
.mkx-n6 { animation-name: mkx-n6; }

/* Der Datenkern, in dem die Linien zusammenlaufen. */
.mkx-core {
  position: relative;
  z-index: 3;
  margin: -2px auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--gelb);
  border: 1px solid rgba(248,255,118,0.55);
  box-shadow: 0 10px 26px rgba(0,0,0,0.38);
}
.mkx-core { animation: mkx-core var(--mkx-t) linear infinite; }
.mkx-core-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dunkelblau); animation: c2c-blink 2s ease-in-out infinite, mkx-core-bg var(--mkx-t) linear infinite; }
.mkx-core-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--dunkelblau); white-space: nowrap; animation: mkx-core-fg var(--mkx-t) linear infinite; }
.mkx-core-n { position: relative; display: grid; min-width: 26px; font-size: 10.5px; font-weight: 800; color: var(--dunkelblau); font-variant-numeric: tabular-nums; animation: mkx-core-fg var(--mkx-t) linear infinite; }
.mkx-core-n span { grid-area: 1 / 1; opacity: 0; animation-duration: var(--mkx-t); animation-timing-function: linear; animation-iteration-count: infinite; }
.mkx-core-n span:last-child { opacity: 1; }
.mkx-c1 { animation-name: mkx-c1; }
.mkx-c2 { animation-name: mkx-c2; }
.mkx-c3 { animation-name: mkx-c3; }
.mkx-c4 { animation-name: mkx-c4; }
.mkx-c5 { animation-name: mkx-c5; }
.mkx-c6 { animation-name: mkx-c6; }

.mkx-foot { margin-top: 12px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.mkx-foot strong { color: var(--gelb); font-weight: 700; }

@media (max-width: 640px) {
  .mkx { padding: 16px; }
  .mkx-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mkx-tag { text-align: left; }
  .mkx-pin { font-size: 9px; padding: 1px 5px; }
  .mkx-foot { font-size: 11.5px; }
}

@keyframes mkx-l1 { 0%, 5.0% { stroke-dashoffset: 208.9; opacity: 0; } 7.0% { opacity: 1; } 12.0%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mkx-p1 { 0%, 5.0% { transform: scale(0); opacity: 0; } 7.0% { transform: scale(1.7); opacity: 1; } 9.0%, 100% { transform: scale(1); opacity: 1; } }
@keyframes mkx-h1 { 0%, 5.0% { transform: scale(1); opacity: 0; } 7.0% { opacity: 0.55; } 11.0%, 100% { transform: scale(3.8); opacity: 0; } }
@keyframes mkx-n1 { 0%, 6.0% { opacity: 0; transform: translate(var(--mkx-tx), calc(var(--mkx-ty) + 4px)); } 9.0%, 100% { opacity: 1; transform: translate(var(--mkx-tx), var(--mkx-ty)); } }
@keyframes mkx-c1 { 0%, 5.0% { opacity: 0; } 7.0%, 13.2% { opacity: 1; } 15.2%, 100% { opacity: 0; } }
@keyframes mkx-l2 { 0%, 13.2% { stroke-dashoffset: 236.2; opacity: 0; } 15.2% { opacity: 1; } 20.2%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mkx-p2 { 0%, 13.2% { transform: scale(0); opacity: 0; } 15.2% { transform: scale(1.7); opacity: 1; } 17.2%, 100% { transform: scale(1); opacity: 1; } }
@keyframes mkx-h2 { 0%, 13.2% { transform: scale(1); opacity: 0; } 15.2% { opacity: 0.55; } 19.2%, 100% { transform: scale(3.8); opacity: 0; } }
@keyframes mkx-n2 { 0%, 14.2% { opacity: 0; transform: translate(var(--mkx-tx), calc(var(--mkx-ty) + 4px)); } 17.2%, 100% { opacity: 1; transform: translate(var(--mkx-tx), var(--mkx-ty)); } }
@keyframes mkx-c2 { 0%, 13.2% { opacity: 0; } 15.2%, 21.4% { opacity: 1; } 23.4%, 100% { opacity: 0; } }
@keyframes mkx-l3 { 0%, 21.4% { stroke-dashoffset: 173.1; opacity: 0; } 23.4% { opacity: 1; } 28.4%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mkx-p3 { 0%, 21.4% { transform: scale(0); opacity: 0; } 23.4% { transform: scale(1.7); opacity: 1; } 25.4%, 100% { transform: scale(1); opacity: 1; } }
@keyframes mkx-h3 { 0%, 21.4% { transform: scale(1); opacity: 0; } 23.4% { opacity: 0.55; } 27.4%, 100% { transform: scale(3.8); opacity: 0; } }
@keyframes mkx-n3 { 0%, 22.4% { opacity: 0; transform: translate(var(--mkx-tx), calc(var(--mkx-ty) + 4px)); } 25.4%, 100% { opacity: 1; transform: translate(var(--mkx-tx), var(--mkx-ty)); } }
@keyframes mkx-c3 { 0%, 21.4% { opacity: 0; } 23.4%, 29.6% { opacity: 1; } 31.6%, 100% { opacity: 0; } }
@keyframes mkx-l4 { 0%, 29.6% { stroke-dashoffset: 220.3; opacity: 0; } 31.6% { opacity: 1; } 36.6%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mkx-p4 { 0%, 29.6% { transform: scale(0); opacity: 0; } 31.6% { transform: scale(1.7); opacity: 1; } 33.6%, 100% { transform: scale(1); opacity: 1; } }
@keyframes mkx-h4 { 0%, 29.6% { transform: scale(1); opacity: 0; } 31.6% { opacity: 0.55; } 35.6%, 100% { transform: scale(3.8); opacity: 0; } }
@keyframes mkx-n4 { 0%, 30.6% { opacity: 0; transform: translate(var(--mkx-tx), calc(var(--mkx-ty) + 4px)); } 33.6%, 100% { opacity: 1; transform: translate(var(--mkx-tx), var(--mkx-ty)); } }
@keyframes mkx-c4 { 0%, 29.6% { opacity: 0; } 31.6%, 37.8% { opacity: 1; } 39.8%, 100% { opacity: 0; } }
@keyframes mkx-l5 { 0%, 37.8% { stroke-dashoffset: 153.2; opacity: 0; } 39.8% { opacity: 1; } 44.8%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mkx-p5 { 0%, 37.8% { transform: scale(0); opacity: 0; } 39.8% { transform: scale(1.7); opacity: 1; } 41.8%, 100% { transform: scale(1); opacity: 1; } }
@keyframes mkx-h5 { 0%, 37.8% { transform: scale(1); opacity: 0; } 39.8% { opacity: 0.55; } 43.8%, 100% { transform: scale(3.8); opacity: 0; } }
@keyframes mkx-n5 { 0%, 38.8% { opacity: 0; transform: translate(var(--mkx-tx), calc(var(--mkx-ty) + 4px)); } 41.8%, 100% { opacity: 1; transform: translate(var(--mkx-tx), var(--mkx-ty)); } }
@keyframes mkx-c5 { 0%, 37.8% { opacity: 0; } 39.8%, 46.0% { opacity: 1; } 48.0%, 100% { opacity: 0; } }
@keyframes mkx-l6 { 0%, 46.0% { stroke-dashoffset: 222.3; opacity: 0; } 48.0% { opacity: 1; } 53.0%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mkx-p6 { 0%, 46.0% { transform: scale(0); opacity: 0; } 48.0% { transform: scale(1.7); opacity: 1; } 50.0%, 100% { transform: scale(1); opacity: 1; } }
@keyframes mkx-h6 { 0%, 46.0% { transform: scale(1); opacity: 0; } 48.0% { opacity: 0.55; } 52.0%, 100% { transform: scale(3.8); opacity: 0; } }
@keyframes mkx-n6 { 0%, 47.0% { opacity: 0; transform: translate(var(--mkx-tx), calc(var(--mkx-ty) + 4px)); } 50.0%, 100% { opacity: 1; transform: translate(var(--mkx-tx), var(--mkx-ty)); } }
@keyframes mkx-c6 { 0%, 46.0% { opacity: 0; } 48.0% , 100% { opacity: 1; } }
@keyframes mkx-core { 0%, 55.0% { background: rgba(2,12,52,0.72); border-color: rgba(248,255,118,0.45); box-shadow: none; } 58.0%, 100% { background: var(--gelb); border-color: rgba(248,255,118,0.55); box-shadow: 0 10px 26px rgba(0,0,0,0.38); } }
@keyframes mkx-core-fg { 0%, 55.0% { color: var(--gelb); } 58.0%, 100% { color: var(--dunkelblau); } }
@keyframes mkx-core-bg { 0%, 55.0% { background: var(--gelb); } 58.0%, 100% { background: var(--dunkelblau); } }

@media (prefers-reduced-motion: reduce) {
  .mkx, .mkx *, .mkx *::before, .mkx *::after { animation: none !important; }
}