/* rahmen.css - automatisch aus der Live-Seite (werkzeug/rahmen-bauen.py): Inline-Stile von Kopf und Navigation. */ /* kopf-blitz 08.11.2026 (kopf-blitz.py: vt,karla,kopf,symbole) */ html,body{background-color:#e0e3e5} /* Karla schon im ersten Bild (wie im Shop): latin normal ist vorab geladen (swap), kursiv/latin-ext optional - sie springen nie nachtraeglich um */ @font-face{font-family:'Karla';font-style:italic;font-weight:200 800;font-display:optional;src:url(/assets/fonts/karla/e3b18b2e-qkBVXvYC6trAT7RQHtCe4YZO.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Karla';font-style:italic;font-weight:200 800;font-display:optional;src:url(/assets/fonts/karla/a2bf6135-qkBVXvYC6trAT7RQHt6e4Q.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:optional;src:url(/assets/fonts/karla/d1a71efa-qkBbXvYC6trAT7RbLtyG5Q.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/karla/272db45c-qkBbXvYC6trAT7RVLtw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Symbole (Font Awesome, Teilmenge wie fa-www-1.css) schon im ersten Bild - sonst werden Knoepfe mit Symbol einen Augenblick spaeter breiter */ @font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fa/fa-www-brands-1.woff2) format("woff2")} @font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fa/fa-www-regular-1.woff2) format("woff2")} @font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/fa/fa-www-solid-1.woff2) format("woff2")} .fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)} .fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto} .fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"} .fa-brands,.fab{font-family:"Font Awesome 6 Brands"} .fa-brands,.fab{font-weight:400} .fa-regular,.far{font-weight:400} .fa-solid,.fas{font-weight:900} .fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-comments:before{content:"\f086"}.fa-user-ninja:before{content:"\f504"}.fa-compass:before{content:"\f14e"}.fa-people-group:before{content:"\e533"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-gamepad:before{content:"\f11b"}.fa-lock:before{content:"\f023"}.fa-users:before{content:"\f0c0"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-globe:before{content:"\f0ac"}.fa-star:before{content:"\f005"}.fa-server:before{content:"\f233"}.fa-crown:before{content:"\f521"}.fa-city:before{content:"\f64f"}.fa-headset:before{content:"\f590"}.fa-gift:before{content:"\f06b"}.fa-fire:before{content:"\f06d"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-house-lock:before{content:"\e510"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-filter:before{content:"\f0b0"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-arrow-right:before{content:"\f061"}.fa-heart:before{content:"\f004"}.fa-cube:before{content:"\f1b2"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-tag:before{content:"\f02b"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-coins:before{content:"\f51e"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-bug:before{content:"\f188"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-play:before{content:"\f04b"}.fa-user-shield:before{content:"\f505"}.fa-copy:before{content:"\f0c5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-rocket:before{content:"\f135"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-trophy:before{content:"\f091"}.fa-hammer:before{content:"\f6e3"}.fa-cookie-bite:before{content:"\f564"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-check:before{content:"\f00c"}.fa-thumbs-up:before{content:"\f164"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-java:before{content:"\f4e4"}.fa-discord:before{content:"\f392"}.fa-teamspeak:before{content:"\f4f9"}.fa-map:before{content:"\f279"}.fa-box-archive:before{content:"\f187"}.fa-egg:before{content:"\f7fb"}.fa-book:before{content:"\f02d"}.fa-ticket:before{content:"\f145"}.fa-flask:before{content:"\f0c3"}.fa-gem:before{content:"\f3a5"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-seedling:before{content:"\f4d8"}.fa-gears:before{content:"\f085"}.fa-palette:before{content:"\f53f"}.fa-truck-fast:before{content:"\f48b"}.fa-shapes:before{content:"\f61f"}.fa-magnifying-glass:before{content:"\f002"}.fa-triangle-exclamation:before{content:"\f071"}.fa-circle-info:before{content:"\f05a"}.fa-shop:before{content:"\f54f"}.fa-file-arrow-down:before{content:"\f56d"}.fa-location-dot:before{content:"\f3c5"}.fa-user:before{content:"\f007"}.fa-tags:before{content:"\f02c"}.fa-chevron-down:before{content:"\f078"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-up:before{content:"\f062"} /* Kopfleiste schon im ersten Bild richtig angeordnet (Jetzt spielen | Logo | Discord): dieselben Werte wie mv-haupt-2.css, die bewusst erst im steht (PageSpeed 30.10.) */ #gh-header{position:relative;overflow:hidden;min-height:300px;background:linear-gradient(45deg,#293e54,#0063bd)} #gh-header .p-body-inner{display:flex;align-items:center;justify-content:center;max-width:1200px;margin:0 auto;color:#fff;gap:60px;position:relative;z-index:5} .info-card{position:relative;z-index:5;color:#fff;flex:1;display:flex;align-items:center;gap:30px;top:-15px} #players{text-align:right;justify-content:flex-end}#players i{order:5}#discord i{order:-5}#players .count{order:-5} .info-card i{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:30px;border-radius:100px;background:#ffffff21} .info-text{line-height:1;display:flex;flex-direction:column;gap:5px} .if-large{font-weight:800;font-size:21px;text-transform:uppercase;display:flex;align-items:center;gap:10px} #logo{position:relative;z-index:5;max-width:400px;margin:20px auto} @media (max-width:768px){.info-card{display:none!important}} :root {--ghost-accent-color: #FF1A75;} .count.mv-zahl-warte{visibility:hidden} /* Aufklappmenue in der Kopfnavigation. Es sitzt in derselben Reihe wie die Verweise und uebernimmt deren Schriftbild. */ /* Drei Spalten, der Shop-Knopf sitzt in der mittleren und damit exakt ueber dem Logo. Die alten Regeln in style.css treffen nur direkte Kinder von .container, deshalb hier die Entsprechung fuer die Gruppen. */ /* Der Abstand von 25 px stammt aus style.css und ergibt zusammen mit den 20 px Innenabstand der Verweise 65 px zwischen den Beschriftungen. Er muss sowohl zwischen den Rasterspalten als auch innerhalb der Gruppen gelten, sonst stehen die Verweise enger als frueher und neben dem Shop-Knopf anders als untereinander. */ #nav .container { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; } #nav .nav-gruppe { display: flex; align-items: center; gap: 25px; } #nav .nav-gruppe.links { justify-content: flex-end; } #nav .nav-gruppe.rechts { justify-content: flex-start; } #nav .nav-gruppe > a { color: #fff !important; padding: 20px; font-size: 19px; font-weight: 800; } .nav-mehr { position: relative; } .nav-mehr-knopf { border: none; background: transparent; color: #fff; cursor: pointer; font-family: inherit; font-size: 19px; font-weight: 800; padding: 20px; display: inline-flex; align-items: center; gap: 8px; line-height: 1; } .nav-mehr-knopf i { font-size: 13px; transition: transform .16s; opacity: .8; } .nav-mehr-knopf[aria-expanded="true"] i { transform: rotate(180deg); } .nav-mehr-feld { position: absolute; top: calc(100% - 8px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 12px; padding: 8px; min-width: 210px; box-shadow: 0 12px 34px rgba(15,23,42,.22); z-index: 40; text-align: left; } .nav-mehr-feld[hidden] { display: none; } /* Ueberschriften: Inhaltsseiten (auch Vote, 06.11.) am PC links, am Handy mittig; am PC mittig nur Geschenk/Creator/Kontakt */ @media (min-width: 601px) { .mv-shop .mv-kopf, .mv-shop .mv-kopf h1, .mv-shop .mv-kopf > p { text-align: left !important; } .mv-shop .mv-suchzeile { margin-left: 0 !important; } .mv-eltern-header { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; } .mv-eltern-header, .mv-eltern-header h1, .mv-eltern-header > p { text-align: left !important; } } /* Ueberschriften (Leon 04.11.2026): Rechtstexte am PC linksbuendig wie ihr Text; lange Woerter am Handy mit Trennstrich statt "Geschaeftsbeding / ungen" (lang="de" ist gesetzt). */ .article-header .article-title { -webkit-hyphens: auto; hyphens: auto; } @media (min-width: 601px) { .article-header .article-title { text-align: left; } } /* Fusszeile: soziale Netzwerke rechts neben "Zurueck nach oben" (Leon 04.11.2026), gleiche Farbe/Abstaende wie der Pfeil. Inline-SVG, weil die Font-Awesome-Teilmenge nur Discord kennt; kein style-Attribut (CSP auf /team/, /creator/). */ #footer .footer-col .right ul > li > a.mv-sozial svg { width: 20px; height: 20px; display: block; } .nav-mehr-feld a { display: block; padding: 11px 15px; border-radius: 8px; color: #334155 !important; font-size: 15px !important; font-weight: 700; white-space: nowrap; } .nav-mehr-feld a:hover { background: #f0f9ff; color: #0082ab !important; } /* Fusszeile (04.11.2026, Kontakt + Creator dazu): am Handy bricht die Zeile zwischen den Verweisen um, nie mitten in einem Namen ("Allgemeine | Geschaeftsbedingungen"). Steht hier vor
, damit team/werkzeug/rahmen-bauen.py die Regel fuer /creator/, /kontakt/ und /team/ mitnimmt. */ #footer small a { white-space: nowrap; } /* Login (Leon 06.11.: "unten mit ganz leichter Schrift"): Team und Creator melden sich hier an - so hell wie der Fliesstext der Fusszeile statt grau wie die anderen Verweise */ #footer .footer-col p a.mv-fuss-login { color: inherit; } #footer .footer-col p a.mv-fuss-login:hover { color: black; } /* Handy (05.11.2026, Pruefung bei 360/390/412 px): Fusszeile etwas groesser und luftiger, unsichtbare Tippflaechen von 44 px fuer Menue, soziale Netzwerke und "Zurueck nach oben" (das Bild bleibt gleich). */ @media (max-width: 767px) { #footer .footer-col p small { font-size: 12px; line-height: 2.75; } /* Website: 85 % von 13 px = 11 px */ #footer .footer-col p small a { padding: 9.5px 0; position: relative; } /* Tippflaeche 33 px (08.11.: vorher 26 px) */ #footer .footer-col p small a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, 32px); transform: translateX(-50%); } /* kurze Woerter (Benj, Login) mind. 32 px breit, unsichtbar */ .gh-burger, #footer a.mv-sozial, #footer a.back-to-top { position: relative; } .gh-burger::after, #footer a.mv-sozial::after, #footer a.back-to-top::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* Fusszeile sortiert (fusszeile-grau.py, 08.11.2026), login-knopf - Titel in der Textfarbe der Fusszeile, Verweise grau wie heute; PC oben buendig im 24-px-Takt) */ @media (min-width: 769px) { #footer .footer-col.mv-fuss-sp { align-items: flex-start; justify-content: space-between; gap: 48px; } #footer .footer-col.mv-fuss-sp .left { flex: 0 1 auto; min-width: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-spalten { flex: none; display: flex; gap: 64px; margin: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-spaltentitel { line-height: 16px; margin: 0 0 8px 0; padding-bottom: 7px; border-bottom: 1px solid rgba(0,0,0,.08); } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe { margin: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe a { display: block; line-height: 24px; white-space: nowrap; } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe .mv-fuss-trenner { display: none; } #footer .footer-col.mv-fuss-sp .right { flex: none; margin: 0; } #footer .footer-col.mv-fuss-sp .right ul { margin: -3px 0 0 0; } } #footer .footer-col.mv-fuss-sp .footer-marke { margin: 0 0 8px 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-text { margin: 0; } /* Leon 18:2x: "Spieler wirkt wie ein klickbares Feld" -> Ueberschrift: kleine Versalien, gesperrt, Textfarbe der Fusszeile (heller als die Verweise), kein Zeiger; "Login hat fast den gleichen Ton wie die Ueberschrift" -> Login grau wie alle Verweise */ #footer .footer-col.mv-fuss-sp .mv-fuss-spaltentitel { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #a5a5a5; cursor: default; } #footer .footer-col.mv-fuss-sp .mv-fuss-benj a { color: grey; } #footer .footer-col.mv-fuss-sp .mv-fuss-benj a:hover { color: black; } #footer .footer-col.mv-fuss-sp .mv-fuss-benj { margin: 3px 0 0 0; } @media (min-width: 769px) { #footer .footer-col.mv-fuss-sp { padding: 56px 0 52px 0; gap: 64px; } #footer .footer-col.mv-fuss-sp .mv-fuss-spalten { gap: 88px; } #footer .footer-col.mv-fuss-sp .footer-marke { margin: 0 0 10px 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-spaltentitel { margin: 0 0 10px 0; padding-bottom: 8px; } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe a { line-height: 26px; } } @media (min-width: 769px) and (max-width: 1100px) { #footer .footer-col.mv-fuss-sp { flex-wrap: wrap; row-gap: 28px; } #footer .footer-col.mv-fuss-sp .mv-fuss-spalten { order: 3; flex-basis: 100%; } } @media (max-width: 768px) { #footer .footer-col.mv-fuss-sp { align-items: center; padding: 28px 0 32px 0; gap: 0; } #footer .footer-col.mv-fuss-sp .left { display: contents; } #footer .footer-col.mv-fuss-sp .footer-marke { order: 1; margin: 0 0 6px 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-text { order: 2; margin: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-spalten { order: 3; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 24px 0 0 0; } #footer .footer-col.mv-fuss-sp .right { order: 4; flex: none; justify-content: center; margin: 24px 0 0 0; } #footer .footer-col.mv-fuss-sp .right ul { margin: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-benj { order: 5; margin: 24px 0 0 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-benj small { line-height: 16px; margin: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-spaltentitel { font-size: 10.5px; line-height: 16px; margin: 0 0 4px 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe { font-size: 12px; line-height: 16px; margin: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe a { display: inline; line-height: inherit; padding: 9.5px 0; position: relative; } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, 32px); transform: translateX(-50%); } #footer .footer-col.mv-fuss-sp .mv-fuss-trenner { display: inline; } } /* Login fuer Team & Creator (Leon 09.11.2026: ohne das gefuellte Schloss) - login-knopf, Verweisgrau wie Kontakt/Impressum */ #footer .footer-col.mv-fuss-sp a.mv-fuss-login { color: grey; } #footer .footer-col.mv-fuss-sp a.mv-fuss-login:hover { color: black; } #footer .footer-col.mv-fuss-sp .right { display: flex; flex-direction: column; align-items: flex-end; } #footer .footer-col.mv-fuss-sp .mv-fuss-knopf-p { margin: 22px 0 0 0; line-height: 1; } #footer .footer-col.mv-fuss-sp a.mv-fuss-knopf { display: inline-block; font-size: 12px; font-weight: 700; line-height: 16px; padding: 7px 14px; border: 1px solid rgba(0,0,0,.16); border-radius: 100px; white-space: nowrap; transition: border-color .15s, color .15s; } #footer .footer-col.mv-fuss-sp a.mv-fuss-knopf:hover { border-color: rgba(0,0,0,.34); } @media (max-width: 768px) { #footer .footer-col.mv-fuss-sp .right { align-items: center; } #footer .footer-col.mv-fuss-sp .mv-fuss-knopf-p { margin: 22px 0 0 0; } #footer .footer-col.mv-fuss-sp a.mv-fuss-knopf { padding: 8px 16px; } } #footer .mv-fuss-kurz { display: none; } @media (max-width: 480px) { #footer .mv-fuss-lang { display: none; } #footer .mv-fuss-kurz { display: inline; } } /* unter 360 px (sehr schmale Geraete) passt eine Gruppe evtl. nicht in eine Zeile: dann ohne Striche, mit Abstand - so haengt nie ein Strich am Rand */ @media (max-width: 768px) { #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe a { padding: 0; } #footer .footer-col.mv-fuss-sp .mv-fuss-gruppe a::after { top: -9.5px; bottom: -9.5px; } #footer .mv-fuss-gruppe { display: flex; row-gap: 16px; flex-wrap: wrap; justify-content: center; column-gap: 14px; } #footer .mv-fuss-gruppe .mv-fuss-trenner { display: none !important; } #footer .mv-fuss-benj small { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; } #footer .mv-fuss-benj .mv-fuss-trenner { display: none !important; } } /* 07.11.2026 (Leon: "diese kleinen Partikel-Blasen ... sieht man entweder gar net oder nur sehr sehr spät"): Sterne im Kopf ohne Skript - sichtbar ab dem ersten Bild, auf jeder Seite und am Handy. Nur opacity/transform (Grafikprozessor). */ #tsparticles { pointer-events: none; background: radial-gradient(circle at 269px 152px,rgba(255,255,255,0.62) 0 1.5px,rgba(255,255,255,0) 2.4px),radial-gradient(circle at 194px 122px,rgba(255,255,255,0.67) 0 1.5px,rgba(255,255,255,0) 2.4px),radial-gradient(circle at 195px 70px,rgba(255,255,255,0.66) 0 1.1px,rgba(255,255,255,0) 2.0px),radial-gradient(circle at 305px 19px,rgba(255,255,255,0.66) 0 1.3px,rgba(255,255,255,0) 2.2px),radial-gradient(circle at 18px 145px,rgba(255,255,255,0.47) 0 1.7px,rgba(255,255,255,0) 2.6px),radial-gradient(circle at 272px 234px,rgba(255,255,255,0.69) 0 1.6px,rgba(255,255,255,0) 2.5px); background-size: 530px 310px; } #tsparticles::before, #tsparticles::after { content: ""; position: absolute; inset: -14px; will-change: transform, opacity; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; } #tsparticles::before { background: radial-gradient(circle at 169px 42px,rgba(255,255,255,0.86) 0 1.7px,rgba(255,255,255,0) 2.6px),radial-gradient(circle at 278px 28px,rgba(255,255,255,0.86) 0 1.6px,rgba(255,255,255,0) 2.5px),radial-gradient(circle at 263px 58px,rgba(255,255,255,0.92) 0 1.2px,rgba(255,255,255,0) 2.1px),radial-gradient(circle at 39px 65px,rgba(255,255,255,0.91) 0 1.3px,rgba(255,255,255,0) 2.2px),radial-gradient(circle at 293px 35px,rgba(255,255,255,0.94) 0 2.3px,rgba(255,255,255,0) 3.2px),radial-gradient(circle at 35px 151px,rgba(255,255,255,0.86) 0 1.9px,rgba(255,255,255,0) 2.8px); background-size: 300px 220px; animation-name: mvSternA, mvSchwebA; animation-duration: 3.4s, 23s; animation-direction: alternate, alternate; } #tsparticles::after { background: radial-gradient(circle at 235px 242px,rgba(255,255,255,0.97) 0 2.0px,rgba(255,255,255,0) 2.9px),radial-gradient(circle at 101px 98px,rgba(255,255,255,0.9) 0 2.5px,rgba(255,255,255,0) 3.4px),radial-gradient(circle at 318px 99px,rgba(255,255,255,0.86) 0 1.5px,rgba(255,255,255,0) 2.4px),radial-gradient(circle at 50px 25px,rgba(255,255,255,0.88) 0 2.2px,rgba(255,255,255,0) 3.1px),radial-gradient(circle at 235px 84px,rgba(255,255,255,0.97) 0 2.3px,rgba(255,255,255,0) 3.2px),radial-gradient(circle at 36px 34px,rgba(255,255,255,0.98) 0 1.4px,rgba(255,255,255,0) 2.3px); background-size: 410px 270px; background-position: 137px 61px; animation-name: mvSternB, mvSchwebB; animation-duration: 4.7s, 31s; animation-delay: -2.1s, -9s; animation-direction: alternate, alternate; } @keyframes mvSternA { from { opacity: .3; } to { opacity: 1; } } @keyframes mvSternB { from { opacity: .35; } to { opacity: 1; } } @keyframes mvSchwebA { from { transform: translate3d(-9px, 8px, 0); } to { transform: none; } } @keyframes mvSchwebB { from { transform: translate3d(10px, 9px, 0); } to { transform: none; } } /* Logo: im Original als style-Attribut (CSP) */ #logo img { aspect-ratio: 800 / 483; }