/* 20.10.2026: Kampagne «Meeyo-Virus» (/virus, virus.py) — dunkles Dashboard mit Weltkarte und LILA Punkten, immer dunkel (auch im
   hellen Modus: es ist der Look der Kampagne). Schrift: die eigene (meeyo.css, Plus Jakarta Sans lokal) — nie ein fremder Schriftdienst. */
/* Die Buehne ist immer dunkel (eigener Grund), Kopf und Fuss der Seite folgen dem Hell/Dunkel-Modus wie ueberall */
.vr-wurzel { max-width: 1240px; margin: 12px auto 24px; padding: 18px 16px 28px; background: #0b0614; border-radius: 18px; color: #efe6ff }
.vr .klein, .vr-bald .klein { color: #b9a8d6 }
.vr-bald { text-align: center; padding: 80px 16px; color: #e9dcff }
.vr-bald h1 { font-size: 2rem; margin: 0 0 8px; color: #efe6ff }
.vr { --vr-kachel: #160c26; --vr-linie: #2c1a48; --vr-lila: #b57bff; --vr-pink: #ff6fae; --vr-text: #efe6ff; --vr-leise: #b9a8d6;
  color: var(--vr-text) }
.vr h1, .vr h2 { color: var(--vr-text) }
.vr-kopf { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px }
.vr-maskottchen { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 0 22px rgba(181, 123, 255, .55)); animation: vr-schweben 4s ease-in-out infinite }
.vr-kopf-text { flex: 1 1 320px; min-width: 0 }
.vr-kopf h1 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.12; margin: 0 0 6px; letter-spacing: -.01em }
.vr-unter { margin: 0; color: var(--vr-leise); font-size: 1.02rem; max-width: 60ch }
.vr-vorschau { display: inline-block; margin: 8px 0 0; font-size: .76rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #FFC24B; color: #2a1330 }
.vr-vorschau[hidden] { display: none }
.vr-song { background: transparent; color: var(--vr-text); border: 1px solid var(--vr-linie); border-radius: 999px; padding: 8px 14px; cursor: pointer; font: inherit }
.vr-song[aria-pressed="true"] { background: var(--vr-lila); color: #1a0b2e }
.vr-zaehler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px }
.vr-z { background: var(--vr-kachel); border: 1px solid var(--vr-linie); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.vr-zahl { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; color: var(--vr-lila); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(181, 123, 255, .45) }
.vr-z-neu .vr-zahl { color: var(--vr-pink); text-shadow: 0 0 18px rgba(255, 111, 174, .45) }
.vr-z b { font-size: .95rem } .vr-z small { color: var(--vr-leise); font-size: .78rem }
.vr-haupt { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; margin-bottom: 14px }
.vr-karte-huelle { position: relative; background: var(--vr-kachel); border: 1px solid var(--vr-linie); border-radius: 12px; overflow: hidden; min-height: 460px }
.vr-karte { position: absolute; inset: 0; background: #0e0819 }
.vr-karte .leaflet-tile-pane { filter: invert(1) hue-rotate(205deg) brightness(.62) saturate(.55) contrast(1.05) }
.vr-karte.leaflet-container { background: #0e0819; font: inherit }
.vr-karte .leaflet-control-attribution { background: rgba(11, 6, 20, .7); color: var(--vr-leise) } .vr-karte .leaflet-control-attribution a { color: var(--vr-lila) }
.vr-karte .leaflet-popup-content-wrapper, .vr-karte .leaflet-popup-tip { background: #1d1032; color: var(--vr-text) }
.vr-karte .leaflet-tooltip { background: #1d1032; color: var(--vr-text); border-color: var(--vr-linie) }
.vr-punkt { fill: #b57bff; fill-opacity: .55; stroke: #e2c9ff; stroke-width: 1.2; filter: drop-shadow(0 0 6px rgba(181, 123, 255, .9)) }
.vr-punkt.land { fill: #8a4dff; fill-opacity: .35; stroke-dasharray: 3 3 }
.vr-leer { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; margin: 0; color: var(--vr-leise); z-index: 500 }
.vr-seite { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.vr-box { background: var(--vr-kachel); border: 1px solid var(--vr-linie); border-radius: 12px; padding: 14px 16px }
.vr-box h2 { font-size: 1.05rem; margin: 0 0 10px }
.vr-hotspot-ort { font-size: 1.15rem; font-weight: 700; color: var(--vr-pink); margin: 0 }
.vr-box .klein { color: var(--vr-leise) }
.vr-reiter { display: flex; gap: 6px; margin-bottom: 8px }
.vr-reiter button { flex: 1; background: transparent; color: var(--vr-leise); border: 1px solid var(--vr-linie); border-radius: 8px; padding: 7px 8px; cursor: pointer; font: inherit }
.vr-reiter button[aria-selected="true"] { background: #2a1748; color: var(--vr-text); border-color: var(--vr-lila) }
.vr-liste { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; counter-reset: vr }
.vr-liste[hidden] { display: none }
.vr-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--vr-linie); counter-increment: vr }
.vr-liste li:not(.vr-keine):not(.vr-weitere) .vr-name::before { content: counter(vr) "."; color: var(--vr-leise); margin-right: 8px; font-variant-numeric: tabular-nums }
.vr-name { min-width: 0; overflow-wrap: anywhere } .vr-name small { color: var(--vr-leise) }
.vr-n { font-weight: 800; color: var(--vr-lila); font-variant-numeric: tabular-nums }
.vr-keine, .vr-weitere { color: var(--vr-leise) }
.vr-ansteck { margin-bottom: 14px; background: linear-gradient(120deg, #1e0f36, #2b1150) }
.vr-ansteck h2 { font-size: 1.35rem }
.vr-ansteck [hidden] { display: none }
.vr-link { display: inline-block; max-width: 100%; overflow-wrap: anywhere; background: #0e0819; border: 1px solid var(--vr-linie); border-radius: 8px; padding: 6px 10px; color: var(--vr-text) }
.vr-knoepfe { display: flex; flex-wrap: wrap; gap: 8px }
.vr-fuss { color: var(--vr-leise); font-size: .88rem; text-align: center } .vr-fuss p { margin: 4px auto; max-width: 72ch }
.vr-ab18 { color: var(--vr-text) }
@keyframes vr-schweben { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-6px) rotate(2deg) } }
@keyframes vr-puls { 0%, 100% { stroke-width: 1.2 } 50% { stroke-width: 4 } }
.vr-punkt.neu { animation: vr-puls 2.4s ease-in-out infinite }
@media (prefers-reduced-motion: reduce) { .vr-maskottchen, .vr-punkt.neu { animation: none } }
@media (max-width: 900px) {
  .vr-haupt { grid-template-columns: minmax(0, 1fr) }
  .vr-karte-huelle { min-height: 340px }
}
@media (max-width: 560px) {
  .vr-wurzel { padding: 12px 12px 24px; margin: 6px 8px 16px; border-radius: 14px }
  .vr-maskottchen { width: 88px; height: 88px }
  .vr-zaehler { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .vr-zaehler .vr-z:first-child { grid-column: 1 / -1 }
  .vr-karte-huelle { min-height: 280px }
}

/* Promoter-Portal: Karte «Meeyo-Virus-Kampagne» (_virus_kampagne.html, virus_kampagne.js) */
.vk-kopf { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }
.vk-kopf img { width: 84px; height: 84px; object-fit: contain }
.vk-tage { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px }
.vk-tag { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px }
.vk-tag p { margin: 0; white-space: pre-line }
/* 21.10. (Owner): Posts im 3-Tage-Takt — gesperrte sichtbar (Vorschau), aber blass und ohne Knoepfe (Sperre im Server, virus_post_frei) */
.vk-tag.vk-zu { border-style: dashed } .vk-tag.vk-zu .gb-text { opacity: .6 }
.vk-ab { font-weight: 700 } .vk-tag.vk-zu .vk-ab { color: #b06a00 }
.vk-bilder { display: flex; flex-wrap: wrap; gap: 10px } .vk-bilder figure { margin: 0; width: 160px } .vk-bilder img { width: 160px; height: 160px; object-fit: contain; background: #160c26; border-radius: 10px }
/* 21.10. (Owner): grosser, blinkender Knopf «Live-Karte» neben den Kampagnen-Bildern */
.vk-karte-knopf { width: 160px; height: 160px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 10px; box-sizing: border-box; text-align: center; text-decoration: none; color: #fff; font-size: 1.05rem; line-height: 1.2;
  background: linear-gradient(135deg, #ff5a7a, #8b3dff); box-shadow: 0 0 0 0 rgba(255, 90, 122, .7); animation: vk-puls 1.4s ease-in-out infinite }
.vk-karte-knopf:hover, .vk-karte-knopf:focus-visible { filter: brightness(1.1); outline: 3px solid #fff; outline-offset: 2px }
.vk-karte-welt { font-size: 2.6rem; line-height: 1 }
@keyframes vk-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 122, .75); transform: scale(1) } 50% { box-shadow: 0 0 0 14px rgba(255, 90, 122, 0); transform: scale(1.04) } }
@media (prefers-reduced-motion: reduce) { .vk-karte-knopf { animation: none } }
/* 21.10.2026: Schaetz-Wettbewerb «Wann ist die Karte voll?» (virus_wettbewerb.js) — auf /virus dunkel, im Promoter-Kit im Look des Portals */
.vw { margin-bottom: 14px }
.vw-titel { margin: 0 0 6px; font-size: 1.2rem }
.vw-text, .vw-gewinn { margin: 0 0 8px }
.vw-gewinn { font-weight: 800; font-size: 1.1rem; padding: 8px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(255, 90, 122, .16), rgba(139, 61, 255, .16));
  border: 1px solid rgba(181, 123, 255, .55) }   /* 21.10. (Owner): Gewinn gross sichtbar */
.vw-ziel { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px }
.vw-ziel li { border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; font-size: .85rem; opacity: .7 }
.vw-ziel li.voll { opacity: 1; font-weight: 700 }
.vr .vw-ziel li.voll { border-color: var(--vr-lila); color: var(--vr-lila) }
.vw-zeit { font-weight: 800; font-variant-numeric: tabular-nums; margin: 0 0 10px }
.vr .vw-zeit { color: var(--vr-pink) }
.vw-mein h3 { margin: 6px 0 4px; font-size: 1rem }
.vw-tag { font-size: 1.3rem; font-weight: 800; margin: 0 0 4px }
.vw-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 6px 0 }
.vw-label { display: flex; flex-direction: column; gap: 2px }
.vw-label input { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid #b9a8d6; max-width: 100% }
.vw-optionen { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.vw-optionen legend { padding: 0; margin-bottom: 4px }
.vw-option { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #b9a8d6; border-radius: 999px; padding: 6px 12px; cursor: pointer }
.vw-option.vorbei { opacity: .5; cursor: not-allowed }
.vw-fehler { color: #ff6f8a; flex-basis: 100%; margin: 0 }
/* 22.10.2026 (Owner): «einfach und sofort auffindbar» — drei grosse Knoepfe, ein Tipp; oben auf /virus (#abstimmen) mit Leuchtrand */
.vw-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 4px 0 }
button.vw-knopf { font: inherit; font-size: 1.15rem; font-weight: 800; min-height: 64px; padding: 10px 8px; border-radius: 14px; cursor: pointer; color: #fff;
  border: 0; background: linear-gradient(135deg, #ff5a7a, #8b3dff); box-shadow: 0 4px 14px rgba(139, 61, 255, .35); touch-action: manipulation }
button.vw-knopf:hover:not(:disabled), button.vw-knopf:focus-visible { filter: brightness(1.1); outline: 3px solid #fff; outline-offset: 2px }
button.vw-knopf:disabled { cursor: default; opacity: .55 } button.vw-knopf.vorbei { background: #4a3b63; box-shadow: none; font-size: .95rem }
button.vw-knopf[aria-pressed="true"] { opacity: 1; background: transparent; border: 2px solid #b57bff; color: inherit; box-shadow: none }
button.vw-knopf.laeuft { opacity: 1; animation: vw-laeuft .8s ease-in-out infinite alternate }
@keyframes vw-laeuft { to { filter: brightness(1.25) } }
@media (prefers-reduced-motion: reduce) { button.vw-knopf.laeuft { animation: none } }
.vw-tippen { margin: 0 0 4px; font-weight: 700 }
.vw-danke { font-size: 1.3rem; font-weight: 800; margin: 2px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(46, 204, 113, .14); border: 1px solid rgba(46, 204, 113, .55) }
.vr .vw-oben { border: 2px solid var(--vr-lila, #b57bff); box-shadow: 0 0 0 4px rgba(181, 123, 255, .15); scroll-margin-top: 70px }
.vr .vw-oben .vw-titel { font-size: 1.45rem }
@media (max-width: 420px) { button.vw-knopf { font-size: 1rem; min-height: 58px; padding: 8px 4px } }
.vw-hinweis { border-left: 3px solid #FFC24B; padding-left: 8px }
.vw-fuss { margin: 8px 0 0 } .vr .vw-fuss a { color: var(--vr-lila) }
.vw-kit { border: 1px solid rgba(181, 123, 255, .45); border-radius: 12px; padding: 12px 14px; margin: 10px 0 }
.vw-seite { max-width: 760px; margin: 18px auto 32px; padding: 0 16px }
.vw-tb li { margin-bottom: 10px; line-height: 1.5 }
/* 21.10.2026: Erklärvideo im Promoter-Kit (virus_kampagne.js videoBlock) — hochkant 9:16, auf dem Handy volle Breite */
.vk-video { margin: 12px 0 14px } .vk-video h4 { margin: 0 0 4px } .vk-video p { margin: 0 0 8px }
.vk-video video { display: block; width: 100%; max-width: 320px; aspect-ratio: 9 / 16; background: #160c26; border-radius: 12px }
.vk-video label { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px }
/* 22.10.2026 (Owner): «Die Leute müssten das Video auch herunterladen können» — gross und sichtbar unter jedem Video (Kit + /virus) */
.vk-laden, .vr-laden .knopf { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; box-sizing: border-box; min-height: 52px;
  margin: 10px 0 4px; font-size: 1.1rem; font-weight: 800; text-decoration: none }
.vr-laden { margin: 0 }
.vk-laden-ios, .vr-laden-ios { max-width: 320px; margin: 2px 0 8px; opacity: .85 }
/* 21.10.2026 abends (Owner): /virus «mit allem» — Absicht, Karte voll, Wettbewerb kurz, Video, Mitmachen (_virus.html) */
.vr-absicht { margin-bottom: 14px }
.vr-zwei.vr-video-mit { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) } .vr-video-mit > :only-child { grid-column: 1 / -1 }
@media (max-width: 760px) { .vr-zwei.vr-video-mit { grid-template-columns: minmax(0, 1fr) } }
.vr-drei { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.vr-drei li { display: flex; gap: 10px; align-items: flex-start; background: #0e0819; border: 1px solid var(--vr-linie); border-radius: 10px; padding: 12px }
.vr-drei li span { font-size: 1.6rem; line-height: 1 } .vr-drei p { margin: 0; line-height: 1.45 } .vr-drei b { color: var(--vr-lila) }
.vr-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px }
.vr-zwei p { margin: 0 0 8px; line-height: 1.45 }
.vr-wb-gewinn { font-weight: 800; font-size: 1.1rem; color: var(--vr-pink) }
.vr-wb-kurz a { color: var(--vr-lila) }
.vr-video video { display: block; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; background: #0e0819; border-radius: 12px; margin: 6px 0 8px }
.vr-video label { display: inline-flex; gap: 6px; align-items: center }
.vr-schritte { margin: 0; padding-left: 1.3em; line-height: 1.5 } .vr-schritte li { margin-bottom: 6px }
/* Ninos Maskottchen auf der Karte: als Figur in der Ecke und als Markierung jedes sichtbaren Landes (static/virus.js) */
.vr-karte-figur { position: absolute; left: 10px; bottom: 26px; width: 96px; height: 96px; z-index: 450; pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(181, 123, 255, .6)); animation: vr-schweben 4.5s ease-in-out infinite }
.vr-figur-marke { filter: drop-shadow(0 0 8px rgba(181, 123, 255, .85)) }
.vr-figur-marke img { width: 100%; height: 100%; display: block }
@media (prefers-reduced-motion: reduce) { .vr-karte-figur { animation: none } }
@media (max-width: 760px) { .vr-drei { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 560px) { .vr-karte-figur { width: 64px; height: 64px; bottom: 22px } }
/* 21.10.2026 abends (Owner): «überall viral» — Teilen-Leiste im Promoter-Kit (virus_kampagne.js teilenLeiste) */
.vk-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 0 }
.vk-leiste > span { font-size: .85rem; opacity: .8; margin-right: 2px }
.vk-chip { font: inherit; font-size: .85rem; border: 1px solid var(--linie, #b9a8d6); background: transparent; color: inherit; border-radius: 999px;
  padding: 5px 11px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px }
.vk-chip:hover, .vk-chip:focus-visible { border-color: #8b3dff; outline: none; box-shadow: 0 0 0 2px rgba(139, 61, 255, .35) }
.vk-chip[disabled] { opacity: .45; cursor: not-allowed }
.vk-hinweis { flex-basis: 100%; margin: 4px 0 0; font-size: .85rem; border-left: 3px solid #8b3dff; padding-left: 8px }
.vk-reel { margin: 12px 0 14px } .vk-reel h4 { margin: 0 0 4px } .vk-reel p { margin: 0 0 8px }
.vk-reel video { display: block; width: 100%; max-width: 320px; aspect-ratio: 9 / 16; background: #160c26; border-radius: 12px }
.vk-reel label { display: inline-flex; gap: 6px; align-items: center; margin: 8px 0 }
.vk-medien { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start }
.vk-medien > section { flex: 1 1 280px; min-width: 0 }
.vk-bilder figure details { margin-top: 4px } .vk-bilder figure summary { cursor: pointer; font-size: .85rem }
.vr-nino { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0 } .vr-nino img { width: 44px; height: 44px; object-fit: contain }
.vr .knopf.klein:not(.leise) { color: #fff }   /* .vr .klein (leise Schrift) darf einen Knopf nicht blass machen */