/* ========================================================================= Stil-Atlas (Lab) — eigene Seite ohne Partikelfeld. Drei feste Elemente (Zeichen, Ueberschrift, Text) plus eine kleine Zeile; jeder Stil legt Groesse, Lage, Schnitt und Farbe fest, und beim Wechsel morphen alle in die neue Ordnung (assets/js/stil-atlas.js). ========================================================================= */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Schriften der Stile (alle OFL, latin) */ @font-face { font-family: 'Bangers'; src: url('../fonts/bangers-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Comic Neue'; src: url('../fonts/comic-neue-latin-700.woff2') format('woff2'); font-weight: 700; font-display: block; } @font-face { font-family: 'Press Start 2P'; src: url('../fonts/press-start-2p-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Orbitron'; src: url('../fonts/orbitron-latin-800.woff2') format('woff2'); font-weight: 800; font-display: block; } @font-face { font-family: 'Share Tech Mono'; src: url('../fonts/share-tech-mono-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Michroma'; src: url('../fonts/michroma-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; } @font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: block; } @font-face { font-family: 'Source Serif 4'; src: url('../fonts/source-serif-4-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Special Elite'; src: url('../fonts/special-elite-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Rubik Wet Paint'; src: url('../fonts/rubik-wet-paint-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Permanent Marker'; src: url('../fonts/permanent-marker-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Sedgwick Ave Display'; src: url('../fonts/sedgwick-ave-display-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Allerta Stencil'; src: url('../fonts/allerta-stencil-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Shrikhand'; src: url('../fonts/shrikhand-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Monoton'; src: url('../fonts/monoton-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-latin-600.woff2') format('woff2'); font-weight: 600; font-display: block; } @font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Caveat Brush'; src: url('../fonts/caveat-brush-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Caveat'; src: url('../fonts/caveat-latin-500.woff2') format('woff2'); font-weight: 500; font-display: block; } @font-face { font-family: 'Rye'; src: url('../fonts/rye-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'IM Fell English'; src: url('../fonts/im-fell-english-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'VT323'; src: url('../fonts/vt323-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Federant'; src: url('../fonts/federant-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Russo One'; src: url('../fonts/russo-one-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-300.woff2') format('woff2'); font-weight: 300; font-display: block; } @font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-500.woff2') format('woff2'); font-weight: 500; font-display: block; } @font-face { font-family: 'Jost'; src: url('../fonts/jost-latin-700.woff2') format('woff2'); font-weight: 700; font-display: block; } @font-face { font-family: 'Limelight'; src: url('../fonts/limelight-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Poiret One'; src: url('../fonts/poiret-one-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Righteous'; src: url('../fonts/righteous-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: block; } @font-face { font-family: 'Amatic SC'; src: url('../fonts/amatic-sc-latin-700.woff2') format('woff2'); font-weight: 700; font-display: block; } @font-face { font-family: 'Bungee'; src: url('../fonts/bungee-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Exo 2'; src: url('../fonts/exo-2-latin-300.woff2') format('woff2'); font-weight: 300; font-display: block; } @font-face { font-family: 'Exo 2'; src: url('../fonts/exo-2-latin-700.woff2') format('woff2'); font-weight: 700; font-display: block; } @font-face { font-family: 'Hind'; src: url('../fonts/hind-latin-300.woff2') format('woff2'); font-weight: 300; font-display: block; } @font-face { font-family: 'Hind'; src: url('../fonts/hind-latin-600.woff2') format('woff2'); font-weight: 600; font-display: block; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-latin-500.woff2') format('woff2'); font-weight: 500; font-display: block; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-latin-700.woff2') format('woff2'); font-weight: 700; font-display: block; } @font-face { font-family: 'UnifrakturMaguntia'; src: url('../fonts/unifrakturmaguntia-latin-400.woff2') format('woff2'); font-weight: 400; font-display: block; } @font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --bg: #0B0B0C; --text: #F5F5F7; --muted: rgba(245, 245, 247, 0.62); --line: #26272C; --eis: #34A7B9; --ease: cubic-bezier(0.22, 1, 0.36, 1); --gutter: clamp(20px, 5vw, 72px); --display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; } img, svg { display: block; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--eis); color: #0B0B0C; border-radius: 30px; } .skip-link:focus { top: 12px; } :focus-visible { outline: 2px solid var(--eis); outline-offset: 3px; } /* ---------- Seitenleiste: schwarzer Balken links mit der ganzen Navigation ---- */ :root { --leiste-b: clamp(228px, 17.5vw, 256px); } body { padding-left: var(--leiste-b); } .seitenleiste { position: fixed; left: 0; top: 0; bottom: 0; width: var(--leiste-b); z-index: 40; display: flex; flex-direction: column; gap: 22px; padding: 22px 0 20px; background: #000; color: #F5F5F7; font-family: var(--display); } .seitenleiste__kopf { display: flex; align-items: center; gap: 14px; padding: 0 22px; } .seitenleiste__marke img { width: 40px; height: 40px; } .seitenleiste__weg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; text-decoration: none; } .seitenleiste__weg span { opacity: .55; transition: transform .25s var(--ease), opacity .25s; } .seitenleiste__weg b { font-weight: 500; } .seitenleiste__weg:hover span { opacity: 1; transform: translateX(-3px); } .seitenleiste__titel { margin: 6px 0 0; padding: 0 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,245,247,.42); } .seitenleiste__stile { list-style: none; margin: -12px 0 0; padding: 0 6px 24px 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245,245,247,.22) transparent; -webkit-mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 28px), transparent); mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 28px), transparent); } .seitenleiste__stile::-webkit-scrollbar { width: 6px; } .seitenleiste__stile::-webkit-scrollbar-thumb { background: rgba(245,245,247,.2); border-radius: 3px; } .seitenleiste__stile::-webkit-scrollbar-thumb:hover { background: rgba(245,245,247,.38); } /* alle Varianten stehen immer da; die des aktiven Stils leuchten */ .seitenleiste__stile button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; border-radius: 10px; } .stil-knopf { min-height: 38px; padding: 0 12px; font-size: 15px; color: rgba(245,245,247,.55); transition: color .25s var(--ease), background .25s var(--ease); } .stil-knopf:hover { color: #F5F5F7; background: rgba(255,255,255,.06); } .stil-knopf[aria-current='true'] { color: #F5F5F7; } .stil-knopf__nr { color: var(--eis); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 18px; } /* Kapitelmarken: der Zeitstrahl in sieben Abschnitten */ .kapitel { display: flex; align-items: baseline; gap: 10px; padding: 18px 12px 6px; color: rgba(245,245,247,.6); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; } .kapitel:first-child { padding-top: 6px; } .kapitel__nr { min-width: 18px; color: rgba(52,167,185,.75); font-weight: 600; letter-spacing: .04em; } .kapitel__name small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: none; color: rgba(245,245,247,.5); margin-top: 1px; } .seitenleiste__zahl { margin: 0; padding: 0 22px; font-size: 12px; color: rgba(245,245,247,.42); font-variant-numeric: tabular-nums; } .seitenleiste__zahl kbd { font: inherit; border: 1px solid rgba(245,245,247,.25); border-radius: 5px; padding: 0 5px; margin-left: 3px; } /* Telefon: eine schmale Schiene mit Nummern, die Varianten als Punkte */ @media (max-width: 700px) { :root { --leiste-b: 54px; } .seitenleiste { gap: 14px; padding: 12px 0; align-items: center; } .seitenleiste__kopf { flex-direction: column; gap: 4px; padding: 0; } .seitenleiste__marke img { width: 32px; height: 32px; } .seitenleiste__weg { min-height: 36px; font-size: 18px; } .seitenleiste__weg b, .seitenleiste__titel, .stil-knopf__name, .seitenleiste__zahl { display: none; } .seitenleiste__stile { margin: 0; padding: 0 5px; width: 100%; } .stil-knopf { justify-content: center; padding: 0; min-height: 36px; border-radius: 8px; } .stil-knopf__nr { min-width: 0; font-size: 12px; color: rgba(245,245,247,.55); } .stil-knopf[aria-current='true'] { background: rgba(52,167,185,.2); } .stil-knopf[aria-current='true'] .stil-knopf__nr { color: var(--eis); } .kapitel { justify-content: center; padding: 12px 0 4px; border-top: 1px solid rgba(245,245,247,.14); margin-top: 6px; } .kapitel:first-child { border-top: 0; margin-top: 0; padding-top: 2px; } .kapitel__nr { min-width: 0; font-size: 9.5px; } .kapitel__name { display: none; } } /* ---------- Einleitung ------------------------------------------------------ */ .intro { min-height: 100svh; display: grid; align-content: end; padding: 140px var(--gutter) clamp(56px, 10vh, 120px); max-width: 1400px; margin: 0 auto; } .eyebrow { font-family: var(--display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; } .eyebrow b { color: var(--eis); font-weight: 600; } .intro__titel { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; line-height: .95; font-size: clamp(56px, 11vw, 176px); margin: 0; } .intro__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; margin-top: clamp(28px, 5vh, 56px); } .intro__lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--muted); max-width: 40ch; margin: 0; } .intro__lead strong { color: var(--text); font-weight: 500; } .intro__hinweis { font-family: var(--display); font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 12px; margin: 0; } .intro__hinweis i { width: 1px; height: 44px; background: linear-gradient(var(--eis), transparent); display: block; animation: rinnen 2.2s var(--ease) infinite; transform-origin: top; } @keyframes rinnen { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } .intro__titel, .intro__zeile, .eyebrow, .intro__experiment { animation: auftritt 1s var(--ease) both; } .intro__titel { animation-delay: .1s; } .intro__zeile { animation-delay: .25s; } @keyframes auftritt { from { opacity: 0; transform: translateY(24px); } } @media (max-width: 700px) { .intro__zeile { grid-template-columns: 1fr; } } /* ---------- Die Bahn: angeheftete Buehne, Scroll schaltet die Ordnungen ---- */ .atlas { position: relative; height: calc(var(--schritte, 6) * 85svh + 100svh); } .atlas__buehne { position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden; background: #F3F2EE; color: #1A1A1A; contain: layout paint; } /* Jedes Element liegt absolut oben links und wird nur per transform, Breite und Schriftwerte gesetzt — so koennen alle frei morphen. */ .el { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; will-change: transform; } .el--kopf { font-family: var(--body); font-weight: 300; line-height: 1; white-space: normal; overflow-wrap: normal; hyphens: manual; } .el--text { font-family: var(--body); font-size: 15px; line-height: 1.55; } .el--zeile { font-family: var(--body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; } .el--zeichen { width: 80px; height: 80px; --logo-c: #1A1A1A; --punkt-c: #34A7B9; --rand-c: #1A1A1A; --fuell: 1; --strich: 0; --pixel: 0; } .el--zeichen svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .el--zeichen svg.filterbox { width: 0; height: 0; } .el--zeichen { --chrom: 0; --holo: 0; --glow: 0; --rgb: 0; /* Neon-Leuchten und Farbversatz (Cyberpunk) — bei 0 ohne Wirkung */ filter: drop-shadow(0 0 calc(var(--glow) * 10px) var(--logo-c)) drop-shadow(0 0 calc(var(--glow) * 26px) var(--logo-c)) drop-shadow(calc(var(--rgb) * -7px) 0 0 rgba(255, 42, 109, calc(var(--rgb) * 0.9))) drop-shadow(calc(var(--rgb) * 7px) 0 0 rgba(5, 217, 232, calc(var(--rgb) * 0.9))); } .el--zeichen .vek { opacity: calc(1 - var(--pixel) - var(--chrom) - var(--holo) - var(--himmel) - var(--knete) - var(--skizze) - var(--gravur) - var(--vlf) - var(--riso) - var(--halbton) - var(--vektor) - var(--partikel) - var(--psy) - var(--grunge)); } /* Zeitstrahl-Ebenen: Verlauf, Riso, Halbton, Vektor, Partikel, Psychedelisch, Grunge, Glanz, Extrusion, Neumorph */ .el--zeichen { --vlf: 0; --riso: 0; --halbton: 0; --vektor: 0; --partikel: 0; --psy: 0; --grunge: 0; --gloss: 0; --lang: 0; --neu: 0; --v1: #000; --v2: #000; --v3: #000; --v4: #000; --r1: #FF48B0; --r2: #0078BF; --rv: 1; --lang-c: #000; --ldx: 0; --ldy: 0; --lfade: 0; --neu-h: rgba(255,255,255,0); --neu-d: rgba(0,0,0,0); } .el--zeichen .vlf { opacity: var(--vlf); } .el--zeichen .vlf .c { fill: url(#atlas-vlf); fill-opacity: 1; } .el--zeichen .vlf .v1 { stop-color: var(--v1); } .el--zeichen .vlf .v2 { stop-color: var(--v2); } .el--zeichen .vlf .v3 { stop-color: var(--v3); } .el--zeichen .vlf .v4 { stop-color: var(--v4); } .el--zeichen .ris { opacity: var(--riso); } .el--zeichen .ris g { mix-blend-mode: multiply; } .el--zeichen .ris .r1 .c, .el--zeichen .ris .r1 .p { fill: var(--r1); stroke: none; fill-opacity: .92; } .el--zeichen .ris .r2 .c { fill: var(--r2); stroke: none; fill-opacity: .9; } .el--zeichen .ris .r2 .p { fill: var(--r1); fill-opacity: 0; } .el--zeichen .ris .r1 { transform: translate(calc(var(--rv) * -0.022px), calc(var(--rv) * -0.012px)); } .el--zeichen .ris .r2 { transform: translate(calc(var(--rv) * 0.02px), calc(var(--rv) * 0.014px)); } .el--zeichen .htn { opacity: var(--halbton); } .el--zeichen .htn .hf { fill: url(#atlas-halbton); } .el--zeichen .htn .hd { fill: var(--logo-c); } .el--zeichen .htn .hp { fill: var(--punkt-c); } .el--zeichen .vkt { opacity: var(--vektor); } .el--zeichen .vkt .vk { fill: none; stroke: var(--logo-c); stroke-width: 1.4; vector-effect: non-scaling-stroke; } .el--zeichen .vkt .vg { stroke: var(--rand-c); stroke-width: 1; vector-effect: non-scaling-stroke; } .el--zeichen .vkt .vgp { fill: var(--rand-c); } .el--zeichen .vkt .va { fill: #FFFFFF; stroke: var(--rand-c); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .el--zeichen .ptk { opacity: var(--partikel); } .el--zeichen .ptk .kc { fill: var(--logo-c); } .el--zeichen .ptk .kp { fill: var(--punkt-c); } .el--zeichen .ptk circle { transform-box: fill-box; transform-origin: center; } .el--zeichen .psy { opacity: var(--psy); } .el--zeichen .psy .pr { fill: none; stroke-width: 0.034; } .el--zeichen .psy .pr0 { stroke: var(--v1); } .el--zeichen .psy .pr1 { stroke: var(--v2); } .el--zeichen .psy .pr2 { stroke: var(--v3); } .el--zeichen .psy .pr3 { stroke: var(--v4); } .el--zeichen .grg { opacity: var(--grunge); } .el--zeichen .gls { opacity: var(--gloss); } .el--zeichen .lng { opacity: var(--lang); } .el--zeichen .lng use { fill: var(--lang-c); transform: translate(calc(var(--i) * var(--ldx) * 1px), calc(var(--i) * var(--ldy) * 1px)); opacity: calc(1 - var(--i) / 42 * var(--lfade)); } .el--zeichen { --nb: 0; } .el--zeichen .vek { filter: drop-shadow(calc(var(--nx, -1) * var(--nb) * 1px) calc(var(--ny, -1) * var(--nb) * 1px) calc(var(--nb) * 1.5px) var(--neu-h)) drop-shadow(calc(var(--nx, -1) * var(--nb) * -1px) calc(var(--ny, -1) * var(--nb) * -1px) calc(var(--nb) * 1.7px) var(--neu-d)); } .el--zeichen { --himmel: 0; --knete: 0; --skizze: 0; --gravur: 0; } .el--zeichen .him { opacity: var(--himmel); } .el--zeichen .kne { opacity: var(--knete); filter: drop-shadow(0 14px 18px rgba(0,0,0,.16)); } .el--zeichen .skz { opacity: var(--skizze); } .el--zeichen .grv { opacity: var(--gravur); } .el--zeichen .kne .c { stroke: none; fill-opacity: 1; } .el--zeichen .skz .sf { fill: url(#atlas-schraffur); } .el--zeichen .skz .sl { stroke: var(--logo-c); stroke-width: .006; opacity: .55; } .el--zeichen .skz .sk { fill: none; stroke: var(--logo-c); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .el--zeichen .skz .sk2 { stroke-width: 1.2; opacity: .55; } .el--zeichen .skz .sp { fill: var(--punkt-c); stroke: var(--logo-c); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .el--zeichen .grv .gf { fill: url(#atlas-gravur); } .el--zeichen .grv .gl { stroke: var(--logo-c); stroke-width: .012; } .el--zeichen .grv .gk { fill: none; stroke: var(--logo-c); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .el--zeichen .chr { opacity: var(--chrom); } .el--zeichen .holo { opacity: var(--holo); } .el--zeichen .chr .c { fill: url(#atlas-chrom); fill-opacity: 1; } .el--zeichen .holo .c { fill: url(#atlas-holo); fill-opacity: 1; } .el--zeichen .pix { opacity: var(--pixel); } .el--zeichen .c { fill: var(--logo-c); fill-opacity: var(--fuell); stroke: var(--rand-c); stroke-width: var(--strich); stroke-linejoin: round; vector-effect: non-scaling-stroke; paint-order: stroke fill; } .el--zeichen .p, .el--zeichen .pp { fill: var(--punkt-c); } .el--zeichen .pc { fill: var(--logo-c); } .el--blink { animation: blinken 1.1s steps(1) infinite; } @keyframes blinken { 55% { visibility: hidden; } } /* Zierrat je Stil — Lage und Groesse setzt das Skript, die Farbe kommt aus --dc */ .deko { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transform-origin: 0 0; opacity: 0; --dc: transparent; } .deko svg { width: 100%; height: 100%; display: block; overflow: visible; } .deko--raster { width: 100%; height: 100%; color: #111; } .deko--block, .deko--block2 { background: var(--dc); } .deko--linie { height: 1px; background: var(--dc); } .deko--kreise { color: #F1EFE9; } .deko--kreise circle { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; } /* Pop Art: Rasterpunkte, Sprechblase, Erzaehlkasten, Explosion, Siebdruck-Kacheln */ .deko--punkte { background-image: radial-gradient(circle, var(--dc) 32%, transparent 34%); background-size: 16px 16px; } .deko--blase path { fill: var(--dc); stroke: #111; stroke-width: 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .deko--kasten { background: var(--dc); border: 4px solid #111; box-shadow: 7px 7px 0 #111; } .deko--burst .aussen { fill: #E8322E; stroke: #111; stroke-width: 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .deko--burst .innen { fill: var(--dc); stroke: #111; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .deko--kacheln { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .deko--kacheln i { position: relative; display: block; } .deko--kacheln i svg { position: absolute; width: 62%; height: 62%; left: 19%; top: 19%; } .deko--kacheln .c { stroke: #111; stroke-width: 3; vector-effect: non-scaling-stroke; paint-order: stroke fill; } .deko--kacheln .p { fill: #34A7B9; } .deko--kacheln i:nth-child(1) { background: #F7A1C4; } .deko--kacheln i:nth-child(2) { background: #F6A01A; } .deko--kacheln i:nth-child(2) .c { fill: #1F5FD8; } .deko--kacheln i:nth-child(3) { background: #29C4E0; } .deko--kacheln i:nth-child(3) .c { fill: #E5007E; } .deko--kacheln i:nth-child(4) { background: #FFE11A; } .deko--kacheln i:nth-child(4) .c { fill: #111; } /* Cyberpunk: Skyline, Regen, Warnstreifen, Panel, Stoerung */ .deko--regen { background: repeating-linear-gradient(104deg, transparent 0 26px, rgba(150, 210, 255, .16) 26px 27px, transparent 27px 61px); background-size: 200px 600px; } .deko--regen.an { animation: regnen .5s linear infinite; } @keyframes regnen { to { background-position: -60px 600px; } } .deko--warn { background: repeating-linear-gradient(-45deg, #111 0 16px, var(--dc) 16px 32px); } .deko--panel { background: var(--dc); clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); } .deko--stoerung { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); } .deko--stoerung::before, .deko--stoerung::after { content: ''; position: absolute; left: 0; right: 0; height: 7%; background: rgba(5, 217, 232, .08); } .deko--stoerung::after { background: rgba(255, 42, 109, .07); height: 3%; } .deko--stoerung.an::before { animation: stoeren 2.6s steps(1) infinite; } .deko--stoerung.an::after { animation: stoeren 1.9s steps(1) infinite reverse; } @keyframes stoeren { 0% { top: 12%; } 20% { top: 63%; } 40% { top: 31%; } 60% { top: 84%; } 80% { top: 47%; } } /* Leuchtschrift mit Stoerbild: zwei versetzte Farbkopien, die ab und zu durchzucken */ .el--glitch::before, .el--glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: .8; clip-path: inset(0 0 100% 0); } .el--glitch::before { color: #FF2A6D; text-shadow: none; transform: translateX(-0.04em); animation: zucken 3.2s steps(1) infinite; } .el--glitch::after { color: #05D9E8; text-shadow: none; transform: translateX(0.04em); animation: zucken 2.7s steps(1) infinite reverse; } @keyframes zucken { 0%, 86% { clip-path: inset(0 0 100% 0); } 88% { clip-path: inset(18% 0 58% 0); } 91% { clip-path: inset(62% 0 12% 0); } 94% { clip-path: inset(38% 0 40% 0); } 97% { clip-path: inset(0 0 100% 0); } } /* Stoerblitz beim Wechsel in einen Cyberpunk-Stil */ .atlas__buehne::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: repeating-linear-gradient(to bottom, rgba(5,217,232,.18) 0 3px, transparent 3px 11px, rgba(255,42,109,.16) 11px 13px, transparent 13px 29px); } .atlas__buehne.blitz::after { animation: blitzen .42s steps(5) 1; } @keyframes blitzen { 0% { opacity: .9; transform: translateX(-12px); } 30% { opacity: .5; transform: translateX(16px); } 60% { opacity: .7; transform: translateX(-6px); } 100% { opacity: 0; transform: none; } } /* Y2K: Verlauf, Glitzer, Programmfenster, Farbblasen */ .deko--verlauf { background: linear-gradient(160deg, #BDE3FF 0%, #E6D4FF 55%, #FFD6F0 100%); } .deko--funkeln path { fill: var(--dc); transform-box: fill-box; transform-origin: center; } .deko--funkeln.an path { animation: funkeln 2.4s ease-in-out infinite; animation-delay: var(--d); } @keyframes funkeln { 0%, 100% { opacity: .15; scale: .4; } 50% { opacity: 1; scale: 1; } } .deko--fenster { background: #C0C0C0; box-shadow: inset -1px -1px #0A0A0A, inset 1px 1px #FFFFFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF, 6px 8px 0 rgba(0,0,0,.25); } .fenster__titel { position: absolute; left: 3px; right: 3px; top: 3px; height: 24px; display: flex; align-items: center; gap: 3px; padding: 0 3px 0 8px; background: linear-gradient(90deg, #000080, #1084D0); color: #FFF; font: 700 13px Tahoma, Verdana, sans-serif; } .fenster__titel span { flex: 1; } .fenster__titel b { width: 18px; height: 16px; background: #C0C0C0; color: #000; font: 700 11px/14px Tahoma, Verdana, sans-serif; text-align: center; box-shadow: inset -1px -1px #0A0A0A, inset 1px 1px #FFFFFF, inset -2px -2px #808080; } .deko--blobs i { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .85; } .deko--blobs i:nth-child(1) { width: 46%; height: 60%; left: -6%; top: 10%; background: #9FD8FF; } .deko--blobs i:nth-child(2) { width: 40%; height: 52%; right: -4%; top: -8%; background: #C6FF3D; opacity: .55; } .deko--blobs i:nth-child(3) { width: 50%; height: 50%; right: 10%; bottom: -16%; background: #C9B6FF; } .deko--blobs.an i { animation: schweben 9s ease-in-out infinite alternate; } .deko--blobs.an i:nth-child(2) { animation-duration: 11s; animation-delay: -3s; } .deko--blobs.an i:nth-child(3) { animation-duration: 13s; animation-delay: -6s; } @keyframes schweben { to { translate: 6% -8%; scale: 1.12; } } /* Editorial: Falz, Anfuehrungszeichen, Initiale */ .deko--falz { background: linear-gradient(90deg, transparent, rgba(0,0,0,.05) 38%, rgba(0,0,0,.16) 50%, rgba(255,255,255,.35) 52%, rgba(0,0,0,.04) 62%, transparent); } .deko--linie2 { height: 1px; background: var(--dc); } .deko--zitat text { fill: var(--dc); } .el--initial::first-letter { float: left; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; color: var(--ic); font-size: 3.5em; line-height: .82; padding: .06em .08em 0 0; } /* Collage: ausgeschnittene Buchstaben, Papier, Klebeband, Koernung, Textmarker */ .kb { display: inline-block; padding: .02em .1em .04em; margin: .04em .02em; line-height: 1.05; box-shadow: .03em .05em 0 rgba(0,0,0,.28); } .deko--zettel, .deko--fetzen, .deko--tape1, .deko--tape2 { filter: drop-shadow(2px 4px 3px rgba(0,0,0,.28)); } .deko--zettel i, .deko--fetzen i, .deko--tape1 i, .deko--tape2 i { position: absolute; inset: 0; display: block; background: var(--dc); } .deko--zettel i { background: var(--dc) repeating-linear-gradient(to bottom, transparent 0 23px, rgba(47, 93, 168, .12) 23px 24px); } .deko--tape1, .deko--tape2 { --dc: rgba(238, 228, 176, .78); } .deko--tape1 i, .deko--tape2 i { background: var(--dc); } .deko--scheibe { background: var(--dc); border-radius: 50%; } .deko--marker { background: var(--dc); mix-blend-mode: multiply; border-radius: 3px 10px 4px 12px / 12px 4px 10px 3px; } .deko--koernung { z-index: 4; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Graffiti: Ziegelwand, Spruehnebel, Laufnasen, Aufkleber */ .deko--mauer { background-color: #7E4535; background-image: linear-gradient(180deg, rgba(0,0,0,.18), transparent 30%, transparent 70%, rgba(0,0,0,.28)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='64'%3E%3Crect width='124' height='64' fill='%23675E57'/%3E%3Crect x='2' y='2' width='58' height='28' fill='%238D4A38'/%3E%3Crect x='64' y='2' width='58' height='28' fill='%237C4131'/%3E%3Crect x='-29' y='34' width='58' height='28' fill='%23955341'/%3E%3Crect x='33' y='34' width='58' height='28' fill='%23864634'/%3E%3Crect x='95' y='34' width='58' height='28' fill='%238D4A38'/%3E%3C/svg%3E"); background-size: 100% 100%, 124px 64px; } .deko--spritzer circle, .deko--tropfen rect, .deko--tropfen ellipse { fill: var(--dc); } .deko--hallo { container-type: size; background: #E3262E; border-radius: 9% / 8%; box-shadow: 3px 5px 0 rgba(0,0,0,.18); color: #FFF; text-align: center; overflow: hidden; } .deko--hallo b { display: block; font: 900 19cqw/1 'Inter', sans-serif; letter-spacing: .02em; margin-top: 5cqh; } .deko--hallo small { display: block; font: 600 8cqw/1.2 'Inter', sans-serif; } .deko--hallo i { position: absolute; left: 5%; right: 5%; top: 47%; bottom: 7%; background: #FFF; border-radius: 4%; } /* Glassmorphismus: leuchtende Kugeln, Glasscheiben */ .deko--kugeln { --k1: #FF8A3D; --k2: #22D3EE; --k3: #FF5FA8; } .deko--kugeln i { position: absolute; border-radius: 50%; filter: blur(14px); } .deko--kugeln i:nth-child(1) { width: 34%; height: 54%; left: 6%; top: 6%; background: radial-gradient(circle at 35% 35%, #FFF6, var(--k1) 45%, transparent 72%); } .deko--kugeln i:nth-child(2) { width: 30%; height: 48%; right: 4%; bottom: 4%; background: radial-gradient(circle at 35% 35%, #FFF6, var(--k2) 45%, transparent 72%); } .deko--kugeln i:nth-child(3) { width: 22%; height: 36%; left: 52%; top: 2%; background: radial-gradient(circle at 35% 35%, #FFF6, var(--k3) 45%, transparent 72%); } .deko--kugeln.an i { animation: schweben 10s ease-in-out infinite alternate; } .deko--kugeln.an i:nth-child(2) { animation-duration: 12s; animation-delay: -4s; } .deko--kugeln.an i:nth-child(3) { animation-duration: 8s; animation-delay: -2s; } .deko--glas, .deko--glas2, .deko--glas3 { background: var(--dc); border: 1px solid rgba(255,255,255,.42); border-radius: 26px; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 24px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); } .deko--glas::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 45%); } /* Retro: 70er-Streifen, Synthwave-Sonne und -Gitter, Videoband */ .deko--streifen svg path { stroke-linecap: butt; } .deko--sonne i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(#FFD319 8%, #FF8C2E 40%, #FF2E97 72%, #A21CFF); -webkit-mask-image: linear-gradient(#000 50%, transparent 50% 53%, #000 53% 61%, transparent 61% 65%, #000 65% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89%); mask-image: linear-gradient(#000 50%, transparent 50% 53%, #000 53% 61%, transparent 61% 65%, #000 65% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89%); } .deko--sonne { filter: drop-shadow(0 0 40px rgba(255, 46, 151, .55)); } .deko--gitter { overflow: hidden; perspective: 320px; background: linear-gradient(#FF2E9755, transparent 18%); } .deko--gitter i { position: absolute; left: -60%; right: -60%; top: 0; height: 200%; transform-origin: 50% 0; transform: rotateX(72deg); background-image: linear-gradient(#FF2E97 2px, transparent 2px), linear-gradient(90deg, #FF2E97 2px, transparent 2px); background-size: 70px 70px; -webkit-mask-image: linear-gradient(transparent, #000 12%); mask-image: linear-gradient(transparent, #000 12%); } .deko--gitter.an i { animation: heranfliegen 1.4s linear infinite; } @keyframes heranfliegen { to { background-position: 0 70px, 0 0; } } .deko--band { z-index: 4; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 2px, transparent 2px 4px); } .deko--band::after { content: ''; position: absolute; left: 0; right: 0; height: 9%; top: -10%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 3px, transparent 3px 9px, rgba(255,255,255,.25) 9px 11px, transparent 11px 23px); filter: blur(1px); opacity: .55; } .deko--band.an::after { animation: spurlauf 4.5s linear infinite; } @keyframes spurlauf { to { top: 105%; } } .deko--osd { display: flex; justify-content: space-between; align-items: center; font: 400 clamp(22px, 2.6vw, 44px)/1 'VT323', monospace; color: #FFF; text-shadow: .08em .08em 0 rgba(0,0,0,.45); } /* Surreal: Wueste, Schatten, der Satz */ .deko--wueste { background: linear-gradient(to bottom, #7FB4C4 0%, #CFE0CF 34%, #F4D9A0 57.6%, #E2A65C 58%, #C98545 100%); } .deko--schatten { background: var(--dc); border-radius: 50%; filter: blur(10px); } .deko--satz { container-type: size; display: flex; align-items: center; justify-content: center; color: var(--dc); } .deko--satz span { font: italic 400 62cqh/1 'Playfair Display', Georgia, serif; white-space: nowrap; } /* Clay: Knetkarten mit inneren Schatten, Knetkugeln */ .deko--knetkarte, .deko--knetkarte2 { background: var(--dc); border-radius: 38px; box-shadow: inset -10px -12px 22px rgba(0,0,0,.08), inset 10px 12px 22px rgba(255,255,255,.8), 16px 22px 40px rgba(60,40,90,.15); } .deko--knetkugeln i { position: absolute; border-radius: 50%; box-shadow: inset -10px -14px 24px rgba(0,0,0,.14), inset 10px 12px 20px rgba(255,255,255,.7), 12px 18px 30px rgba(0,0,0,.12); } .deko--knetkugeln i:nth-child(1) { width: 15%; aspect-ratio: 1; right: 8%; top: 10%; background: #FF9EC7; } .deko--knetkugeln i:nth-child(2) { width: 9%; aspect-ratio: 1; left: 8%; top: 62%; background: #9CC9FF; } .deko--knetkugeln i:nth-child(3) { width: 6%; aspect-ratio: 1; left: 20%; top: 18%; background: #C3A6FF; } .deko--knetkugeln.an i { animation: wippen 3.4s ease-in-out infinite alternate; } .deko--knetkugeln.an i:nth-child(2) { animation-delay: -1.2s; } .deko--knetkugeln.an i:nth-child(3) { animation-delay: -2.1s; } @keyframes wippen { to { translate: 0 -10px; scale: 1.04 .96; } } /* Aurora: Lichtvorhaenge (Nacht) und Farbnebel */ .deko--polar { overflow: hidden; } .deko--polar i { position: absolute; left: -10%; width: 120%; height: 34%; filter: blur(28px); mix-blend-mode: screen; transform-origin: 50% 0; background: linear-gradient(180deg, transparent, rgba(61,255,176,.55) 40%, rgba(124,92,255,.35) 75%, transparent); border-radius: 50%; } .deko--polar i:nth-child(1) { top: 2%; rotate: -8deg; } .deko--polar i:nth-child(2) { top: 10%; rotate: 6deg; background: linear-gradient(180deg, transparent, rgba(34,211,238,.45) 45%, rgba(61,255,176,.25) 80%, transparent); } .deko--polar i:nth-child(3) { top: 18%; rotate: -3deg; height: 26%; background: linear-gradient(180deg, transparent, rgba(186,92,255,.4) 50%, transparent); } .deko--polar i:nth-child(4) { top: -4%; rotate: 12deg; height: 22%; opacity: .7; } .deko--polar.an i { animation: wehen 9s ease-in-out infinite alternate; } .deko--polar.an i:nth-child(2) { animation-duration: 12s; animation-delay: -3s; } .deko--polar.an i:nth-child(3) { animation-duration: 7s; animation-delay: -5s; } .deko--polar.an i:nth-child(4) { animation-duration: 14s; animation-delay: -7s; } @keyframes wehen { 0% { transform: skewX(-12deg) scaleY(.9) translateX(-3%); } 100% { transform: skewX(14deg) scaleY(1.15) translateX(4%); } } .deko--aurora { overflow: hidden; --a1: #7C5CFF; --a2: #FF7AC6; --a3: #4DE1FF; --a4: #FFD36B; } .deko--aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .85; } .deko--aurora i:nth-child(1) { width: 60%; height: 70%; left: -10%; top: -15%; background: var(--a1); } .deko--aurora i:nth-child(2) { width: 55%; height: 65%; right: -12%; top: -5%; background: var(--a2); } .deko--aurora i:nth-child(3) { width: 60%; height: 60%; left: 10%; bottom: -25%; background: var(--a3); } .deko--aurora i:nth-child(4) { width: 40%; height: 45%; right: 5%; bottom: -10%; background: var(--a4); opacity: .7; } .deko--aurora.an i { animation: schweben 14s ease-in-out infinite alternate; } .deko--aurora.an i:nth-child(2) { animation-duration: 17s; animation-delay: -5s; } .deko--aurora.an i:nth-child(3) { animation-duration: 12s; animation-delay: -8s; } .deko--aurora.an i:nth-child(4) { animation-duration: 19s; animation-delay: -2s; } /* Handgeschrieben: liniertes Heft, Linien, die sich zeichnen */ .deko--heft { background-color: #FBF8EF; background-image: linear-gradient(90deg, transparent calc(9% - 1px), rgba(224,69,58,.55) calc(9% - 1px), rgba(224,69,58,.55) calc(9% + 1px), transparent calc(9% + 1px)), repeating-linear-gradient(to bottom, transparent 0 33px, rgba(70,120,190,.28) 33px 34px); } .deko--pfeil path, .deko--schnoerkel path, .deko--unterstrich path { fill: none; stroke: var(--dc); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1200; stroke-dashoffset: 1200; } .deko--schnoerkel path { stroke-width: 2.4; } .deko--unterstrich path { stroke-width: 5; } .deko--unterstrich path + path { stroke-width: 2.5; } .deko--pfeil.an path, .deko--schnoerkel.an path, .deko--unterstrich.an path { animation: zeichnen 1.6s .35s cubic-bezier(.6,.05,.3,1) forwards; } .deko--pfeil.an path + path { animation-delay: 1.1s; animation-duration: .5s; } @keyframes zeichnen { to { stroke-dashoffset: 0; } } /* Viktorianisch: Zierrahmen, Banderole, Ornament, Medaillon */ .deko--rahmen b { position: absolute; inset: 0; border: 2px solid var(--dc); outline: 1px solid var(--dc); outline-offset: -9px; } .deko--rahmen i { position: absolute; width: 58px; height: 58px; } .deko--rahmen i svg path, .deko--ornament svg path { fill: none; stroke: var(--dc); stroke-width: 1.6; } .deko--rahmen i svg circle { fill: var(--dc); } .deko--rahmen .lo { left: -4px; top: -4px; } .deko--rahmen .ro { right: -4px; top: -4px; transform: scaleX(-1); } .deko--rahmen .lu { left: -4px; bottom: -4px; transform: scaleY(-1); } .deko--rahmen .ru { right: -4px; bottom: -4px; transform: scale(-1); } .deko--banner rect, .deko--banner path { fill: var(--dc); } .deko--banner .hinten { filter: brightness(.7); } .deko--ornament svg { height: 100%; } .deko--ornament svg path:nth-child(2) { fill: var(--dc); } .deko--medaillon { border: 2px solid var(--dc); border-radius: 50%; } .deko--medaillon i { position: absolute; inset: 8px; border: 1px solid var(--dc); border-radius: 50%; } /* ---------- Spiel: Hover- und Klick-Effekte je Stil ---------- */ .atlas__buehne { user-select: none; -webkit-user-select: none; --ruck: 0; --farbdreh: 0deg; } .spiel { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; } .spiel--unten { z-index: auto; } .spiel__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; } .sp { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; } .sp svg { width: 100%; height: 100%; display: block; overflow: visible; } .atlas__buehne[data-spiel='swiss'], .atlas__buehne[data-spiel='pixelart'], .atlas__buehne[data-spiel='editorial'] { cursor: crosshair; } .atlas__buehne[data-spiel='cyberpunk'] { cursor: none; } .atlas__buehne[data-spiel] { -webkit-tap-highlight-color: transparent; } /* eigene Zeiger: zeigen ohne Worte, was man hier tun kann */ .atlas__buehne[data-spiel='graffiti'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20transform%3D%22rotate%28-30%2016%2016%29%22%3E%3Crect%20x%3D%2211%22%20y%3D%2210%22%20width%3D%2211%22%20height%3D%2220%22%20rx%3D%223%22%20fill%3D%22%23E8E8E8%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.5%22/%3E%3Crect%20x%3D%2211%22%20y%3D%2215%22%20width%3D%2211%22%20height%3D%227%22%20fill%3D%22%23FF3D9A%22/%3E%3Crect%20x%3D%2214%22%20y%3D%226%22%20width%3D%225%22%20height%3D%224%22%20fill%3D%22%23111%22/%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23555%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23FF3D9A%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%225%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%222.5%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%222.5%22%20cy%3D%229%22%20r%3D%221%22/%3E%3C/g%3E%3C/svg%3E") 4 4, crosshair; } .atlas__buehne[data-spiel='handgeschrieben'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20transform%3D%22rotate%2845%2016%2016%29%22%3E%3Crect%20x%3D%2213%22%20y%3D%221%22%20width%3D%226%22%20height%3D%2222%22%20rx%3D%221.5%22%20fill%3D%22%231E3A8A%22%20stroke%3D%22%230B1A45%22%20stroke-width%3D%221%22/%3E%3Crect%20x%3D%2213%22%20y%3D%221%22%20width%3D%226%22%20height%3D%224%22%20fill%3D%22%23C9D3EA%22/%3E%3Cpath%20d%3D%22M13%2023%20L16%2030%20L19%2023%20Z%22%20fill%3D%22%23E7D8B8%22%20stroke%3D%22%230B1A45%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M15.2%2028%20L16%2030%20L16.8%2028%20Z%22%20fill%3D%22%230B1A45%22/%3E%3C/g%3E%3C/svg%3E") 5 27, crosshair; } .atlas__buehne[data-spiel='collage'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23151515%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2224%22%20r%3D%224.5%22%20fill%3D%22%23D7261E%22/%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%224.5%22%20fill%3D%22%23D7261E%22/%3E%3C/g%3E%3Cpath%20d%3D%22M11%2021%20L22%203%20M21%2021%20L10%203%22%20stroke%3D%22%23151515%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2212%22%20r%3D%221.4%22%20fill%3D%22%23151515%22/%3E%3C/svg%3E") 16 8, pointer; } .atlas__buehne[data-spiel='viktorianisch'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%202%20C24%202%2030%207%2030%2016%20C30%2025%2024%2030%2016%2030%20C7%2030%202%2024%202%2016%20C2%208%208%202%2016%202Z%22%20fill%3D%22%239E1C1F%22%20stroke%3D%22%235A0E10%22%20stroke-width%3D%221.5%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%23D2403A%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M20%2011.5%20A6%206%200%201%200%2020%2020.5%22%20fill%3D%22none%22%20stroke%3D%22%23F2D9A6%22%20stroke-width%3D%222.6%22/%3E%3C/svg%3E") 16 16, pointer; } .atlas__buehne[data-spiel='clay'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22k%22%20cx%3D%22.35%22%20cy%3D%22.3%22%20r%3D%22.75%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFFFFF%22/%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23FF9EC7%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23D9649A%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%20fill%3D%22url%28%23k%29%22/%3E%3C/svg%3E") 16 16, pointer; } .atlas__buehne[data-spiel='retro'][data-spiel-v='0'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%235A2E1A%22%20stroke-width%3D%221%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%280%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%2845%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%2890%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%28135%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%28180%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%28225%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%28270%2016%2016%29%22/%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%227%22%20rx%3D%224%22%20ry%3D%227%22%20transform%3D%22rotate%28315%2016%2016%29%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224.5%22%20fill%3D%22%23E2611F%22%20stroke%3D%22%235A2E1A%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 16 16, pointer; } .atlas__buehne[data-spiel='retro'][data-spiel-v='1'] { cursor: crosshair; } .atlas__buehne[data-spiel='surreal'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%237A8CA8%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M8%2024%20C3%2024%202%2018%206%2016%20C5%2011%2011%209%2013%2012%20C14%207%2022%207%2023%2012%20C28%2011%2031%2016%2028%2020%20C30%2023%2027%2025%2025%2024%20Z%22/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; } .atlas__buehne[data-spiel='popart'] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpolygon%20points%3D%2216%2C1%2019.5%2C10%2029%2C8%2022.5%2C16%2029%2C24%2019.5%2C22%2016%2C31%2012.5%2C22%203%2C24%209.5%2C16%203%2C8%2012.5%2C10%22%20fill%3D%22%23FFE11A%22%20stroke%3D%22%23111%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") 16 16, pointer; } .atlas__buehne[data-spiel='minimalismus'], .atlas__buehne[data-spiel='y2k'], .atlas__buehne[data-spiel='glassmorphismus'], .atlas__buehne[data-spiel='aurora'] { cursor: pointer; } .atlas__buehne[data-spiel] a, .atlas__buehne[data-spiel] button { cursor: pointer; } .pa-punkt { border-radius: 50%; border: 2px solid #111; } .hg-spur path { fill: none; stroke: currentColor; stroke-width: var(--strich, 2.6px); stroke-linecap: round; stroke-linejoin: round; opacity: .55; } .sp-weg { position: absolute; left: 0; top: 0; pointer-events: none; } /* Minimalismus: der Punkt schaut zum Zeiger, ein Haarlinien-Ring */ .el--zeichen .p, .el--zeichen .pp { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .9s cubic-bezier(.22,1,.36,1); } .mi-ring { width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border: 1px solid; border-radius: 50%; } /* Swiss: Rasterzelle und gesetzte Formen */ .sw-zelle { border: 1.5px solid; opacity: 0; } .sw-form--kreis { border-radius: 50%; } .sw-form--halb { border-radius: 999px 999px 0 0; } /* Pop Art: Lautmalerei, wackelndes Zeichen */ .pa-knall b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 clamp(26px, 4vw, 64px)/1 'Bangers', sans-serif; letter-spacing: .03em; color: #111; -webkit-text-stroke: .02em #FFF; paint-order: stroke fill; text-shadow: .06em .06em 0 #111; } .el--zeichen.sp-wackeln svg { animation: wackeln .12s linear infinite alternate; } @keyframes wackeln { from { translate: -2px 1px; rotate: -2deg; } to { translate: 2px -1px; rotate: 2deg; } } /* Pixel Art: Spur, Muenze, Punktestand */ .px-muenze i { position: absolute; inset: 0; background: #F8B800; box-shadow: inset -4px 0 0 #C88000, inset 4px 0 0 #FFE08A; clip-path: polygon(25% 0, 75% 0, 100% 15%, 100% 85%, 75% 100%, 25% 100%, 0 85%, 0 15%); } .px-plus { font: 400 clamp(12px, 1.1vw, 18px)/1 'Press Start 2P', monospace; transform: translateX(-50%); text-shadow: 2px 2px 0 rgba(0,0,0,.35); } .px-score { left: auto !important; top: auto !important; right: 26px; bottom: 26px; font: 400 clamp(11px, .95vw, 15px)/1 'Press Start 2P', monospace; text-shadow: 2px 2px 0 rgba(0,0,0,.3); } /* Cyberpunk: Zielerfassung und Code */ .cy-ziel { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0; filter: drop-shadow(0 0 6px currentColor); } .cy-ziel i { position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; } .cy-ziel i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .cy-ziel i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; } .cy-ziel i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .cy-ziel i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; } .cy-ziel::before, .cy-ziel::after { content: ''; position: absolute; background: currentColor; left: 50%; top: 50%; } .cy-ziel::before { width: 6px; height: 2px; margin: -1px 0 0 -3px; } .cy-ziel::after { width: 2px; height: 6px; margin: -3px 0 0 -1px; } .cy-ziel span { position: absolute; left: 74px; top: 22px; font: 400 12px/1 'Share Tech Mono', monospace; white-space: nowrap; letter-spacing: .08em; } .cy-code { font: 400 clamp(13px, 1.1vw, 18px)/1 'Share Tech Mono', monospace; letter-spacing: .1em; white-space: nowrap; text-shadow: 0 0 8px currentColor; } /* Y2K: Funken und Fenster */ .y2-fenster { pointer-events: auto; background: #C0C0C0; color: #000; font: 13px/1.4 Tahoma, Verdana, sans-serif; padding: 30px 12px 12px; text-align: center; box-shadow: inset -1px -1px #0A0A0A, inset 1px 1px #FFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF, 6px 8px 0 rgba(0,0,0,.25); } .y2-fenster .fenster__titel b { cursor: pointer; } .y2-fenster p { display: flex; gap: 12px; align-items: center; text-align: left; margin: 6px 4px 14px; } .y2-fenster p i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #FFD400; border: 2px solid #000; font: 700 18px/26px Tahoma, sans-serif; font-style: normal; text-align: center; } .y2-fenster button { font: 13px Tahoma, Verdana, sans-serif; min-width: 76px; min-height: 26px; background: #C0C0C0; border: 0; cursor: pointer; box-shadow: inset -1px -1px #0A0A0A, inset 1px 1px #FFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF; } .y2-fenster button:active { box-shadow: inset 1px 1px #0A0A0A, inset -1px -1px #FFF; } /* Editorial: Grundlinie und Korrekturzeichen */ .ed-linie { width: 100%; height: 1px; background: rgba(200,16,46,.55); opacity: 0; } .ed-linie span { position: absolute; right: 18px; bottom: 4px; font: italic 400 12px/1 'Source Serif 4', Georgia, serif; color: #C8102E; } .ed-korrektur { width: clamp(70px, 7vw, 120px); height: clamp(42px, 4.2vw, 72px); } .ed-korrektur path { fill: none; stroke: #C8102E; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 300; } .ed-korrektur span { position: absolute; left: 100%; top: -30%; font: italic 400 clamp(18px, 1.6vw, 28px)/1 'Playfair Display', Georgia, serif; color: #C8102E; white-space: nowrap; } /* Collage: Schnipsel; Buchstaben heben sich */ .ko-buchstabe { padding: .02em .12em .05em; line-height: 1.05; box-shadow: .04em .06em 0 rgba(0,0,0,.3); } .ko-tape { background: rgba(238,228,176,.82); clip-path: polygon(0 10%, 4% 0, 96% 0, 100% 14%, 97% 50%, 100% 86%, 96% 100%, 4% 100%, 0 88%, 3% 50%); } .ko-fetzen { filter: drop-shadow(2px 4px 3px rgba(0,0,0,.25)); } .kb { transition: scale .25s cubic-bezier(.34,1.56,.64,1), rotate .25s cubic-bezier(.34,1.56,.64,1); } .kb:hover { scale: 1.22; rotate: -9deg; } .kb:nth-child(even):hover { rotate: 11deg; } /* Glassmorphismus: Lichtreflex auf dem Glas, Farbkugeln dahinter */ .deko--glas::after, .deko--glas2::after, .deko--glas3::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.42), transparent 42%); opacity: var(--glanz, 0); transition: opacity .5s; } .gl-kugel { border-radius: 50%; filter: blur(10px); } /* Retro: Blumen, Laser, Spurstoerung, Pause */ .re-laser { height: 3px; border-radius: 3px; filter: drop-shadow(0 0 6px #FF2E97); } .re-blitz { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #FFF, rgba(255,46,151,.6) 40%, transparent 70%); } .re-spur { width: 100%; height: 26px; margin-top: -13px; opacity: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 7px, rgba(255,255,255,.25) 7px 9px, transparent 9px 17px); filter: blur(.6px); } .atlas__buehne.vhs-pause .deko--band::after { animation-play-state: paused; } .atlas__buehne.vhs-pause .el, .atlas__buehne.vhs-pause .deko--band { translate: 0 calc(var(--ruck) * 5px); } .atlas__buehne.vhs-pause .deko--osd span:first-child { animation: blinken 1s steps(1) infinite; } /* Surreal: Traumdinge, schwebendes Zeichen */ .el--zeichen.sp-schweben svg { animation: schweben2 2.6s ease-in-out infinite alternate; } @keyframes schweben2 { from { translate: 0 0; } to { translate: 0 -5%; } } .su-ding { filter: drop-shadow(0 12px 14px rgba(0,0,0,.25)); } /* Clay: Knetkugeln, gedruecktes Zeichen */ .cl-kugel { border-radius: 50%; box-shadow: inset -6px -8px 14px rgba(0,0,0,.16), inset 6px 7px 12px rgba(255,255,255,.7), 6px 12px 18px rgba(0,0,0,.14); } .el--zeichen.sp-knautsch svg { animation: knautschen .9s cubic-bezier(.3,1.6,.5,1) 1; } @keyframes knautschen { 0% { scale: 1; } 20% { scale: 1.18 .82; } 45% { scale: .9 1.1; } 70% { scale: 1.05 .96; } 100% { scale: 1; } } /* Aurora: Licht folgt, Farben drehen */ .deko--aurora, .deko--polar { filter: hue-rotate(var(--farbdreh)); } .au-licht { border-radius: 50%; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle, rgba(182,255,228,.55), rgba(124,92,255,.25) 40%, transparent 70%); filter: blur(10px); } .au-licht--hell { mix-blend-mode: soft-light; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,122,198,.35) 40%, transparent 70%); } .au-welle { width: 60vmin; height: 60vmin; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); filter: blur(2px); box-shadow: 0 0 40px rgba(182,255,228,.5), inset 0 0 40px rgba(124,92,255,.4); } /* Viktorianisch: Wachssiegel, Glanz ueber dem Zeichen */ .vi-siegel i { position: absolute; inset: -6%; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; background: radial-gradient(circle at 38% 34%, #D2403A, #9E1C1F 55%, #6E0F13); box-shadow: inset 0 0 0 6px rgba(0,0,0,.12), inset 0 0 0 9px rgba(255,255,255,.08), 3px 5px 8px rgba(0,0,0,.3); } .vi-siegel svg { position: absolute; inset: 22%; width: 56%; height: 56%; } .vi-siegel .c { fill: #6E0F13; stroke: rgba(255,255,255,.18); stroke-width: .02; } .vi-siegel .p { fill: #6E0F13; } .el--zeichen.sp-glanz::after { content: ''; position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%); background-size: 300% 100%; animation: glanz .9s ease-out 1; } @keyframes glanz { from { background-position: 100% 0; } to { background-position: 0 0; } } /* Pixel Art: Ziegelboden, Dialogbox, LCD-Raster, Scanlines */ .deko--boden { background-color: #C84C0C; image-rendering: pixelated; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23C84C0C'/%3E%3Cpath d='M0 0h16v1H0zM0 8h16v1H0zM0 0h1v8H0zM8 8h1v8H8z' fill='%23000'/%3E%3Cpath d='M1 1h7v1H1zM9 1h7v1H9zM0 9h8v1H0zM9 9h7v1H9z' fill='%23FCBCB0'/%3E%3C/svg%3E"); background-size: 48px 48px; box-shadow: inset 0 4px 0 #000; } .deko--dialog { background: #000; box-shadow: inset 0 0 0 4px #000, inset 0 0 0 8px #FCFCFC, 0 0 0 4px #000; } .deko--lcd, .deko--scan { z-index: 4; } .deko--lcd { background-image: linear-gradient(rgba(15,56,15,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(15,56,15,.09) 1px, transparent 1px); background-size: 4px 4px; } .deko--scan { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.42) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); } /* ===== Zeitstrahl-Stile ===== */ /* Jugendstil: Bogen, Heiligenschein, Ranken, Goldmosaik */ .deko--jbogen { background: var(--k1, #F2E8CF); border: 3px solid var(--dc); border-radius: 9999px 9999px 6px 6px; } .deko--jbogen i { position: absolute; inset: 10px; border: 1px solid var(--dc); border-radius: inherit; } .deko--nimbus .n0 { fill: var(--k1); } .deko--nimbus .n1 { fill: none; stroke: var(--dc); stroke-width: .8; } .deko--nimbus .n2 { fill: none; stroke: var(--dc); stroke-width: 1.8; stroke-dasharray: .1 2.4; stroke-linecap: round; } .deko--nimbus .n3 { fill: var(--k2, var(--dc)); opacity: .55; } .deko--nimbus .n4 { stroke: var(--dc); stroke-width: .5; } .deko--nimbus .n5 { fill: var(--k1); stroke: var(--dc); stroke-width: .4; } .deko--nimbus.an svg { animation: drehen 90s linear infinite; } @keyframes drehen { to { rotate: 360deg; } } .deko--ranke .rl { fill: none; stroke: var(--dc); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2600; stroke-dashoffset: 2600; } .deko--ranke .rl2 { stroke-width: 1.6; } .deko--ranke .rb { fill: var(--k1); opacity: 0; transition: opacity .8s 1.6s; } .deko--ranke.an .rl { animation: zeichnen 2.4s .2s cubic-bezier(.5,.05,.3,1) forwards; } .deko--ranke.an .rl2 { animation-delay: 1s; } .deko--ranke.an .rb { opacity: .9; } /* Konstruktivismus */ .deko--kspalt, .deko--kbalken { background: var(--dc); } .deko--kkreis { background: var(--dc); border-radius: 50%; } .deko--keil polygon, .deko--megafon .m1 { fill: var(--dc); } .deko--megafon .m2 { fill: var(--k1); } .deko--kring { border: 2px solid var(--dc); border-radius: 50%; } /* Bauhaus */ .deko--bkreis { background: var(--dc); border-radius: 50%; } .deko--bquadrat, .deko--bstab, .deko--bstab2, .deko--bband { background: var(--dc); } .deko--bdreieck { background: var(--dc); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .deko--klimt { overflow: hidden; } .deko--bfenster { background: linear-gradient(160deg, #39414A, #1E2226 55%, #30383F); } .deko--bfenster::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(236,232,223,.32) 0 2px, transparent 2px 8.33%), repeating-linear-gradient(0deg, rgba(236,232,223,.32) 0 2px, transparent 2px 7.5%); } .deko--bfenster i { position: absolute; inset: 0; background: radial-gradient(ellipse 30% 22% at 72% 38%, rgba(242,194,0,.16), transparent 70%), radial-gradient(ellipse 22% 30% at 18% 78%, rgba(160,190,220,.12), transparent 70%); } /* Art déco */ .deko--drahmen b { position: absolute; inset: 0; border: 1.5px solid var(--dc); } .deko--drahmen s { position: absolute; inset: 9px; border: 1px solid var(--dc); opacity: .7; } .deko--drahmen i { position: absolute; width: 44px; height: 44px; background: var(--k1, transparent); } .deko--drahmen i svg path { fill: none; stroke: var(--dc); stroke-width: 1.5; } .deko--drahmen .dd { fill: var(--dc); stroke: none; } .deko--drahmen .lo { left: -1px; top: -1px; } .deko--drahmen .ro { right: -1px; top: -1px; transform: scaleX(-1); } .deko--drahmen .lu { left: -1px; bottom: -1px; transform: scaleY(-1); } .deko--drahmen .ru { right: -1px; bottom: -1px; transform: scale(-1); } .deko--facher { transform-origin: 50% 100% !important; } .deko--facher .f0 { fill: var(--dc); opacity: .06; } .deko--facher .f1 { fill: var(--dc); opacity: .16; } .deko--facher .f2, .deko--facher .f3 { fill: none; stroke: var(--dc); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .deko--dzier path { fill: none; stroke: var(--dc); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .deko--dzier .dd { fill: var(--dc); stroke: none; } .deko--treppe polygon { fill: var(--dc); } .deko--treppe .t1 { fill: none; stroke: var(--k1); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .7; } .deko--dverlauf { background: linear-gradient(to bottom, var(--k1, #000) 0%, var(--k2, #000) 55%, var(--k3, #000) 100%); } /* Viktorianisch: Abzeichen */ .deko--abzeichen .a0 { fill: var(--k2); stroke: var(--dc); stroke-width: 3; } .deko--abzeichen .a1 { fill: none; stroke: var(--dc); stroke-width: 5; stroke-dasharray: 3 2.2; } .deko--abzeichen .a2 { fill: none; stroke: var(--dc); stroke-width: 1.2; } .deko--abzeichen .at { font: 400 13.5px 'Rye', Georgia, serif; letter-spacing: 3px; fill: var(--k1); } .deko--abzeichen .as { fill: var(--k1); } /* Spiele */ .ju-bluete { filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); } .ko-linie line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 6 5; } .ko-linie circle { fill: none; stroke: currentColor; stroke-width: 1.5; } .ko-keil polygon { fill: currentColor; } .ko-wort { font-family: 'Russo One', sans-serif; line-height: 1; white-space: nowrap; letter-spacing: .02em; } .bh-kreis { border-radius: 50%; } .bh-dreieck { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .ad-strahl { opacity: 0; mix-blend-mode: screen; } .ad-facher line, .ad-facher path { fill: none; stroke: #E9C46A; stroke-width: 1.4; vector-effect: non-scaling-stroke; } .ad-facher { filter: drop-shadow(0 0 6px rgba(233,196,106,.5)); } .atlas__buehne[data-spiel='konstruktivismus'] { cursor: crosshair; } .atlas__buehne[data-spiel='bauhaus'] { cursor: none; } .atlas__buehne[data-spiel='artdeco'] { cursor: pointer; } .atlas__buehne[data-spiel='jugendstil'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 28 C 10 20, 16 18, 26 6' fill='none' stroke='%235E6B3F' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M14 18 C 12 12, 18 9, 21 10 C 21 14, 18 18, 14 18Z' fill='%238A9A5B'/%3E%3Ccircle cx='26' cy='6' r='3.5' fill='%23C98B7B'/%3E%3C/svg%3E") 4 28, pointer; } /* Psychedelic */ .deko--psywellen { background: repeating-radial-gradient(circle at 50% 36%, var(--k1, #FF7A00) 0 26px, var(--k2, #FFA31A) 26px 52px); filter: url(#atlas-schmelz-gross) hue-rotate(var(--farbdreh)); } .deko--blumen, .deko--opart { filter: hue-rotate(var(--farbdreh)); } .atlas__buehne[data-spiel='psychedelic'] .el--zeichen .psy { filter: hue-rotate(var(--farbdreh)); } .ps-ring { width: 70vmin; height: 70vmin; border: 10px solid; border-radius: 50%; filter: url(#atlas-schmelz); } /* Bohemian */ .deko--makramee .mst { stroke: #8C6A4A; stroke-width: 5; stroke-linecap: round; } .deko--makramee .mf { fill: none; stroke: var(--dc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .deko--makramee .mk circle { fill: var(--k1); } .deko--makramee.an svg { animation: pendeln 7s ease-in-out infinite alternate; transform-origin: 50% 0; } @keyframes pendeln { from { rotate: -1.2deg; } to { rotate: 1.2deg; } } .deko--pampas .ps { fill: none; stroke: #A88A64; stroke-width: 1.4; } .deko--pampas .pf { stroke: var(--dc); stroke-width: 1.6; stroke-linecap: round; opacity: .8; } .deko--pampas.an svg { animation: pendeln 5s ease-in-out infinite alternate; transform-origin: 20% 100%; } .deko--regenbogen path { fill: none; stroke-width: 19; } .deko--regenbogen .rg0 { stroke: var(--dc); } .deko--regenbogen .rg1 { stroke: var(--k1); } .deko--regenbogen .rg2 { stroke: var(--k2); } .deko--regenbogen .rg3 { stroke: var(--k3); } .deko--kilim { box-shadow: 0 6px 0 rgba(0,0,0,.15); } .el--zeichen.sp-pendel svg { animation: pendel2 2.4s ease-in-out infinite alternate; transform-origin: 50% -40%; } @keyframes pendel2 { from { rotate: -7deg; } to { rotate: 7deg; } } .bo-ding { filter: drop-shadow(2px 4px 3px rgba(80,50,30,.2)); } /* Memphis */ .deko--mraster { background-image: radial-gradient(circle, var(--k1, #111) 26%, transparent 29%); background-size: 22px 22px; } .deko--mhalb { background: var(--dc); border-radius: 9999px 9999px 0 0; border: 3px solid #111; border-bottom: 0; } .deko--mdreieck { background: repeating-linear-gradient(-45deg, var(--dc) 0 9px, #111 9px 12px); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .deko--mkreis { border-radius: 50%; border: 4px solid #111; background: repeating-linear-gradient(0deg, #111 0 7px, var(--dc) 7px 18px); } .deko--squiggle path, .deko--zickzack path { fill: none; stroke: var(--dc); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .me-form { filter: drop-shadow(5px 5px 0 rgba(17,17,17,.9)); } /* Grunge */ .deko--kopiekorn { mix-blend-mode: multiply; z-index: 4; } .deko--fleck .fl1 { fill: none; stroke: var(--dc); stroke-width: 3; } .deko--fleck .fl2 { fill: var(--dc); opacity: .18; stroke: var(--dc); stroke-width: 1.2; } .deko--fleck .fl3 { fill: none; stroke: var(--dc); stroke-width: 1.6; opacity: .7; } .deko--fleck .fl4 { fill: var(--dc); } .deko--xerox { box-shadow: inset 0 0 90px rgba(0,0,0,.55), inset 0 0 18px rgba(0,0,0,.6); } .deko--xerox i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 6%, transparent 94%, rgba(0,0,0,.4)); } .deko--xerox svg { position: absolute; inset: 0; mix-blend-mode: multiply; } .deko--kratzer path { stroke: var(--dc); } .atlas__buehne.kopierblitz::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #FFF; mix-blend-mode: difference; animation: kopierblitz .42s steps(2) 1; } @keyframes kopierblitz { 0% { opacity: .9; } 50% { opacity: .4; } 100% { opacity: 0; } } .atlas__buehne[data-spiel='psychedelic'], .atlas__buehne[data-spiel='memphis'] { cursor: pointer; } .atlas__buehne[data-spiel='bohemian'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 28 C 12 18, 18 10, 28 4' stroke='%238C6A4A' stroke-width='1.6' fill='none'/%3E%3Cpath d='M28 4 C 30 12, 22 22, 12 22 C 14 14, 20 6, 28 4Z' fill='%23C8643B' opacity='.85'/%3E%3C/svg%3E") 6 28, pointer; } .atlas__buehne[data-spiel='grunge'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M7 12 H23 V24 C23 28 20 30 15 30 C10 30 7 28 7 24 Z' fill='%23F1F0EC' stroke='%23111' stroke-width='1.6'/%3E%3Cpath d='M23 15 C 28 15, 28 22, 23 22' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3Cpath d='M12 9 C 10 6, 14 5, 12 2 M17 9 C 15 6, 19 5, 17 2' fill='none' stroke='%23111' stroke-width='1.2'/%3E%3C/svg%3E") 15 20, pointer; } /* Skeuomorphismus */ .deko--leder { background: radial-gradient(ellipse at 30% 20%, #87603D, #5E3F24 60%, #4A3019); } .deko--naht { border: 2px dashed rgba(240,221,190,.55); border-radius: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(0,0,0,.35); } .deko--notiz { background: #FDF5B4; border-radius: 3px 3px 6px 6px; box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 40px rgba(180,150,60,.15); background-image: linear-gradient(90deg, transparent 9%, rgba(224,69,58,.45) 9%, rgba(224,69,58,.45) calc(9% + 2px), transparent calc(9% + 2px)), repeating-linear-gradient(to bottom, transparent 0 26px, rgba(60,110,180,.32) 26px 27px); } .deko--notiz i { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(#8E2A1E, #6E1D14); border-radius: 3px 3px 0 0; box-shadow: 0 2px 0 rgba(0,0,0,.25); } .deko--nadelstreifen { background: repeating-linear-gradient(to bottom, #F0F0F0 0 2px, #E3E3E3 2px 4px); } .deko--aquafenster { background: #F6F6F6; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.18); overflow: hidden; } .aq-titel { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: linear-gradient(#F4F4F4, #CFCFCF); border-bottom: 1px solid #9E9E9E; font: 600 13px/1 'Inter', sans-serif; color: #333; } .aq-titel span { flex: 1; text-align: center; margin-right: 60px; } .aq-titel i { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #FFB7B0, #E0372B 60%, #9E1F16); box-shadow: inset 0 -1px 2px rgba(0,0,0,.3); } .aq-titel i:nth-child(2) { background: radial-gradient(circle at 50% 30%, #FFE7A6, #F0A21C 60%, #B26A06); } .aq-titel i:nth-child(3) { background: radial-gradient(circle at 50% 30%, #C7F7B4, #3FB52B 60%, #22790F); } .deko--gelknopf { border-radius: 999px; background: linear-gradient(#7CC8FF, #1E6FD9 52%, #0B4FB3 53%, #3E9BFF); box-shadow: 0 6px 12px rgba(11,79,179,.4), inset 0 -2px 6px rgba(255,255,255,.4), 0 0 0 1px #0A3F8F; } .deko--gelknopf::after { content: ''; position: absolute; left: 8%; right: 8%; top: 6%; height: 42%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.15)); } .el--zeichen .gls ellipse:first-child { transform: translateX(var(--gx, 0px)); transition: transform .5s cubic-bezier(.22,1,.36,1); } .deko--metall { background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.05) 1px 2px, transparent 2px 3px), linear-gradient(100deg, #A9ACB1, #D9DBDE 30%, #ADB0B5 55%, #E1E3E6 78%, #A4A7AC); } .deko--schrauben i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F3F4F5, #8E9196 70%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6); } .deko--schrauben i::after { content: ''; position: absolute; left: 3px; right: 3px; top: 8px; height: 2px; background: #55585D; transform: rotate(35deg); } .deko--schrauben i:nth-child(1) { left: 0; top: 0; } .deko--schrauben i:nth-child(2) { right: 0; top: 0; } .deko--schrauben i:nth-child(3) { left: 0; bottom: 0; } .deko--schrauben i:nth-child(4) { right: 0; bottom: 0; } .deko--drehknopf line { stroke: #4A4D52; stroke-width: 1; } .deko--drehknopf b { position: absolute; inset: 13%; border-radius: 50%; background: conic-gradient(from 20deg, #D7D9DC, #9EA1A6, #EEF0F2, #A2A5AA, #D7D9DC, #8F9297, #E8EAEC, #D7D9DC); box-shadow: 0 14px 24px rgba(0,0,0,.35), inset 0 2px 1px rgba(255,255,255,.8), inset 0 -3px 4px rgba(0,0,0,.25); } .deko--drehknopf b::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 45% 35%, #E6E8EA, #B8BBBF); box-shadow: inset 0 2px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.7); } .sk-tropfen i { position: absolute; inset: 0; border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 10%, rgba(140,200,255,.85) 22%, rgba(30,111,217,.85) 70%, rgba(11,79,179,.95)); box-shadow: 0 8px 14px rgba(11,79,179,.35), inset 0 -4px 8px rgba(0,30,90,.35); } /* Vaporwave */ .deko--schach { overflow: hidden; perspective: 380px; } .deko--schach i { position: absolute; left: -60%; right: -60%; top: 0; height: 220%; transform-origin: 50% 0; transform: rotateX(62deg); background: conic-gradient(#FFFFFF 25%, #1A0B2E 0 50%, #FFFFFF 0 75%, #1A0B2E 0) 0 0 / 80px 80px; } .deko--schach.an i { animation: schachlauf 6s linear infinite; } @keyframes schachlauf { to { background-position: 0 160px; } } .deko--japan span { display: block; writing-mode: vertical-rl; font: 700 clamp(18px, 2.2vw, 34px)/1 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'MS Gothic', sans-serif; color: var(--dc); letter-spacing: .25em; text-shadow: 2px 2px 0 rgba(255,113,206,.7); } .deko--vpsonne { border-radius: 50%; background: linear-gradient(#FFFB96, #FF9A3C 45%, #FF3C7E); -webkit-mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 83%, #000 83% 88%, transparent 88% 95%, #000 95%); mask: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 83%, #000 83% 88%, transparent 88% 95%, #000 95%); filter: drop-shadow(0 0 30px rgba(255,60,126,.6)); } .deko--vpgitter { overflow: hidden; perspective: 300px; background: linear-gradient(#2A0F4A, #1A0B2E); } .deko--vpgitter i { position: absolute; left: -80%; right: -80%; top: 0; height: 260%; transform-origin: 50% 0; transform: rotateX(70deg); background-image: linear-gradient(#FF71CE 2px, transparent 2px), linear-gradient(90deg, #01CDFE 2px, transparent 2px); background-size: 60px 60px; filter: drop-shadow(0 0 4px #FF71CE); } .deko--vpgitter.an i { animation: gitterlauf 3s linear infinite; } @keyframes gitterlauf { to { background-position: 0 60px, 0 0; } } .deko--taskleiste { background: #C0C0C0; box-shadow: inset 0 1px #FFFFFF, inset 0 2px #DFDFDF; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font: 700 13px/1 Tahoma, Verdana, sans-serif; color: #000; overflow: hidden; } .deko--taskleiste b, .deko--taskleiste span { display: flex; align-items: center; height: 76%; padding: 0 12px; white-space: nowrap; } .deko--taskleiste b { box-shadow: inset -1px -1px #0A0A0A, inset 1px 1px #FFFFFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF; } .deko--taskleiste span { font-weight: 400; box-shadow: inset 1px 1px #808080, inset -1px -1px #FFFFFF; } .el--zeichen.sp-vhs svg { animation: vhs .18s steps(2) infinite; } @keyframes vhs { 0% { translate: -2px 0; filter: drop-shadow(3px 0 0 rgba(1,205,254,.8)) drop-shadow(-3px 0 0 rgba(255,113,206,.8)); } 100% { translate: 2px 0; filter: drop-shadow(-3px 0 0 rgba(1,205,254,.8)) drop-shadow(3px 0 0 rgba(255,113,206,.8)); } } .vw-ding { filter: drop-shadow(0 0 10px rgba(255,113,206,.55)); } /* Flat Design */ .deko--appbar { background: var(--dc); box-shadow: 0 2px 6px rgba(0,0,0,.25); } .deko--matkarte, .deko--matkarte2 { background: #FFFFFF; border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); overflow: hidden; } .deko--matkarte2::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%; background: var(--k1, #C5CAE9); } .deko--fab { background: var(--dc); border-radius: 50%; box-shadow: 0 6px 10px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.2); } .deko--fab i::before, .deko--fab i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 36%; height: 3px; margin: -1.5px 0 0 -18%; background: #FFFFFF; } .deko--fab i::after { transform: rotate(90deg); } .fl-form { box-shadow: none; } /* Neumorphismus: Licht aus --nx/--ny */ .deko--nmkarte, .deko--nmknopf, .deko--nmregler, .deko--nmschalter, .deko--nmmulde { --nl: rgba(255,255,255,.95); --nd: rgba(163,177,198,.85); background: #E3E8EF; } .deko--nmkarte { border-radius: 32px; box-shadow: calc(var(--nx, -1) * 16px) calc(var(--ny, -1) * 16px) 32px var(--nl), calc(var(--nx, -1) * -16px) calc(var(--ny, -1) * -16px) 32px var(--nd); } .deko--nmknopf { border-radius: 50%; box-shadow: calc(var(--nx, -1) * 14px) calc(var(--ny, -1) * 14px) 28px var(--nl), calc(var(--nx, -1) * -14px) calc(var(--ny, -1) * -14px) 28px var(--nd); background: linear-gradient(calc(135deg + var(--nx, -1) * 0deg), #EEF2F7, #D6DDE7); } .deko--nmregler { border-radius: 999px; box-shadow: inset calc(var(--nx, -1) * -5px) calc(var(--ny, -1) * -5px) 10px var(--nd), inset calc(var(--nx, -1) * 5px) calc(var(--ny, -1) * 5px) 10px var(--nl); } .deko--nmregler i { position: absolute; left: 4%; top: 18%; bottom: 18%; width: 58%; border-radius: 999px; background: linear-gradient(90deg, #8FB8E8, #34A7B9); } .deko--nmregler i::after { content: ''; position: absolute; right: -14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #E3E8EF; box-shadow: calc(var(--nx, -1) * 5px) calc(var(--ny, -1) * 5px) 10px var(--nl), calc(var(--nx, -1) * -5px) calc(var(--ny, -1) * -5px) 10px var(--nd); } .deko--nmschalter { border-radius: 999px; box-shadow: inset calc(var(--nx, -1) * -4px) calc(var(--ny, -1) * -4px) 8px var(--nd), inset calc(var(--nx, -1) * 4px) calc(var(--ny, -1) * 4px) 8px var(--nl); } .deko--nmschalter i { position: absolute; right: 8%; top: 14%; bottom: 14%; aspect-ratio: 1; border-radius: 50%; background: #34A7B9; box-shadow: 0 2px 6px rgba(52,167,185,.5); } .deko--nmmulde { background: #DDE3EB; border-radius: 34px; box-shadow: inset calc(var(--nx, -1) * -12px) calc(var(--ny, -1) * -12px) 24px rgba(160,174,196,.9), inset calc(var(--nx, -1) * 12px) calc(var(--ny, -1) * 12px) 24px rgba(255,255,255,.9); } .nm-delle { border-radius: 50%; background: #E3E8EF; box-shadow: inset calc(var(--nx, -1) * -6px) calc(var(--ny, -1) * -6px) 12px rgba(163,177,198,.95), inset calc(var(--nx, -1) * 6px) calc(var(--ny, -1) * 6px) 12px #FFFFFF; mix-blend-mode: multiply; } /* Brutalismus */ .deko--htmlknopf { display: flex; align-items: center; justify-content: center; background: #EFEFEF; border: 2px outset #DDD; font: 400 14px Arial, sans-serif; color: #000; } .deko--brbox { border: var(--bw, 1px) solid var(--dc); } .deko--laufschrift { background: var(--dc); overflow: hidden; display: flex; align-items: center; } .deko--laufschrift span { white-space: nowrap; font: 700 clamp(14px, 1.4vw, 22px)/1 'Times New Roman', serif; color: var(--lc, #FFFFFF); padding-left: 100%; } .deko--laufschrift.an span { animation: laufen 18s linear infinite; } @keyframes laufen { to { transform: translateX(-100%); } } .deko--beton { background-color: #A3A29E; background-image: linear-gradient(rgba(0,0,0,.12) 2px, transparent 2px), linear-gradient(90deg, rgba(0,0,0,.12) 2px, transparent 2px), radial-gradient(circle at 20% 30%, rgba(0,0,0,.18) 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(0,0,0,.15) 3px, transparent 4px); background-size: 50% 33.33%, 50% 33.33%, 140px 120px, 220px 180px; } .br-info { font: 13px/1.2 'Times New Roman', serif; background: #FFFFE1; border: 1px solid #000; padding: 2px 5px; color: #000; white-space: nowrap; } .br-teil { font-family: 'Times New Roman', serif; color: #000; white-space: nowrap; } .br-teil a { color: #0000EE; text-decoration: underline; } .br-teil h1 { margin: 0; font-size: 2.2em; } .br-teil hr { width: 30vw; margin: 0; border: 1px inset #999; } .br-teil p { margin: 0; } .br-teil .br-fehler { color: #FF0000; font-weight: 700; } .br-teil button, .br-teil select { font-size: inherit; } .br-teil marquee { width: 10em; } .atlas__buehne[data-spiel='brutalismus'] { cursor: default; } .atlas__buehne[data-spiel='flat'], .atlas__buehne[data-spiel='neumorphismus'], .atlas__buehne[data-spiel='vaporwave'], .atlas__buehne[data-spiel='skeuomorphismus'] { cursor: pointer; } /* 3D & Morph */ .el--zeichen { --tx: 0; --ty: 0; } .atlas__buehne[data-spiel='morph3d'] .el--zeichen svg { transform: perspective(600px) rotateY(calc(var(--tx) * 28deg)) rotateX(calc(var(--ty) * -28deg)); } .deko--boden3d { border-radius: 50%; background: radial-gradient(ellipse at center, rgba(90,30,15,.35), transparent 70%); filter: blur(6px); } .deko--morphblob i { position: absolute; inset: 0; background: conic-gradient(from 40deg, #C6FFDD, #FBD786, #F7797D, #9D8DF1, #6DD5ED, #C6FFDD); filter: blur(2px) saturate(1.1); opacity: .9; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; box-shadow: inset -20px -30px 60px rgba(0,0,0,.35), inset 20px 20px 60px rgba(255,255,255,.4); } .deko--morphblob.an i { animation: blobform 9s ease-in-out infinite alternate, drehen 24s linear infinite; } @keyframes blobform { 0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; } 50% { border-radius: 63% 37% 42% 58% / 56% 61% 39% 44%; } 100% { border-radius: 37% 63% 56% 44% / 48% 38% 62% 52%; } } .deko--blobs3 i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #FFFFFF, #C9C0FF 30%, #8F80FF 70%, #6A5AE0); box-shadow: 0 30px 50px rgba(91,75,219,.25); } .deko--blobs3 i:nth-child(1) { left: 6%; top: 8%; width: 46%; aspect-ratio: 1; } .deko--blobs3 i:nth-child(2) { right: 0; top: 30%; width: 34%; aspect-ratio: 1; background: radial-gradient(circle at 32% 28%, #FFFFFF, #FFC9E8 30%, #FF8FC8 70%, #E05AA0); } .deko--blobs3 i:nth-child(3) { left: 22%; bottom: 4%; width: 40%; aspect-ratio: 1; background: radial-gradient(circle at 32% 28%, #FFFFFF, #BFF5FF 30%, #6DD5ED 70%, #3AA0C8); } .deko--blobs3.an i { animation: blobform 8s ease-in-out infinite alternate; } .deko--blobs3.an i:nth-child(2) { animation-duration: 11s; animation-delay: -4s; } .deko--blobs3.an i:nth-child(3) { animation-duration: 9.5s; animation-delay: -2s; } .m3-blase i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0 8%, transparent 20%), conic-gradient(from 90deg, rgba(198,255,221,.75), rgba(251,215,134,.75), rgba(247,121,125,.75), rgba(157,141,241,.75), rgba(198,255,221,.75)); box-shadow: inset 0 0 20px rgba(255,255,255,.6); animation: blobform 3s ease-in-out infinite alternate; } /* Vektor & Linie */ .deko--artboard { background: #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,.4); } .deko--artboard span { position: absolute; left: 0; top: -22px; font: 500 12px/1 'Inter', sans-serif; color: rgba(255,255,255,.75); } .deko--bbox { border: 1px solid #1E7BFF; } .deko--bbox i { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; background: #FFFFFF; border: 1px solid #1E7BFF; } .deko--bbox i:nth-child(1) { left: 0; top: 0; } .deko--bbox i:nth-child(2) { left: 50%; top: 0; } .deko--bbox i:nth-child(3) { left: 100%; top: 0; } .deko--bbox i:nth-child(4) { left: 100%; top: 50%; } .deko--bbox i:nth-child(5) { left: 100%; top: 100%; } .deko--bbox i:nth-child(6) { left: 50%; top: 100%; } .deko--bbox i:nth-child(7) { left: 0; top: 100%; } .deko--bbox i:nth-child(8) { left: 0; top: 50%; } .deko--linienkunst path { fill: none; stroke: var(--dc); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 5200; stroke-dashoffset: 5200; } .deko--linienkunst.an path { animation: zeichnen 3.4s .2s cubic-bezier(.45,.05,.3,1) forwards; } .deko--isogitter { background-image: repeating-linear-gradient(30deg, rgba(28,63,170,.1) 0 1px, transparent 1px 34px), repeating-linear-gradient(150deg, rgba(28,63,170,.1) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(28,63,170,.07) 0 1px, transparent 1px 58.9px); } .deko--isowuerfel path { fill: none; stroke: var(--dc); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .vk-stift path, .vk-stift line { fill: none; stroke: currentColor; stroke-width: 1.6; } .vk-stift .vk-vor { stroke-dasharray: 5 4; opacity: .7; } .vk-stift rect { fill: #FFFFFF; stroke: currentColor; stroke-width: 1.4; } .vk-stift rect.an { fill: currentColor; transform-box: fill-box; } .vk-stift .vk-griffe line { stroke-width: 1; } .vk-stift .vk-griffe circle { fill: currentColor; } /* Risografie */ .deko--risoformen svg > * { mix-blend-mode: multiply; } .deko--risoformen .r1 { fill: #FF48B0; opacity: .9; } .deko--risoformen .r2 { fill: #0078BF; opacity: .85; } .deko--halbtonverlauf circle { fill: var(--dc); } .deko--halbtonverlauf { mix-blend-mode: multiply; } .ri-punkt { border-radius: 50%; mix-blend-mode: multiply; opacity: .85; } .ri-stempel g { mix-blend-mode: multiply; } .ri-stempel { opacity: .92; } /* Maximalismus */ .deko--goldrahmen { background: var(--k1, #F7C6D9); border: 10px solid #C9A13B; border-image: linear-gradient(135deg, #FBE7A1, #B8862B 30%, #FFF0B8 50%, #8F6A1E 75%, #E9C46A) 1; box-shadow: 0 0 0 3px #3A2408, 0 20px 40px rgba(0,0,0,.45); } .deko--goldrahmen i { position: absolute; inset: 8px; border: 1.5px solid #C9A13B; } .deko--clash i { position: absolute; top: 0; bottom: 0; } .deko--clash i:nth-child(1) { left: 0; width: 40%; background: repeating-linear-gradient(90deg, #FF4F9A 0 26px, #FFE14D 26px 52px); } .deko--clash i:nth-child(2) { left: 40%; width: 30%; background: conic-gradient(#111 25%, #FFFFFF 0 50%, #111 0 75%, #FFFFFF 0) 0 0 / 60px 60px; } .deko--clash i:nth-child(3) { left: 70%; width: 30%; background-color: #E8A33A; background-image: radial-gradient(ellipse 12px 9px at 20px 20px, #3A2408 40%, transparent 42%), radial-gradient(ellipse 9px 12px at 55px 48px, #3A2408 40%, transparent 42%), radial-gradient(ellipse 10px 7px at 30px 62px, #3A2408 40%, transparent 42%); background-size: 70px 70px; } .mx-sticker { filter: drop-shadow(3px 4px 0 rgba(0,0,0,.35)); } /* Futuristisch */ .deko--hudring svg { overflow: visible; } .deko--hudring line, .deko--hudring circle, .deko--hudring path { fill: none; stroke: var(--dc); vector-effect: non-scaling-stroke; } .deko--hudring .h1 line { stroke-width: 1; opacity: .7; } .deko--hudring .h2 { stroke-width: 1; stroke-dasharray: 2 4; } .deko--hudring .h3 { stroke-width: .8; opacity: .4; } .deko--hudring .h4 { stroke-width: .6; opacity: .3; } .deko--hudring .h5 { stroke-width: 2.4; } .deko--hudring .h6 { fill: var(--dc); stroke: none; font: 300 3.6px 'Exo 2', sans-serif; letter-spacing: .4px; } .deko--hudring.an .h1 { animation: drehen 40s linear infinite; } .deko--hudring.an .h5 { animation: drehen 9s linear infinite reverse; transform-origin: 0 0; } .deko--hudring.an .h2 { animation: drehen 20s linear infinite; transform-origin: 0 0; } .deko--hudring .h1 { transform-origin: 0 0; } .deko--hudring { filter: drop-shadow(0 0 6px rgba(127,231,255,.35)); } .deko--hudlinien path { fill: none; stroke: var(--dc); stroke-width: 1; vector-effect: non-scaling-stroke; } .deko--hudlinien .d { stroke-dasharray: 2 8; opacity: .5; } .deko--horizont { border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, #1B2A4E, #070B18 60%); box-shadow: 0 -2px 0 rgba(159,201,255,.9), 0 -12px 40px rgba(80,150,255,.55), 0 -40px 120px rgba(60,110,255,.35); } .deko--weisskugel { border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFFFFF, #E9EDF2 45%, #C9D0DA 85%); box-shadow: 0 40px 70px rgba(30,40,60,.18), inset -20px -30px 60px rgba(150,160,180,.25); } .fu-visier { width: 92px; height: 92px; margin: -46px 0 0 -46px; opacity: 0; } .fu-visier circle, .fu-visier path { fill: none; stroke: currentColor; stroke-width: 1.2; } .fu-visier .b { stroke-dasharray: 4 6; animation: drehen 6s linear infinite; transform-origin: 0 0; } .fu-visier span { position: absolute; left: 100%; top: 6px; margin-left: 6px; font: 300 11px/1 'Exo 2', sans-serif; letter-spacing: .14em; white-space: nowrap; } .fu-puls { width: 50vmin; height: 50vmin; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 0 0 20px currentColor, inset 0 0 20px currentColor; } .fu-scan { width: 100%; height: 1.5px; background: currentColor; box-shadow: 0 0 12px currentColor; transform-origin: var(--ox, 50%) 50%; } /* Partikel */ .deko--pfeld circle, .deko--staub circle { fill: var(--dc); } .deko--pfeld.an .pg0 { animation: treiben 26s linear infinite alternate; } .deko--pfeld.an .pg1 { animation: treiben 34s linear infinite alternate-reverse; } .deko--pfeld.an .pg2 { animation: treiben 44s linear infinite alternate; } .deko--staub.an .pg1 { animation: treiben 50s linear infinite alternate; } @keyframes treiben { from { translate: -30px 10px; } to { translate: 40px -30px; } } .deko--sternbild .sl path { fill: none; stroke: var(--dc); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; } .deko--sternbild .sp2 circle { fill: #FFF6D8; } .deko--sternbild .sl path { stroke-dasharray: 1400; stroke-dashoffset: 1400; } .deko--sternbild.an .sl path { animation: zeichnen 3s .3s ease-out forwards; } .pt-ring { width: 30vmin; height: 30vmin; border: 1px solid; border-radius: 50%; } .atlas__buehne[data-spiel='futuristisch'] { cursor: none; } .atlas__buehne[data-spiel='partikel'], .atlas__buehne[data-spiel='morph3d'], .atlas__buehne[data-spiel='maximalismus'], .atlas__buehne[data-spiel='risografie'] { cursor: pointer; } .atlas__buehne[data-spiel='vektor'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 4 L14 26 L17 19 L26 16 Z' fill='%23FFFFFF' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%23111'/%3E%3Cpath d='M17 19 L24 26' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") 4 4, crosshair; } /* De Stijl */ .deko--mondrian, .deko--mondrianh { background: #F4F1E8; --lw: max(5px, 1.05vmin); } .ds-z, .ds-l { position: absolute; } .ds-l { background: #111; } .ds-l.v { width: var(--lw); margin-left: calc(var(--lw) / -2); transform-origin: 50% 0; } .ds-l.h { height: var(--lw); margin-top: calc(var(--lw) / -2); transform-origin: 0 50%; } .deko--mondrian.an .ds-z, .deko--mondrianh.an .ds-z { animation: dsfeld .7s calc(.25s + var(--i) * .08s) both cubic-bezier(.2,.7,.2,1); } .deko--mondrian.an .ds-l.v, .deko--mondrianh.an .ds-l.v { animation: dslinieV .8s calc(var(--i) * .07s) both cubic-bezier(.7,0,.2,1); } .deko--mondrian.an .ds-l.h, .deko--mondrianh.an .ds-l.h { animation: dslinieH .8s calc(var(--i) * .07s) both cubic-bezier(.7,0,.2,1); } @keyframes dsfeld { from { opacity: 0; transform: scale(.6); } } @keyframes dslinieV { from { transform: scaleY(0); } } @keyframes dslinieH { from { transform: scaleX(0); } } .deko--gegenkomp { box-shadow: 0 20px 50px rgba(0,0,0,.18); } .deko--rietveld svg { filter: drop-shadow(0 24px 30px rgba(0,0,0,.5)); } .deko--rietveld.an .rv-lehne { animation: dsfeld .9s .5s both cubic-bezier(.2,.7,.2,1); transform-box: fill-box; transform-origin: 50% 100%; } .deko--rietveld.an .rv-sitz { animation: dsfeld .9s .7s both cubic-bezier(.2,.7,.2,1); transform-box: fill-box; transform-origin: 0 50%; } .ds-fuehrung { opacity: 0; } .ds-fuehrung i { position: absolute; left: 0; top: 0; background: rgba(17,17,17,.35); } .ds-fuehrung i:nth-child(1) { width: 1px; height: 100%; } .ds-fuehrung i:nth-child(2) { height: 1px; width: 100%; } .ds-feld { transform-origin: 50% 50%; } .ds-linie { background: #111; } .atlas__buehne[data-spiel='destijl'] { cursor: crosshair; } /* Futurismus */ .deko--fuworte text, .deko--fuworteh text { paint-order: stroke; } .deko--fuworte .w, .deko--fuworteh .w { opacity: 0; } .deko--fuworte.an .w, .deko--fuworteh.an .w { animation: fuwort .5s calc(.2s + var(--i) * .07s) both cubic-bezier(.2,1.4,.3,1); transform-box: fill-box; transform-origin: 50% 50%; } @keyframes fuwort { from { opacity: 0; transform: translateX(-40px) scale(.4); } to { opacity: 1; } } .deko--futempo { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.25) 38%, #000 62%); mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.25) 38%, #000 62%); } .deko--futempo path { fill: none; stroke: #E7DCC6; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .4; } .deko--futempo.an .ft { animation: futempo 2.4s ease-in-out infinite alternate; } @keyframes futempo { from { transform: translateX(-2%); } to { transform: translateX(2%); } } .deko--zahnraeder .zr { transform-box: fill-box; transform-origin: 50% 50%; } .deko--zahnraeder.an .z1 { animation: drehen 18s linear infinite; } .deko--zahnraeder.an .z2 { animation: drehen 11.3s linear infinite reverse; } .deko--zahnraeder.an .z3 { animation: drehen 8.2s linear infinite reverse; } .fu-strich { border-radius: 2px; } .fu-wort { white-space: nowrap; font-weight: 900; line-height: 1; letter-spacing: -.02em; } .atlas__buehne[data-spiel='futurismus'] { cursor: pointer; } /* Mid-Century Modern */ .deko--mcniere path, .deko--mcbumerang path { fill: var(--dc); } .deko--mcstern line { stroke: var(--dc); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; } .deko--mcstern circle, .deko--mcstern2 circle { fill: var(--dc); } .deko--mcstern2 line { stroke: var(--dc); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; } .deko--mcstern.an svg { animation: drehen 40s linear infinite; } .deko--mcstern2.an svg { animation: drehen 30s linear infinite reverse; } .deko--mcniere.an svg { animation: mcschweben 7s ease-in-out infinite alternate; } @keyframes mcschweben { from { transform: translateY(-1.5%) rotate(-1deg); } to { transform: translateY(1.5%) rotate(1.5deg); } } .deko--bassstreifen polygon { transform-box: fill-box; transform-origin: 50% 0; } .deko--bassstreifen.an polygon { animation: bassschnitt .7s both cubic-bezier(.7,0,.2,1); } .deko--bassstreifen.an polygon:nth-child(2) { animation-delay: .1s; } .deko--bassstreifen.an polygon:nth-child(3) { animation-delay: .2s; } .deko--bassstreifen.an polygon:nth-child(4) { animation-delay: .28s; } .deko--bassstreifen.an polygon:nth-child(5) { animation-delay: .36s; } .deko--bassstreifen.an polygon:nth-child(6) { animation-delay: .44s; } @keyframes bassschnitt { from { transform: scaleY(0); } } .deko--eamesbaelle .ed { fill: none; stroke: #F2E8D5; stroke-width: 2.4; stroke-linecap: round; } .deko--eamesbaelle .eb { transform-box: fill-box; transform-origin: 50% 50%; } .deko--eamesbaelle.an .eb { animation: dsfeld .6s calc(.3s + var(--i) * .05s) both cubic-bezier(.2,1.5,.4,1); } .mc-punkt { border-radius: 50%; } .atlas__buehne[data-spiel='midcentury'] { cursor: pointer; } /* New Wave */ .deko--nwraster { background-image: radial-gradient(circle, var(--dc) 34%, transparent 36%); background-size: 9px 9px; -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 90%); mask-image: linear-gradient(135deg, #000 10%, transparent 90%); } .deko--nwbalken { background: var(--dc); } .deko--nwtreppe path { fill: none; stroke: var(--dc); stroke-width: 3; vector-effect: non-scaling-stroke; } .deko--nwtreppe .d { stroke-width: 1.2; stroke-dasharray: 4 5; } .deko--nwtreppe path { stroke-dasharray: 700; stroke-dashoffset: 700; } .deko--nwtreppe.an path { animation: zeichnen 1.4s .3s ease-out forwards; } .deko--nwtreppe .d { stroke-dasharray: 4 5; stroke-dashoffset: 0; animation: none !important; } .deko--nwbuchstabe text, .deko--nwziffern text { font: 900 120px/1 'Arial Black', Arial, sans-serif; fill: none; stroke: var(--dc); stroke-width: 1.4; vector-effect: non-scaling-stroke; letter-spacing: -4px; } .deko--nwziffern .v { stroke: #E23B2E; stroke-dasharray: 3 4; } .deko--greimanverlauf { background: #F6D9E4; } .deko--greimanverlauf i { position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, #FFC2D9, transparent 48%), radial-gradient(circle at 84% 26%, #B8F2E0, transparent 46%), radial-gradient(circle at 62% 92%, #C9B8FF, transparent 52%), radial-gradient(circle at 10% 90%, #FFF0B3, transparent 40%); } .deko--greimanverlauf.an i { animation: greiman 12s ease-in-out infinite alternate; } @keyframes greiman { to { transform: scale(1.12) translate(2%, -2%); } } .deko--nwpixel { border: 2px solid var(--dc); background-image: linear-gradient(90deg, color-mix(in srgb, var(--dc) 22%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--dc) 22%, transparent) 1px, transparent 1px); background-size: 8.33% 8.33%; background-color: rgba(255,255,255,.5); } .deko--nwdreieck polygon { fill: none; stroke: var(--dc); stroke-width: 2.4; vector-effect: non-scaling-stroke; } .deko--nwdreieck .v { fill: var(--dc); opacity: .18; stroke: none; } .deko--nwkringel path { fill: none; stroke: var(--dc); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .nw-kreuz { width: 22px; height: 22px; margin: -11px 0 0 -11px; } .nw-kreuz circle, .nw-kreuz path { fill: none; stroke: currentColor; stroke-width: 1; } .nw-stapel rect { fill: currentColor; } .nw-stapel rect:nth-child(3) { fill: var(--ak); } .nw-stapel b { position: absolute; right: -10%; top: -20%; font: 900 1em/1 'Arial Black', Arial, sans-serif; color: var(--ak); opacity: .9; } .atlas__buehne[data-spiel='newwave'] { cursor: crosshair; } /* Frutiger Aero */ .deko--aerohimmel { background: linear-gradient(180deg, #1C6CCF 0%, #3D9BE8 34%, #9ED8FA 62%, #E6F8FF 100%); overflow: hidden; } .deko--aerohimmel i { position: absolute; border-radius: 50%; } .deko--aerohimmel i:nth-child(1) { right: 4%; top: -18%; width: 46%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,255,255,.95) 0 6%, rgba(255,250,220,.55) 16%, rgba(255,255,255,0) 60%); } .deko--aerohimmel i:nth-child(2) { left: 8%; top: 58%; width: 34%; height: 14%; background: radial-gradient(ellipse, rgba(255,255,255,.85), rgba(255,255,255,0) 70%); } .deko--aerohimmel i:nth-child(3) { left: 58%; top: 50%; width: 28%; height: 10%; background: radial-gradient(ellipse, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); } .deko--aerohimmel.an i:nth-child(2) { animation: aerowolke 30s linear infinite alternate; } .deko--aerohimmel.an i:nth-child(3) { animation: aerowolke 24s linear infinite alternate-reverse; } @keyframes aerowolke { to { translate: 18% 0; } } .deko--aerowiese { overflow: hidden; } .deko--aerowiese i { position: absolute; left: -20%; width: 140%; top: 0; height: 200%; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, #C8F27A 0, #7FD13B 18%, #3FA32A 36%, #1E6E1A 60%); box-shadow: inset 0 6px 0 rgba(255,255,255,.35); } .deko--aeroblasen i { position: absolute; border-radius: 50%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.65); background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 22%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 54%, rgba(220,248,255,.45) 72%, rgba(140,220,255,.6) 100%); } .deko--aeroblasen i:nth-child(1) { left: 6%; top: 10%; width: 22%; } .deko--aeroblasen i:nth-child(2) { left: 70%; top: 2%; width: 16%; } .deko--aeroblasen i:nth-child(3) { left: 78%; top: 56%; width: 20%; } .deko--aeroblasen i:nth-child(4) { left: 4%; top: 66%; width: 13%; } .deko--aeroblasen i:nth-child(5) { left: 40%; top: 82%; width: 9%; } .deko--aeroblasen i:nth-child(6) { left: 52%; top: 0; width: 8%; } .deko--aeroblasen i:nth-child(7) { left: 26%; top: 48%; width: 6%; } .deko--aeroblasen.an i { animation: aeroschweben 6s ease-in-out infinite alternate; } .deko--aeroblasen.an i:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; } .deko--aeroblasen.an i:nth-child(3n) { animation-duration: 5.2s; animation-delay: -3.5s; } @keyframes aeroschweben { from { translate: 0 6%; } to { translate: 0 -10%; } } .deko--aerowasser { background: linear-gradient(180deg, #34C1EA 0%, #0B78B3 42%, #053A66 100%); overflow: hidden; } .deko--aerowasser i { position: absolute; top: -10%; height: 120%; width: 9%; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 80%); transform: skewX(-18deg); transform-origin: 50% 0; } .deko--aerowasser i:nth-child(1) { left: 14%; } .deko--aerowasser i:nth-child(2) { left: 34%; width: 5%; } .deko--aerowasser i:nth-child(3) { left: 56%; width: 12%; opacity: .7; } .deko--aerowasser i:nth-child(4) { left: 80%; width: 6%; } .deko--aerowasser.an i { animation: aerostrahl 5s ease-in-out infinite alternate; } .deko--aerowasser.an i:nth-child(2n) { animation-duration: 6.5s; animation-delay: -2s; } @keyframes aerostrahl { from { opacity: .35; transform: skewX(-22deg); } to { opacity: 1; transform: skewX(-12deg); } } .deko--aeroschwung { background: radial-gradient(ellipse at 50% 110%, #0E4A4A, #061620 60%); } .deko--aeroschwung.an .as1 { animation: aerozug 9s ease-in-out infinite alternate; } .deko--aeroschwung.an .as2 { animation: aerozug 12s ease-in-out infinite alternate-reverse; } @keyframes aerozug { from { transform: translateY(-3%); } to { transform: translateY(3%); } } .deko--aeroknopf { border-radius: 50%; background: radial-gradient(circle at 50% 70%, #5CF5A8, #12A05A 46%, #05502C 86%); box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 60px rgba(70,240,150,.45), inset 0 -10px 30px rgba(0,0,0,.35); } .deko--aeroknopf i { position: absolute; left: 14%; right: 14%; top: 5%; height: 46%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.1)); } .fa-blase { border-radius: 50%; border: 1px solid rgba(255,255,255,.75); background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,0) 24%), radial-gradient(circle, rgba(255,255,255,0) 54%, rgba(220,248,255,.5) 74%, rgba(140,220,255,.65) 100%); } .fa-ring { width: 26vmin; height: 26vmin; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 20px rgba(160,230,255,.7); } .atlas__buehne[data-spiel='frutigeraero'] { cursor: pointer; } /* Neubrutalismus */ .deko--nbkarte { background: #FFFFFF; border: 3px solid #111; border-radius: 14px; box-shadow: 9px 9px 0 #111; } .deko--nbknopf { background: var(--dc); border: 3px solid #111; border-radius: 999px; box-shadow: 5px 5px 0 #111; container-type: size; display: flex; align-items: center; justify-content: center; } .deko--nbknopf span { font: 700 38cqh/1 'Space Grotesk', sans-serif; color: #111; white-space: nowrap; } .deko--nbstern .f { fill: var(--dc); } .deko--nbstern.an svg { animation: drehen 24s linear infinite; } .deko--nbgitter { background-image: linear-gradient(90deg, rgba(17,17,17,.16) 1px, transparent 1px), linear-gradient(rgba(17,17,17,.16) 1px, transparent 1px); background-size: 40px 40px; } .deko--nbtags { container-type: size; } .deko--nbtags span { position: absolute; font: 700 7cqmin/1 'Space Grotesk', sans-serif; color: #111; padding: .35em .7em; border: 3px solid #111; border-radius: .5em; box-shadow: 4px 4px 0 #111; white-space: nowrap; transform: rotate(var(--r)); } .deko--nbtags.an span { animation: nbklebe .5s both cubic-bezier(.2,1.6,.4,1); } .deko--nbtags.an span:nth-child(2) { animation-delay: .1s; } .deko--nbtags.an span:nth-child(3) { animation-delay: .2s; } .deko--nbtags.an span:nth-child(4) { animation-delay: .3s; } .deko--nbtags.an span:nth-child(5) { animation-delay: .4s; } @keyframes nbklebe { from { opacity: 0; transform: rotate(var(--r)) scale(1.6); } } .deko--nbfenster { background: #FFFFFF; border: 3px solid #111; border-radius: 12px; box-shadow: 10px 10px 0 #111; overflow: hidden; } .deko--nbfenster b { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: #FF6BB5; border-bottom: 3px solid #111; display: flex; align-items: center; gap: 7px; padding: 0 10px; } .deko--nbfenster i { width: 13px; height: 13px; border: 2.5px solid #111; border-radius: 3px; background: #FFE14D; } .deko--nbfenster i:nth-child(2) { background: #5CE1A0; } .deko--nbfenster i:nth-child(3) { background: #FFFFFF; } .deko--nbfenster em { margin-left: auto; font: 700 13px/1 'Space Grotesk', sans-serif; font-style: normal; color: #111; } .nb-zeiger { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: #FFE14D; border: 3px solid #111; border-radius: 5px; box-shadow: 5px 5px 0 #111; opacity: 0; transition: translate .08s, box-shadow .08s; } .nb-zeiger.nb-gedrueckt { translate: 5px 5px; box-shadow: 0 0 0 #111; } .nb-ding { border: 3px solid #111; border-radius: .45em; box-shadow: 5px 5px 0 #111; padding: .3em .6em; white-space: nowrap; } .nb-ding span { font: 700 1em/1 'Space Grotesk', sans-serif; color: #111; } .atlas__buehne[data-spiel='neubrutalismus'] { cursor: none; } /* Kinetische Typografie */ .deko--kinbaender { container-type: size; overflow: hidden; } .deko--kinbaender .kr { position: absolute; left: 0; white-space: nowrap; display: flex; font: 900 calc(var(--fz, 12) * 1cqh)/1 'Inter', sans-serif; letter-spacing: -.02em; } .deko--kinbaender .kr1 { top: calc(var(--r1, 1) * 1%); } .deko--kinbaender .kr2 { top: calc(var(--r2, 15) * 1%); } .deko--kinbaender .kr3 { top: calc(var(--r3, 72) * 1%); } .deko--kinbaender .kr4 { top: calc(var(--r4, 86) * 1%); } .deko--kinbaender .k { color: transparent; -webkit-text-stroke: 1.5px rgba(242,242,242,.45); } .deko--kinbaender .a { color: #E8FF3A; } .deko--kinbaender .w { color: rgba(242,242,242,.2); } .deko--kinbaender span { padding-right: .3em; } .deko--kinbaender.an .kr { animation: kinlauf 22s linear infinite; } .deko--kinbaender.an .kr2, .deko--kinbaender.an .kr4 { animation-direction: reverse; animation-duration: 18s; } @keyframes kinlauf { from { transform: translateX(0); } to { transform: translateX(-50%); } } .deko--kinwelle { container-type: size; display: flex; flex-direction: column; justify-content: center; align-items: center; } .deko--kinwelle .kw { display: flex; font: 900 min(44cqh, 28cqw)/1 'Inter', sans-serif; color: var(--dc); letter-spacing: -.03em; } .deko--kinwelle .kw span { display: inline-block; } .deko--kinwelle.an .kw span { animation: kinwelle 1.4s calc(var(--i) * -0.16s) ease-in-out infinite alternate; } @keyframes kinwelle { from { transform: translateY(-14%) scaleY(1.08); } to { transform: translateY(14%) scaleY(.92); } } .deko--kinwelle .kw2 { font: 900 min(9cqh, 7cqw)/1 'Inter', sans-serif; color: transparent; -webkit-text-stroke: 1.5px var(--dc); white-space: nowrap; margin-top: 6cqh; } .deko--kingewicht { container-type: size; display: flex; align-items: center; justify-content: center; } .deko--kingewicht div { font: 100 min(58cqh, 34cqw)/1 'Inter', sans-serif; color: var(--dc); letter-spacing: -.02em; white-space: nowrap; } .deko--kingewicht span { font-weight: 500; } .deko--kingewicht span:nth-child(3) { color: #E23B2E; } .deko--kingewicht.an span { animation: kingewicht 2.2s calc(var(--i) * -0.4s) ease-in-out infinite alternate; } @keyframes kingewicht { from { font-weight: 100; } to { font-weight: 900; } } .ki-zeichen { font-family: 'Inter', sans-serif; font-weight: var(--wg, 900); line-height: 1; white-space: nowrap; } .atlas__buehne[data-spiel='kinetisch'] { cursor: pointer; } /* Gotik & Fraktur */ .deko--pergament { background: radial-gradient(ellipse at 45% 45%, #F4EAD3 35%, #DCC79D 100%); } .deko--randranke .rk { fill: none; stroke: #6B5A2A; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .deko--initiale { background: #A3201B; border: 6px double #C9A247; box-shadow: 0 10px 30px rgba(60,20,10,.25); } .deko--initiale i { position: absolute; inset: 9%; border: 1px solid rgba(232,199,102,.7); background: radial-gradient(circle at 0 0, rgba(232,199,102,.35) 0 12%, transparent 13%), radial-gradient(circle at 100% 0, rgba(232,199,102,.35) 0 12%, transparent 13%), radial-gradient(circle at 0 100%, rgba(232,199,102,.35) 0 12%, transparent 13%), radial-gradient(circle at 100% 100%, rgba(232,199,102,.35) 0 12%, transparent 13%); } .deko--gotikbogen path, .deko--gotikbogen circle { fill: none; stroke: var(--dc); stroke-width: 1.3; vector-effect: non-scaling-stroke; } .deko--wappen svg { filter: drop-shadow(0 12px 20px rgba(0,0,0,.4)); } .deko--dornen polygon { fill: var(--dc); } .deko--dornen .dl { fill: none; stroke: var(--dc); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .deko--dornen .dr { fill: none; stroke: var(--dc); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .deko--dornen.an svg { animation: dornen 6s ease-in-out infinite alternate; } @keyframes dornen { from { transform: scale(.98); } to { transform: scale(1.02); } } .go-gold { background: linear-gradient(135deg, #F6DE9A, #C9A247 60%, #8C6E2A); } .go-initiale { background: #A3201B; border: 4px double #C9A247; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); } .go-initiale b { font: 400 1em/1 'UnifrakturMaguntia', serif; color: #E8C766; } .go-initiale svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; } .go-initiale path { fill: none; stroke: #4E6B2F; stroke-width: 3; } .go-initiale circle { fill: #A3201B; } .atlas__buehne[data-spiel='gotik'] { cursor: pointer; } /* Wiener Werkstaette */ .deko--wwgitter { background-color: #F4F2EC; border: 2px solid #111; background-image: linear-gradient(90deg, #111 1.5px, transparent 1.5px), linear-gradient(#111 1.5px, transparent 1.5px); background-size: 10% 10%; } .deko--wwgitter i { position: absolute; inset: 30%; background: #F4F2EC; border: 2px solid #111; } .deko--wwrahmen { background: conic-gradient(#F4F2EC 25%, #111 0 50%, #F4F2EC 0 75%, #111 0) 0 0 / 16px 16px; } .deko--wwrahmen i { position: absolute; inset: 16px; background: var(--dc); outline: 1px solid #F4F2EC; outline-offset: -8px; } .deko--wwschild { border: 1.5px solid #F4F2EC; } .deko--wwschild i { position: absolute; inset: 7%; border: 1px solid #F4F2EC; } .deko--wwornament { border: 2px solid #111; } .deko--wwschild2 { background: #E9E4D8; border: 2px solid #111; box-shadow: inset 0 0 0 5px #E9E4D8, inset 0 0 0 6px #C9A247; } .ww-feld { border: 2px solid; opacity: 0; } .ww-kachel { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid; } .atlas__buehne[data-spiel='wienerwerkstaette'] { cursor: crosshair; } /* Sachplakat */ .deko--streichhoelzer .flamme { transform-box: fill-box; transform-origin: 50% 100%; } .deko--streichhoelzer.an .flamme { animation: flamme .18s ease-in-out infinite alternate; } @keyframes flamme { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.92, 1.1) skewX(4deg); } } .deko--gluehbirne.an .schein { animation: schein 2.4s ease-in-out infinite alternate; } @keyframes schein { from { opacity: .55; } to { opacity: 1; } } .sa-ding { filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); } .atlas__buehne[data-spiel='sachplakat'] { cursor: pointer; } /* Expressionismus */ .ex-span svg, .ex-kerbe svg { fill: currentColor; } .atlas__buehne[data-spiel='expressionismus'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 28 L20 12' stroke='%238A5A2B' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M19 13 L27 4 L29 6 L21 14 Z' fill='%23C9C9C9' stroke='%23141414' stroke-width='1.2'/%3E%3C/svg%3E") 27 5, crosshair; } /* Isotype */ .deko--isoreihen .if { transform-box: fill-box; transform-origin: 50% 100%; } .deko--isoreihen.an .if { animation: dsfeld .4s calc(.2s + var(--i) * .035s) both cubic-bezier(.2,1.5,.4,1); } .deko--isosport .ip g { transform-box: fill-box; transform-origin: 50% 50%; } .deko--isosport.an .ip g { animation: dsfeld .5s calc(.25s + var(--i) * .12s) both cubic-bezier(.2,1.5,.4,1); } .deko--isoschilder .is rect { transform-box: fill-box; transform-origin: 50% 50%; } .deko--isoschilder.an .is rect { animation: dsfeld .5s calc(.2s + var(--i) * .1s) both cubic-bezier(.2,1.5,.4,1); } .is-figur { width: 18px; height: 30px; margin: -30px 0 0 -9px; opacity: 0; } .is-figur svg, .is-reihe svg { width: 100%; height: 100%; overflow: visible; } .is-reihe { display: flex; align-items: flex-end; gap: 2px; white-space: nowrap; } .is-reihe svg { width: auto; height: 100%; aspect-ratio: 24 / 40; } .is-reihe b { font: 700 1em/1 'Jost', sans-serif; margin-left: .3em; } .atlas__buehne[data-spiel='isotype'] { cursor: crosshair; } /* Rubberhose */ .deko--rhfigur .rh-l { stroke: var(--dc); } .deko--rhfigur .rh-f { fill: var(--dc); } .deko--rhfilm { background: radial-gradient(ellipse at center, transparent 45%, rgba(60,36,14,.45) 100%); } .deko--rhfilm i { position: absolute; inset: 0; background: rgba(255,240,200,.08); } .deko--rhfilm.an i { animation: rhflimmer .12s steps(2) infinite; } @keyframes rhflimmer { 50% { opacity: .2; } } .deko--rhfilm b { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(40,24,10,.35); left: 23%; } .deko--rhfilm b + b { left: 71%; } .deko--rhfilm.an b { animation: rhkratzer 1.7s steps(5) infinite; } .deko--rhfilm.an b + b { animation-duration: 2.3s; } @keyframes rhkratzer { 20% { translate: 30px 0; opacity: 0; } 40% { translate: -60px 0; opacity: 1; } 70% { translate: 80px 0; } } .deko--rhfigur .rh-b1, .deko--rhfigur .rh-b2 { transform-box: view-box; transform-origin: 50% 71%; } .deko--rhfigur .rh-a1 { transform-box: view-box; transform-origin: 28% 48%; } .deko--rhfigur .rh-a2 { transform-box: view-box; transform-origin: 72% 54%; } .deko--rhfigur.an .rh-b1 { animation: rhbein .5s ease-in-out infinite alternate; } .deko--rhfigur.an .rh-b2 { animation: rhbein .5s ease-in-out infinite alternate-reverse; } .deko--rhfigur.an .rh-a1 { animation: rharm .5s ease-in-out infinite alternate; } .deko--rhfigur.an .rh-a2 { animation: rharm .5s ease-in-out infinite alternate-reverse; } @keyframes rhbein { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } } @keyframes rharm { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } } .deko--rhstrahlen { overflow: hidden; } .deko--rhstrahlen i { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(233,196,106,.14) 0 6deg, transparent 6deg 12deg); } .deko--rhstrahlen.an i { animation: drehen 60s linear infinite; } .deko--rhsterne i { position: absolute; width: 9%; aspect-ratio: 1; background: #FFE08A; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .deko--rhsterne i:nth-child(1) { left: 4%; top: 8%; } .deko--rhsterne i:nth-child(2) { left: 84%; top: 4%; width: 7%; background: #FFF; } .deko--rhsterne i:nth-child(3) { left: 88%; top: 60%; } .deko--rhsterne i:nth-child(4) { left: 6%; top: 70%; width: 6%; background: #FFF; } .deko--rhsterne i:nth-child(5) { left: 46%; top: 92%; width: 5%; } .deko--rhsterne i:nth-child(6) { left: 30%; top: 0; width: 5%; background: #FFF; } .deko--rhsterne i:nth-child(7) { left: 66%; top: 86%; width: 6%; background: #FFF; } .deko--rhsterne.an i { animation: rhhuepf .5s ease-in-out infinite alternate; } .deko--rhsterne.an i:nth-child(2n) { animation-delay: -.25s; } @keyframes rhhuepf { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-30%) scale(.9, 1.1); } } .rh-note { font: 400 1em/1 'Shrikhand', Georgia, serif; } .rh-boing { font: 400 1em/1 'Shrikhand', Georgia, serif; white-space: nowrap; text-shadow: .06em .06em 0 rgba(0,0,0,.25); } .rh-stern svg { fill: currentColor; stroke: #1A1410; stroke-width: 4; } .atlas__buehne[data-spiel='rubberhose'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M9 30 C 6 22, 6 16, 9 13 V5 C 9 2, 13 2, 13 5 V11 C 13 9, 17 9, 17 11 C 17 9, 21 9, 21 11 C 21 10, 25 10, 25 12 V20 C 25 26, 21 30, 15 30 Z' fill='%23FFF' stroke='%231A1410' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M13 13 V17 M17 13 V17 M21 13 V17' stroke='%231A1410' stroke-width='1'/%3E%3C/svg%3E") 11 3, pointer; } /* Space Age */ .deko--saplanet { border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFC69E, var(--dc) 55%, #A9400F); box-shadow: inset -10px -14px 30px rgba(0,0,0,.18); } .deko--orbitbahnen .ob { fill: none; stroke: #1F2A44; stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; } .deko--orbitbahnen .sat { transform-origin: 0 0; animation: drehen 8s linear infinite; animation-play-state: paused; } .deko--orbitbahnen.an .sat { animation-play-state: running; } .deko--atomium .ak { transform-box: fill-box; transform-origin: 50% 50%; } .deko--atomium.an .ak { animation: dsfeld .5s calc(.2s + var(--i) * .07s) both cubic-bezier(.2,1.5,.4,1); } .deko--atomium.an svg { animation: mcschweben 8s ease-in-out infinite alternate; } .deko--sastreifen { background: linear-gradient(#FFF8EE 0 26%, transparent 26% 37%, #8A3B12 37% 58%, transparent 58% 69%, #FFD9B0 69%); } .deko--kapsel { border-radius: 50%; background: radial-gradient(circle, #123E50 0 57%, #F7F2EA 58% 71%, #D8CFC2 72% 73%, #F7F2EA 74%); box-shadow: 0 20px 40px rgba(90,30,0,.3); } .deko--kapsel i { position: absolute; inset: 20%; border-radius: 50%; background: linear-gradient(140deg, rgba(255,255,255,.35), transparent 45%); } .deko--kapsel b { position: absolute; left: 50%; top: 50%; width: 3.6%; aspect-ratio: 1; margin: -1.8%; border-radius: 50%; background: #B9AE9F; transform: rotate(var(--w)) translateY(-920%); } .sa-orbit { width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px dashed rgba(242,107,29,.6); border-radius: 50%; opacity: 0; } .sa-orbit i { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #F26B1D; box-shadow: 0 0 0 2px #FFF8EE; } .sa-orbit { animation: drehen 1.6s linear infinite; } .sa-funkel { width: 9px; height: 9px; border-radius: 50%; } .atlas__buehne[data-spiel='spaceage'] { cursor: crosshair; } /* Dithering & 1-Bit */ .deko--ditherfeld { background-color: #FFF; background-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0); background-size: 4px 4px; } .deko--macfenster { background: #FFF; border: 2px solid #000; box-shadow: 4px 4px 0 #000; } .deko--macfenster b { position: absolute; left: 0; right: 0; top: 0; height: 24px; border-bottom: 2px solid #000; background: repeating-linear-gradient(#FFF 0 2px, #000 2px 3px); background-clip: content-box; padding: 4px 3px; display: flex; align-items: center; justify-content: center; } .deko--macfenster b i { position: absolute; left: 12px; top: 5px; width: 12px; height: 12px; background: #FFF; border: 1.5px solid #000; } .deko--macfenster b span { background: #FFF; padding: 0 10px; font: 400 9px/14px 'Press Start 2P', monospace; color: #000; } .deko--macplatte { background: #FFF; border: 2px solid #000; box-shadow: 3px 3px 0 #000; } .deko--ditherkugel svg { image-rendering: pixelated; } .di-lupe { width: 22vmin; height: 22vmin; margin: -11vmin 0 0 -11vmin; border: 2px solid #000; outline: 2px solid #FFF; background: conic-gradient(#FFF 25%, transparent 0 50%, #FFF 0 75%, transparent 0) 0 0 / 12px 12px; mix-blend-mode: difference; opacity: 0; } .di-spritzer svg { fill: #FFF; } .di-spritzer { mix-blend-mode: difference; } .atlas__buehne[data-spiel='dithering'] { cursor: none; } /* Web 1.0 */ .deko--w1sterne { background-color: #000033; background-image: radial-gradient(1.5px 1.5px at 20px 30px, #FFF 50%, transparent 52%), radial-gradient(1px 1px at 70px 80px, #FFF 50%, transparent 52%), radial-gradient(1.2px 1.2px at 118px 22px, #FFFF99 50%, transparent 52%), radial-gradient(1px 1px at 96px 60px, #99CCFF 50%, transparent 52%); background-size: 140px 110px; } .deko--w1laufband { background: #0000AA; border-top: 2px solid #00FFFF; border-bottom: 2px solid #00FFFF; container-type: size; overflow: hidden; } .deko--w1laufband div { display: flex; white-space: nowrap; font: 700 58cqh/100cqh 'Courier New', monospace; color: #FFFF00; } .deko--w1laufband.an div { animation: kinlauf 18s linear infinite; } .deko--w1baustelle { background: repeating-linear-gradient(45deg, #FFD400 0 16px, #111 16px 32px); border: 3px solid #111; container-type: size; display: flex; align-items: center; justify-content: center; } .deko--w1baustelle span { background: #FFD400; padding: .2em .5em; font: 900 22cqh/1 'Arial Black', Arial, sans-serif; color: #111; border: 2px solid #111; white-space: nowrap; } .deko--w1baustelle.an span { animation: w1blink 1s steps(1) infinite; } @keyframes w1blink { 50% { visibility: hidden; } } .deko--w1zaehler { background: #222; border: 3px inset #888; container-type: size; display: flex; align-items: center; justify-content: center; gap: 2cqh; } .deko--w1zaehler span { font: 400 30cqh/1 'Times New Roman', serif; color: #FFF; margin-right: 4cqh; } .deko--w1zaehler b { font: 700 52cqh/1 'Courier New', monospace; color: #39FF14; background: #000; padding: 0 1.5cqh; border: 1px solid #555; } .deko--w1linie { background: linear-gradient(90deg, #FF0000, #FF9900, #FFFF00, #00CC00, #0066FF, #9900CC); } .deko--w1tabelle { background: #E0E0E0; border: 3px outset #FFF; display: grid; grid-template-columns: 1fr; gap: 2px; padding: 4px; font: 400 15px/1.3 'Times New Roman', serif; color: #000; overflow: hidden; } .deko--w1tabelle b { background: #000080; color: #FFF; padding: 4px 8px; font-weight: 700; } .deko--w1tabelle span { background: #FFF; border: 1px inset #999; padding: 3px 8px; } .deko--w1tabelle span:nth-of-type(odd) { background: #F0F0FF; font-weight: 700; } .deko--w1knopf { background: #C0C0C0; border: 3px outset #FFF; container-type: size; display: flex; align-items: center; justify-content: center; } .deko--w1knopf span { font: 400 44cqh/1 'Times New Roman', serif; color: #000; white-space: nowrap; } .deko--w1frames { background: #C0C0C0; border-right: 6px ridge #E0E0E0; padding: 24px 18px; display: flex; flex-direction: column; gap: 12px; font: 400 16px/1.2 'Times New Roman', serif; } .deko--w1frames b, .deko--w1framesh b { color: #000; font-weight: 700; } .deko--w1frames span, .deko--w1framesh span { color: #0000EE; text-decoration: underline; } .deko--w1frames span:nth-of-type(3) { color: #551A8B; } .deko--w1frames em { margin-top: auto; font-size: 12px; color: #444; } .deko--w1framesh { background: #C0C0C0; border-bottom: 6px ridge #E0E0E0; padding: 12px 14px; display: flex; flex-wrap: wrap; align-content: center; gap: 6px 14px; font: 400 15px/1.2 'Times New Roman', serif; } .w1-glitzer { line-height: 1; } .w1-gif svg { width: 100%; height: 100%; } .w1-dreh { animation: drehen 1.2s steps(8) infinite; } .w1-wipp { animation: w1wipp .6s steps(2) infinite; } @keyframes w1wipp { 50% { transform: rotate(-8deg); } } .w1-blink { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 900 1em/1 'Comic Neue', 'Comic Sans MS', sans-serif; color: #FFFF00; background: #FF0000; border: 3px ridge #FFFF00; animation: w1blink .8s steps(1) infinite; } .w1-klick { background: #0000EE; color: #FFF; text-decoration: underline; } .atlas__buehne[data-spiel='web1'] { cursor: pointer; } /* Corporate Memphis */ .deko--cmblob path { fill: var(--dc); } .deko--cmblob.an svg { animation: mcschweben 9s ease-in-out infinite alternate; } .deko--cmfigur .cm-arm { transform-box: view-box; transform-origin: 64% 37.3%; } .deko--cmfigur.an .cm-arm { animation: cmwinken 1.6s ease-in-out infinite alternate; } .atlas__buehne.cm-winkt .deko--cmfigur .cm-arm { animation-duration: .35s; } @keyframes cmwinken { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } } .deko--cmfigur2.an .cm-sprung { animation: cmsprung 1.4s cubic-bezier(.3,0,.4,1) infinite; } .atlas__buehne.cm-winkt .deko--cmfigur2 .cm-sprung { animation-duration: .7s; } @keyframes cmsprung { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-7%); } } .deko--cmpflanze .cm-blatt { transform-box: view-box; transform-origin: 50% 75%; } .deko--cmpflanze.an .cm-blatt { animation: cmblatt 4s ease-in-out infinite alternate; } @keyframes cmblatt { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } } .deko--cmkarten i { position: absolute; background: #FFF; border-radius: 14px; box-shadow: 0 14px 30px rgba(43,27,61,.12); background-image: linear-gradient(#E9E4F2, #E9E4F2), linear-gradient(#F1EEF6, #F1EEF6), radial-gradient(circle, #FF7A59 60%, transparent 62%); background-size: 60% 8%, 40% 8%, 18% 30%; background-position: 70% 30%, 60% 62%, 10% 40%; background-repeat: no-repeat; } .deko--cmkarten i:nth-child(1) { left: 0; top: 6%; width: 38%; height: 22%; } .deko--cmkarten i:nth-child(2) { right: 0; top: 34%; width: 34%; height: 20%; } .deko--cmkarten i:nth-child(3) { left: 4%; top: 64%; width: 30%; height: 18%; } .deko--cmkarten.an i { animation: aeroschweben 5s ease-in-out infinite alternate; } .deko--cmkarten.an i:nth-child(2) { animation-delay: -2s; } .deko--cmkarten.an i:nth-child(3) { animation-delay: -3.5s; } .cm-blase { background: #FFF; border-radius: 1em; padding: .5em .9em; box-shadow: 0 8px 20px rgba(43,27,61,.15); white-space: nowrap; } .cm-blase::after { content: ''; position: absolute; left: 40%; bottom: -.4em; width: .9em; height: .9em; background: #FFF; transform: rotate(45deg); } .cm-blase span { font: 800 1em/1 'Inter', sans-serif; color: var(--bf); position: relative; z-index: 1; } .cm-fleck { border-radius: 50%; } .atlas__buehne[data-spiel='corporatememphis'] { cursor: pointer; } /* Bento-Raster */ .deko--bentoq, .deko--bentoh { --bt: #1D1D1F; } .deko--bentoq .bt, .deko--bentoh .bt { position: absolute; border-radius: 22px; container-type: size; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; } .deko--bentoq.an .bt, .deko--bentoh.an .bt { animation: dsfeld .6s calc(.15s + var(--i) * .07s) both cubic-bezier(.2,1.3,.4,1); } .bt.bt-an { transform: translateY(-4px) scale(1.012); box-shadow: 0 16px 34px rgba(0,0,0,.14); } .deko--bentoq .bt b, .deko--bentoh .bt b { position: absolute; left: 10cqw; bottom: 22cqh; font: 800 min(46cqh, 48cqw)/1 'Inter', sans-serif; color: var(--bt); letter-spacing: -.04em; } .deko--bentoq .bt small, .deko--bentoh .bt small { position: absolute; left: 10cqw; bottom: 9cqh; font: 500 min(9cqh, 10cqw)/1 'Inter', sans-serif; color: var(--bt); opacity: .6; } .deko--bentoq .bt u, .deko--bentoh .bt u { position: absolute; left: 12cqw; right: 12cqw; top: 18cqh; bottom: 18cqh; display: flex; align-items: flex-end; gap: 7cqw; } .bt u i { flex: 1; background: var(--bt); border-radius: 4cqw; opacity: .85; } .deko--bentoq.an .bt u i, .deko--bentoh.an .bt u i { animation: bnbalken 1s .5s both cubic-bezier(.2,.8,.2,1); transform-origin: 50% 100%; } @keyframes bnbalken { from { transform: scaleY(0); } } .bt em { position: absolute; left: 50%; top: 50%; width: 52cqw; height: 28cqw; margin: -14cqw 0 0 -26cqw; border-radius: 99px; background: var(--bt); opacity: .9; } .bt em i { position: absolute; right: 3cqw; top: 3cqw; width: 22cqw; height: 22cqw; border-radius: 50%; background: #FFF; } .bn-punkt { width: 12vmin; height: 12vmin; margin: -6vmin 0 0 -6vmin; border-radius: 50%; background: rgba(0,113,227,.3); } .atlas__buehne[data-spiel='bento'] { cursor: pointer; } /* Kawaii */ .deko--kfunkeln i { position: absolute; width: 5%; aspect-ratio: 1; background: #FFF; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); } .deko--kfunkeln i:nth-child(3n) { background: #FFD166; } .deko--kfunkeln i:nth-child(3n+1) { background: #8FD3FF; width: 3.5%; } .deko--kfunkeln i:nth-child(1) { left: 6%; top: 10%; } .deko--kfunkeln i:nth-child(2) { left: 88%; top: 6%; } .deko--kfunkeln i:nth-child(3) { left: 92%; top: 46%; } .deko--kfunkeln i:nth-child(4) { left: 4%; top: 58%; } .deko--kfunkeln i:nth-child(5) { left: 30%; top: 88%; } .deko--kfunkeln i:nth-child(6) { left: 70%; top: 92%; } .deko--kfunkeln i:nth-child(7) { left: 48%; top: 2%; } .deko--kfunkeln i:nth-child(8) { left: 14%; top: 34%; } .deko--kfunkeln i:nth-child(9) { left: 80%; top: 74%; } .deko--kfunkeln.an i { animation: kfunkel 1.6s calc(var(--i) * -.37s) ease-in-out infinite; } @keyframes kfunkel { 0%, 100% { transform: scale(.3) rotate(0); opacity: .4; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } } .ka-auge { transform-box: fill-box; transform-origin: 50% 50%; } .deko--kwolke.an .ka-auge, .deko--konigiri.an .ka-auge, .deko--ksticker.an .ka-auge, .ka-kugel .ka-auge { animation: kblinzeln 4s infinite; } @keyframes kblinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } } .deko--kwolke.an svg, .deko--konigiri.an svg { animation: aeroschweben 3s ease-in-out infinite alternate; } .deko--ksticker .ks { position: absolute; height: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 10px rgba(75,59,168,.18)); } .deko--ksticker.an .ks { animation: nbklebe .6s calc(.2s + var(--i) * .12s) both cubic-bezier(.2,1.6,.4,1); --r: 0deg; } .ka-kugel svg, .ka-herz svg { filter: drop-shadow(0 4px 6px rgba(122,59,87,.15)); } .atlas__buehne[data-spiel='kawaii'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 100 100'%3E%3Cpath d='M50 88 C 6 60, 6 22, 30 18 C 42 16, 48 24, 50 30 C 52 24, 58 16, 70 18 C 94 22, 94 60, 50 88Z' fill='%23FF8FB8' stroke='%23FFF' stroke-width='8'/%3E%3C/svg%3E") 16 16, pointer; } /* Japandi */ .deko--japlinie { background: var(--dc); } .deko--steinstapel .st { transform-box: fill-box; transform-origin: 50% 100%; } .deko--steinstapel.an .st { animation: dsfeld .9s calc(.3s + var(--i) * .18s) both cubic-bezier(.3,1.2,.4,1), jastein 6s calc(var(--i) * -1.3s) ease-in-out infinite alternate; } @keyframes jastein { from { rotate: -1.2deg; } to { rotate: 1.2deg; } } .deko--vase .zw { stroke-dasharray: 160; stroke-dashoffset: 160; } .deko--vase.an .zw { animation: zeichnen 2.4s .4s ease-out forwards; } .deko--enso path { fill: none; stroke: #2B2622; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; } .deko--enso .e1 { stroke-width: 6.5; } .deko--enso .e2 { stroke-width: 2; opacity: .45; } .deko--enso.an path { animation: zeichnen 1.8s .3s cubic-bezier(.6,0,.3,1) forwards; } .deko--enso.an .e2 { animation-delay: .4s; } .ja-ring { width: 12vmin; height: 12vmin; margin: -6vmin 0 0 -6vmin; border: 1px solid; border-radius: 50%; box-shadow: 0 0 0 6px transparent, 0 0 0 7px rgba(59,52,46,.15); } .ja-kiesel { border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; box-shadow: inset -6px -6px 12px rgba(0,0,0,.12), inset 4px 4px 10px rgba(255,255,255,.18); } .atlas__buehne[data-spiel='japandi'] { cursor: pointer; } /* Steampunk */ .deko--nieten { border: 12px solid #5A3A1E; box-shadow: inset 0 0 0 2px #2A1D12, inset 0 0 80px rgba(0,0,0,.6); } .deko--nieten i { position: absolute; inset: -8px; border: 4px dotted #D9A84A; } .deko--messingraeder .zr { transform-box: fill-box; transform-origin: 50% 50%; } .deko--messingraeder.an .m1 { animation: drehen 20s linear infinite; } .deko--messingraeder.an .m2 { animation: drehen 12.5s linear infinite reverse; } .deko--messingraeder.an .m3 { animation: drehen 11.3s linear infinite reverse; } .deko--messingraeder.an .m4 { animation: drehen 9.1s linear infinite reverse; } .deko--rohre .rv { transform-box: fill-box; transform-origin: 50% 50%; } .deko--rohre.an .rv { animation: drehen 14s linear infinite; } .deko--manometer svg { filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)); } .deko--manometer .mn-nadel { transform-origin: 0 0; rotate: -150deg; } .deko--manometer.an .mn-nadel { animation: mnnadel 3.2s ease-in-out infinite; } @keyframes mnnadel { 0% { rotate: -150deg; } 30% { rotate: 20deg; } 34% { rotate: 12deg; } 38% { rotate: 24deg; } 70% { rotate: 40deg; } 74% { rotate: 32deg; } 100% { rotate: -150deg; } } .deko--blaupause { background-image: linear-gradient(rgba(58,42,24,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(58,42,24,.1) 1px, transparent 1px), radial-gradient(ellipse at center, transparent 50%, rgba(90,60,30,.3)); background-size: 24px 24px, 24px 24px, 100% 100%; } .deko--luftschiff .lp { transform-box: fill-box; transform-origin: 50% 50%; } .deko--luftschiff.an .lp { animation: propeller .2s linear infinite; } @keyframes propeller { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } } .deko--luftschiff.an svg { animation: mcschweben 6s ease-in-out infinite alternate; } .st-dampf { border-radius: 50%; background: radial-gradient(circle, rgba(240,235,225,.75), rgba(240,235,225,0) 70%); } .st-rad svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); } .atlas__buehne[data-spiel='steampunk'] { cursor: pointer; } /* Ukiyo-e */ .deko--ukwelle .uw { transform-box: view-box; transform-origin: 0 100%; } .deko--ukwelle.an .uw { animation: ukwelle 5s ease-in-out infinite alternate; } @keyframes ukwelle { from { transform: rotate(-1deg); } to { transform: rotate(1.5deg); } } .deko--ukstempel { background: #B7282E; border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(243,233,210,.45); } .deko--ukhimmel { background: linear-gradient(180deg, #2C4A7A 0%, #6E8FB8 14%, #E8DCC0 34%, #E8DCC0 100%); -webkit-mask-image: linear-gradient(transparent, #000 12%); mask-image: linear-gradient(transparent, #000 12%); } .deko--ukberg .uwk { transform-box: view-box; } .deko--ukberg.an .uwk { animation: ukwolke 14s ease-in-out infinite alternate; } @keyframes ukwolke { to { transform: translateX(4%); } } .deko--ukmond.an .ur { animation: ukregen .6s linear infinite; } @keyframes ukregen { from { transform: translate(0, 0); } to { transform: translate(-6px, 26px); } } .uk-tropfen { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } .uk-gischt { border-radius: 50%; border: 2px solid; background: #F3E9D2; } .atlas__buehne[data-spiel='ukiyoe'] { cursor: pointer; } /* Rokoko */ .deko--rokokoranken path { fill: none; stroke: #C9A247; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .deko--rokokoranken circle { fill: #C9A247; } .deko--rokokoranken path { stroke-dasharray: 600; stroke-dashoffset: 600; } .deko--rokokoranken.an path { animation: zeichnen 2.2s .2s ease-out forwards; } .deko--kartusche svg { filter: drop-shadow(0 14px 22px rgba(90,58,74,.18)); } /* Arts & Crafts */ .deko--morrismuster { border-left: 3px solid #2F3E2B; } .deko--acplatte { background: #EFE7D3; border: 3px solid #2F3E2B; box-shadow: inset 0 0 0 6px #EFE7D3, inset 0 0 0 7.5px #2F3E2B, 0 10px 24px rgba(47,62,43,.25); } /* Polnisches Plakat */ .deko--pplkopf svg { filter: url(#atlas-rau-t); } /* Liminal */ .deko--liminalraum { filter: blur(.6px) saturate(.85); } .deko--liminalraum.an .lf { animation: liflacker 4s steps(1) infinite; } @keyframes liflacker { 0%, 62%, 66%, 70%, 100% { opacity: 1; } 64%, 68% { opacity: .2; } } /* Punk-Zine */ .deko--zinekopie { background-color: #F0F0EC; background-image: radial-gradient(rgba(0,0,0,.22) 1px, transparent 1.2px), radial-gradient(rgba(0,0,0,.14) 1px, transparent 1.2px); background-size: 7px 7px, 11px 13px; background-position: 0 0, 3px 5px; } .deko--zinekopie i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 8%, rgba(0,0,0,.08) 9%, transparent 11%, transparent 47%, rgba(0,0,0,.12) 48%, rgba(0,0,0,.04) 52%, transparent 53%, transparent 86%, rgba(0,0,0,.1) 88%, transparent 90%), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.2)); } .deko--zinestreifen { background: #FF2E88; clip-path: polygon(0 12%, 6% 0, 14% 10%, 22% 2%, 31% 12%, 40% 0, 52% 10%, 61% 3%, 70% 12%, 80% 1%, 90% 10%, 100% 4%, 100% 88%, 92% 100%, 82% 90%, 72% 99%, 62% 88%, 52% 100%, 41% 90%, 30% 98%, 20% 88%, 10% 98%, 0 90%); mix-blend-mode: multiply; } .deko--nadel svg { filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); } /* Kitsch */ .deko--kitschglitzer { background: linear-gradient(160deg, #FFD9EA 0%, #FFB3D2 55%, #FF8FC0 100%); } .deko--kitschglitzer i { position: absolute; inset: 0; background-image: radial-gradient(circle, #FFF 0 1.2px, transparent 1.6px), radial-gradient(circle, #F5D36A 0 1.4px, transparent 1.8px), radial-gradient(circle, #FFF 0 .8px, transparent 1.2px); background-size: 37px 41px, 53px 47px, 23px 29px; background-position: 0 0, 11px 17px, 5px 9px; opacity: .8; } .deko--kitschglitzer.an i { animation: kitschfunkeln 2.4s steps(3) infinite; } @keyframes kitschfunkeln { 33% { background-position: 4px 2px, 15px 13px, 1px 12px; opacity: .55; } 66% { background-position: -3px 4px, 8px 20px, 8px 5px; opacity: .95; } } .deko--schneekugel .schnee { animation: schnee 6s linear infinite; animation-play-state: paused; } .deko--schneekugel.an .schnee { animation-play-state: running; } @keyframes schnee { from { transform: translateY(0); } to { transform: translateY(80px); } } .deko--flamingo.an svg { animation: aeroschweben 4s ease-in-out infinite alternate; } /* Seapunk */ .deko--seawasser.an .sw { animation: sewelle 8s linear infinite; } @keyframes sewelle { from { transform: translateX(0); } to { transform: translateX(200px); } } .deko--delfine .df1, .deko--delfine .df2 { transform-box: view-box; } .deko--delfine.an .df1 { animation: delfin 3.2s ease-in-out infinite alternate; } .deko--delfine.an .df2 { animation: delfin 3.2s -1.6s ease-in-out infinite alternate; } @keyframes delfin { from { transform: translateY(4%) rotate(-2deg); } to { transform: translateY(-4%) rotate(3deg); } } /* Low Poly */ .deko--lowpoly polygon { stroke: rgba(255,255,255,.06); stroke-width: .3; } .deko--lowpoly.an polygon { animation: dsfeld .5s calc(.2s + var(--i) * .04s) both cubic-bezier(.2,1.3,.4,1); transform-box: fill-box; transform-origin: 50% 50%; } .deko--lowpoly.an .lp { animation: drehen 80s linear infinite; transform-origin: 0 0; } .deko--lowpoly svg { filter: drop-shadow(0 20px 40px rgba(20,10,60,.5)); } /* Cottagecore */ .deko--vichy { background-color: #FFF8F7; background-image: linear-gradient(90deg, rgba(232,140,160,.3) 50%, transparent 50%), linear-gradient(rgba(232,140,160,.3) 50%, transparent 50%); background-size: 30px 30px; } .deko--blumenkranz .bk { transform-box: fill-box; transform-origin: 50% 50%; } .deko--blumenkranz.an .bk { animation: dsfeld .5s calc(.3s + var(--i) * .06s) both cubic-bezier(.2,1.6,.4,1); } .deko--schleife.an svg { animation: aeroschweben 3s ease-in-out infinite alternate; } /* Neoklassizismus */ .deko--tempel svg { filter: drop-shadow(0 16px 26px rgba(58,54,48,.18)); } .deko--tempel .sl { transform-box: fill-box; transform-origin: 50% 100%; } .deko--tempel.an .sl { animation: dslinieV .8s calc(.2s + var(--i) * .08s) both cubic-bezier(.2,.8,.2,1); } .deko--wedgwoodfries { background-color: #58799F; border-top: 2px solid #F4F2EC; border-bottom: 2px solid #F4F2EC; background-image: radial-gradient(ellipse 18px 10px at 50% 100%, transparent 70%, #F4F2EC 72% 82%, transparent 84%), radial-gradient(circle, #F4F2EC 0 2.5px, transparent 3px); background-size: 44px 100%, 44px 100%; background-position: 0 -30%, 22px 0; } .deko--kamee svg { filter: drop-shadow(0 12px 22px rgba(30,50,80,.35)); } .deko--steinflaeche { background-color: #D8D2C6; background-image: radial-gradient(rgba(80,70,60,.08) 1px, transparent 1.5px), radial-gradient(rgba(255,255,255,.25) 1px, transparent 1.5px); background-size: 9px 11px, 13px 7px; } .deko--steinflaeche i { position: absolute; inset: 4%; border: 2px solid rgba(60,52,40,.18); box-shadow: 0 1px 0 rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.5); } .deko--lorbeer .lb { transform-origin: 0 0; } .deko--lorbeer.an .lb { animation: dsfeld .6s .3s both cubic-bezier(.2,1.5,.4,1); } .nk-staub { border-radius: 50%; background: #C9A247; opacity: .7; } .nk-saeule { display: flex; flex-direction: column; align-items: center; } .nk-saeule b { width: 130%; height: 10px; flex: none; background: #F4F1EA; border: 1px solid #B9B2A4; } .nk-saeule i { flex: 1; width: 82%; background: repeating-linear-gradient(90deg, #F4F1EA 0 20%, #DCD5C7 20% 25%); border-left: 1px solid #C9C2B4; border-right: 1px solid #C9C2B4; } .nk-saeule u { width: 120%; height: 8px; flex: none; background: #E6E0D4; border: 1px solid #B9B2A4; } .atlas__buehne[data-spiel='neoklassizismus'] { cursor: pointer; } /*@@CSS@@*/ /* ---------- Ausklang -------------------------------------------------------- */ .ausklang { padding: clamp(110px, 18vh, 200px) var(--gutter); max-width: 1400px; margin: 0 auto; } .ausklang__titel { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-size: clamp(40px, 6vw, 92px); margin: 0 0 24px; } .ausklang__text { color: var(--muted); max-width: 52ch; font-size: clamp(16px, 1.3vw, 19px); margin: 0 0 36px; } .ausklang__wege { display: flex; flex-wrap: wrap; gap: 12px; } .pille { font-family: var(--display); font-size: 15px; text-decoration: none; min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; border-radius: 30px; border: 1px solid rgba(245,245,247,.25); transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); } .pille:hover { border-color: var(--text); } .pille--akzent { background: var(--eis); color: #0B0B0C; border-color: transparent; font-weight: 600; } .pille--akzent:hover { background: #F5F5F7; } .fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 28px var(--gutter); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; } .fuss nav { display: flex; gap: 22px; } .fuss a { text-decoration: none; } .fuss a:hover { color: var(--text); } /* Ohne JavaScript: die Bahn ist eine ruhige Tafel mit dem ersten Stil */ html:not(.js) .atlas { height: auto; } html:not(.js) .atlas__buehne { position: relative; height: auto; min-height: 100svh; padding: 140px var(--gutter) 120px; display: grid; gap: 24px; align-content: center; justify-items: center; text-align: center; } html:not(.js) .el { position: static; } html:not(.js) .el--kopf { font-size: clamp(36px, 6vw, 80px); font-weight: 200; } html:not(.js) .el--text { max-width: 44ch; } html:not(.js) .deko, html:not(.js) .seitenleiste__stile { display: none; } @media (prefers-reduced-motion: reduce) { .el--zeichen.sp-wackeln svg, .el--zeichen.sp-schweben svg, .el--zeichen.sp-knautsch svg { animation: none; } .el--blink, .deko.an, .deko.an *, .deko.an::before, .deko.an::after, .el--glitch::before, .el--glitch::after, .atlas__buehne.blitz::after { animation: none !important; } .intro__titel, .intro__zeile, .eyebrow, .intro__hinweis i { animation: none; } } /* Kompakte Liste: je Stil eine Zeile, die Varianten als 1 2 3 dahinter */ .seitenleiste__stile .stil-zeile { display: flex; align-items: center; gap: 4px; border-radius: 10px; transition: background .25s var(--ease); } .seitenleiste__stile .stil-zeile.aktiv { background: rgba(255,255,255,.06); } .seitenleiste__stile .stil-knopf { flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 0 2px 0 10px; gap: 9px; font-size: 13.5px; } .seitenleiste__stile .stil-knopf:hover { background: none; } .stil-knopf__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .var-reihe { display: flex; gap: 2px; padding-right: 5px; flex: none; } .seitenleiste__stile .var-knopf { width: 19px; height: 19px; padding: 0; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(245,245,247,.62); border: 1px solid rgba(245,245,247,.2); transition: color .2s, background .2s, border-color .2s; } .seitenleiste__stile .var-knopf:hover { color: #F5F5F7; border-color: rgba(245,245,247,.55); } .seitenleiste__stile .stil-zeile.aktiv .var-knopf { color: rgba(245,245,247,.75); border-color: rgba(245,245,247,.32); } .seitenleiste__stile .var-knopf[aria-current='true'] { background: var(--eis); border-color: var(--eis) !important; color: #000 !important; } .kapitel { padding-top: 14px; } /* Fuss: Abspielknopf, Name der Variante, Zaehler */ .seitenleiste__fuss { display: flex; align-items: center; gap: 12px; padding: 4px 16px 0 18px; } .abspielen { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #F5F5F7; color: #000; display: grid; place-items: center; transition: background .25s var(--ease), transform .25s var(--ease); } .abspielen:hover { background: var(--eis); transform: scale(1.06); } .abspielen svg { width: 20px; height: 20px; fill: currentColor; } .abspielen__pause { display: none; } .abspielen.an .abspielen__play { display: none; } .abspielen.an .abspielen__pause { display: block; } .abspielen.an { background: var(--eis); } /* Fortschritt bis zum naechsten Sprung als Ring */ .abspielen i { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; opacity: 0; background: conic-gradient(var(--eis) calc(var(--fort, 0) * 1turn), rgba(245,245,247,.14) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); } @property --fort { syntax: ''; inherits: false; initial-value: 0; } .abspielen.laeuft i { opacity: 1; animation: fortschritt var(--takt, 5s) linear forwards; } @keyframes fortschritt { from { --fort: 0; } to { --fort: 1; } } .seitenleiste__fuss .seitenleiste__zahl { padding: 0; min-width: 0; display: grid; gap: 2px; line-height: 1.3; } .seitenleiste__zahl b { font-weight: 500; color: #F5F5F7; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 700px) { .seitenleiste__stile .stil-zeile { flex-direction: column; gap: 2px; padding-bottom: 4px; } .seitenleiste__stile .stil-zeile.aktiv { background: rgba(52,167,185,.14); } .seitenleiste__stile .stil-knopf { justify-content: center; padding: 0; min-height: 30px; width: 100%; } .var-reihe { padding: 0; gap: 4px; } .seitenleiste__stile .var-knopf { width: 9px; height: 9px; font-size: 0; border-color: rgba(245,245,247,.3); position: relative; } .seitenleiste__stile .var-knopf::after { content: ''; position: absolute; inset: -6px -2px; } .seitenleiste__fuss { padding: 0; justify-content: center; } .seitenleiste__fuss .seitenleiste__zahl { display: none; } .abspielen { width: 38px; height: 38px; } .abspielen svg { width: 17px; height: 17px; } } /* ---------- Steckbrief: Tafel neben dem Balken ---------- */ .steckbrief-knopf { flex: none; margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(245,245,247,.2); background: none; color: rgba(245,245,247,.75); display: grid; place-items: center; cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .steckbrief-knopf svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .steckbrief-knopf:hover { color: #F5F5F7; border-color: rgba(245,245,247,.55); } .steckbrief-knopf.an { background: #F5F5F7; color: #000; border-color: #F5F5F7; } .steckbrief { position: fixed; z-index: 39; top: 0; bottom: 0; left: var(--leiste-b); width: min(460px, calc(100vw - var(--leiste-b))); --sb-bg: #1A1A1C; --sb-fg: #F5F5F7; --sb-ak: #34A7B9; background: #0D0D0F; color: #F5F5F7; border-right: 1px solid rgba(245,245,247,.08); box-shadow: 24px 0 48px rgba(0,0,0,.4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245,245,247,.22) transparent; transform: translateX(-102%); visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s; font-family: var(--body); } .steckbrief.offen { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; } .steckbrief ::selection { background: #F5F5F7; color: #0D0D0F; } .steckbrief :focus-visible { outline: 2px solid #F5F5F7; outline-offset: 2px; } .steckbrief__zu { position: absolute; z-index: 2; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sb-fg) 35%, transparent); background: color-mix(in srgb, var(--sb-bg) 70%, transparent); color: var(--sb-fg); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .steckbrief__zu svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; } .steckbrief__zu:hover { background: var(--sb-fg); color: var(--sb-bg); border-color: var(--sb-fg); } .steckbrief__inhalt { padding: 0 0 48px; } /* Kopf in den Farben und der Schrift des Stils */ .sb-kopf { position: relative; padding: 30px 64px 22px 28px; background: var(--sb-bg); color: var(--sb-fg); transition: background .4s, color .4s; } .sb-kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sb-ak); } .sb-titel { margin: 0; font-size: var(--sb-gr, 40px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; } .sb-zeile { margin: 10px 0 0; font: 400 14px/1.45 var(--body); color: color-mix(in srgb, var(--sb-fg) 82%, transparent); } .sb-fakten { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 18px 0 0; font: 400 12.5px/1.35 var(--body); color: color-mix(in srgb, var(--sb-fg) 84%, transparent); } .sb-fakten div { display: contents; } .sb-fakten dt { font-weight: 600; color: var(--sb-fg); } .sb-fakten dd { margin: 0; } /* Rumpf */ .sb-rumpf { padding: 0 28px; } .sb-teil { margin-top: 34px; } .sb-teil > h3 { margin: 0 0 12px; font: 600 15px/1.2 var(--display); letter-spacing: -.005em; color: #F5F5F7; } .sb-lead { margin: 26px 0 0; font-size: 15px; line-height: 1.62; color: rgba(245,245,247,.86); max-width: 62ch; } .sb-notiz { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(245,245,247,.66); } /* Palette als zusammenhaengender Streifen */ .sb-palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .sb-farbe { position: relative; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; color: inherit; font: inherit; min-width: 0; } .sb-farbe i { display: block; height: 72px; background: var(--f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .3s var(--ease), box-shadow .3s; transform-origin: 50% 100%; } .sb-farbe:first-child i { border-radius: 12px 0 0 12px; } .sb-farbe:last-child i { border-radius: 0 12px 12px 0; } .sb-farbe:hover i, .sb-farbe:focus-visible i { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.45); } .sb-farbe:focus-visible { outline: none; } .sb-farbe:focus-visible i { outline: 2px solid #F5F5F7; outline-offset: 2px; } .sb-farbe em { position: absolute; left: 8px; top: 8px; font: 600 10.5px/1 var(--body); font-style: normal; letter-spacing: .02em; color: var(--t); } .sb-legende { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; } .sb-eintrag { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .sb-eintrag i { width: 14px; height: 14px; border-radius: 4px; background: var(--f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .sb-eintrag span { min-width: 0; font-size: 13.5px; line-height: 1.25; color: rgba(245,245,247,.9); } .sb-eintrag small { font: 500 11.5px/1.2 ui-monospace, 'SFMono-Regular', Menlo, monospace; font-variant-numeric: tabular-nums; color: rgba(245,245,247,.55); transition: color .2s; } .sb-eintrag:hover small, .sb-eintrag.kopiert small { color: #F5F5F7; } .sb-eintrag:hover span { color: #FFF; } /* Schriften: der Name in der Schrift selbst */ .sb-schriften { list-style: none; margin: 0; padding: 0; } .sb-schriften li { padding: 12px 0 13px; border-top: 1px solid rgba(245,245,247,.09); } .sb-schriften li:last-child { border-bottom: 1px solid rgba(245,245,247,.09); } .sb-schriften b { display: block; font-size: 23px; font-weight: 400; line-height: 1.15; color: #F5F5F7; overflow-wrap: anywhere; } .sb-schriften b.ohne { font: 500 17px/1.25 var(--display); color: rgba(245,245,247,.92); } .sb-schriften span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(245,245,247,.58); } /* Merkmale, Vorbilder, Einsatz */ .sb-merkmale { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sb-merkmale li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: rgba(245,245,247,.88); } .sb-merkmale li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--sb-ak); box-shadow: 0 0 0 1px rgba(255,255,255,.12); } .sb-paare { margin: 0; display: grid; gap: 16px; } .sb-paare dt { font: 600 15px/1.2 var(--display); color: #F5F5F7; } .sb-paare dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: rgba(245,245,247,.82); } .sb-start { margin-top: 34px; padding: 18px 20px 19px; border-radius: 14px; background: color-mix(in srgb, var(--sb-bg) 22%, #161618); box-shadow: inset 0 0 0 1px rgba(245,245,247,.07); } .sb-start h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font: 600 15px/1.2 var(--display); color: #F5F5F7; } .sb-start h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--sb-ak); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-ak) 25%, transparent); } .sb-start p { margin: 0; font-size: 14.5px; line-height: 1.58; color: rgba(245,245,247,.88); } .sb-laedt { color: rgba(245,245,247,.5); } @media (max-width: 700px) { .seitenleiste__fuss { flex-direction: column; gap: 8px; } .steckbrief-knopf { margin: 0; width: 38px; height: 38px; } .sb-kopf { padding: 24px 60px 20px 20px; } .sb-rumpf { padding: 0 20px; } .sb-farbe i { height: 56px; } .sb-legende { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .steckbrief, .steckbrief.offen { transition: none; } } /* ---------- Einleitung: Wand aus Stil-Karten ---------- */ main { position: relative; } .intro { position: relative; z-index: 1; } .intro-wand { position: absolute; left: 0; right: 0; top: 0; height: 100svh; overflow: hidden; pointer-events: none; perspective: 1600px; } .intro-wand__ebene { position: absolute; left: 58%; top: 50%; width: 1700px; height: 2600px; display: flex; gap: 22px; justify-content: center; transform: translate(-50%, -50%) rotateX(24deg) rotateY(-16deg) rotateZ(-12deg); transform-style: preserve-3d; opacity: 0; transition: opacity 1.6s var(--ease); } .intro-wand.an .intro-wand__ebene { opacity: 1; } .wand__spalte { flex: none; width: 250px; display: flex; flex-direction: column; gap: 22px; animation: wandlauf var(--dauer, 80s) linear infinite; animation-delay: var(--start, 0s); will-change: transform; } .wand__spalte:nth-child(even) { animation-direction: reverse; } .intro-wand.ruht .wand__spalte { animation-play-state: paused; } @keyframes wandlauf { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 11px)); } } .wk { position: relative; flex: none; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); } .wk__c { position: absolute; right: 9%; top: 14%; width: 36%; height: auto; } .wk b { position: absolute; left: 8%; right: 8%; bottom: 25%; line-height: 1; white-space: nowrap; overflow: hidden; } .wk i { position: absolute; left: 8%; bottom: 17%; width: 18%; height: 2px; opacity: .7; } .wk small { position: absolute; left: 8%; bottom: 7%; font: 500 9.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .75; } .wk--mitte .wk__c { right: auto; left: 50%; top: 12%; width: 30%; transform: translateX(-50%); } .wk--mitte b { text-align: center; bottom: 26%; } .wk--mitte i { left: 41%; } .wk--mitte small { left: 0; right: 0; text-align: center; } /* Schleier: links dunkel fuer die Schrift, unten in den Seitengrund */ .intro-wand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0B0B0C 0%, rgba(11,11,12,.94) 28%, rgba(11,11,12,.6) 58%, rgba(11,11,12,.35) 100%), linear-gradient(180deg, rgba(11,11,12,.55) 0%, transparent 25%, transparent 62%, #0B0B0C 100%); } .intro__wege { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .intro__zufall svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; } .intro__zufall svg circle { fill: currentColor; stroke: none; } @media (max-width: 700px) { .intro-wand__ebene { left: 50%; transform: translate(-50%, -50%) rotateX(20deg) rotateZ(-12deg) scale(.7); } .intro-wand::after { background: linear-gradient(180deg, rgba(11,11,12,.45) 0%, rgba(11,11,12,.82) 32%, rgba(11,11,12,.96) 55%, #0B0B0C 100%); } } @media (prefers-reduced-motion: reduce) { .wand__spalte { animation: none; } } /* ---------- Vollbild: nur die Buehne ---------- */ .vollbild-knopf svg { stroke-linejoin: round; } html.vollbild { --leiste-b: 0px; } html.vollbild body { padding-left: 0; } html.vollbild .seitenleiste, html.vollbild .intro, html.vollbild .intro-wand, html.vollbild .ausklang, html.vollbild .fuss, html.vollbild .skip-link { display: none; } html.vollbild .atlas { margin: 0; } .vollbild-leiste { position: fixed; z-index: 45; left: 50%; bottom: 22px; display: none; align-items: center; gap: 6px; padding: 7px 8px 7px 18px; border-radius: 999px; background: rgba(10,10,11,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1); color: #F5F5F7; font-family: var(--display); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease); } html.vollbild .vollbild-leiste { display: flex; } .vollbild-leiste.sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .vollbild-leiste__name { margin: 0 10px 0 0; display: grid; line-height: 1.2; min-width: 120px; max-width: 220px; } .vollbild-leiste__name b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vollbild-leiste__name span { font-size: 12px; color: rgba(245,245,247,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vl-knopf { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: rgba(245,245,247,.85); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; } .vl-knopf:hover { background: rgba(255,255,255,.12); color: #FFF; } .vl-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .vl-spielen { width: 44px; height: 44px; } .vollbild-leiste__trenn { width: 1px; height: 24px; background: rgba(245,245,247,.18); margin: 0 4px; } @media (max-width: 700px) { .vollbild-leiste { bottom: 14px; padding: 6px 6px 6px 14px; gap: 2px; max-width: calc(100vw - 20px); } .vollbild-leiste__name { min-width: 0; max-width: 110px; margin-right: 4px; } .vl-knopf { width: 36px; height: 36px; } } @media (max-width: 460px) { .vollbild-leiste__name { display: none; } .vollbild-leiste { padding-left: 6px; } } /* ---------- Leistung: weiche Formen ohne Weichzeichner, Animationen auf eigenen Ebenen ---------- */ /* Farbnebel: weicher Rand aus dem Verlauf statt blur() — gleiches Bild, ein Bruchteil der Rechenzeit */ .deko--aurora i { filter: none; background: radial-gradient(closest-side, var(--ac) 0%, color-mix(in srgb, var(--ac) 55%, transparent) 45%, transparent 100%) !important; will-change: transform; } .deko--aurora i:nth-child(1) { --ac: var(--a1); width: 80%; height: 95%; left: -20%; top: -27%; } .deko--aurora i:nth-child(2) { --ac: var(--a2); width: 75%; height: 90%; right: -22%; top: -17%; } .deko--aurora i:nth-child(3) { --ac: var(--a3); width: 80%; height: 85%; left: 0%; bottom: -37%; } .deko--aurora i:nth-child(4) { --ac: var(--a4); width: 60%; height: 70%; right: -5%; bottom: -22%; } .deko--blobs i { filter: none; background: radial-gradient(closest-side, var(--bc) 0%, color-mix(in srgb, var(--bc) 50%, transparent) 50%, transparent 100%) !important; will-change: transform; } .deko--blobs i:nth-child(1) { --bc: #9FD8FF; width: 66%; height: 84%; left: -16%; top: -2%; } .deko--blobs i:nth-child(2) { --bc: #C6FF3D; width: 60%; height: 76%; right: -14%; top: -20%; } .deko--blobs i:nth-child(3) { --bc: #C9B6FF; width: 70%; height: 74%; right: 0%; bottom: -28%; } .deko--polar i { will-change: transform; } /* hinter Glas: die Kugeln stehen still, sonst muss das Glas jedes Bild neu weichzeichnen */ .deko--kugeln i { filter: none; } .deko--kugeln.an i { animation: none; } .deko--glas, .deko--glas2, .deko--glas3 { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } /* Vaporwave: Boden und Gitter laufen ueber Verschieben, ohne Leuchtfilter */ .deko--schach i { background-position: 0 0 !important; } .deko--schach.an i { animation: schachlauf2 6s linear infinite; will-change: transform; } @keyframes schachlauf2 { from { transform: rotateX(62deg) translateY(-160px); } to { transform: rotateX(62deg) translateY(0); } } .deko--vpgitter i { filter: none; background-image: linear-gradient(#FF71CE 2px, transparent 2px), linear-gradient(90deg, #01CDFE 2px, transparent 2px), linear-gradient(rgba(255,113,206,.22) 6px, transparent 6px), linear-gradient(90deg, rgba(1,205,254,.22) 6px, transparent 6px); background-size: 60px 60px; background-position: 0 0, 0 0, 0 -2px, -2px 0; } /* Partikel: jede Schicht ein eigenes Bild, das als Ganzes treibt */ .deko--pfeld .pg, .deko--staub .pg { position: absolute; inset: -6%; width: 112%; height: 112%; will-change: transform; } /* Psychedelic: die grosse Verzerrung rechnet einmal, die Farbdrehung liegt darueber */ .deko--psywellen { background: none; filter: hue-rotate(var(--farbdreh)); } .deko--psywellen i { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 36%, var(--k1, #FF7A00) 0 26px, var(--k2, #FFA31A) 26px 52px); filter: url(#atlas-schmelz-gross); will-change: transform; } .deko--morphblob i { filter: saturate(1.1); } /* Buehne ausserhalb des Bildes: alle Dauer-Animationen ruhen */ .atlas__buehne.ruht *, .atlas__buehne.ruht *::before, .atlas__buehne.ruht *::after { animation-play-state: paused !important; } /* ---------- Sparmodus: misst die Seite dauerhaft wenige Bilder pro Sekunde ---------- */ html.sparsam .deko--glas, html.sparsam .deko--glas2, html.sparsam .deko--glas3, html.sparsam .vollbild-leiste { -webkit-backdrop-filter: none; backdrop-filter: none; } html.sparsam .deko--glas, html.sparsam .deko--glas2, html.sparsam .deko--glas3 { background-color: rgba(255,255,255,.3); } html.sparsam .deko--polar i, html.sparsam .deko--schatten, html.sparsam .deko--boden3d, html.sparsam .gl-kugel, html.sparsam .au-licht, html.sparsam .ps-ring { filter: none; } html.sparsam .deko--psywellen i, html.sparsam .el--glitch::before, html.sparsam .el--glitch::after { filter: none; } html.sparsam .deko--aurora.an i, html.sparsam .deko--blobs.an i, html.sparsam .deko--polar.an i, html.sparsam .deko--morphblob.an i, html.sparsam .deko--blobs3.an i, html.sparsam .deko--pfeld.an .pg, html.sparsam .deko--staub.an .pg, html.sparsam .deko--schach.an i, html.sparsam .deko--vpgitter.an i, html.sparsam .deko--funkeln.an path, html.sparsam .deko--nimbus.an svg, html.sparsam .deko--hudring.an *, html.sparsam .deko--makramee.an svg, html.sparsam .deko--pampas.an svg, html.sparsam .deko--regen.an, html.sparsam .deko--gitter.an i, html.sparsam .deko--knetkugeln.an i, html.sparsam .wand__spalte { animation: none !important; } .deko--funkeln i { position: absolute; width: var(--g); aspect-ratio: 1; margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2); background: var(--dc); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: .15; scale: .4; } .deko--funkeln.an i { animation: funkeln 2.4s ease-in-out infinite; animation-delay: var(--d); will-change: transform, opacity; } html.sparsam .deko--funkeln.an i { animation: none; opacity: .7; scale: .8; } /* Polarlicht: weiche Kanten aus Verlauf und Maske statt Weichzeichner und Mischmodus */ .deko--polar i { filter: none; mix-blend-mode: normal; border-radius: 0; -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 75%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 75%); } .deko--vpgitter i { background-image: linear-gradient(#FF71CE 4px, transparent 4px), linear-gradient(90deg, #01CDFE 3px, transparent 3px), linear-gradient(rgba(255,113,206,.35) 12px, transparent 12px), linear-gradient(90deg, rgba(1,205,254,.3) 9px, transparent 9px); background-position: 0 0, 0 0, 0 -4px, -3px 0; } .deko--vpgitter.an i { animation: gitterlauf3 3s linear infinite; } @keyframes gitterlauf3 { from { background-position: 0 0, 0 0, 0 -4px, -3px 0; } to { background-position: 0 60px, 0 0, 0 56px, -3px 0; } } .deko--vpgitter { perspective: 380px; } .deko--vpgitter i { left: -60%; right: -60%; height: 220%; transform: rotateX(62deg); } /* Grund des Gitters auf der Ebene selbst: ein Hintergrund am Eltern-Element verdeckte die gekippte Ebene */ .deko--vpgitter { background: none; } .deko--vpgitter i { background-color: #1E0C36; } .deko--vpgitter::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#1A0B2E 0%, rgba(26,11,46,0) 35%); } .deko--vpgitter { perspective: 520px; } .deko--vpgitter i { left: -80%; right: -80%; height: 150%; transform: rotateX(72deg); background-image: linear-gradient(#FF71CE 2px, transparent 2px), linear-gradient(90deg, #01CDFE 2px, transparent 2px), linear-gradient(rgba(255,113,206,.28) 6px, transparent 6px), linear-gradient(90deg, rgba(1,205,254,.25) 6px, transparent 6px); background-size: 64px 64px; background-position: 0 0, 0 0, 0 -2px, -2px 0; } @keyframes gitterlauf3 { from { background-position: 0 0, 0 0, 0 -2px, -2px 0; } to { background-position: 0 64px, 0 0, 0 62px, -2px 0; } } /* die gekippte Ebene bleibt vor dem Auge (Tiefe kleiner als die Perspektive), sonst verwirft der Browser sie */ .deko--vpgitter i { height: 118%; transform: rotateX(70deg); } .deko--vpgitter { perspective: 380px; } .deko--vpgitter i { left: -60%; right: -60%; height: 220%; transform: rotateX(62deg); } /* die nahen, grossen Linien laufen nach unten ins Dunkel aus */ .deko--vpgitter::after { background: linear-gradient(#1A0B2E 0%, rgba(26,11,46,0) 22%, rgba(26,11,46,0) 45%, rgba(26,11,46,.82) 78%, #1A0B2E 100%); } /* Einleitung: Lab-Nummer unten bei den Wegen statt als Label ueber dem Titel */ .intro__experiment { margin: 0; font: 500 13px/1.4 var(--display); color: rgba(245,245,247,.62); } .intro__experiment b { color: var(--eis); font-weight: 600; } /* ---------- Bildmodus (?bild=id:variante): nur die Buehne, fuer "Im Einsatz" ---------- */ html.bild, html.bild body { overflow: hidden; height: 100%; } html.bild body { padding: 0; background: transparent; } html.bild body > *:not(main), html.bild main > *:not(.atlas) { display: none !important; } html.bild .atlas { height: 100vh; } html.bild .atlas__buehne { position: fixed; inset: 0; width: 100vw; height: 100vh; } html.bild .spiel, html.bild .spiel__leinwand { display: none !important; } html.bild-ohne-text .atlas__buehne [data-slot] { visibility: hidden !important; } /* ========================================================================= Neue Stile (31.10.2026): Streamline, Nationalpark, Dekonstruktion, Acid & Rave, Outrun, Liquid Glass ========================================================================= */ /* Streamline Moderne */ .deko--sllinien svg, .deko--slband svg, .deko--sltropfen svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--sllinien rect { fill: var(--dc); } .deko--slband .a { fill: var(--d1); } .deko--slband .b { fill: var(--d2); } .deko--sltropfen .tl path { stroke: var(--d1); stroke-width: 7; stroke-linecap: round; fill: none; } .deko--sltropfen .k { fill: var(--d2); } .deko--sltropfen .cr path { stroke: #E9E4D8; stroke-width: 2.2; stroke-linecap: round; opacity: .8; } .deko--sltropfen .f { fill: var(--d3); } .deko--sltropfen .r { fill: none; stroke: #C9C4B8; stroke-width: 4; } .deko--sltropfen .gl { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; opacity: .55; } .deko--sltropfen.an .tl path { stroke-dasharray: 120; animation: sltempo 1.2s .3s both cubic-bezier(.2,.8,.2,1); } @keyframes sltempo { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } } .deko--slbullauge { border-radius: 50%; background: conic-gradient(from 210deg, #FAFAFA, #8E8E8E 18%, #F2F2F2 32%, #6A6A6A 48%, #E9E9E9 64%, #9A9A9A 80%, #FAFAFA); box-shadow: 0 18px 40px rgba(0,0,0,.25); } .deko--slbullauge i { position: absolute; inset: 11%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--d1) 60%, #fff), var(--d1) 55%, color-mix(in srgb, var(--d1) 70%, #000)); box-shadow: inset 0 0 0 4px rgba(0,0,0,.25); } .deko--slbullauge b { position: absolute; inset: 15%; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%); } /* Nationalpark */ .deko--nplandschaft svg, .deko--npkueste svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--npsonne { border-radius: 50%; background: var(--dc); } .deko--npleiste { background: var(--dc); } /* Dekonstruktion */ .deko--dkschichten svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--dkschichten .g { fill: var(--d3); } .deko--dkschichten .g2 { fill: none; stroke: var(--d1); stroke-width: 1.2; opacity: .35; } .deko--dkschichten .li path { stroke: var(--d1); stroke-width: 1; fill: none; opacity: .55; } .deko--dkschichten .bk { fill: var(--d1); } .deko--dkschichten .ak { fill: var(--d2); } .deko--dkschichten .kl { fill: var(--d1); } .deko--dkschichten .kl2 { fill: var(--d2); } .deko--dkfoto svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .deko--dkfoto .p { fill: var(--d2); } .deko--dkfoto .r { fill: url(#atlas-dkraster); } .deko--dkfoto pattern circle { fill: var(--d1); } .deko--dkfoto .a { fill: var(--d1); opacity: .9; } .deko--dkfoto .t { fill: #E8E2CC; opacity: .75; } /* Acid & Rave */ .deko--acsmiley svg { position: absolute; inset: 0; width: 100%; height: 116%; } .deko--acsmiley .f { fill: var(--dc); } .deko--acsmiley .g { fill: var(--d1); } .deko--acsmiley.an svg { animation: acwackel 2.4s ease-in-out infinite alternate; transform-origin: 50% 40%; } @keyframes acwackel { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } } .deko--acgitter svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--acgitter path { stroke: var(--dc); stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; } .deko--acschach, .deko--acschach2 { background: repeating-conic-gradient(var(--dc) 0 25%, transparent 0 50%) 0 0 / 3.4vmin 3.4vmin; } /* Outrun */ .deko--orhimmel i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--o1) 0%, var(--o2) 58%, var(--o3) 100%); } .deko--orhimmel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--orhimmel circle { fill: #FFFFFF; opacity: .75; } .deko--orsonne { border-radius: 50%; background: linear-gradient(180deg, var(--o1) 10%, var(--o2) 90%); box-shadow: 0 0 60px color-mix(in srgb, var(--o2) 55%, transparent); -webkit-mask: linear-gradient(#000 0 50%, transparent 50% 53%, #000 53% 60%, transparent 60% 64%, #000 64% 70%, transparent 70% 75%, #000 75% 80%, transparent 80% 86%, #000 86% 90%, transparent 90%); mask: linear-gradient(#000 0 50%, transparent 50% 53%, #000 53% 60%, transparent 60% 64%, #000 64% 70%, transparent 70% 75%, #000 75% 80%, transparent 80% 86%, #000 86% 90%, transparent 90%); } .deko--orboden { background: linear-gradient(180deg, var(--o1), #000); overflow: hidden; } .deko--orboden svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--orboden path { stroke: var(--dc); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--dc)); } .deko--orboden.an svg { animation: orfahrt 1.6s linear infinite; } @keyframes orfahrt { from { transform: translateY(0); } to { transform: translateY(3.5%); } } .deko--orberge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--orberge path { stroke: var(--dc); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--dc)); } .deko--orberge .f { fill: var(--o1); stroke: none; filter: none; } .deko--orheck svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(255,42,85,.55)); } .deko--orlaser svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--orlaser path { stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; } .deko--orlaser .a path { stroke: #00E5FF; filter: drop-shadow(0 0 5px #00E5FF); } .deko--orlaser .b path { stroke: #FF3CAC; filter: drop-shadow(0 0 5px #FF3CAC); } .deko--orlaser.an .a { animation: orlaser 3s ease-in-out infinite alternate; transform-origin: 50% 100%; } .deko--orlaser.an .b { animation: orlaser 3s ease-in-out infinite alternate-reverse; transform-origin: 50% 100%; } @keyframes orlaser { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } } /* Liquid Glass */ .deko--lgwand { background: var(--dc); overflow: hidden; } .deko--lgwand i { position: absolute; border-radius: 50%; } .deko--lgwand i:nth-child(1) { left: -10%; top: -20%; width: 70%; height: 90%; background: radial-gradient(closest-side, var(--l1), transparent); } .deko--lgwand i:nth-child(2) { right: -12%; top: -10%; width: 60%; height: 80%; background: radial-gradient(closest-side, var(--l2), transparent); } .deko--lgwand i:nth-child(3) { left: 30%; bottom: -30%; width: 60%; height: 80%; background: radial-gradient(closest-side, var(--l3), transparent); } .deko--lgwand i:nth-child(4) { right: 10%; bottom: -10%; width: 40%; height: 60%; background: radial-gradient(closest-side, var(--l4), transparent); } .deko--lgwand.an i:nth-child(1) { animation: lgtreiben 18s ease-in-out infinite alternate; } .deko--lgwand.an i:nth-child(3) { animation: lgtreiben 22s ease-in-out infinite alternate-reverse; } @keyframes lgtreiben { to { transform: translate(8%, 6%) scale(1.08); } } .deko--lgkarte, .deko--lgknopf, .deko--lgleiste { --lt: rgba(255,255,255,.08); background: linear-gradient(160deg, rgba(255,255,255,.32), var(--lt) 42%, rgba(255,255,255,.04) 70%, rgba(255,255,255,.18)); -webkit-backdrop-filter: blur(3px) saturate(185%) brightness(1.06); backdrop-filter: blur(3px) saturate(185%) brightness(1.06); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.45), inset 1.5px 0 0 rgba(255,255,255,.55), inset -1px 0 0 rgba(255,255,255,.35), inset 0 0 22px rgba(255,255,255,.18), 0 24px 60px rgba(0,0,0,.2); } .deko--lgkarte { border-radius: 3.2vmin; } .deko--lgknopf, .deko--lgleiste { border-radius: 999px; } .deko--lgkarte i, .deko--lgknopf i { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), radial-gradient(80% 40% at 90% 100%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); mix-blend-mode: screen; } .deko--lgleiste { display: flex; align-items: center; justify-content: space-around; padding: 0 4%; } .deko--lgleiste i { position: absolute; left: 3%; top: 12%; bottom: 12%; width: 26%; border-radius: 999px; background: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .deko--lgleiste b { position: relative; width: 14%; aspect-ratio: 1; max-height: 46%; border-radius: 30%; border: 2px solid currentColor; color: rgba(14,18,32,.7); } html.sparsam .deko--lgkarte, html.sparsam .deko--lgknopf, html.sparsam .deko--lgleiste { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.22); } /* Spiele der neuen Stile */ .sl-strich { height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, currentColor); } .np-tanne { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 40px solid #1F2E2B; } .dk-fetzen { font: 700 64px/1 'Space Grotesk', sans-serif; letter-spacing: -.06em; white-space: nowrap; } .ac-smiley { border-radius: 50%; background: #F4E21B; box-shadow: inset 0 0 0 2px #0B0B0B; } .ac-smiley::before, .ac-smiley::after { content: ''; position: absolute; top: 30%; width: 12%; height: 22%; border-radius: 50%; background: #0B0B0B; } .ac-smiley::before { left: 30%; } .ac-smiley::after { right: 30%; } .ac-smiley i { position: absolute; left: 24%; right: 24%; top: 52%; height: 22%; border-bottom: 3px solid #0B0B0B; border-radius: 0 0 50% 50%; } .or-spur { border-radius: 50%; background: #FF3CAC; box-shadow: 0 0 12px #FF3CAC; } .lg-linse { border-radius: 50%; -webkit-backdrop-filter: blur(2px) saturate(190%) brightness(1.1); backdrop-filter: blur(2px) saturate(190%) brightness(1.1); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,.06) 50%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4), 0 10px 30px rgba(0,0,0,.2); pointer-events: none; } .atlas__buehne[data-spiel='streamline'], .atlas__buehne[data-spiel='nationalpark'], .atlas__buehne[data-spiel='dekonstruktion'], .atlas__buehne[data-spiel='acid'] { cursor: pointer; } /* ========================================================================= Neue Stile, Runde 2 (31.10.2026): Barock, Manga, Dopamine, Dark Academia, Y3K, Tech-Dark-UI ========================================================================= */ /* Barock */ .deko--brvorhang svg, .deko--brkartusche svg, .deko--brhimmel svg, .deko--broval svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--brlicht i { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 32% at 50% 62%, rgba(255,232,170,.42), rgba(255,232,170,0) 70%), linear-gradient(180deg, rgba(255,232,170,0), rgba(255,232,170,.14) 40%, rgba(255,232,170,0)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); } .deko--brkartusche svg { filter: drop-shadow(0 18px 26px rgba(58,35,18,.35)); } .deko--broval svg { filter: drop-shadow(0 14px 30px rgba(46,36,24,.35)); } /* Manga */ .deko--mgseite svg, .deko--mgtempo svg, .deko--mgsfx svg, .deko--mgfunkeln svg, .deko--dpblobs svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--mgsfx text { font: 400 150px 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif; font-weight: 900; fill: #FFFFFF; stroke: #111; stroke-width: 22; stroke-linejoin: round; paint-order: stroke; } .deko--mgsfx .k { fill: var(--dc); stroke: none; } .deko--mgton { background: radial-gradient(circle, var(--dc) 1.2px, transparent 1.6px) 0 0 / 9px 9px; -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); } .deko--mgtempo { overflow: hidden; -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); } .deko--mgfunkeln.an svg { animation: mgfunkeln 3s ease-in-out infinite alternate; } @keyframes mgfunkeln { from { opacity: .85; transform: scale(.98); } to { opacity: 1; transform: scale(1.02); } } /* Dopamine */ .deko--dpblobs svg { filter: drop-shadow(0 18px 30px rgba(0,0,0,.12)); } .deko--dpblobs.an svg { animation: dphuepf 2.8s ease-in-out infinite alternate; } @keyframes dphuepf { from { transform: translateY(-1%) rotate(-1deg); } to { transform: translateY(1%) rotate(1deg); } } /* Dark Academia */ .deko--dabuecher svg, .deko--dapapier svg, .deko--dalaub svg, .deko--daexlibris svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--dabuecher { -webkit-mask: linear-gradient(90deg, transparent, #000 18%); mask: linear-gradient(90deg, transparent, #000 18%); } .deko--dakerze i { position: absolute; left: 30%; right: 30%; top: 28%; bottom: 0; background: linear-gradient(90deg, #D9C9A8, #F4EBD6 40%, #CDBB98); border-radius: 4px 4px 0 0; } .deko--dakerze b { position: absolute; left: 41%; right: 41%; top: 6%; height: 22%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 70%, #FFF6D0, #FFC24A 45%, rgba(255,120,30,.2) 80%); } .deko--dakerze u { position: absolute; left: -250%; right: -250%; top: -40%; height: 110%; background: radial-gradient(closest-side, rgba(255,190,90,.32), transparent); pointer-events: none; } .deko--dakerze.an b { animation: daflacker 1.6s ease-in-out infinite alternate; transform-origin: 50% 100%; } @keyframes daflacker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.94, 1.06) rotate(2deg); } 100% { transform: scale(1.04, .96) rotate(-1deg); } } .deko--dapapier svg { filter: drop-shadow(0 12px 24px rgba(43,31,22,.25)); } .deko--dapapier { transform: rotate(3deg); } .deko--dasiegel { border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--dc) 70%, #fff), var(--dc) 55%, color-mix(in srgb, var(--dc) 60%, #000)); box-shadow: 0 6px 14px rgba(0,0,0,.3); } .deko--dasiegel i { position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 0 2px 4px rgba(0,0,0,.35), inset 0 -2px 3px rgba(255,255,255,.25); } /* Y3K */ .deko--y3tribal svg, .deko--y3sterne svg, .deko--y3draht svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--y3tribal svg { filter: drop-shadow(0 0 18px rgba(255,255,255,.18)); } .deko--y3sterne.an svg { animation: y3funkel 2.4s ease-in-out infinite alternate; } @keyframes y3funkel { from { opacity: .55; } to { opacity: 1; } } .deko--y3draht path { stroke: var(--dc); stroke-width: 2.4; fill: none; vector-effect: non-scaling-stroke; } .deko--y3schimmer { background: conic-gradient(from 210deg at 70% 40%, #E9F0FA, #C9D9F2, #F2E3FF, #D7F5FF, #FFF2E0, #DCE6F2, #E9F0FA); } /* Tech-Dark-UI */ .deko--tdraster { background-image: radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1.4px); background-size: 2.4vmin 2.4vmin; -webkit-mask: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); mask: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); } .deko--tdstrahl { background: radial-gradient(ellipse 60% 70% at 50% 0%, color-mix(in srgb, var(--dc) 45%, transparent), transparent 70%); } .deko--tdstrahl::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 70%; background: linear-gradient(180deg, transparent, var(--dc), transparent); box-shadow: 0 0 18px 2px var(--dc); } .deko--tdkarte, .deko--tdkonsole { border-radius: 1.4vmin; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), #0E0F12; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); container-type: size; overflow: hidden; color: #E6E6E8; font-family: 'Inter', sans-serif; } .deko--tdkarte p { margin: 0; display: flex; align-items: center; gap: 4cqw; padding: 0 5cqw; height: 15cqh; font-size: 5.4cqh; } .deko--tdkarte .k { height: 20cqh; border-bottom: 1px solid rgba(255,255,255,.08); color: #8A8F98; } .deko--tdkarte .k span { padding: .2em .5em; border-radius: .4em; background: rgba(255,255,255,.06); font: 500 1em 'Share Tech Mono', monospace; color: #C9CBD1; } .deko--tdkarte .k em { font-style: normal; } .deko--tdkarte .z { color: #C9CBD1; } .deko--tdkarte .z.an { background: rgba(255,255,255,.06); color: #FFFFFF; } .deko--tdkarte .z i { width: 5cqh; height: 5cqh; border-radius: 1.4cqh; border: 1.5px solid currentColor; opacity: .7; } .deko--tdkarte kbd { margin-left: auto; font: 500 .85em 'Share Tech Mono', monospace; padding: .1em .45em; border-radius: .35em; border: 1px solid rgba(255,255,255,.12); color: #8A8F98; } .deko--tdkonsole .k { margin: 0; display: flex; align-items: center; gap: 1.6cqw; height: 11cqh; padding: 0 4cqw; border-bottom: 1px solid rgba(255,255,255,.08); font: 400 4.4cqh 'Share Tech Mono', monospace; color: #8A8F98; } .deko--tdkonsole .k b { width: 2.6cqh; height: 2.6cqh; border-radius: 50%; background: #3A3D44; } .deko--tdkonsole .k span { margin-left: auto; margin-right: auto; } .deko--tdkonsole pre { margin: 0; padding: 5cqh 5cqw; font: 400 5.2cqh/1.55 'Share Tech Mono', monospace; color: #E6E6E8; white-space: pre-wrap; } .deko--tdkonsole .g { color: #2ECC8F; } .deko--tdkonsole .d { color: #6B7079; } .deko--tdkonsole pre i { display: inline-block; width: .6em; height: 1em; vertical-align: -.15em; background: #2ECC8F; } .deko--tdkonsole.an pre i { animation: tdcursor 1s steps(1) infinite; } @keyframes tdcursor { 50% { opacity: 0; } } .deko--tdspektrum { border-radius: 50%; background: conic-gradient(from 0deg, #FF4D4D, #FFB84D, #F5F54D, #4DFF88, #4DD2FF, #7A4DFF, #FF4DD2, #FF4D4D); filter: blur(5vmin); opacity: .55; } .deko--tdspektrum.an { animation: tddreh 12s linear infinite; } @keyframes tddreh { to { transform: rotate(360deg); } } .deko--tdrahmen { border-radius: 22%; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.7); } .deko--tdrahmen i { position: absolute; width: 8%; height: 8%; border-color: rgba(255,255,255,.45); border-style: solid; border-width: 0; } .deko--tdrahmen i:nth-child(1) { left: 8%; top: 8%; border-left-width: 1px; border-top-width: 1px; } .deko--tdrahmen i:nth-child(2) { right: 8%; top: 8%; border-right-width: 1px; border-top-width: 1px; } .deko--tdrahmen i:nth-child(3) { left: 8%; bottom: 8%; border-left-width: 1px; border-bottom-width: 1px; } .deko--tdrahmen i:nth-child(4) { right: 8%; bottom: 8%; border-right-width: 1px; border-bottom-width: 1px; } html.sparsam .deko--tdspektrum { animation: none; } /* Spiele, Runde 2 */ .br-gold { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4C4, #C9A247 60%, #7A5418); } .mg-sfx { font: 900 72px/1 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif; color: #FFFFFF; -webkit-text-stroke: 8px #111; paint-order: stroke fill; white-space: nowrap; } .dp-blob { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; } .da-blatt { width: 22px; height: 34px; border-radius: 50% 0 50% 0; background: #B5642E; } .y3-stern { width: 30px; height: 30px; background: linear-gradient(135deg, #FFFFFF, #8C93A3 50%, #FFFFFF); clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%); } .td-spur { width: 6px; height: 6px; border-radius: 50%; background: #7C5CFF; box-shadow: 0 0 10px #7C5CFF; } .atlas__buehne[data-spiel='barock'], .atlas__buehne[data-spiel='manga'], .atlas__buehne[data-spiel='dopamine'], .atlas__buehne[data-spiel='y3k'] { cursor: pointer; } /* ========================================================================= Runde 3 (31.10.2026): Anti-Design; Varianten Googie, Wabi-Sabi, Scrapbook ========================================================================= */ /* Anti-Design */ .deko--adblock, .deko--adblock2 { background: var(--dc); mix-blend-mode: multiply; } .deko--adbuchstabe svg, .deko--adkritzel svg, .deko--adplatz svg, .deko--adplatz2 svg, .deko--adcursor svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .deko--adbuchstabe { mix-blend-mode: multiply; } .deko--adraster { overflow: hidden; background: #FFFFFF; } .deko--adraster i, .deko--adraster b { position: absolute; inset: 0; mix-blend-mode: multiply; -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 75%); mask: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 75%); } .deko--adraster i { background: radial-gradient(circle, #00E5FF 38%, transparent 42%) 0 0 / 2.4vmin 2.4vmin; } .deko--adraster b { background: radial-gradient(circle, #FF2BD6 38%, transparent 42%) .7vmin .5vmin / 2.4vmin 2.4vmin; transform: rotate(4deg) scale(1.1); } .deko--adraster u { position: absolute; right: 4%; bottom: -6%; font: 900 32vmin/1 'Times New Roman', Times, serif; font-style: italic; text-decoration: none; color: #111; transform: scaleX(1.6); transform-origin: 100% 100%; mix-blend-mode: multiply; } .deko--admarker { background: color-mix(in srgb, var(--dc) 85%, transparent); mix-blend-mode: multiply; border-radius: 2px 6px 3px 8px; } .deko--adsticker { border-radius: 50%; background: var(--dc); color: #FFFFFF; display: grid; place-items: center; text-align: center; container-type: size; box-shadow: 0 0 0 .5vmin #FFFFFF, .6vmin .8vmin 0 .5vmin #111; } .deko--adsticker span { font: 900 17cqw/1 'Arial Black', Arial, sans-serif; letter-spacing: -.04em; } .deko--adcursor svg { filter: drop-shadow(1vmin 1vmin 0 rgba(0,0,0,.25)); } .deko--adplatz, .deko--adplatz2 { background: #E2E2DE; border: 1px solid #9A9A9A; container-type: size; } .deko--adplatz path, .deko--adplatz2 path { stroke: #9A9A9A; stroke-width: 1; fill: none; } .deko--adplatz span, .deko--adplatz2 span { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); padding: .3em .6em; background: #E2E2DE; font: 400 clamp(9px, 4.4cqmin, 15px) 'Courier New', Courier, monospace; color: #6A6A6A; white-space: nowrap; } .deko--adnotiz { container-type: size; } .deko--adnotiz span { position: absolute; right: 0; top: 0; font: 700 32cqh/1 'Caveat', 'Segoe Script', cursive; color: var(--dc); white-space: nowrap; } .deko--adnotiz svg { position: absolute; left: 0; bottom: 0; width: 70%; height: 60%; } /* Googie */ .deko--googieschild svg, .deko--ggdach svg, .deko--ggstern svg, .deko--ggstern2 svg, .deko--wsschale svg, .deko--wszweig svg, .deko--sbsticker svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--googieschild svg { filter: drop-shadow(1.2vmin 1.4vmin 0 rgba(43,42,51,.18)); } .deko--ggstern.an svg, .deko--ggstern2.an svg { animation: ggblink 2.2s steps(2) infinite; } .deko--ggstern2.an svg { animation-delay: -1.1s; } @keyframes ggblink { 50% { transform: rotate(22deg) scale(.86); } } /* Wabi-Sabi */ .deko--wspapier i { position: absolute; inset: 0; background: radial-gradient(ellipse 30% 22% at 18% 78%, rgba(120,98,72,.14), transparent 70%), radial-gradient(ellipse 26% 30% at 84% 20%, rgba(255,250,240,.35), transparent 70%), radial-gradient(ellipse 40% 18% at 60% 92%, rgba(120,98,72,.12), transparent 70%), repeating-linear-gradient(97deg, rgba(90,70,50,.035) 0 1px, transparent 1px 7px), repeating-linear-gradient(8deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px); } .deko--wsschale svg { filter: drop-shadow(0 2vmin 3vmin rgba(62,50,41,.18)); } /* Scrapbook */ .deko--sbfoto, .deko--sbfoto2 { background: #FFFFFF; box-shadow: 0 1.2vmin 2.4vmin rgba(60,40,20,.28); display: flex; flex-direction: column; container-type: size; } .deko--sbfoto b, .deko--sbfoto2 b { display: block; margin: 7% 7% 0; flex: 1 1 auto; min-height: 0; overflow: hidden; } .deko--sbfoto b svg { width: 100%; height: 100%; display: block; } .deko--sbfoto span, .deko--sbfoto2 span { flex: 0 0 auto; height: 22cqh; display: grid; place-items: center; white-space: nowrap; font: 700 clamp(14px, 11cqh, 34px)/1 'Caveat', 'Segoe Script', cursive; color: #2B2B2B; } .deko--sbtape, .deko--sbtape2 { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--dc) 88%, transparent) 0 6px, color-mix(in srgb, var(--dc) 70%, #fff) 6px 12px); opacity: .9; clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 4%, 96% 100%, 90% 90%, 85% 100%, 0 96%); } .deko--sbsticker svg { filter: drop-shadow(.3vmin .5vmin 0 rgba(0,0,0,.18)); } .deko--sbticket { background: radial-gradient(ellipse 5% 22% at 0 50%, #E6D7BA 98%, transparent 100%), radial-gradient(ellipse 5% 22% at 100% 50%, #E6D7BA 98%, transparent 100%), var(--dc); color: #FFF4E6; display: flex; align-items: center; justify-content: space-between; padding: 0 2.4vmin; container-type: size; box-shadow: 0 .6vmin 1.2vmin rgba(60,40,20,.2); } .deko--sbticket span { font: 700 min(36cqh, 17cqw)/1 'Caveat Brush', 'Caveat', cursive; } .deko--sbticket b { white-space: nowrap; font: 400 min(18cqh, 9cqw)/1 'Courier New', monospace; border-left: 2px dashed rgba(255,244,230,.6); padding-left: 6cqw; } /* Spiel */ .ad-kasten { padding: .15em .4em; white-space: nowrap; line-height: 1.1; font-weight: 700; box-shadow: .12em .12em 0 #111; } .atlas__buehne[data-spiel='antidesign'] { cursor: crosshair; } /* ========================================================================= Runde 4 (31.10.2026): Arts & Crafts, Polnische Plakatschule, Old-School-Tattoo, Blaupause, Glitch Art, Solarpunk ========================================================================= */ /* Arts & Crafts */ .deko--acranken svg, .deko--acmedaillon svg, .deko--acinitial svg, .deko--acvogel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--acpanel i { position: absolute; inset: 0; background: #EFE6CF; box-shadow: inset 0 0 0 .6vmin #EFE6CF, inset 0 0 0 .8vmin #1F3350, inset 0 0 0 1.4vmin #EFE6CF, inset 0 0 0 1.55vmin #A5452F, 0 2vmin 4vmin rgba(0,0,0,.35); } .deko--acmedaillon svg { filter: drop-shadow(0 1.4vmin 2.6vmin rgba(0,0,0,.35)); } .deko--acrahmen i { position: absolute; inset: 0; border: .5vmin solid #1A1712; outline: .2vmin solid #1A1712; outline-offset: -1.4vmin; } .deko--acrahmen b { position: absolute; width: 5vmin; height: 5vmin; background: radial-gradient(circle at 50% 50%, #A5452F 22%, transparent 24%), conic-gradient(from 45deg, #1A1712 0 25%, transparent 0 50%, #1A1712 0 75%, transparent 0); border-radius: 50%; } .deko--acrahmen b:nth-of-type(1) { left: -1.6vmin; top: -1.6vmin; } .deko--acrahmen b:nth-of-type(2) { right: -1.6vmin; top: -1.6vmin; } .deko--acrahmen b:nth-of-type(3) { left: -1.6vmin; bottom: -1.6vmin; } .deko--acrahmen b:nth-of-type(4) { right: -1.6vmin; bottom: -1.6vmin; } /* Polnische Plakatschule */ .deko--pkkopf svg, .deko--pkakrobat svg, .deko--pkauge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--pkpinsel i { position: absolute; inset: 0; background: radial-gradient(ellipse 22% 30% at 78% 22%, var(--p2), transparent 70%), radial-gradient(ellipse 30% 20% at 20% 80%, var(--p1), transparent 70%), repeating-linear-gradient(-12deg, transparent 0 18px, var(--p1) 18px 19px, transparent 19px 46px), radial-gradient(ellipse 40% 30% at 60% 70%, var(--p1), transparent 75%); opacity: .8; } .deko--pkkreis { background: var(--dc); border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; box-shadow: inset -1vmin -1vmin 0 rgba(0,0,0,.12); } .deko--pkakrobat.an svg { animation: pkwackeln 2.6s ease-in-out infinite alternate; transform-origin: 50% 82%; } @keyframes pkwackeln { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } } .deko--pkauge svg { filter: drop-shadow(.8vmin 1vmin 0 rgba(0,0,0,.35)); } /* Old-School-Tattoo */ .deko--ttsterne svg, .deko--ttflash svg, .deko--ttschwalbe svg, .deko--ttschwalbe2 svg, .deko--ttherz svg, .deko--ttanker svg, .deko--ttband svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--ttflash svg { filter: drop-shadow(0 1.2vmin 2.4vmin rgba(60,40,20,.28)); } .deko--ttband { container-type: size; } .deko--ttband span { position: absolute; left: 12%; right: 12%; top: 18%; height: 52%; display: grid; place-items: center; font: 400 min(34cqh, 9cqw)/1 'Rye', Georgia, serif; color: #1A1A1A; letter-spacing: .04em; } .deko--ttschwalbe.an svg { animation: ttflug 2.4s ease-in-out infinite alternate; } .deko--ttschwalbe2.an svg { animation: ttflug 2.4s ease-in-out infinite alternate-reverse; } @keyframes ttflug { from { transform: translateY(-3%) rotate(-2deg); } to { transform: translateY(3%) rotate(2deg); } } /* Blaupause */ .deko--bpraster { background-image: linear-gradient(var(--dc) 1px, transparent 1px), linear-gradient(90deg, var(--dc) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--dc) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--dc) 45%, transparent) 1px, transparent 1px); background-size: 10vmin 10vmin, 10vmin 10vmin, 2vmin 2vmin, 2vmin 2vmin; } .deko--bpzahnrad svg, .deko--bpteil svg, .deko--bppatent svg, .deko--bpmass svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .deko--bpzahnrad.an svg > g:first-child { animation: bpdreh 30s linear infinite; transform-origin: 0 0; } @keyframes bpdreh { to { transform: rotate(360deg); } } .deko--bpmass { container-type: size; } .deko--bpmass span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -30%); padding: 0 .5em; font: 400 clamp(10px, 50cqh, 15px)/1 'Share Tech Mono', monospace; color: var(--dc); } .deko--bpschriftfeld { border: 1.5px solid var(--dc); color: var(--dc); container-type: size; display: grid; grid-template-rows: 1fr 1fr 1fr; font: 400 clamp(8px, 15cqh, 13px)/1 'Share Tech Mono', monospace; } .deko--bpschriftfeld p { margin: 0; display: grid; grid-template-columns: 1.6fr 1fr; border-top: 1px solid var(--dc); } .deko--bpschriftfeld p:first-child { border-top: 0; } .deko--bpschriftfeld p > * { display: flex; align-items: center; padding: 0 .6em; white-space: nowrap; overflow: hidden; } .deko--bpschriftfeld p > * + * { border-left: 1px solid var(--dc); } .deko--bpschriftfeld b { font-weight: 400; text-transform: uppercase; letter-spacing: .06em; } /* Glitch Art */ .deko--glstreifen { overflow: visible; } .deko--glstreifen i { position: absolute; left: 0; right: 0; height: 14.28%; background: linear-gradient(90deg, #FF0040, #FF00D4 20%, #00F0FF 45%, #00FF88 60%, #FFE600 80%, #FF0040); mix-blend-mode: screen; } .deko--glstreifen i:nth-child(1) { top: 0; transform: translateX(-6%); opacity: .9; } .deko--glstreifen i:nth-child(2) { top: 14.28%; transform: translateX(8%); background: #0B0B0B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .deko--glstreifen i:nth-child(3) { top: 28.56%; transform: translateX(-12%); filter: hue-rotate(120deg); } .deko--glstreifen i:nth-child(4) { top: 42.84%; height: 4%; transform: translateX(14%); background: #FFFFFF; } .deko--glstreifen i:nth-child(5) { top: 52%; transform: translateX(-3%); filter: hue-rotate(220deg) saturate(1.4); } .deko--glstreifen i:nth-child(6) { top: 70%; height: 8%; transform: translateX(10%); background: repeating-linear-gradient(90deg, #FF0040 0 6px, #00F0FF 6px 12px); } .deko--glstreifen i:nth-child(7) { top: 82%; transform: translateX(-9%); filter: hue-rotate(60deg); opacity: .8; } .deko--glstreifen.an i:nth-child(odd) { animation: glruck 1.8s steps(1) infinite; } .deko--glstreifen.an i:nth-child(even) { animation: glruck 2.3s steps(1) infinite reverse; } @keyframes glruck { 0% { margin-left: 0; } 20% { margin-left: 4%; } 24% { margin-left: -6%; } 28% { margin-left: 0; } 70% { margin-left: 2%; } 72% { margin-left: 0; } } .deko--glscan { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px); pointer-events: none; mix-blend-mode: multiply; } .deko--glsort { display: flex; align-items: flex-start; } .deko--glsort i { flex: 1; height: 100%; } .deko--glsort i:nth-child(4n+1) { background: linear-gradient(180deg, #1A0F2E 0 8%, #3B1E6E 20%, #FF4D8D 46%, #FFB800 62%, #FFF2C2 70%, #1A0F2E 92%); } .deko--glsort i:nth-child(4n+2) { background: linear-gradient(180deg, #1A0F2E 0 18%, #2E5BFF 34%, #00F0FF 52%, #FFFFFF 58%, #1A0F2E 86%); } .deko--glsort i:nth-child(4n+3) { background: linear-gradient(180deg, #1A0F2E 0 4%, #7A2EFF 24%, #FF4D8D 40%, #FFB800 76%, #1A0F2E 98%); } .deko--glsort i:nth-child(4n) { background: linear-gradient(180deg, #1A0F2E 0 26%, #FF4D8D 44%, #FFE6F0 54%, #FFB800 66%, #1A0F2E 80%); } .deko--glsort i:nth-child(3n) { transform: scaleY(.86); transform-origin: 50% 0; } .deko--glsort i:nth-child(5n) { transform: scaleY(1.1); transform-origin: 50% 0; } .deko--glbloecke { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(6, 1fr); background: #6A7A8A; } .deko--glbloecke i:nth-child(7n+1) { background: #3A8C5A; } .deko--glbloecke i:nth-child(7n+2) { background: #C83A8C; } .deko--glbloecke i:nth-child(7n+3) { background: #8C8C3A; } .deko--glbloecke i:nth-child(7n+4) { background: linear-gradient(90deg, #39FF14, #1A1A1A); } .deko--glbloecke i:nth-child(7n+5) { background: #5A6E8C; } .deko--glbloecke i:nth-child(7n+6) { background: repeating-linear-gradient(0deg, #FF00D4 0 3px, #00F0FF 3px 6px); } .deko--glbloecke i:nth-child(11n) { grid-column: span 2; background: #E6E6E6; } .deko--glbloecke i:nth-child(13n) { background: #111; } .deko--glhex { container-type: size; } .deko--glhex pre { margin: 0; font: 400 clamp(8px, 15cqh, 14px)/1.25 'Share Tech Mono', monospace; color: #39FF14; white-space: pre; overflow: hidden; } /* Solarpunk */ .deko--spsonne svg, .deko--spturm svg, .deko--spfenster svg, .deko--sphuegel svg, .deko--spschiff svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--spsonne.an svg { animation: spsonne 40s linear infinite; } @keyframes spsonne { to { transform: rotate(360deg); } } .deko--spwind b, .deko--spwind2 b { position: absolute; left: 47%; width: 6%; top: 22%; bottom: 0; background: linear-gradient(90deg, #FBF8EE, #D9D6C8); border: 1px solid #1F4A3A; border-radius: 40% 40% 0 0; } .deko--spwind i, .deko--spwind2 i { position: absolute; left: 50%; top: 22%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); } .deko--spwind i svg, .deko--spwind2 i svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--spwind.an i svg { animation: spdreh 6s linear infinite; } .deko--spwind2.an i svg { animation: spdreh 8s linear infinite; } @keyframes spdreh { to { transform: rotate(360deg); } } .deko--spschiff.an svg { animation: spschweb 6s ease-in-out infinite alternate; } @keyframes spschweb { from { transform: translate(-6%, 0); } to { transform: translate(6%, -6%); } } html.sparsam .deko--glstreifen i, html.sparsam .deko--spwind i svg, html.sparsam .deko--spwind2 i svg { animation: none; } /* Spiele, Runde 4 */ .ac-blatt { width: 16px; height: 24px; border-radius: 0 100% 0 100%; background: #6E8A4E; } .pk-klecks { border-radius: 46% 54% 38% 62% / 55% 40% 60% 45%; } .tt-stern { width: 34px; height: 34px; background: #E8B830; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); filter: drop-shadow(0 0 0 #1A1A1A); } .bp-kreuz { width: 46px; height: 46px; border: 1px solid #FFFFFF; border-radius: 50%; font: 400 11px/1 'Share Tech Mono', monospace; color: #FFFFFF; } .bp-kreuz::before, .bp-kreuz::after { content: ''; position: absolute; background: #FFFFFF; } .bp-kreuz::before { left: -14px; right: -14px; top: 50%; height: 1px; } .bp-kreuz::after { top: -14px; bottom: -14px; left: 50%; width: 1px; } .bp-kreuz span { position: absolute; left: 60px; top: -16px; white-space: nowrap; } .gl-block { mix-blend-mode: difference; background: #FFFFFF; } .sp-samen { width: 10px; height: 10px; border-radius: 50%; background: #E8B23A; box-shadow: 0 0 0 4px rgba(232,178,58,.25); } .atlas__buehne[data-spiel='polnisch'], .atlas__buehne[data-spiel='tattoo'], .atlas__buehne[data-spiel='glitch'], .atlas__buehne[data-spiel='solarpunk'] { cursor: pointer; } .atlas__buehne[data-spiel='blaupause'] { cursor: crosshair; } /* ========================================================================= Runde 5 (31.10.2026): Rokoko, Kubismus, City Pop, Low Poly, Cottagecore, Papierschnitt ========================================================================= */ /* Rokoko */ .deko--rkgirlande svg, .deko--rkrahmen svg, .deko--rkstreu svg, .deko--rkteller svg, .deko--rkschaukel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--rkpastell i { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 30% at 20% 20%, rgba(255,255,255,.55), transparent 70%), radial-gradient(ellipse 30% 40% at 85% 70%, rgba(243,196,208,.45), transparent 70%), radial-gradient(ellipse 50% 30% at 60% 100%, rgba(155,181,154,.35), transparent 70%); } .deko--rkrahmen svg { filter: drop-shadow(0 1.4vmin 2.4vmin rgba(90,70,50,.25)); } .deko--rkteller svg { filter: drop-shadow(0 1vmin 2vmin rgba(75,91,122,.2)); } .deko--rkschaukel.an .rk-schwung { animation: rkschwung 3.6s ease-in-out infinite alternate; transform-origin: 200px 60px; transform-box: view-box; } @keyframes rkschwung { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } } /* Kubismus */ .deko--kbfacetten svg, .deko--kbgitarre svg, .deko--kbzeitung svg, .deko--kbkreise svg, .deko--kbkreise2 svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--kbkreise.an svg { animation: kbdreh 24s linear infinite; } .deko--kbkreise2.an svg { animation: kbdreh 16s linear infinite reverse; } @keyframes kbdreh { to { transform: rotate(360deg); } } /* City Pop */ .deko--cphaus svg, .deko--cppalme svg, .deko--cpsegel svg, .deko--cpkassette svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--cphimmel i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--h1), var(--h2) 55%, var(--h3)); } .deko--cppool i { position: absolute; inset: 0; background: repeating-radial-gradient(ellipse 30px 12px at 30% 40%, rgba(255,255,255,.55) 0 2px, transparent 3px 18px), linear-gradient(180deg, #43C6E8, #1E9CC8); border-top: .8vmin solid #FFFFFF; } .deko--cppool.an i { animation: cpwasser 6s linear infinite; } @keyframes cpwasser { to { background-position: 60px 20px, 0 0; } } .deko--cppalme.an svg { animation: cpwiegen 4s ease-in-out infinite alternate; transform-origin: 50% 100%; } @keyframes cpwiegen { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } } .deko--cpsonne { border-radius: 50%; background: linear-gradient(180deg, #FFE9A0, #FF9A7A); -webkit-mask: linear-gradient(#000 0 55%, transparent 55% 60%, #000 60% 66%, transparent 66% 70%, #000 70% 75%, transparent 75% 78%, #000 78%); mask: linear-gradient(#000 0 55%, transparent 55% 60%, #000 60% 66%, transparent 66% 70%, #000 70% 75%, transparent 75% 78%, #000 78%); } .deko--cpmeer i { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 2px, transparent 2px 14px), linear-gradient(180deg, #5B4B9A, #2A1E4A); } .deko--cpstreifen i { position: absolute; inset: 0; background: linear-gradient(180deg, #7FD0E8 0 25%, #FF6F91 25% 50%, #FFD08A 50% 75%, #1C3A5E 75%); } .deko--cpkassette svg { filter: drop-shadow(0 1.4vmin 2.4vmin rgba(28,58,94,.25)); } .deko--cpkassette.an .cp-spule { animation: kbdreh 3s linear infinite; transform-origin: 150px 139px; transform-box: view-box; } /* Low Poly */ .deko--lpberge svg, .deko--lpkristall svg, .deko--lpfuchs svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--lpkristall.an .lp-dreh { animation: lpschweb 4s ease-in-out infinite alternate; } @keyframes lpschweb { from { transform: translateY(-4px) rotate(-3deg); } to { transform: translateY(4px) rotate(3deg); } } .deko--lpkristall svg { filter: drop-shadow(0 1.4vmin 2vmin rgba(58,46,176,.3)); } /* Cottagecore */ .deko--ccwiese svg, .deko--ccfalter svg, .deko--ccfalter2 svg, .deko--cckorb svg, .deko--ccpilze svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--ccfalter.an .cc-flug, .deko--ccfalter2.an .cc-flug { animation: ccflug .5s ease-in-out infinite alternate; transform-origin: 50% 50%; transform-box: fill-box; } .deko--ccfalter2.an .cc-flug { animation-duration: .65s; } @keyframes ccflug { to { transform: scaleX(.35); } } .deko--ccvichy { background: linear-gradient(90deg, var(--dc) 50%, transparent 50%) 0 0 / 5vmin 5vmin, linear-gradient(var(--dc) 50%, transparent 50%) 0 0 / 5vmin 5vmin; } .deko--cczettel i { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 2.4vmin, rgba(122,140,160,.18) 2.4vmin calc(2.4vmin + 1px)), #FFFBF2; box-shadow: 0 1vmin 2.4vmin rgba(90,62,54,.18); } .deko--cczettel i::before { content: ''; position: absolute; left: 44%; top: -1.6vmin; width: 12%; height: 3vmin; background: rgba(214,122,122,.55); transform: rotate(-3deg); } /* Papierschnitt */ .deko--psebenen svg, .deko--psschere svg, .deko--psmatisse svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--pssonne { border-radius: 50%; background: var(--dc); box-shadow: .6vmin .9vmin 1.4vmin rgba(58,42,74,.3); } .deko--pssonne i { position: absolute; inset: -22%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--dc) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%); mask: radial-gradient(circle, transparent 45%, #000 46%); opacity: .55; z-index: -1; } .deko--psschere svg { filter: drop-shadow(.4vmin .6vmin 0 rgba(0,0,0,.12)); } html.sparsam .deko--kbkreise svg, html.sparsam .deko--kbkreise2 svg, html.sparsam .deko--cppool i { animation: none; } /* Spiele, Runde 5 */ .rk-blatt { width: 14px; height: 20px; border-radius: 50% 0 50% 50%; } .kb-splitter { clip-path: polygon(50% 0, 100% 38%, 78% 100%, 10% 82%, 0 30%); } .cp-blase { border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(255,255,255,.18); } .lp-dreieck { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .cc-blume { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #E8B23A 22%, transparent 24%), conic-gradient(var(--bf) 0 14%, transparent 14% 20%, var(--bf) 20% 34%, transparent 34% 40%, var(--bf) 40% 54%, transparent 54% 60%, var(--bf) 60% 74%, transparent 74% 80%, var(--bf) 80% 94%, transparent 94%); } .ps-stern { clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); filter: drop-shadow(3px 4px 0 rgba(0,0,0,.25)); } .atlas__buehne[data-spiel='rokoko'], .atlas__buehne[data-spiel='kubismus'], .atlas__buehne[data-spiel='citypop'], .atlas__buehne[data-spiel='lowpoly'], .atlas__buehne[data-spiel='papierschnitt'] { cursor: pointer; } /* ========================================================================= Runde 6 (A): Chinoiserie, Buchmalerei, Volkskunst, Linolschnitt ========================================================================= */ /* Chinoiserie */ .deko--cnwolken svg, .deko--cnvase svg, .deko--cnfret svg, .deko--cnast svg, .deko--cnkranich svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--cnvase svg { filter: drop-shadow(0 1.2vmin 1.8vmin rgba(31,62,140,.18)); } .deko--cnlack i { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 72% 30%, rgba(150,40,26,.38), transparent 70%), radial-gradient(ellipse 40% 30% at 20% 90%, rgba(212,166,74,.12), transparent 70%), linear-gradient(160deg, #1C1312, #0B0807); } .deko--cnlack i::after { content: ''; position: absolute; inset: 2.4vmin; border: 2px solid rgba(212,166,74,.45); outline: 1px solid rgba(212,166,74,.25); outline-offset: .8vmin; } .deko--cnseide i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(36,75,64,.05) 0 1px, transparent 1px 4px), radial-gradient(ellipse 60% 50% at 70% 40%, rgba(255,255,255,.35), transparent 70%); } .deko--cnast.an .cn-wipp, .deko--cnkranich.an .cn-wipp { animation: cnwipp 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes cnwipp { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } } /* Buchmalerei */ .deko--bminitiale svg, .deko--bmranke svg, .deko--bmzeilen svg, .deko--bmbordure svg, .deko--bmrund svg, .deko--bmsterne svg, .deko--bmkalender svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--bmpergament i { position: absolute; inset: 0; background: radial-gradient(circle at 18% 28%, rgba(150,110,50,.13), transparent 28%), radial-gradient(circle at 82% 74%, rgba(150,110,50,.10), transparent 32%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(110,72,28,.28) 100%); } .deko--bminitiale svg, .deko--bmrund svg, .deko--bmkalender svg { filter: drop-shadow(0 .6vmin 1vmin rgba(42,26,16,.22)); } .deko--bminitiale.an .bm-glanz { animation: bmglanz 4.5s ease-in-out infinite; } @keyframes bmglanz { 0%, 70%, 100% { opacity: 0; } 82% { opacity: .35; } } .deko--bmkalender.an .bm-sonne { animation: kbdreh 40s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; } .deko--bmbordure.an .bm-kriech { animation: bmkriech 7s ease-in-out infinite alternate; } @keyframes bmkriech { to { transform: translateX(14px); } } /* Volkskunst */ .deko--vkholz svg, .deko--vkfeld svg, .deko--vkmedaillon svg, .deko--vkborte svg, .deko--vkstreu svg, .deko--vkhahn svg, .deko--vkstich svg, .deko--vkstichborte svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--vkmedaillon svg, .deko--vkhahn svg { filter: drop-shadow(0 1vmin 1.4vmin rgba(20,20,20,.25)); } .deko--vkleinen i { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(120,100,70,.09) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120,100,70,.09) 0 1px, transparent 1px 4px); } .deko--vkhahn.an .vk-wipp { animation: vkwipp 3s ease-in-out infinite alternate; transform-origin: 50% 100%; transform-box: fill-box; } @keyframes vkwipp { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } } /* Linolschnitt */ .deko--lnpapier svg, .deko--lnland svg, .deko--lnsonne svg, .deko--lnplakat svg, .deko--lnmuster svg, .deko--lnetikett svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--lnetikett svg { filter: drop-shadow(0 .8vmin 1.2vmin rgba(20,20,20,.18)); } .deko--lnsonne.an .ln-strahlen { animation: lnstrahl 2.4s steps(3) infinite alternate; transform-origin: 100px 100px; transform-box: view-box; } @keyframes lnstrahl { to { transform: rotate(10deg); } } html.sparsam .deko--cnast .cn-wipp, html.sparsam .deko--cnkranich .cn-wipp, html.sparsam .deko--bminitiale .bm-glanz, html.sparsam .deko--bmkalender .bm-sonne, html.sparsam .deko--bmbordure .bm-kriech, html.sparsam .deko--vkhahn .vk-wipp, html.sparsam .deko--lnsonne .ln-strahlen { animation: none; } /* Spiele, Runde 6 (A) */ .cn-bluete svg, .ln-druck svg { width: 100%; height: 100%; display: block; } .cn-blatt { width: 12px; height: 18px; border-radius: 50% 0 50% 50%; } .bm-efeu { background: linear-gradient(135deg, #F6E3A0, #C9A23A 50%, #FFF0BC 62%, #B8892C); clip-path: polygon(50% 0, 64% 30%, 100% 30%, 76% 56%, 86% 100%, 50% 78%, 14% 100%, 24% 56%, 0 30%, 36% 30%); filter: drop-shadow(1px 1px 0 #2A1A10); } .bm-gold { background: linear-gradient(135deg, #FFF0BC, #C9A23A); } .vk-herz { clip-path: polygon(50% 94%, 22% 72%, 6% 52%, 2% 32%, 8% 15%, 24% 6%, 40% 9%, 50% 22%, 60% 9%, 76% 6%, 92% 15%, 98% 32%, 94% 52%, 78% 72%); } .vk-tupf { width: 7px; height: 7px; border-radius: 50%; background: #F2E8D0; box-shadow: 0 0 0 1.5px rgba(0,0,0,.25); } .atlas__buehne[data-spiel='chinoiserie'], .atlas__buehne[data-spiel='buchmalerei'], .atlas__buehne[data-spiel='volkskunst'], .atlas__buehne[data-spiel='linolschnitt'] { cursor: pointer; } /* ========================================================================= Runde 6 (B): Ligne claire, Pulp-Hefte, Infografik, Isometrie ========================================================================= */ /* Ligne claire */ .deko--lkstrasse svg, .deko--lkhafen svg, .deko--lkwueste svg, .deko--lkring svg, .deko--lkflieger svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--lkstrasse, .deko--lkhafen, .deko--lkwueste { overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 .5vmin #1A1A1A, 0 0 0 1.3vmin #FFFFFF, 0 0 0 1.6vmin #1A1A1A; } .deko--lkkasten, .deko--lkkasten2, .deko--lkkasten3 { display: flex; align-items: center; padding: 0 1.4vmin; background: #F6D365; box-shadow: inset 0 0 0 .4vmin #1A1A1A; color: #1A1A1A; font: 700 clamp(12px, 1.7vmin, 22px)/1.15 'Comic Neue', 'Comic Sans MS', sans-serif; text-transform: uppercase; letter-spacing: .02em; z-index: 1; } .deko--lkflieger.an .lk-flug { animation: lkflug 3.2s ease-in-out infinite alternate; } @keyframes lkflug { from { transform: translateY(-4px) rotate(-1deg); } to { transform: translateY(5px) rotate(1.5deg); } } .deko--lkflieger.an .lk-propeller { animation: lkprop .18s linear infinite; transform-origin: 294px 78px; transform-box: view-box; } @keyframes lkprop { 50% { transform: scaleY(-.35); } } .deko--lkhafen.an .lk-rauch { animation: lkrauch 5s ease-in-out infinite alternate; } @keyframes lkrauch { to { transform: translate(14px, -8px); } } .deko--lkring.an svg { animation: lkpendel 3.4s ease-in-out infinite alternate; transform-origin: 50% 0; } @keyframes lkpendel { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } } /* Pulp-Hefte */ .deko--hppapier i { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, var(--pk) 1px, transparent 1.6px) 0 0 / 7px 9px, radial-gradient(circle at 70% 20%, var(--pk) 1.2px, transparent 2px) 0 0 / 13px 11px, repeating-linear-gradient(97deg, transparent 0 22px, var(--pk) 22px 23px, transparent 23px 61px), radial-gradient(ellipse 70% 70% at 50% 50%, transparent 55%, rgba(90,60,20,.22)); } .deko--hpkrimi svg, .deko--hpsf svg, .deko--hpdschungel svg, .deko--hpstern svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--hpkrimi svg, .deko--hpsf svg, .deko--hpdschungel svg { filter: drop-shadow(.9vmin 1vmin 0 rgba(0,0,0,.35)); } .deko--hpstern.an svg { animation: hpdreh 14s linear infinite; } @keyframes hpdreh { to { transform: rotate(360deg); } } /* Infografik */ .deko--igkpi, .deko--iglinie, .deko--igbalken, .deko--igtorte { background: #FFFFFF; border-radius: 1.4vmin; box-shadow: 0 .2vmin .4vmin rgba(22,33,58,.06), 0 1vmin 2.4vmin rgba(22,33,58,.08); container-type: size; color: #16213A; font-family: Inter, system-ui, sans-serif; } .ig-karte { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqh 7cqw; } .ig-karte small { font-size: clamp(10px, 1.25vmin, 15px); font-weight: 600; color: #6B7590; letter-spacing: .02em; } .deko--igkpi b { font: 700 min(30cqh, 17cqw)/1 'Space Grotesk', Inter, sans-serif; letter-spacing: -.03em; margin-top: 3cqh; } .deko--igkpi em { font-style: normal; font-weight: 600; font-size: clamp(10px, 1.25vmin, 15px); color: #27AE60; margin-top: 3cqh; } .ig-karte svg { flex: 1; width: 100%; min-height: 0; margin: 3cqh 0 0; } .ig-karte p { margin: 2cqh 0 0; display: flex; align-items: center; gap: .6em; font-size: clamp(10px, 1.2vmin, 14px); font-weight: 600; color: #3A4660; } .ig-karte p i { display: inline-block; width: .9em; height: .9em; border-radius: 3px; margin-left: .4em; } .ig-karte p i:first-child { margin-left: 0; } .deko--igtorte { padding: 0; } .deko--igtorte svg, .deko--igzeitung svg, .deko--igzeitunghoch svg, .deko--igfluss svg, .deko--igflusshoch svg, .deko--imstadt svg, .deko--iminsel svg, .deko--imkachel svg, .deko--imlager svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--igpunkte i { position: absolute; inset: 0; background: radial-gradient(circle, rgba(143,160,192,.18) 1px, transparent 1.5px) 0 0 / 3vmin 3vmin; } .ig-saeule { transform-box: fill-box; transform-origin: 50% 100%; } .deko--igbalken.an .ig-saeule, .deko--igzeitung.an .ig-saeule, .deko--igzeitunghoch.an .ig-saeule { animation: igwachs .9s cubic-bezier(.2,.8,.2,1) both; } @keyframes igwachs { from { transform: scaleY(0); } } .deko--iglinie.an .ig-zug { stroke-dasharray: 1; animation: igzug 1.6s ease-out both; } @keyframes igzug { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .deko--igfluss.an .ig-band { animation: igband 1s ease-out both; transform-box: fill-box; transform-origin: 0 50%; } @keyframes igband { from { transform: scaleX(0); opacity: 0; } } .deko--igflusshoch.an .ig-band2 { animation: igband2 1s ease-out both; transform-box: fill-box; transform-origin: 50% 0; } @keyframes igband2 { from { transform: scaleY(0); opacity: 0; } } /* Isometrie */ .deko--imstadt.an .im-auto { animation: imfahrt 7s linear infinite; } @keyframes imfahrt { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(249px, 144px); opacity: 0; } } .deko--iminsel.an .im-schweb, .deko--iminsel.an .im-karte { animation: imschweb 4s ease-in-out infinite alternate; } .deko--iminsel.an .im-karte--2 { animation-delay: -1.6s; } .deko--iminsel.an .im-boden { animation: imboden 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; } @keyframes imschweb { from { transform: translateY(-7px); } to { transform: translateY(7px); } } @keyframes imboden { from { transform: scale(.94); } to { transform: scale(1.04); } } .deko--imkachel svg { filter: drop-shadow(0 1.2vmin 1.4vmin rgba(43,33,96,.22)); } .deko--imkachel.an { animation: imkachel 4s ease-in-out infinite alternate; } @keyframes imkachel { from { translate: 0 -.6vmin; } to { translate: 0 .6vmin; } } .deko--imlager.an .im-band { animation: imband 4.5s linear infinite; } @keyframes imband { from { transform: translate(0, 0); } to { transform: translate(95.6px, 55.2px); } } html.sparsam .deko--lkflieger .lk-flug, html.sparsam .deko--lkflieger .lk-propeller, html.sparsam .deko--lkhafen .lk-rauch, html.sparsam .deko--lkring svg, html.sparsam .deko--hpstern svg, html.sparsam .deko--imstadt .im-auto, html.sparsam .deko--iminsel .im-schweb, html.sparsam .deko--iminsel .im-karte, html.sparsam .deko--iminsel .im-boden, html.sparsam .deko--imkachel, html.sparsam .deko--imlager .im-band { animation: none; } /* Spiele, Runde 6 (B) */ .lk-blase { width: 64px; height: 52px; } .hp-wort { font: 400 34px/1 Bangers, Impact, sans-serif; color: #F2D04A; -webkit-text-stroke: 2px #1A1A1A; paint-order: stroke fill; text-shadow: 3px 3px 0 #C8261E; white-space: nowrap; } .ig-balken { width: 18px; border-radius: 3px 3px 0 0; transform-origin: 50% 100%; } .ig-balken b { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 700 13px/1 'Share Tech Mono', monospace; color: inherit; white-space: nowrap; } .im-wuerfel { width: 46px; height: 52px; } .atlas__buehne[data-spiel='lignclaire'], .atlas__buehne[data-spiel='pulp'], .atlas__buehne[data-spiel='isometrie'] { cursor: pointer; } .atlas__buehne[data-spiel='infografik'] { cursor: crosshair; } /* ========================================================================= Runde 6 (C): Bollywood-Filmplakat, Día de los Muertos, Lucha-Libre-Plakat, Mystical Western ========================================================================= */ /* Bollywood */ .deko--bwsonne svg, .deko--bwpalast svg, .deko--bwelefant svg, .deko--bwgirlande svg, .deko--bwpfau svg, .deko--bwlotus svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--bwhimmel i, .deko--bwhimmel b { position: absolute; inset: 0; } .deko--bwhimmel i { background: linear-gradient(160deg, var(--h1) 0%, var(--h2) 38%, var(--h3) 72%, var(--h4) 100%); } .deko--bwhimmel b { background: repeating-conic-gradient(from 0deg at var(--sx) var(--sy), rgba(255,236,170,.22) 0 4deg, transparent 4deg 11deg); -webkit-mask: radial-gradient(circle at var(--sx) var(--sy), #000 0, #000 22%, transparent 70%); mask: radial-gradient(circle at var(--sx) var(--sy), #000 0, #000 22%, transparent 70%); } .deko--bwhimmel.an b { animation: bwpuls 3.2s ease-in-out infinite alternate; } @keyframes bwpuls { from { opacity: .55; } to { opacity: 1; } } .deko--bwsonne.an .bw-kranz { animation: bwdreh 40s linear infinite; transform-origin: 100px 100px; transform-box: view-box; } @keyframes bwdreh { to { transform: rotate(360deg); } } .deko--bwrahmen { border: .45vmin solid #F6C343; box-shadow: inset 0 0 0 .9vmin rgba(194,24,91,.55), inset 0 0 0 1.2vmin #F6C343; } .deko--bwrahmen .bw-ecke { position: absolute; width: 7vmin; height: 7vmin; } .deko--bwrahmen .bw-ecke svg { width: 100%; height: 100%; display: block; } .deko--bwrahmen .bw-ecke1 { left: 0; top: 0; } .deko--bwrahmen .bw-ecke2 { right: 0; top: 0; transform: scaleX(-1); } .deko--bwrahmen .bw-ecke3 { left: 0; bottom: 0; transform: scaleY(-1); } .deko--bwrahmen .bw-ecke4 { right: 0; bottom: 0; transform: scale(-1, -1); } .deko--bwelefant svg, .deko--bwpfau svg { filter: drop-shadow(0 1.2vmin 1.6vmin rgba(10,0,30,.35)); } .deko--bwpfau.an .bw-rad { animation: bwrad 3.4s ease-in-out infinite alternate; transform-origin: 100px 128px; transform-box: view-box; } @keyframes bwrad { from { transform: scale(.96); } to { transform: scale(1.03); } } /* Día de los Muertos */ .deko--dmwimpel svg, .deko--dmblumen svg, .deko--dmofrenda svg, .deko--dmrosette svg, .deko--dmmuster svg, .deko--dmkerzen svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--dmnacht i { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 72% 78%, var(--n2), transparent 70%), linear-gradient(180deg, var(--n1), var(--n3)); } .deko--dmwimpel.an .dm-f { animation: dmwehen 2.6s ease-in-out infinite alternate; transform-origin: 50% 0; transform-box: fill-box; } @keyframes dmwehen { from { transform: rotate(-2.5deg) skewX(-2deg); } to { transform: rotate(2.5deg) skewX(2deg); } } .deko--dmofrenda.an .dm-flamme, .deko--dmkerzen.an .dm-flamme { animation: dmflackern .9s ease-in-out infinite alternate; } @keyframes dmflackern { 0% { transform: scale(1, 1); } 50% { transform: scale(.9, 1.12) rotate(2deg); } 100% { transform: scale(1.06, .94) rotate(-2deg); } } .deko--dmrosette.an .dm-dreh { animation: bwdreh 60s linear infinite; transform-origin: 100px 100px; transform-box: view-box; } .deko--dmrosette svg { filter: drop-shadow(0 1vmin 1.6vmin rgba(90,10,40,.35)); } /* Lucha Libre */ .deko--llplakat svg, .deko--llmaske svg, .deko--llsterne svg, .deko--llring svg, .deko--llkegel svg, .deko--lllichter svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--llpapier i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(60,40,10,.035) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, rgba(60,40,10,.03) 0 1px, transparent 1px 7px), radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(120,90,40,.18)); } .deko--llstrahlen i { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at var(--sx) var(--sy), var(--r1) 0 7.5deg, var(--r2) 7.5deg 15deg); -webkit-mask: radial-gradient(circle at var(--sx) var(--sy), #000 18%, transparent 62%); mask: radial-gradient(circle at var(--sx) var(--sy), #000 18%, transparent 62%); } .deko--llplakat svg { transform: rotate(1.5deg); } .deko--llmaske svg { filter: drop-shadow(1vmin 1.2vmin 0 rgba(20,20,20,.85)); } .deko--llsterne.an .ll-glanz { animation: llglanz 1.4s ease-in-out infinite alternate; } @keyframes llglanz { from { transform: scale(.7) rotate(0deg); } to { transform: scale(1.1) rotate(20deg); } } .deko--llkegel.an .ll-spot { animation: llspot 5s ease-in-out infinite alternate; } @keyframes llspot { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } .deko--lllichter.an .ll-birne { animation: llbirne 1.2s steps(2) infinite; } @keyframes llbirne { 50% { opacity: .35; } } /* Mystical Western */ .deko--mwmond svg, .deko--mwmesa svg, .deko--mwkarte svg, .deko--mwsonne svg, .deko--mwschaedel svg, .deko--mwboden svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--mwnacht i, .deko--mwnacht b { position: absolute; inset: 0; } .deko--mwnacht i { background: linear-gradient(180deg, var(--n1) 0%, var(--n2) 55%, var(--n3) 100%); } .deko--mwnacht b { background: radial-gradient(circle at 20px 30px, var(--st) 1.2px, transparent 1.8px) 0 0 / 130px 110px, radial-gradient(circle at 70px 80px, var(--st) .9px, transparent 1.4px) 0 0 / 90px 120px, radial-gradient(circle at 50px 20px, var(--st) 1.6px, transparent 2.2px) 0 0 / 210px 170px; -webkit-mask: linear-gradient(180deg, #000 30%, transparent 85%), var(--sm, linear-gradient(#000, #000)); -webkit-mask-composite: source-in; mask: linear-gradient(180deg, #000 30%, transparent 85%), var(--sm, linear-gradient(#000, #000)); mask-composite: intersect; } .deko--mwnacht.an b { animation: mwfunkeln 3s ease-in-out infinite alternate; } @keyframes mwfunkeln { from { opacity: .55; } to { opacity: 1; } } .deko--mwmond.an .mw-funkeln path { animation: llglanz 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; } .deko--mwmond.an .mw-funkeln path:nth-child(2) { animation-delay: .6s; } .deko--mwmond.an .mw-funkeln path:nth-child(3) { animation-delay: 1.2s; } .deko--mwkarte svg { filter: drop-shadow(0 1vmin 1.4vmin rgba(22,34,63,.25)); } .deko--mwkarte.an .mw-schwebe { animation: mwschwebe 4s ease-in-out infinite alternate; } @keyframes mwschwebe { from { transform: translateY(-6px); } to { transform: translateY(6px); } } .deko--mwsonne.an .mw-dreh { animation: bwdreh 70s linear infinite; transform-origin: 100px 100px; transform-box: view-box; } .deko--mwboden.an .mw-kriech { animation: mwkriech 3s ease-in-out infinite alternate; } @keyframes mwkriech { from { transform: translateX(-8px); } to { transform: translateX(8px); } } html.sparsam .deko--bwhimmel.an b, html.sparsam .deko--bwsonne.an .bw-kranz, html.sparsam .deko--bwpfau.an .bw-rad, html.sparsam .deko--dmwimpel.an .dm-f, html.sparsam .deko--dmofrenda.an .dm-flamme, html.sparsam .deko--dmkerzen.an .dm-flamme, html.sparsam .deko--dmrosette.an .dm-dreh, html.sparsam .deko--llsterne.an .ll-glanz, html.sparsam .deko--llkegel.an .ll-spot, html.sparsam .deko--lllichter.an .ll-birne, html.sparsam .deko--mwnacht.an b, html.sparsam .deko--mwmond.an .mw-funkeln path, html.sparsam .deko--mwkarte.an .mw-schwebe, html.sparsam .deko--mwsonne.an .mw-dreh, html.sparsam .deko--mwboden.an .mw-kriech { animation: none !important; } html.sparsam .deko--bwelefant svg, html.sparsam .deko--bwpfau svg, html.sparsam .deko--dmrosette svg, html.sparsam .deko--mwkarte svg { filter: none; } /* Spiele, Runde 6 (C) */ .bw-blatt { width: 12px; height: 18px; border-radius: 50% 0 50% 50%; } .bw-funke { width: 16px; height: 16px; background: #FFE066; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); } .dm-fahne { width: 34px; height: 44px; background: var(--fc); clip-path: polygon(0 0, 100% 0, 100% 86%, 90% 100%, 80% 86%, 70% 100%, 60% 86%, 50% 100%, 40% 86%, 30% 100%, 20% 86%, 10% 100%, 0 86%); -webkit-mask: radial-gradient(circle at 50% 46%, transparent 0 5px, #000 5.5px), radial-gradient(circle, transparent 0 1.6px, #000 2px) 0 2px / 7px 7px; -webkit-mask-composite: source-in; mask: radial-gradient(circle at 50% 46%, transparent 0 5px, #000 5.5px), radial-gradient(circle, transparent 0 1.6px, #000 2px) 0 2px / 7px 7px; mask-composite: intersect; } .ll-wort { font-family: 'Bungee', 'Arial Black', sans-serif; font-size: 34px; line-height: 1; white-space: nowrap; color: var(--wc); -webkit-text-stroke: 2px #141414; paint-order: stroke fill; text-shadow: 4px 4px 0 #141414; } .mw-stern { width: 14px; height: 14px; background: #FFF4D8; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); } .atlas__buehne[data-spiel='bollywood'], .atlas__buehne[data-spiel='papelpicado'], .atlas__buehne[data-spiel='luchalibre'] { cursor: pointer; } /* ========================================================================= Runde 6 (D): Web 2.0, Metro, Kidcore, Lo-Fi ========================================================================= */ /* Web 2.0 */ .deko--wzicon svg, .deko--wzbeta svg, .deko--wzneu svg, .deko--wzknopf svg, .deko--wzspiegel svg, .deko--wzecke svg, .deko--wzwolke svg, .deko--wzprofil svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--wzgrund i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--w1, #CDEBFF) 0%, var(--w2, #F4FAFF) 62%, #FFFFFF 100%); } .deko--wzhimmel i { position: absolute; inset: 0; background: radial-gradient(9vmin 4vmin at 20% 84%, rgba(255,255,255,.9) 60%, transparent 62%), radial-gradient(6vmin 4vmin at 26% 80%, rgba(255,255,255,.9) 60%, transparent 62%), radial-gradient(8vmin 3.6vmin at 10% 95%, rgba(255,255,255,.75) 60%, transparent 62%), radial-gradient(7vmin 3vmin at 92% 6%, rgba(255,255,255,.7) 60%, transparent 62%), radial-gradient(5vmin 2.6vmin at 96% 9%, rgba(255,255,255,.7) 60%, transparent 62%), linear-gradient(180deg, #4FB3F6 0%, #9ED8FF 55%, #DDF2FF 100%); } .deko--wzboden i { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 9% at 70% 52%, rgba(42,59,76,.10), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #F3F6F9 52%, #FFFFFF 52.2%, #FFFFFF 100%); } .deko--wzstreifen { background: repeating-linear-gradient(-45deg, var(--dc) 0 1vmin, transparent 1vmin 2vmin); border-bottom: .3vmin solid rgba(63,169,245,.35); } .deko--wzicon svg { filter: drop-shadow(0 .8vmin 1.2vmin rgba(30,80,140,.18)); } .deko--wzbeta svg, .deko--wzneu svg { filter: drop-shadow(0 .4vmin .6vmin rgba(0,0,0,.18)); } .deko--wzbeta.an svg, .deko--wzneu.an svg { animation: wzwackeln 3.2s ease-in-out infinite; transform-origin: 50% 50%; } .deko--wzneu.an svg { animation-delay: -1.4s; } @keyframes wzwackeln { 0%, 80%, 100% { transform: rotate(0) scale(1); } 86% { transform: rotate(-6deg) scale(1.06); } 92% { transform: rotate(5deg) scale(1.03); } } .deko--wzprofil.an .wz-lauf { animation: wzlauf 1.2s linear infinite; } @keyframes wzlauf { to { transform: translateX(39.6px); } } /* Metro */ .deko--mtkacheln svg, .deko--mtpivot svg, .deko--mtliste svg, .deko--mthub svg, .deko--mtreihe svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--mtpivot svg { overflow: visible; } .deko--mtzk { background: var(--dc); } .deko--mtpunkte i { position: absolute; top: 0; left: 0; width: .7vmin; height: .7vmin; min-width: 4px; min-height: 4px; background: var(--dc); opacity: 0; } .deko--mtpunkte.an i { animation: mtpunkt 3.2s cubic-bezier(.1,.7,.9,.3) infinite; } .deko--mtpunkte.an i:nth-child(2) { animation-delay: .16s; } .deko--mtpunkte.an i:nth-child(3) { animation-delay: .32s; } .deko--mtpunkte.an i:nth-child(4) { animation-delay: .48s; } .deko--mtpunkte.an i:nth-child(5) { animation-delay: .64s; } @keyframes mtpunkt { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 78%, 100% { left: 100%; opacity: 0; } } .deko--mtkacheln .mt-vorn, .deko--mtkacheln .mt-hinten { transform-box: fill-box; transform-origin: 50% 50%; } .deko--mtkacheln .mt-hinten { transform: scaleY(0); } .deko--mtkacheln.an .mt-vorn { animation: mtvorn 7s ease-in-out infinite; animation-delay: var(--mv, 0s); } .deko--mtkacheln.an .mt-hinten { animation: mthinten 7s ease-in-out infinite; animation-delay: var(--mv, 0s); } @keyframes mtvorn { 0%, 42% { transform: scaleY(1); } 47%, 92% { transform: scaleY(0); } 97%, 100% { transform: scaleY(1); } } @keyframes mthinten { 0%, 47% { transform: scaleY(0); } 52%, 87% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0); } } /* Kidcore */ .deko--kcmalen svg, .deko--kcsonne svg, .deko--kcsteine svg, .deko--kcstein svg, .deko--kckonfetti svg, .deko--kcalbum svg, .deko--kcsticker svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--kcpunkte { background: radial-gradient(circle, var(--dc) 22%, transparent 24%) 0 0 / 7vmin 7vmin, radial-gradient(circle, var(--dc) 12%, transparent 14%) 3.5vmin 3.5vmin / 7vmin 7vmin; } .deko--kcsonne.an .kc-strahlen { animation: lfkreis 30s linear infinite; transform-origin: 100px 100px; transform-box: view-box; } .deko--kcstein svg, .deko--kcalbum svg { filter: drop-shadow(0 .6vmin 0 rgba(0,0,0,.12)); } .deko--kcsticker.an svg { animation: kchuepf 2.6s ease-in-out infinite; transform-origin: 50% 60%; } @keyframes kchuepf { 0%, 70%, 100% { transform: rotate(-4deg); } 80% { transform: rotate(6deg) scale(1.05); } 90% { transform: rotate(-2deg); } } /* Lo-Fi */ @keyframes lfkreis { to { transform: rotate(360deg); } } .deko--lffenster svg, .deko--lftisch svg, .deko--lfbalken svg, .deko--lfluke svg, .deko--lflichter svg, .deko--lfbett svg, .deko--lfspieler svg, .deko--lfdinge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--lfwand i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 3vmin, transparent 3vmin 6vmin), linear-gradient(180deg, var(--l1, #3E3160), var(--l2, #241D38)); } .deko--lfkorn { background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; mix-blend-mode: overlay; } .deko--lffenster.an .lf-regen { animation: lfregen .9s linear infinite; } @keyframes lfregen { from { transform: translateY(0); } to { transform: translateY(200px); } } .deko--lffenster.an .lf-flamme { animation: lfflamme 1.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes lfflamme { from { transform: scale(1, 1); } to { transform: scale(.85, 1.15); } } .deko--lftisch.an .lf-dampf, .deko--lfdinge.an .lf-dampf { animation: lfdampf 3.4s ease-in-out infinite; } @keyframes lfdampf { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .6; } 100% { transform: translateY(-14px); opacity: 0; } } .deko--lftisch.an .lf-atmen { animation: lfatmen 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; } @keyframes lfatmen { to { transform: translateY(-2px); } } .deko--lftisch svg ellipse:first-child { mix-blend-mode: screen; } .deko--lfluke.an .lf-funkel { animation: lffunkel 3s ease-in-out infinite alternate; animation-delay: calc(var(--fv) * -1); } @keyframes lffunkel { from { opacity: 1; } to { opacity: .25; } } .deko--lfluke.an .lf-schnuppe { animation: lfschnuppe 7s ease-in infinite; } @keyframes lfschnuppe { 0%, 80% { transform: translate(0, 0); opacity: 0; } 82% { opacity: 1; } 92%, 100% { transform: translate(110px, 66px); opacity: 0; } } .deko--lflichter.an .lf-birne { animation: lfbirne 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--bv) * -1); } @keyframes lfbirne { from { opacity: 1; } to { opacity: .55; } } .deko--lfspieler.an .lf-dreh { animation: lfkreis 1.8s linear infinite; transform-origin: 100px 100px; transform-box: view-box; } .deko--lfspieler svg { filter: drop-shadow(0 1vmin 1.6vmin rgba(43,35,64,.22)); } html.sparsam .deko--lffenster .lf-regen, html.sparsam .deko--lfspieler .lf-dreh, html.sparsam .deko--mtkacheln .mt-vorn, html.sparsam .deko--mtkacheln .mt-hinten, html.sparsam .deko--mtpunkte i, html.sparsam .deko--lfluke .lf-funkel, html.sparsam .deko--lfluke .lf-schnuppe, html.sparsam .deko--kcsonne .kc-strahlen, html.sparsam .deko--wzprofil .wz-lauf, html.sparsam .deko--lflichter .lf-birne, html.sparsam .deko--lftisch .lf-dampf, html.sparsam .deko--lfdinge .lf-dampf, html.sparsam .deko--wzbeta svg, html.sparsam .deko--wzneu svg, html.sparsam .deko--kcsticker svg { animation: none; } html.sparsam .deko--lfkorn { display: none; } /* Spiele, Runde 6 (D) */ .wz-stern { display: flex; align-items: center; justify-content: center; color: #FFFFFF; font: 600 14px 'Fredoka', sans-serif; text-shadow: 0 1px 0 rgba(0,0,0,.25); background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.55), transparent 45%), var(--sf, #FF7A00); clip-path: polygon(100.0% 50.0%, 89.2% 57.8%, 96.2% 69.1%, 83.3% 72.2%, 85.4% 85.4%, 72.2% 83.3%, 69.1% 96.2%, 57.8% 89.2%, 50.0% 100.0%, 42.2% 89.2%, 30.9% 96.2%, 27.8% 83.3%, 14.6% 85.4%, 16.7% 72.2%, 3.8% 69.1%, 10.8% 57.8%, 0.0% 50.0%, 10.8% 42.2%, 3.8% 30.9%, 16.7% 27.8%, 14.6% 14.6%, 27.8% 16.7%, 30.9% 3.8%, 42.2% 10.8%, 50.0% 0.0%, 57.8% 10.8%, 69.1% 3.8%, 72.2% 16.7%, 85.4% 14.6%, 83.3% 27.8%, 96.2% 30.9%, 89.2% 42.2%); } .mt-kachel { display: flex; align-items: flex-end; padding: 0 0 4px 6px; box-sizing: border-box; color: #FFFFFF; font: 300 12px 'Hind', sans-serif; } .kc-sticker { width: 64px; height: 64px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.18)); } .kc-sticker svg { width: 100%; height: 100%; display: block; } .lf-note { font: 400 28px 'Jost', sans-serif; color: #F3E9FF; text-shadow: 0 0 8px rgba(255,200,121,.6); } .atlas__buehne[data-spiel='web20'], .atlas__buehne[data-spiel='metro'], .atlas__buehne[data-spiel='kidcore'], .atlas__buehne[data-spiel='lofi'] { cursor: pointer; } /* ========================================================================= Runde 6 (E): Coquette, Romantasy, Neo-Geo, Quiet Luxury ========================================================================= */ /* Coquette */ .deko--cqmuster svg, .deko--cqpolaroid svg, .deko--cqperlen svg, .deko--cqdeckchen svg, .deko--cqkirschen svg, .deko--cqherzen svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--cqpolaroid svg { filter: drop-shadow(0 1.2vmin 2vmin rgba(122,30,52,.22)); } .deko--cqpolaroid .cq-kipp { transform: rotate(3deg); transform-origin: 150px 170px; transform-box: view-box; } .deko--cqdeckchen svg { filter: drop-shadow(0 .8vmin 1.6vmin rgba(122,60,70,.18)); } .deko--cqkirschen svg { filter: drop-shadow(0 1.2vmin 1.8vmin rgba(110,8,25,.25)); } .deko--cqkirschen.an svg { animation: cqbaumeln 3.4s ease-in-out infinite alternate; transform-origin: 51% 14%; } @keyframes cqbaumeln { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } } .deko--cqstreifen i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--dc) 0 2.6vmin, transparent 2.6vmin 5.2vmin); } /* Romantasy */ .deko--rfsterne svg, .deko--rfcover svg, .deko--rfwald svg, .deko--rfglocke svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--rfnacht i { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 78% 45%, var(--n1, #4A2A6E), transparent 70%), radial-gradient(ellipse 50% 40% at 10% 100%, var(--n2, #2A1F4E), transparent 70%); } .deko--rfcover svg { filter: drop-shadow(0 1.6vmin 3vmin rgba(0,0,0,.45)); } .deko--rfsterne.an .rf-funk, .deko--rfcover.an .rf-funk, .deko--rfglocke.an .rf-funk { animation: rffunkeln 2.6s ease-in-out infinite alternate; } .deko--rfsterne.an .rf-funk:nth-child(3n) { animation-delay: -1.3s; } @keyframes rffunkeln { from { opacity: .25; } to { opacity: 1; } } .deko--rfgluehen i { position: absolute; width: calc(.8vmin * var(--s, 1)); height: calc(.8vmin * var(--s, 1)); border-radius: 50%; background: #FFF1B0; box-shadow: 0 0 1vmin .35vmin rgba(255,214,110,.75); } .deko--rfgluehen.an i { animation: rfglimm 4s ease-in-out infinite alternate; animation-delay: var(--d); } @keyframes rfglimm { 0% { opacity: .15; transform: translate(0, 0); } 50% { opacity: 1; } 100% { opacity: .4; transform: translate(1.6vmin, -2.2vmin); } } .deko--rfglocke svg { filter: drop-shadow(0 1.4vmin 2.4vmin rgba(0,0,0,.4)); } /* Neo-Geo */ .deko--ngzellen svg, .deko--ngkoerper svg, .deko--ngraster svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--ngzellen svg { filter: drop-shadow(1.4vmin 1.4vmin 0 rgba(26,26,26,.55)); } .deko--ngnetz i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--dc) 1px, transparent 1px) 0 0 / 7vmin 7vmin, linear-gradient(var(--dc) 1px, transparent 1px) 0 0 / 7vmin 7vmin; } /* Quiet Luxury */ .deko--qlmantel svg, .deko--qletikett svg, .deko--qlschachtel svg, .deko--qlflakon svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--qllinie i { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--dc); } .deko--qlmantel svg { filter: drop-shadow(0 1.6vmin 2.6vmin rgba(60,44,28,.18)); } .deko--qletikett svg { filter: drop-shadow(0 .4vmin .8vmin rgba(0,0,0,.18)); } .deko--qlschachtel svg { filter: drop-shadow(0 1.4vmin 2.6vmin rgba(0,0,0,.35)); } html.sparsam .deko--rfgluehen i, html.sparsam .deko--rfsterne .rf-funk, html.sparsam .deko--rfcover .rf-funk, html.sparsam .deko--rfglocke .rf-funk, html.sparsam .deko--cqkirschen svg { animation: none; } /* Spiele, Runde 6 (E) */ .cq-herz { width: 22px; height: 20px; } .cq-herz svg { width: 100%; height: 100%; display: block; fill: currentColor; } .rf-staub { width: 10px; height: 10px; background: #F7E2A6; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px rgba(255,214,110,.8)); } .ng-form { box-shadow: 8px 8px 0 rgba(26,26,26,.6); } .ng-form.k { border-radius: 50%; } .ql-ring { width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; } .atlas__buehne[data-spiel='coquette'], .atlas__buehne[data-spiel='neogeo'], .atlas__buehne[data-spiel='quietluxury'] { cursor: pointer; } /* ========================================================================= Runde 6 (F): Organisch & unperfekt, Weiche Riesenschrift, Pointillismus, Cyanotypie ========================================================================= */ /* Organisch & unperfekt */ .deko--ogpapier svg, .deko--ogblobs svg, .deko--ogfinger svg, .deko--ogkritzel svg, .deko--ogskizze svg, .deko--ogkaffee svg, .deko--ogfaser svg, .deko--ogstempel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--ogblobs svg { filter: drop-shadow(.3vmin .5vmin 0 rgba(59,47,38,.12)); } .deko--ogblobs.an svg { animation: ogatmen 7s ease-in-out infinite alternate; } @keyframes ogatmen { from { transform: rotate(-1.2deg) scale(.99); } to { transform: rotate(1.2deg) scale(1.01); } } /* Weiche Riesenschrift */ .deko--btballon svg, .deko--btwelle svg, .deko--btkissen svg, .deko--btkonfetti svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--btballon.an .bt-b { animation: btschweben 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); transform-box: fill-box; transform-origin: 50% 100%; } @keyframes btschweben { from { transform: translateY(-3%) rotate(-2deg); } to { transform: translateY(3%) rotate(2deg); } } .deko--btwelle.an .bt-w { animation: btwelle 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.2s); transform-box: fill-box; transform-origin: 50% 100%; } @keyframes btwelle { from { transform: translateY(8%) rotate(-5deg); } to { transform: translateY(-8%) rotate(5deg); } } .deko--btkissen.an .bt-k { animation: btquetsch 2.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s); transform-box: fill-box; transform-origin: 50% 100%; } @keyframes btquetsch { from { transform: scale(1.04, .95); } to { transform: scale(.97, 1.04); } } /* Pointillismus */ .deko--ptfluss svg, .deko--pthafen svg, .deko--pthalbton svg, .deko--ptraster svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--ptfluss svg { box-shadow: 0 1.2vmin 3vmin rgba(34,48,94,.18); } .deko--pthafen { -webkit-mask: linear-gradient(90deg, transparent 4%, #000 30%); mask: linear-gradient(90deg, transparent 4%, #000 30%); } /* Cyanotypie */ .deko--ctpinsel svg, .deko--ctfarn svg, .deko--ctstrauss svg, .deko--ctspitze svg, .deko--ctnetz svg { position: absolute; inset: 0; width: 100%; height: 100%; } .deko--ctstrauss svg { filter: drop-shadow(0 1vmin 1.6vmin rgba(27,63,122,.18)); } .deko--ctspitze.an svg { animation: kbdreh 90s linear infinite; } html.sparsam .deko--ogblobs svg, html.sparsam .deko--btballon .bt-b, html.sparsam .deko--btwelle .bt-w, html.sparsam .deko--btkissen .bt-k, html.sparsam .deko--ctspitze svg { animation: none; } /* Spiele, Runde 6 (F) */ .og-abdruck { border-radius: 46% 54% 50% 50% / 58% 58% 42% 42%; background: repeating-radial-gradient(ellipse at 50% 56%, var(--oc) 0 1.6px, transparent 2.4px 4.2px); -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 60%, transparent 72%); mask: radial-gradient(ellipse at 50% 50%, #000 60%, transparent 72%); } .bt-ballon { display: grid; place-items: center; line-height: 1; font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; color: var(--bc); -webkit-text-stroke: .12em var(--bc); paint-order: stroke fill; text-shadow: .06em .1em 0 rgba(58,29,92,.18); background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.75) 0 5%, transparent 6%); } .pt-tupf { border-radius: 50%; } .ct-blatt { background: #F4F1E8; border-radius: 0 100% 0 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); } .atlas__buehne[data-spiel='organisch'], .atlas__buehne[data-spiel='weicheschrift'], .atlas__buehne[data-spiel='cyanotypie'] { cursor: pointer; }