/* * Play.de – neues Design (Mockup 2b „Toybox 3D“) * * Schriften: Baloo 2 und Nunito (SIL Open Font License, neu/fonts/). * Alle Klassen beginnen mit „pd-“, damit nichts mit Plugins kollidiert. */ /* ---------- Schriften ---------- */ @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/baloo-2-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/baloo-2-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/baloo-2-latin-800-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/nunito-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/nunito-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nunito-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/nunito-latin-800-normal.woff2') format('woff2'); } /* ---------- Grundwerte ---------- */ :root { --pd-navy: #1b2a6b; --pd-text: #2f3a74; --pd-text-hell: #6a7199; --pd-flaeche: #f5f6fe; --pd-rand: #e4e8f8; --pd-titel: 'Baloo 2', 'Nunito', system-ui, sans-serif; --pd-schrift: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --pd-breite: 1260px; --pd-feder: cubic-bezier(.34, 1.56, .64, 1); } /* Farbfamilien: hell (oben), basis, dunkel (Kante), tiefe (Sockel unten), pastell (Pillen) */ .pd-farbe-orange { --hell: #ffa53a; --basis: #ff7c0a; --dunkel: #ea5200; --tiefe: #c43400; --glanz: #ffd9a8; --pastell: #fff0e0; --pastell-text: #c55200; } .pd-farbe-pink { --hell: #ff7fc0; --basis: #ff4a9f; --dunkel: #e42683; --tiefe: #b80f63; --glanz: #ffd0e7; --pastell: #ffe6f2; --pastell-text: #c41f72; } .pd-farbe-gelb { --hell: #ffe04a; --basis: #ffc90f; --dunkel: #f0a400; --tiefe: #c97f00; --glanz: #fff0b3; --pastell: #fff5d6; --pastell-text: #a86f00; } .pd-farbe-blau { --hell: #5cbcff; --basis: #1e98ff; --dunkel: #0f74e0; --tiefe: #0a56b4; --glanz: #c8e7ff; --pastell: #e3f2ff; --pastell-text: #1466c2; } .pd-farbe-gruen { --hell: #48e3a6; --basis: #12c784; --dunkel: #07a46a; --tiefe: #04804f; --glanz: #c4f6e1; --pastell: #dff8ee; --pastell-text: #0b8a5a; } .pd-farbe-lila { --hell: #b58bff; --basis: #9655ff; --dunkel: #7634ea; --tiefe: #5a1fc4; --glanz: #e4d4ff; --pastell: #efe6ff; --pastell-text: #6b2fd6; } .pd-farbe-violett { --hell: #a77fff; --basis: #8752f7; --dunkel: #6837dc; --tiefe: #4f22b8; --glanz: #ddd0ff; --pastell: #ede7ff; --pastell-text: #5f34c8; } .pd-farbe-tuerkis { --hell: #3fe6c4; --basis: #10c7a2; --dunkel: #06a080; --tiefe: #037a62; --glanz: #c2f5ea; --pastell: #dcf7f1; --pastell-text: #08806a; } .pd-farbe-rosa { --hell: #ff86ba; --basis: #ff5498; --dunkel: #e5307b; --tiefe: #bb1a5e; --glanz: #ffd3e6; --pastell: #ffe7f1; --pastell-text: #c42a6c; } .pd-farbe-rot { --hell: #ff7f72; --basis: #ff4a4a; --dunkel: #e2262e; --tiefe: #b8141c; --glanz: #ffd1cc; --pastell: #ffe6e3; --pastell-text: #c42a2f; } .pd-farbe-indigo { --hell: #8e90ff; --basis: #6464f6; --dunkel: #4646d8; --tiefe: #3030b0; --glanz: #d9daff; --pastell: #e9e9ff; --pastell-text: #4343c4; } .pd-farbe-grau { --hell: #e3e6ef; --basis: #c9cedc; --dunkel: #adb3c6; --tiefe: #9299b0; --glanz: #f6f7fb; --pastell: #eef0f6; --pastell-text: #7a8099; } /* ---------- Basis ---------- */ .pd { margin: 0; font-family: var(--pd-schrift); font-size: 16px; line-height: 1.55; color: var(--pd-text); background-color: var(--pd-flaeche); background-image: linear-gradient(180deg, rgba(245, 246, 254, 0) 62%, #f5f6fe 100%), linear-gradient(168deg, #bfe4ff 0%, #cfe0ff 28%, #ddd7ff 58%, #ead9ff 100%); background-repeat: no-repeat; background-size: 100% 860px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .pd *, .pd *::before, .pd *::after { box-sizing: border-box; } .pd img { max-width: 100%; height: auto; } .pd a { color: inherit; text-decoration: none; } .pd h1, .pd h2, .pd h3, .pd p { margin: 0; } .pd button { font: inherit; } .pd-seite { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; } .pd-inhalt { flex: 1; } .pd-breite { width: 100%; max-width: var(--pd-breite); margin: 0 auto; padding: 0 32px; } .pd-unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pd-sprung { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: 12px; background: var(--pd-navy); color: #fff !important; font-weight: 800; transition: top .2s; } .pd-sprung:focus { top: 12px; } .pd :focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #6c6cf5; border-radius: 14px; } .pd-svg { width: 1em; height: 1em; flex: none; } /* ---------- Wolken ---------- */ .pd-wolke, .pd-fuss-wolke { position: absolute; z-index: 0; pointer-events: none; width: 220px; height: 70px; border-radius: 999px; background: rgba(255, 255, 255, .92); filter: blur(1px); box-shadow: 50px -28px 0 8px rgba(255, 255, 255, .92), 115px -10px 0 0 rgba(255, 255, 255, .92); opacity: .9; animation: pd-wolke 26s ease-in-out infinite alternate; } .pd-wolke-1 { top: 120px; left: -90px; } .pd-wolke-2 { top: 38px; right: -120px; transform: scale(.8); animation-duration: 32s; } .pd-wolke-3 { top: 470px; right: -60px; transform: scale(1.15); animation-duration: 38s; } @keyframes pd-wolke { to { translate: 26px 0; } } /* ---------- Kopf ---------- */ .pd-kopf { position: relative; z-index: 20; } .pd-kopf-innen { display: flex; align-items: center; gap: 28px; padding-top: 22px; padding-bottom: 8px; } .pd-logo { flex: none; display: block; width: 330px; transition: transform .35s var(--pd-feder); } .pd-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(90, 60, 170, .18)); } .pd-logo:hover { transform: rotate(-2deg) scale(1.04); } .pd-suche { position: relative; flex: 1; max-width: 520px; margin: 0 auto 0 calc(10% - 40px); display: flex; align-items: center; } .pd-suche .pd-svg { position: absolute; left: 22px; font-size: 22px; color: var(--pd-navy); pointer-events: none; } .pd-suche input { width: 100%; height: 54px; padding: 0 22px 0 58px; border: 2px solid rgba(255, 255, 255, .9); border-radius: 999px; background: rgba(255, 255, 255, .94); font: 600 17px/1 var(--pd-schrift); color: var(--pd-navy); box-shadow: 0 10px 26px -14px rgba(60, 70, 160, .45), inset 0 2px 0 #fff; transition: box-shadow .25s, border-color .25s; -webkit-appearance: none; appearance: none; } .pd-suche input::placeholder { color: #7e86ad; opacity: 1; } .pd-suche input:focus { outline: none; border-color: #b9a8ff; box-shadow: 0 12px 28px -12px rgba(108, 92, 245, .55), 0 0 0 5px rgba(155, 92, 255, .18); } .pd-kopf-knoepfe { position: relative; flex: none; display: flex; gap: 16px; } .pd-rund { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 31px; background: radial-gradient(circle at 35% 28%, var(--hell) 0%, var(--basis) 58%, var(--dunkel) 100%); box-shadow: inset 0 -5px 0 var(--dunkel), inset 0 3px 3px rgba(255, 255, 255, .55), 0 12px 22px -10px var(--dunkel); transition: transform .3s var(--pd-feder), box-shadow .3s; } .pd-rund::after { content: ''; position: absolute; top: 9px; left: 14px; width: 20px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-24deg); filter: blur(.5px); } .pd-rund-pink { --hell: #ff9ccc; --basis: #ff4f9e; --dunkel: #d92a7e; } .pd-rund-lila { --hell: #a99bff; --basis: #6f5cf5; --dunkel: #4c3bd2; } .pd-rund:hover { transform: translateY(-3px) rotate(-8deg) scale(1.07); } .pd-rund:active { transform: translateY(2px) scale(.96); box-shadow: inset 0 -2px 0 var(--dunkel), 0 6px 12px -8px var(--dunkel); } .pd-rund .pd-svg { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); } .pd-zaehler { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #ffc414; color: var(--pd-navy); font: 800 13px/24px var(--pd-titel); text-align: center; box-shadow: 0 0 0 3px #fff; } .pd-favoriten { position: absolute; top: 76px; right: 0; width: 330px; z-index: 30; padding: 18px 18px 14px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -18px rgba(40, 40, 120, .45); animation: pd-auf .3s var(--pd-feder); } .pd-favoriten::before { content: ''; position: absolute; top: -8px; right: 98px; width: 18px; height: 18px; background: #fff; transform: rotate(45deg); border-radius: 4px; } .pd-favoriten-titel { font: 800 20px/1.2 var(--pd-titel); color: var(--pd-navy); margin-bottom: 10px !important; } .pd-favoriten-liste { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; } .pd-favoriten-liste li { display: flex; align-items: center; gap: 12px; padding: 6px 0; } .pd-favoriten-liste img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; } .pd-favoriten-liste a { flex: 1; font-weight: 800; color: var(--pd-navy); } .pd-favoriten-liste a:hover { color: #ff4f9e; } .pd-favoriten-weg { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: #f1f2fb; color: #8a90b3; font-size: 15px; } .pd-favoriten-weg:hover { background: #ffe3ef; color: #d92a7e; } .pd-favoriten-leer { color: var(--pd-text-hell); font-size: 15px; } .pd-favoriten-hinweis { margin-top: 10px !important; font-size: 12px; color: #9aa0bf; } @keyframes pd-auf { from { opacity: 0; transform: translateY(-8px) scale(.96); } } /* ---------- Kopfbereich (Held) ---------- */ .pd-held { position: relative; z-index: 1; padding-bottom: 70px; } .pd-held-innen { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 24px; min-height: 470px; } .pd-held-bild { position: relative; height: 470px; } .pd-playknopf { position: absolute; left: 50%; top: 50%; width: 76%; z-index: 2; transform: translate(-50%, -50%); transition: transform .45s var(--pd-feder); } .pd-playknopf img { display: block; width: 100%; filter: drop-shadow(0 26px 26px rgba(255, 80, 120, .28)); animation: pd-schweben 5.5s ease-in-out infinite; } .pd-playknopf:hover { transform: translate(-50%, -50%) scale(1.06) rotate(-3deg); } .pd-playknopf:active { transform: translate(-50%, -48%) scale(.97); } .pd-umlauf { position: absolute; z-index: 3; display: block; width: 128px; aspect-ratio: 1; border: 5px solid #fff; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 16px 28px -14px rgba(60, 40, 150, .55); transform: rotate(var(--dreh, 0deg)); transition: transform .4s var(--pd-feder), box-shadow .4s; animation: pd-umlauf 6s ease-in-out infinite alternate; } .pd-umlauf img { display: block; width: 100%; height: 100%; object-fit: cover; } .pd-umlauf:hover { transform: rotate(0deg) scale(1.12); box-shadow: 0 22px 34px -14px rgba(60, 40, 150, .7); z-index: 4; } .pd-umlauf-1 { --dreh: -9deg; top: 4%; left: 9%; animation-delay: -1s; } .pd-umlauf-2 { --dreh: 7deg; top: 1%; left: 61%; width: 116px; animation-delay: -3s; } .pd-umlauf-3 { --dreh: 9deg; top: 37%; left: 81%; width: 118px; animation-delay: -2s; } .pd-umlauf-4 { --dreh: -6deg; top: 71%; left: 66%; width: 124px; animation-delay: -4s; } .pd-umlauf-5 { --dreh: -11deg; top: 48%; left: 0%; width: 136px; animation-delay: -5s; } .pd-umlauf-6 { --dreh: 6deg; top: 78%; left: 25%; width: 104px; animation-delay: -2.5s; } @keyframes pd-umlauf { to { translate: 0 -12px; } } @keyframes pd-schweben { 50% { transform: translateY(-10px); } } .pd-deko { position: absolute; pointer-events: none; z-index: 1; animation: pd-funkeln 3.2s ease-in-out infinite; } .pd-deko-held-1 { top: 7%; left: 42%; width: 46px; } .pd-deko-held-2 { top: 84%; left: 54%; width: 38px; animation-delay: -1.2s; } .pd-deko-held-3 { top: 26%; left: 2%; width: 30px; animation-delay: -2.1s; } @keyframes pd-funkeln { 50% { transform: scale(.82) rotate(14deg); opacity: .75; } } .pd-held-text { position: relative; z-index: 2; text-align: center; padding-bottom: 10px; } .pd-held-titel { font: 800 clamp(54px, 6.6vw, 100px)/.9 var(--pd-titel); letter-spacing: -.01em; } .pd-held-zeile { display: block; margin-top: .06em; font-size: .82em; white-space: nowrap; } .pd-3d { display: inline-block; padding: 0 .02em .08em; background: linear-gradient(180deg, var(--a) 0%, var(--b) 52%, var(--c) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 var(--d)) drop-shadow(0 3px 0 var(--d)) drop-shadow(0 12px 12px rgba(80, 40, 160, .28)); animation: pd-huepfen 7s ease-in-out infinite; } .pd-3d-orange { --a: #ffd23f; --b: #ffa11c; --c: #ff7a12; --d: #e4590c; } .pd-3d-blau { --a: #7fd3ff; --b: #2ea8ff; --c: #1b7ef0; --d: #1460c4; animation-delay: -.6s; } .pd-3d-pink { --a: #ff9fd6; --b: #ff5aac; --c: #f0378f; --d: #c71f71; animation-delay: -1.2s; } @keyframes pd-huepfen { 0%, 88%, 100% { transform: none; } 92% { transform: translateY(-6px) rotate(-1.5deg); } 96% { transform: translateY(1px); } } .pd-held-unterzeile { margin: 18px 0 30px; font: 800 21px/1.4 var(--pd-schrift); color: var(--pd-navy); } .pd-knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 32px; border-radius: 999px; border: 0; cursor: pointer; font: 800 20px/1 var(--pd-titel); color: #fff !important; white-space: nowrap; background: linear-gradient(180deg, var(--hell) 0%, var(--basis) 100%); box-shadow: inset 0 -5px 0 var(--dunkel), inset 0 3px 0 rgba(255, 255, 255, .42), 0 14px 24px -10px var(--dunkel); text-shadow: 0 2px 0 rgba(0, 0, 0, .12); transition: transform .3s var(--pd-feder), box-shadow .3s, filter .3s; } .pd button.pd-knopf { font-family: var(--pd-titel); font-weight: 800; line-height: 1; } .pd-knopf .pd-svg { font-size: 1.15em; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); } .pd-knopf:hover { transform: translateY(-3px) scale(1.04); filter: saturate(1.1) brightness(1.04); } .pd-knopf:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 -2px 0 var(--dunkel), 0 6px 12px -8px var(--dunkel); } .pd-knopf-orange { --hell: #ffb43c; --basis: #ff7a10; --dunkel: #dc5600; } .pd-knopf-lila { --hell: #9b80ff; --basis: #6a4cf2; --dunkel: #4b31cf; } .pd-knopf-gross { padding: 22px 64px; font-size: 32px; gap: 16px; } .pd-knopf-gross::before, .pd-knopf-gross::after { content: ''; position: absolute; top: 50%; width: 38px; height: 52px; pointer-events: none; background: linear-gradient(#ffd23f, #ffd23f) 0 0 / 18px 6px no-repeat, linear-gradient(#ffd23f, #ffd23f) 6px 23px / 22px 6px no-repeat, linear-gradient(#ffd23f, #ffd23f) 0 46px / 18px 6px no-repeat; border-radius: 6px; } .pd-knopf-gross::before { right: calc(100% + 10px); transform: translateY(-50%) scaleX(-1); } .pd-knopf-gross::after { left: calc(100% + 10px); transform: translateY(-50%); } .pd-knopf-gross:hover::before { animation: pd-strahl .6s ease-out; } .pd-knopf-gross:hover::after { animation: pd-strahl .6s ease-out; } @keyframes pd-strahl { 50% { opacity: .2; } } .pd-welle { position: absolute; left: 0; bottom: -1px; width: 100%; height: 80px; fill: var(--pd-flaeche); z-index: 1; } /* ---------- Abschnitte und Titel ---------- */ .pd-abschnitt { position: relative; padding: 18px 0 34px; background: var(--pd-flaeche); } .pd-titel { position: relative; display: inline-flex; align-items: center; gap: 18px; margin: 0 0 22px 0 !important; padding-left: 34px; font: 800 clamp(30px, 3.2vw, 42px)/1.1 var(--pd-titel); color: var(--pd-navy); } .pd-titel::before, .pd-titel::after { content: ''; position: absolute; top: 50%; width: 20px; height: 7px; border-radius: 6px; } .pd-titel::before { left: 0; background: #ffc414; transform: translateY(-160%) rotate(-28deg); box-shadow: -2px 22px 0 #ff5c9e; } .pd-titel::after { right: -40px; background: #18c6a3; transform: translateY(-140%) rotate(-38deg); box-shadow: 8px 20px 0 #ffc414; } /* ---------- Genre-Klötze ---------- */ .pd-genres > .pd-breite { position: relative; z-index: 1; } .pd-genre-raster { display: grid; grid-template-columns: repeat(42, minmax(0, 1fr)); gap: 18px; } .pd-genre-raster > .pd-klotz { grid-column: span 6; min-height: 138px; } .pd-genre-raster > .pd-klotz-gross { grid-column: span 7; min-height: 150px; } /* Klotz wie im Mockup: kräftige Vorderseite, dunklere Seitenkanten, dicker Sockel unten, heller Rand oben */ .pd-klotz { --pd-klotz-innen: inset 0 -4px 5px -1px var(--tiefe), inset 0 -12px 0 var(--dunkel), inset 0 -18px 10px -6px rgba(0, 0, 0, .13), inset 13px 0 13px -10px var(--dunkel), inset -11px 0 11px -9px var(--dunkel), inset 0 11px 10px -7px rgba(255, 255, 255, .5), inset 0 2px 0 rgba(255, 255, 255, .5); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 10px 22px; border-radius: 26px; color: #fff; text-align: center; background: radial-gradient(120% 75% at 50% -8%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 58%), var(--basis); box-shadow: var(--pd-klotz-innen), 0 16px 22px -12px var(--tiefe), 0 5px 9px -4px rgba(40, 40, 90, .2); transition: transform .45s var(--pd-feder), box-shadow .45s; } .pd-klotz::before { content: ''; position: absolute; z-index: -1; top: 5px; left: 9%; right: 9%; height: 26%; border-radius: 50% / 0 0 100% 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); } .pd-klotz::after { content: ''; position: absolute; inset: -20% auto -20% 0; width: 45%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-180%) skewX(-12deg); } /* Gilt auch für Klötze als Link (sonst erbt der Link die dunkle Textfarbe) */ .pd .pd-klotz { color: #fff; } .pd-klotz-symbol { display: block; width: auto !important; height: 70px !important; max-width: 70%; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .14)); transition: transform .5s var(--pd-feder); } .pd-klotz-gross .pd-klotz-symbol { height: 78px !important; } .pd-klotz-name { font: 800 21px/1.05 var(--pd-titel); letter-spacing: .005em; text-shadow: 0 2px 0 var(--dunkel), 0 3px 7px rgba(0, 0, 0, .18); } .pd-klotz-plus { display: grid; place-items: center; height: 74px; font-size: 62px; } .pd-klotz-plus .pd-svg { stroke-width: 3.6; filter: drop-shadow(0 4px 0 var(--dunkel)) drop-shadow(0 8px 6px rgba(0, 0, 0, .12)); } /* Hover: leicht anheben und kippen, Symbol wackelt, Lichtstreif läuft drüber */ .pd-klotz:hover, .pd-klotz:focus-visible { transform: translateY(-7px) rotate(-1.5deg) scale(1.03); box-shadow: var(--pd-klotz-innen), 0 26px 30px -14px var(--tiefe), 0 8px 12px -6px rgba(40, 40, 90, .22); } .pd-klotz:hover::after, .pd-klotz:focus-visible::after { transform: translateX(320%) skewX(-12deg); transition: transform .9s ease; } .pd-klotz:hover .pd-klotz-symbol, .pd-klotz:focus-visible .pd-klotz-symbol { animation: pd-wackeln .7s ease; transform: scale(1.08); } .pd-klotz:active { transform: translateY(-2px) scale(.98); } @keyframes pd-wackeln { 0% { rotate: 0deg; } 25% { rotate: -9deg; } 55% { rotate: 7deg; } 80% { rotate: -3deg; } 100% { rotate: 0deg; } } .pd-klotz-aktiv { box-shadow: var(--pd-klotz-innen), 0 0 0 4px #fff, 0 0 0 8px var(--basis), 0 18px 26px -12px var(--tiefe); } /* Noch nicht verfügbar: grau, ruhiger Hover, nicht anklickbar */ .pd-klotz-bald { cursor: default; color: #fff; } .pd-klotz-bald .pd-klotz-symbol { opacity: .9; filter: grayscale(1) brightness(1.08) drop-shadow(0 4px 3px rgba(0, 0, 0, .08)); } .pd-klotz-bald .pd-klotz-name { text-shadow: 0 2px 0 var(--dunkel); } .pd-klotz-bald-text { position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 50%); padding: 3px 14px; border-radius: 999px; background: #e6e9f2; color: #8a90a8; font: 800 13px/1.2 var(--pd-titel); box-shadow: 0 0 0 3px var(--pd-flaeche); } .pd-klotz-bald { overflow: visible; margin-bottom: 12px; } .pd-klotz-bald::after { display: none; } .pd-klotz-bald:hover { transform: translateY(-5px) rotate(1deg); box-shadow: var(--pd-klotz-innen), 0 22px 26px -16px rgba(80, 90, 130, .55); } .pd-klotz-bald:hover .pd-klotz-symbol { animation: pd-wackeln .7s ease; } .pd-klotz-bald:hover .pd-klotz-bald-text { animation: pd-bald .6s var(--pd-feder); background: #fff; color: #6c6cf5; } @keyframes pd-bald { 40% { transform: translate(-50%, 30%) scale(1.15); } } /* ---------- Spielkarten ---------- */ /* Oben: große Karte + 3 Karten, darunter 5 Karten (60er-Raster: 24+12+12+12, 5 × 12) */ .pd-bento { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 20px; } .pd-bento > .pd-karte { grid-column: span 12; } .pd-bento > .pd-karte-gross { grid-column: span 24; } /* Karte wie im Mockup: zarter hellblauer Rand, etwas kräftigere Unterkante, weicher blauer Schein */ .pd-karte { position: relative; border-radius: 22px; background: linear-gradient(180deg, #fff 0%, #fff 64%, #f7fbff 100%); border: 2px solid #d3e7fb; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 3px 0 -1px #b4d9f9, 0 0 0 4px rgba(214, 234, 252, .45), 0 10px 20px -8px rgba(90, 160, 235, .36), 0 22px 34px -26px rgba(40, 70, 170, .4); transition: transform .4s var(--pd-feder), box-shadow .4s, border-color .4s; } .pd-karte-link { display: flex; flex-direction: column; height: 100%; border-radius: inherit; } .pd-karte-bild { position: relative; display: block; margin: 6px 6px 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: #eef0fb; box-shadow: 0 0 0 1px rgba(180, 210, 245, .35); } .pd-bento > .pd-karte:nth-child(-n+4) .pd-karte-bild { aspect-ratio: 16 / 13; } .pd-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .pd-karte-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11px 14px 14px; } .pd-karte-titel { font: 800 19px/1.15 var(--pd-titel); color: var(--pd-navy); } .pd-karte:hover { transform: translateY(-6px); border-color: #bcdcfa; box-shadow: inset 0 0 0 2px #fff, 0 3px 0 -1px #9fcff7, 0 0 0 5px rgba(200, 228, 252, .6), 0 18px 28px -10px rgba(90, 150, 235, .48), 0 30px 44px -26px rgba(60, 60, 180, .45); } .pd-karte:hover .pd-karte-bild img { transform: scale(1.06); } .pd-karte:hover .pd-abzeichen { animation: pd-wackeln .6s ease; } /* Große Karte: Höhe kommt von den Nachbarn, das Bild füllt den Rest */ .pd-bento > .pd-karte-gross .pd-karte-bild { flex: 1 1 0; aspect-ratio: auto; min-height: 160px; } .pd-karte-gross .pd-karte-bild img { position: absolute; inset: 0; } .pd-karte-gross .pd-karte-info { padding: 12px 18px 16px; } .pd-karte-gross .pd-karte-titel { font-size: 22px; } /* Kleine alte Vorschaubilder: scharf vor unscharfer Kopie */ .pd-klein { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; } .pd-klein::before { content: ''; position: absolute; inset: -20px; background: var(--pd-bild) center / cover; filter: blur(18px) saturate(1.3); transform: scale(1.1); } .pd .pd-klein img { position: relative; width: auto !important; height: 72% !important; max-height: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35); } .pd-abzeichen { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 13px 3px; border-radius: 999px; font: 800 15px/1.2 var(--pd-titel); color: #fff; letter-spacing: .02em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 4px 10px -4px rgba(0, 0, 0, .3); } .pd-abzeichen-hot { background: linear-gradient(180deg, #ff6aa8, #ff3d8b); } .pd-abzeichen-neu { background: linear-gradient(180deg, #3ee0a3, #18c48a); } /* Sterne: glänzende 3D-Sterne, unbewertete grau (gleiches Bild, entfärbt) */ .pd-wertung { display: inline-flex; align-items: center; gap: 8px; } .pd-sterne { position: relative; display: inline-block; width: 100px; height: 19px; flex: none; } .pd-sterne-leer, .pd-sterne-voll { position: absolute; top: 0; left: 0; height: 100%; background: url('bilder/stern-klein.webp') 0 0 / 20px 19px repeat-x; } .pd-sterne-leer { width: 100%; filter: grayscale(1) brightness(1.22) contrast(.72); } .pd-sterne-zahl { font: 700 14.5px/1 var(--pd-schrift); color: var(--pd-text); } .pd-pille { display: inline-block; padding: 3px 13px 3px; border-radius: 999px; background: var(--pastell); color: var(--pastell-text); font: 800 13px/1.4 var(--pd-schrift); white-space: nowrap; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05); } .pd-welt-spiele .pd-pille { font-size: 12px; padding: 2px 10px 1px; } /* ---------- Spiel des Tages ---------- */ .pd-tag { padding-top: 34px; } .pd-tag-karte { position: relative; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr) 210px; align-items: center; gap: 30px; padding: 26px 28px; border-radius: 32px; background: linear-gradient(100deg, #fff8dd 0%, #fff4e6 50%, #fdeaff 100%); border: 3px solid #ffe28c; box-shadow: 0 22px 40px -26px rgba(200, 140, 20, .55); } .pd-tag-etikett { position: absolute; top: -26px; left: 42px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 4px 18px 4px 10px; border-radius: 16px; background: #fff7d2; border: 3px solid #ffe28c; font: 800 25px/1.2 var(--pd-titel); color: var(--pd-navy); } .pd-tag-etikett img { width: 42px; height: auto; margin-top: -10px; animation: pd-funkeln 4s ease-in-out infinite; } .pd-tag-bild { position: relative; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 7; box-shadow: 0 14px 26px -16px rgba(60, 40, 120, .5); } .pd-tag-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .pd-tag-karte:hover .pd-tag-bild img { transform: scale(1.05); } .pd-tag-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .pd-tag-titel { font: 800 32px/1.1 var(--pd-titel); color: var(--pd-navy); } .pd-tag-titel a:hover { color: #6a4cf2; } .pd-tag-beschreibung { font-size: 15px; color: var(--pd-text); max-width: 44ch; } .pd-tag-genres { display: flex; flex-wrap: wrap; gap: 8px; } .pd-tag-text .pd-knopf { margin-top: 6px; } .pd-tag-truhe { width: 200px; justify-self: center; filter: drop-shadow(0 16px 18px rgba(160, 100, 0, .3)); animation: pd-schweben 5s ease-in-out infinite; } /* ---------- Neu auf Play.de ---------- */ .pd-titel-bild { width: 56px !important; height: auto; margin: -14px 0 -8px 2px; animation: pd-schweben 4.5s ease-in-out infinite; } .pd-reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } /* ---------- Spielwelten (Mockup 6b) ---------- */ .pd-welten .pd-titel { margin-bottom: 28px !important; } .pd-welt { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); align-items: center; gap: 20px; margin-bottom: 28px; padding: 18px; border-radius: 36px; background: linear-gradient(110deg, var(--hell) 0%, var(--basis) 62%, var(--dunkel) 135%); border: 3px solid rgba(255, 255, 255, .55); box-shadow: inset 0 -7px 0 var(--dunkel), inset 0 3px 0 rgba(255, 255, 255, .5), 0 24px 38px -26px var(--dunkel); content-visibility: auto; contain-intrinsic-size: auto 330px; } .pd-welt::before { content: ''; position: absolute; z-index: -1; top: 10px; left: 18px; width: 260px; height: 90px; border-radius: 50%; background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%); } .pd-welt-gespiegelt { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); background: linear-gradient(250deg, var(--hell) 0%, var(--basis) 62%, var(--dunkel) 135%); } .pd-welt-gespiegelt::before { left: auto; right: 18px; } .pd-welt-gespiegelt .pd-welt-buehne { order: 2; } .pd-welt-buehne { position: relative; display: flex; align-items: center; gap: 6px; min-height: 250px; padding: 6px 4px 6px 0; } .pd-welt-szene { flex: none; width: 188px; height: auto; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .2)); animation: pd-schweben 6s ease-in-out infinite; transition: transform .6s var(--pd-feder); } .pd-welt:hover .pd-welt-szene { transform: rotate(-5deg) scale(1.06); } .pd-welt-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .pd-welt-klotz { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(170deg, var(--hell), var(--basis)); box-shadow: inset 0 -5px 0 var(--dunkel), inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 0 3px rgba(255, 255, 255, .7), 0 10px 16px -8px var(--dunkel); } .pd .pd-welt-klotz img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .15)); } .pd-welt-name { font: 800 clamp(34px, 3.4vw, 48px)/1 var(--pd-titel); color: #fff; letter-spacing: .005em; text-shadow: 0 3px 0 var(--dunkel), 0 5px 0 var(--dunkel), 0 10px 14px rgba(0, 0, 0, .18); } .pd-welt-name a:hover { color: var(--glanz); } .pd-welt-satz { font: 800 16px/1.35 var(--pd-schrift); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); max-width: 24ch; } /* Auf Gelb trägt weiße Schrift nicht: dunkles Gold statt Weiß */ .pd-welt.pd-farbe-gelb .pd-welt-satz { color: #7a4f00; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); } .pd-welt.pd-farbe-gelb .pd-welt-name { text-shadow: 0 3px 0 #d98f00, 0 5px 0 #c98200, 0 10px 14px rgba(120, 70, 0, .25); } .pd-welt-anzahl { padding: 3px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--pd-navy); font: 800 14px/1.5 var(--pd-schrift); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .35); } .pd .pd-welt-knopf { margin-top: 4px; padding: 11px 20px; font-size: 17px; background: linear-gradient(180deg, var(--basis) 0%, var(--dunkel) 100%); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16), inset 0 3px 0 rgba(255, 255, 255, .35), 0 0 0 3px rgba(255, 255, 255, .55), 0 12px 20px -10px var(--dunkel); } .pd-welt-knopf .pd-svg { transition: transform .3s var(--pd-feder); } .pd-welt-knopf:hover .pd-svg { transform: translateX(4px); } .pd-welt-spiele { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: 28px; background: rgba(255, 255, 255, .97); box-shadow: inset 0 2px 0 #fff, 0 12px 22px -16px rgba(0, 0, 0, .35); } .pd-welt-spiele .pd-karte { border-color: #eef0fa; box-shadow: 0 8px 18px -16px rgba(40, 50, 130, .45); } .pd-welt-spiele .pd-karte-bild { aspect-ratio: 5 / 4; } .pd-welt-spiele .pd-karte-info { padding: 9px 11px 12px; gap: 4px; } .pd-welt-spiele .pd-karte-titel { font-size: 16px; } .pd-welt-spiele .pd-sterne { width: 80px; height: 15px; } .pd-welt-spiele .pd-sterne-leer, .pd-welt-spiele .pd-sterne-voll { background-size: 16px 15px; } .pd-welt-spiele .pd-sterne-zahl { font-size: 13px; } .pd-welt-spiele .pd-abzeichen { top: 8px; left: 8px; font-size: 13px; padding: 3px 10px 2px; } /* ---------- Noch mehr Genres ---------- */ .pd-mehr { padding-top: 4px; } .pd .pd-titel-klein { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 18px !important; } .pd-chips { display: flex; flex-wrap: wrap; gap: 16px 14px; margin: 0; padding: 0; list-style: none; } .pd-chip { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px 11px 12px; border-radius: 999px; cursor: default; font: 800 18px/1 var(--pd-titel); color: #fff; background: linear-gradient(180deg, var(--hell), var(--basis)); box-shadow: inset 0 -5px 0 var(--dunkel), inset 0 2px 0 rgba(255, 255, 255, .5), 0 10px 18px -12px var(--dunkel); filter: saturate(.5) brightness(1.06); opacity: .9; transition: transform .4s var(--pd-feder), filter .4s, opacity .4s; } .pd .pd-chip img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .14)); } .pd-chip span { text-shadow: 0 2px 0 var(--dunkel); } .pd-chip em { position: absolute; top: -10px; right: -8px; padding: 4px 9px 3px; border-radius: 999px; background: #fff; color: var(--pastell-text); font: 800 11px/1 var(--pd-titel); font-style: normal; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); transform: rotate(8deg); } .pd-chip:hover { filter: none; opacity: 1; transform: translateY(-4px) rotate(-1.5deg); } .pd-chip:hover img { animation: pd-wackeln .7s ease; } .pd-chip:hover em { animation: pd-bald-chip .6s var(--pd-feder); } @keyframes pd-bald-chip { 40% { transform: rotate(-6deg) scale(1.2); } } /* ---------- Infobereich mit SEO-Texten (Mockup 6a) ---------- */ .pd-info { position: relative; padding: 76px 0 110px; overflow: hidden; background: linear-gradient(180deg, var(--pd-flaeche) 0%, #d2eaff 13%, #d9dcff 52%, #e8dbff 100%); content-visibility: auto; contain-intrinsic-size: auto 1300px; } .pd-info > .pd-breite { position: relative; z-index: 1; } .pd-info-wolke { position: absolute; z-index: 0; width: 280px; aspect-ratio: 44 / 30; background: url('bilder/deko-wolke.webp') center / contain no-repeat; pointer-events: none; animation: pd-wolke 30s ease-in-out infinite alternate; } .pd-info-wolke-1 { top: 70px; left: -70px; } .pd-info-wolke-2 { top: 260px; right: -90px; width: 340px; animation-duration: 36s; } .pd-info-wolke-3 { bottom: 60px; left: 6%; width: 220px; opacity: .85; animation-duration: 40s; } .pd .pd-info-stern-1 { top: 26px; left: 9%; width: 52px; } .pd .pd-info-stern-2 { top: 40px; right: 11%; width: 44px; animation-delay: -1.6s; } .pd .pd-info-titel { margin: 0 auto 30px; max-width: 1000px; text-align: center; font: 800 clamp(36px, 4.6vw, 66px)/1.02 var(--pd-titel); } .pd-info-zeile { display: block; margin-top: .08em; } .pd-vorteile { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 0 0 70px; padding: 0; list-style: none; } .pd-vorteil { display: flex; align-items: center; gap: 12px; min-width: 214px; padding: 11px 28px 13px 14px; border-radius: 999px; color: #fff; font: 800 20px/1.05 var(--pd-titel); text-shadow: 0 2px 0 var(--dunkel); background: linear-gradient(180deg, var(--hell) 0%, var(--basis) 100%); box-shadow: inset 0 -6px 0 var(--dunkel), inset 0 3px 0 rgba(255, 255, 255, .5), 0 16px 26px -14px var(--dunkel); transition: transform .45s var(--pd-feder); } .pd .pd-vorteil img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .16)); } .pd-vorteil:hover { transform: translateY(-6px) rotate(-1.5deg); } .pd-vorteil:hover img { animation: pd-wackeln .7s ease; } .pd-info-karte { position: relative; margin-bottom: 44px; padding: 52px 50px 40px; border-radius: 38px; background: rgba(255, 255, 255, .84); border: 2px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 28px 54px -32px rgba(70, 60, 170, .5), inset 0 2px 0 #fff; } .pd .pd-info-maskottchen { position: absolute; top: -70px; left: 50%; width: 118px; transform: translateX(-50%); animation: pd-gucken 6s ease-in-out infinite; filter: drop-shadow(0 12px 12px rgba(200, 140, 0, .25)); } @keyframes pd-gucken { 50% { transform: translateX(-50%) translateY(-8px) rotate(5deg); } } .pd-info-absaetze { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; font-size: 16px; line-height: 1.78; color: #3b4477; } .pd-info-absaetze p:only-child { grid-column: 1 / -1; } .pd-info-absaetze p:first-child::first-letter { float: left; margin: 6px 4px 0 0; font: 800 64px/.78 var(--pd-titel); background: linear-gradient(180deg, #ffd23f, #ff7a12); -webkit-background-clip: text; background-clip: text; color: transparent; } .pd-info strong { color: var(--pd-navy); } .pd-notizen { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; } .pd-notiz { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 28px 30px 30px 22px; border-radius: 32px; box-shadow: 0 24px 38px -28px rgba(40, 40, 120, .5), inset 0 2px 0 rgba(255, 255, 255, .7); transform: rotate(-1.2deg); transition: transform .5s var(--pd-feder), box-shadow .5s; } .pd-notiz-mint { background: linear-gradient(160deg, #e9fcf4 0%, #c9f2e2 100%); border: 2px solid #a6e9cf; } .pd-notiz-pink { background: linear-gradient(160deg, #fff0f7 0%, #ffd5e9 100%); border: 2px solid #ffbcd9; transform: rotate(1.2deg); } .pd-notiz:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 32px 44px -28px rgba(40, 40, 120, .55), inset 0 2px 0 rgba(255, 255, 255, .7); } .pd-notiz-deko { position: relative; flex: none; width: 118px; margin-top: 6px; } .pd .pd-notiz-deko img { display: block; width: 118px; height: auto; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .16)); animation: pd-schweben 5.5s ease-in-out infinite; } .pd .pd-notiz-deko .pd-notiz-muenze { position: absolute; right: -16px; bottom: -22px; width: 56px; animation-delay: -2s; } .pd-notiz-text { min-width: 0; } .pd .pd-notiz h2 { font: 800 27px/1.15 var(--pd-titel); color: var(--pd-navy); margin: 4px 0 0; } .pd-kritzel { display: block; width: 180px; height: 12px; margin: 6px 0 12px; fill: none; stroke-width: 4; stroke-linecap: round; } .pd-notiz-mint .pd-kritzel { stroke: #18c6a3; } .pd-notiz-pink .pd-kritzel { stroke: #ff5c9e; } .pd-notiz-inhalt { font-size: 15.5px; line-height: 1.72; color: #3b4477; } .pd-notiz-inhalt span { display: block; } .pd-kritzel path { stroke-dasharray: 260; stroke-dashoffset: 0; } .pd-notiz:hover .pd-kritzel path { animation: pd-kritzeln 1s ease; } @keyframes pd-kritzeln { from { stroke-dashoffset: 260; } } .pd-konfetti-info i:nth-child(2), .pd-konfetti-info i:nth-child(10) { display: none; } .pd-konfetti-info i:nth-child(1) { top: 6%; left: 8%; } .pd-konfetti-info i:nth-child(5) { top: 9%; left: 86%; } .pd-konfetti-info i:nth-child(9) { top: 16%; left: 70%; } /* Unter der Info-Fläche gleich die Welle des Fußes, ohne Abstand */ .pd-info + .pd-fuss, .pd-inhalt:has(.pd-info) + .pd-fuss { margin-top: 0; } /* ---------- Konfetti ---------- */ .pd-konfetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .pd-konfetti i { position: absolute; width: 18px; height: 7px; border-radius: 6px; animation: pd-konfetti 5s ease-in-out infinite alternate; } .pd-konfetti i:nth-child(1) { top: 8%; left: 4%; background: #ffc414; rotate: -30deg; } .pd-konfetti i:nth-child(2) { top: 20%; left: 46%; background: #18c6a3; rotate: 40deg; animation-delay: -1s; } .pd-konfetti i:nth-child(3) { top: 70%; left: 12%; background: #ff5c9e; rotate: 20deg; animation-delay: -2s; } .pd-konfetti i:nth-child(4) { top: 88%; left: 40%; background: #2e9bff; rotate: -50deg; animation-delay: -3s; } .pd-konfetti i:nth-child(5) { top: 12%; left: 88%; background: #9b5cff; rotate: 60deg; animation-delay: -1.5s; } .pd-konfetti i:nth-child(6) { top: 60%; left: 94%; background: #ffc414; rotate: -20deg; animation-delay: -2.5s; } .pd-konfetti i:nth-child(7) { top: 40%; left: 2%; background: #2e9bff; rotate: 70deg; animation-delay: -.5s; } .pd-konfetti i:nth-child(8) { top: 94%; left: 76%; background: #ff7f17; rotate: 30deg; animation-delay: -3.5s; } .pd-konfetti i:nth-child(9) { top: 4%; left: 64%; background: #ff5c9e; rotate: -60deg; animation-delay: -4s; } .pd-konfetti i:nth-child(10) { top: 50%; left: 56%; background: #1fca8b; rotate: 10deg; animation-delay: -4.5s; width: 8px; height: 8px; border-radius: 50%; } @keyframes pd-konfetti { to { translate: 0 -10px; rotate: 25deg; } } .pd-konfetti-genres i:nth-child(2), .pd-konfetti-genres i:nth-child(4), .pd-konfetti-genres i:nth-child(10) { display: none; } .pd-konfetti-genres i:nth-child(1) { top: 2%; left: 1%; } .pd-konfetti-genres i:nth-child(5) { top: 6%; left: 95%; } .pd-konfetti-tag { z-index: 0; } .pd-konfetti-tag i:nth-child(2), .pd-konfetti-tag i:nth-child(4), .pd-konfetti-tag i:nth-child(10), .pd-konfetti-tag i:nth-child(3), .pd-konfetti-tag i:nth-child(7) { display: none; } .pd-konfetti-tag i:nth-child(5) { top: 14%; left: 78%; } .pd-konfetti-tag i:nth-child(6) { top: 80%; left: 96%; } .pd-konfetti-tag i:nth-child(8) { top: 84%; left: 80%; } .pd-konfetti-tag i:nth-child(9) { top: 22%; left: 96%; } /* ---------- Fuß ---------- */ /* Oben Lavendel wie die Welle, nach unten dunkler, damit weiße Schrift gut lesbar ist (Kontrast ≥ 4,5:1) */ .pd-fuss { position: relative; margin-top: 50px; padding: 46px 0 22px; color: #fff; background: linear-gradient(180deg, #b8a5f7 0%, #8d72f0 10%, #6f50e6 30%, #5a3bd3 100%); } .pd-fuss-welle { position: absolute; left: 0; top: -89px; width: 100%; height: 90px; fill: #b8a5f7; } .pd-fuss-wolke { background: rgba(255, 255, 255, .35); filter: blur(2px); box-shadow: 50px -28px 0 8px rgba(255, 255, 255, .35), 115px -10px 0 0 rgba(255, 255, 255, .35); animation: none; } .pd-fuss-wolke-1 { top: -18px; left: -60px; } .pd-fuss-wolke-2 { top: -8px; right: -80px; transform: scale(1.2); } .pd-fuss-innen { position: relative; z-index: 1; } .pd-fuss-raster { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.1fr) minmax(160px, .75fr); gap: 44px; align-items: start; padding-bottom: 28px; } .pd-fuss-logo { display: inline-block; border-radius: 18px; transition: transform .4s var(--pd-feder); } .pd-fuss-logo:hover { transform: rotate(-2deg) scale(1.04); } .pd .pd-fuss-logo img { display: block; width: 190px; height: auto; filter: drop-shadow(0 6px 10px rgba(40, 15, 130, .4)); } .pd-fuss-satz { max-width: 30ch; margin-top: 12px !important; font: 700 15px/1.6 var(--pd-schrift); color: #fff; } .pd-fuss-titel { margin: 2px 0 16px !important; font: 800 21px/1.1 var(--pd-titel); color: #fff; text-shadow: 0 2px 0 rgba(50, 25, 150, .45); } .pd-fuss-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .pd-fuss-liste-genres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 24px; } .pd-fuss-liste a, .pd-fuss-alle { display: inline-flex; align-items: center; gap: 10px; border-radius: 8px; font: 700 15.5px/1.3 var(--pd-schrift); color: #fff; transition: transform .3s var(--pd-feder); } .pd-fuss-liste a:hover, .pd-fuss-alle:hover { transform: translateX(3px); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .pd-fuss-punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--basis); box-shadow: 0 0 0 2px #fff, inset 0 -2px 0 var(--dunkel); } .pd-fuss-alle { margin-top: 18px; padding: 9px 16px 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); } .pd-fuss-alle .pd-svg { font-size: 17px; } .pd-fuss-unten { padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, .22); text-align: center; font: 700 14px/1.4 var(--pd-schrift); } .pd-fuss-unten a { text-decoration: underline; text-underline-offset: 3px; } .pd-fuss .pd-fuss-logo:focus-visible, .pd-fuss a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: none; } @media (max-width: 1000px) { .pd-fuss-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 30px 36px; } .pd-fuss-marke { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; } .pd-fuss-satz { margin-top: 0 !important; } } @media (max-width: 640px) { .pd-fuss { padding-top: 34px; } .pd-fuss-raster { grid-template-columns: 1fr; gap: 26px; } .pd-fuss-marke { flex-direction: column; align-items: flex-start; gap: 10px; } .pd .pd-fuss-logo img { width: 160px; } .pd-fuss-liste-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .pd-fuss-nav .pd-fuss-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } } /* ---------- Nach oben ---------- */ .pd-oben-marke { position: absolute; top: 900px; left: 0; width: 1px; height: 1px; pointer-events: none; } .pd-nach-oben { position: fixed; right: 26px; bottom: 26px; z-index: 50; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 28%, #ff9fc9 0%, #ff5a9d 52%, #f0457a 100%); box-shadow: inset 0 -6px 0 #ff8a1c, inset 0 -9px 0 #e46a00, inset 0 3px 3px rgba(255, 255, 255, .5), 0 14px 24px -10px rgba(220, 60, 120, .75); opacity: 0; transform: translateY(24px) scale(.7); transition: opacity .3s, transform .45s var(--pd-feder); } .pd-nach-oben[hidden] { display: grid; visibility: hidden; } .pd-nach-oben.pd-sichtbar { opacity: 1; transform: none; visibility: visible; } .pd-nach-oben::after { content: ''; position: absolute; top: 9px; left: 14px; width: 20px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-24deg); } .pd-nach-oben svg { width: 32px; height: 32px; margin-top: -4px; fill: #ffd23f; filter: drop-shadow(0 3px 0 #f29a00); transition: transform .4s var(--pd-feder); } .pd-nach-oben:hover { transform: translateY(-5px) scale(1.06); } .pd-nach-oben:hover svg { animation: pd-rakete .7s ease; } .pd-nach-oben:active { transform: translateY(2px) scale(.95); } @keyframes pd-rakete { 35% { transform: translateY(-7px); } 60% { transform: translateY(2px); } } /* ---------- Kleinere Bildschirme ---------- */ @media (max-width: 1180px) { .pd-logo { width: 280px; } .pd-suche { margin-left: auto; } .pd-genre-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-genre-raster > .pd-klotz, .pd-genre-raster > .pd-klotz-gross { grid-column: span 1; } .pd-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-bento > .pd-karte { grid-column: span 1; } .pd-bento > .pd-karte-gross { grid-column: span 2; grid-row: span 2; } .pd-tag-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pd-tag-truhe { display: none; } } @media (max-width: 900px) { .pd { background-size: 100% 1100px; } .pd-held-innen { grid-template-columns: 1fr; gap: 0; } .pd-held-text { order: -1; padding-top: 10px; } .pd-held-bild { height: 400px; max-width: 560px; width: 100%; margin: 0 auto; } .pd-knopf-gross { padding: 18px 50px; font-size: 28px; } } @media (max-width: 760px) { .pd-breite { padding: 0 16px; } .pd-kopf-innen { flex-wrap: wrap; gap: 12px 14px; padding-top: 14px; } .pd-logo { width: 190px; } .pd-kopf-knoepfe { margin-left: auto; gap: 10px; } .pd-rund { width: 50px; height: 50px; font-size: 23px; } .pd-suche { order: 3; flex-basis: 100%; max-width: none; margin: 0; } .pd-suche input { height: 48px; font-size: 16px; } .pd-favoriten { top: 62px; width: min(330px, calc(100vw - 32px)); } .pd-favoriten::before { right: 74px; } .pd-held { padding-bottom: 50px; } .pd-held-titel { font-size: clamp(42px, 12vw, 60px); } .pd-held-unterzeile { font-size: 17px; margin: 12px 0 22px; } .pd-held-bild { height: 330px; } .pd-umlauf { width: 84px !important; border-width: 4px; border-radius: 18px; } .pd-umlauf-6 { display: none; } .pd-knopf-gross { padding: 16px 40px; font-size: 24px; } .pd-knopf-gross::before, .pd-knopf-gross::after { display: none; } .pd-titel { font-size: 28px; } .pd-genre-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .pd-genre-raster > .pd-klotz, .pd-genre-raster > .pd-klotz-gross { min-height: 112px; border-radius: 22px; } .pd-klotz-symbol, .pd-klotz-gross .pd-klotz-symbol { height: 50px !important; } .pd-klotz-name { font-size: 16px; } .pd-klotz-plus { height: 52px; font-size: 44px; } .pd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pd-bento > .pd-karte-gross { grid-column: span 2; grid-row: auto; } .pd-bento > .pd-karte-gross .pd-karte-bild { flex: none; min-height: 0; aspect-ratio: 16 / 10; } .pd-karte-titel { font-size: 16px; } .pd-sterne { width: 80px; height: 15px; } .pd-sterne-leer, .pd-sterne-voll { background-size: 16px 15px; } .pd-tag-karte { grid-template-columns: 1fr; padding: 34px 18px 22px; gap: 18px; } .pd-tag-etikett { left: 18px; font-size: 21px; } .pd-wolke-3 { display: none; } .pd-nach-oben { right: 14px; bottom: 14px; width: 52px; height: 52px; } .pd-nach-oben svg { width: 27px; height: 27px; } .pd-oben-marke { top: 700px; } } /* ---------- Brotkrumen ---------- */ .pd-krumen ol { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 8px 18px; list-style: none; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: 0 8px 18px -14px rgba(40, 50, 130, .5); font: 700 15px/1.3 var(--pd-schrift); color: var(--pd-navy); } .pd-krumen li + li::before { content: '›'; margin: 0 8px 0 4px; color: #8a90b8; font-weight: 800; } .pd-krumen a { color: #3d5bd8; } .pd-krumen a:hover { text-decoration: underline; text-underline-offset: 3px; } .pd-krumen [aria-current] { font-weight: 800; } .pd-krumen li, .pd-krumen a { display: inline-flex; align-items: center; } .pd-krumen-haus ol { padding: 9px 22px 9px 16px; font-size: 17px; background: rgba(255, 255, 255, .78); } .pd-krumen-haus .pd-svg-haus { width: 24px; height: 24px; margin-right: 12px; color: #3d5bd8; } .pd-krumen-haus li + li::before { margin: 0 12px 0 8px; } /* Klötze: Zahl nur dort, wo gewünscht */ .pd-klotz-zahl { display: none; } .pd-klotz-mit-zahl .pd-klotz-zahl, .pd-klotz-riesig .pd-klotz-zahl { display: block; margin-top: -2px; font: 800 14px/1.2 var(--pd-schrift); color: rgba(255, 255, 255, .96); text-shadow: 0 1px 0 var(--dunkel); } /* ---------- Genre-Seite (Mockup 5a) ---------- */ .pd-genre-held { padding-bottom: 84px; } .pd-genre-held .pd-krumen { position: relative; z-index: 2; margin-top: 4px; } .pd-genre-held-innen { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; min-height: 340px; } .pd-genre-buehne { position: relative; height: 340px; } .pd-genre-riesenklotz { position: absolute; left: 14%; top: 34px; display: grid; place-items: center; width: 230px; height: 210px; border-radius: 52px; background: radial-gradient(120% 75% at 50% -8%, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 58%), var(--basis); box-shadow: inset 0 -7px 8px -2px var(--tiefe), inset 0 -20px 0 var(--dunkel), inset 0 -28px 14px -8px rgba(0, 0, 0, .14), inset 22px 0 20px -16px var(--dunkel), inset -18px 0 18px -14px var(--dunkel), inset 0 16px 14px -10px rgba(255, 255, 255, .55), inset 0 3px 0 rgba(255, 255, 255, .55), 0 32px 40px -20px var(--tiefe); transform: rotate(-7deg); animation: pd-schweben 6s ease-in-out infinite; } .pd-genre-riesenklotz::before { content: ''; position: absolute; top: 8px; left: 10%; right: 10%; height: 26%; border-radius: 50% / 0 0 100% 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)); } .pd .pd-genre-riesenklotz img { position: relative; width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .16)); } .pd .pd-genre-szene { position: absolute; right: 2%; bottom: 0; width: 270px; height: auto; filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .2)); animation: pd-schweben 5s ease-in-out infinite; animation-delay: -2s; } .pd .pd-deko-genre-1 { top: 6%; left: 4%; width: 44px; } .pd .pd-deko-genre-2 { top: 72%; left: 6%; width: 34px; animation-delay: -1.4s; } .pd-genre-kopftext { position: relative; z-index: 2; text-align: center; } .pd-genre-titel { font: 800 clamp(56px, 7.4vw, 112px)/.92 var(--pd-titel); letter-spacing: -.01em; } .pd-genre-titel .pd-3d-zeile { display: block; width: fit-content; margin-inline: auto; } /* Große Überschriften der Unterseiten: weißer Rand und Tiefe wie in den Mockups 5a–5c */ .pd .pd-genre-titel .pd-3d, .pd .pd-alle-titel .pd-3d, .pd .pd-suche-titel .pd-3d, .pd .pd-papier-titel .pd-3d { filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 4px 0 var(--d)) drop-shadow(0 2px 0 var(--d)) drop-shadow(0 14px 14px rgba(80, 40, 160, .28)); } .pd-genre-anzahl { display: inline-block; margin: 14px 0 12px !important; padding: 6px 22px; border-radius: 999px; background: linear-gradient(180deg, #9b80ff, #7357f0); color: #fff; font: 800 20px/1.2 var(--pd-titel); box-shadow: inset 0 -4px 0 #5639d4, inset 0 2px 0 rgba(255, 255, 255, .4), 0 10px 18px -10px #5639d4; } .pd-genre-satz { font: 800 22px/1.35 var(--pd-schrift); color: var(--pd-navy); max-width: 30ch; margin: 0 auto !important; } .pd-genre-wahl { position: relative; z-index: 2; padding-top: 14px; padding-bottom: 18px; } .pd .pd-genre-raster-klein { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .pd .pd-genre-raster-klein > .pd-klotz { grid-column: auto; min-height: 112px; border-radius: 24px; padding: 12px 8px 14px; } .pd .pd-klotz-klein .pd-klotz-symbol { height: 54px !important; } .pd-klotz-klein .pd-klotz-name { font-size: 18px; } /* Aktives Genre (Mockup 5a): weißer Ring, heller Schein und gelbe Strahlen rundherum */ .pd .pd-klotz-aktiv { overflow: visible; transform: translateY(-4px) scale(1.04); box-shadow: var(--pd-klotz-innen), 0 0 0 4px #fff, 0 0 22px 9px var(--glanz), 0 18px 26px -12px var(--tiefe); animation: pd-leuchten 2.6s ease-in-out infinite; } @keyframes pd-leuchten { 50% { box-shadow: var(--pd-klotz-innen), 0 0 0 4px #fff, 0 0 32px 14px var(--glanz), 0 18px 26px -12px var(--tiefe); } } .pd .pd-klotz-aktiv::after { inset: -24px -26px; width: auto; z-index: -2; transform: none; transition: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg stroke='%23ffc414' stroke-width='4.5' stroke-linecap='round' fill='none' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M9 11 4 5M19 8 18.5 2.5M6 22 2 21.5M91 11 96 5M81 8 81.5 2.5M94 22 98 21.5M9 89 4 95M19 92 18.5 97.5M6 78 2 78.5M91 89 96 95M81 92 81.5 97.5M94 78 98 78.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: pd-strahlen 1.8s ease-in-out infinite; } .pd .pd-klotz-aktiv:hover::after { transform: none; } @keyframes pd-strahlen { 50% { opacity: .55; scale: 1.04; } } .pd-sortierung { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .pd-sortier-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: #fff; border: 2px solid var(--pd-rand); color: var(--pd-navy) !important; font: 800 16px/1 var(--pd-schrift); box-shadow: 0 8px 16px -14px rgba(40, 50, 130, .5); transition: transform .3s var(--pd-feder), border-color .3s; } .pd-sortier-chip .pd-svg { font-size: 18px; color: #6c6cf5; } .pd-sortier-chip:hover { transform: translateY(-2px); border-color: #c9c4ff; } .pd-sortier-chip.pd-aktiv { border-color: transparent; color: #fff !important; background: linear-gradient(180deg, #9b80ff, #6a4cf2); box-shadow: inset 0 -4px 0 #4b31cf, inset 0 2px 0 rgba(255, 255, 255, .4), 0 10px 18px -10px #4b31cf; } .pd-sortier-chip.pd-aktiv .pd-svg { color: #fff; } .pd-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .pd-seiten { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 36px; } .pd-seiten .page-numbers { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 12px; border-radius: 999px; background: #fff; border: 2px solid var(--pd-rand); color: var(--pd-navy); font: 800 20px/1 var(--pd-titel); box-shadow: 0 8px 16px -12px rgba(40, 50, 130, .5); transition: transform .3s var(--pd-feder); } .pd-seiten a.page-numbers:hover { transform: translateY(-3px) scale(1.05); border-color: #c9c4ff; } .pd-seiten .current { color: #fff; border-color: transparent; background: linear-gradient(180deg, #9b80ff, #6a4cf2); box-shadow: inset 0 -4px 0 #4b31cf, 0 10px 18px -10px #4b31cf; } .pd-seiten .dots { background: none; border: 0; box-shadow: none; min-width: 20px; } .pd-seiten .prev .pd-svg { transform: rotate(180deg); } .pd-seiten .pd-svg { font-size: 22px; color: #6a4cf2; } .pd-leer { max-width: 620px; margin: 10px auto 0; padding: 30px 30px 34px; text-align: center; border-radius: 32px; background: #fff; border: 2px solid var(--pd-rand); box-shadow: 0 20px 40px -30px rgba(40, 50, 130, .5); } .pd .pd-leer img { width: 130px; margin: -80px auto 6px; display: block; animation: pd-schweben 5s ease-in-out infinite; } .pd-leer-titel { font: 800 30px/1.15 var(--pd-titel); color: var(--pd-navy); margin-bottom: 6px !important; } .pd-ueber { position: relative; display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 28px; margin-top: 44px; padding: 26px 36px 26px 22px; border-radius: 32px; background: linear-gradient(100deg, #fff8dd 0%, #fff4e6 55%, #fdeaff 100%); border: 3px solid #ffe28c; box-shadow: 0 22px 40px -28px rgba(200, 140, 20, .55); } .pd .pd-ueber-pokal { width: 150px; justify-self: center; filter: drop-shadow(0 14px 14px rgba(160, 100, 0, .3)); animation: pd-schweben 5s ease-in-out infinite; } .pd-ueber-text { font-size: 15.5px; line-height: 1.72; color: #3b4477; columns: 2; column-gap: 40px; } .pd-ueber-text h2 { font: 800 28px/1.15 var(--pd-titel); color: var(--pd-navy); margin: 0 0 8px !important; } .pd-ueber-text p { margin: 0 0 12px; break-inside: avoid; } .pd-ueber-seite { grid-template-columns: 1fr; padding: 30px 36px; } /* Genre-Seite (5a): Pokal ragt oben heraus, Sterne und Konfetti rundherum, Kasten liegt auf der Welle des Fußes */ .pd-ueber-genre { z-index: 2; margin-top: 36px; padding: 18px 64px 20px 22px; background: linear-gradient(100deg, #fff6d8 0%, #fff4e8 55%, #fdeaff 100%); } .pd .pd-ueber-genre .pd-ueber-pokal { position: relative; z-index: 1; width: 168px; margin: -46px 0 -6px; } .pd-ueber-genre .pd-ueber-text { position: relative; z-index: 1; font-size: 15px; line-height: 1.6; } .pd-ueber-genre .pd-ueber-text h2 { font-size: 27px; } /* Ein einzelner Absatz darf über beide Spalten laufen, mehrere bleiben ganz (das erste

ist das Schild) */ .pd-ueber-genre .pd-ueber-text p:nth-of-type(2):last-of-type { break-inside: auto; orphans: 3; widows: 3; } .pd .pd-deko-ueber-1 { top: 10%; left: 13.5%; width: 24px; } .pd .pd-deko-ueber-2 { top: 64%; right: 1.8%; width: 30px; animation-delay: -1.2s; } .pd .pd-deko-ueber-3 { top: 18%; right: 3.6%; width: 20px; animation-delay: -2.2s; } .pd-konfetti-ueber i:nth-child(n+9) { display: none; } .pd-konfetti-ueber i:nth-child(1) { top: 22%; left: 2%; width: 13px; background: #ff5c9e; rotate: -40deg; } .pd-konfetti-ueber i:nth-child(2) { top: 52%; left: 1.2%; width: 13px; background: #2ec5ff; rotate: 30deg; } .pd-konfetti-ueber i:nth-child(3) { top: 78%; left: 3%; width: 13px; background: #ffc414; rotate: -20deg; } .pd-konfetti-ueber i:nth-child(4) { top: 30%; left: 14.5%; width: 13px; background: #ff7f17; rotate: 50deg; } .pd-konfetti-ueber i:nth-child(5) { top: 70%; left: 14%; width: 13px; background: #18c6a3; rotate: -50deg; } .pd-konfetti-ueber i:nth-child(6) { top: 12%; left: 96%; width: 13px; background: #ffa11c; rotate: 40deg; } .pd-konfetti-ueber i:nth-child(7) { top: 40%; left: 97%; width: 13px; background: #ff5c9e; rotate: -30deg; } .pd-konfetti-ueber i:nth-child(8) { top: 84%; left: 95%; width: 8px; height: 8px; border-radius: 50%; background: #2e9bff; } /* SEO-Bereich der Genre-Seite: Kopf „Über …“, darunter die Texte aus „Text oben“ und „Text unten“ als Artikel */ .pd-genre-wissen { z-index: 2; padding: 6px 0 46px; background: transparent; } .pd-genre-wissen .pd-ueber-genre { margin-top: 34px; } .pd .pd-ueber-kicker { display: inline-block; margin: 0 0 8px !important; padding: 5px 14px 4px; border-radius: 999px; background: var(--basis); color: #fff; font: 800 13px/1.2 var(--pd-titel); letter-spacing: .07em; text-transform: uppercase; box-shadow: inset 0 -3px 0 var(--dunkel), inset 0 2px 0 rgba(255, 255, 255, .35); } .pd-ueber-ohne-text .pd-ueber-text { columns: 1; } .pd-ueber-ohne-text .pd-ueber-text h2 { margin-bottom: 0 !important; } .pd-wissen-raster { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px; } .pd-wissen-einer { grid-template-columns: 1fr; } .pd-wissen-mehrere .pd-wissen-artikel:last-child:nth-child(odd) { grid-column: 1 / -1; } .pd-wissen-artikel { position: relative; display: flex; flex-direction: column; padding: 28px 32px 30px; border-radius: 28px; background: #fff; border: 2px solid #e4e8fb; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 3px 0 -1px #d5dbf6, 0 22px 40px -30px rgba(40, 50, 130, .5); } /* Kleiner Reiter in der Genre-Farbe oben am Artikel */ .pd-wissen-artikel::before { content: ''; position: absolute; left: 32px; top: -4px; width: 70px; height: 7px; border-radius: 6px; background: linear-gradient(90deg, var(--hell), var(--basis)); box-shadow: 0 2px 0 var(--dunkel); } .pd-wissen-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .pd-wissen-symbol { position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 56px; border-radius: 18px; background: radial-gradient(120% 75% at 50% -8%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 58%), var(--basis); box-shadow: inset 0 -3px 3px -1px var(--tiefe), inset 0 -7px 0 var(--dunkel), inset 7px 0 8px -6px var(--dunkel), inset -6px 0 7px -5px var(--dunkel), inset 0 6px 6px -4px rgba(255, 255, 255, .5), 0 10px 14px -8px var(--tiefe); transform: rotate(-6deg); } .pd .pd-wissen-symbol img { width: 36px; height: 36px; margin-top: -4px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .14)); } .pd-wissen-artikel h2 { font: 800 clamp(21px, 1.9vw, 25px)/1.22 var(--pd-titel); color: var(--pd-navy); } .pd-wissen-text { font-size: 16px; line-height: 1.78; color: #3b4477; overflow-wrap: anywhere; } .pd-wissen-text p { margin: 0 0 14px; } .pd-wissen-text p:last-child { margin-bottom: 0; } .pd-wissen-text a { color: #3d5bd8; text-decoration: underline; text-underline-offset: 3px; } .pd-wissen-text strong, .pd-wissen-text b { color: var(--pd-navy); } .pd-wissen-text ul, .pd-wissen-text ol { margin: 0 0 14px; padding-left: 22px; } .pd-wissen-einer .pd-wissen-text, .pd-wissen-mehrere .pd-wissen-artikel:last-child:nth-child(odd) .pd-wissen-text { columns: 2; column-gap: 44px; } .pd-wissen-text p { break-inside: auto; orphans: 3; widows: 3; } .pd .pd-wissen-szene { display: block; width: 200px; height: auto; margin: auto -10px -14px auto; padding-top: 14px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .14)); } .pd-inhalt:has(.pd-genre-wissen) + .pd-fuss { margin-top: 0; } /* ---------- Alle Genres (Mockup 5c) ---------- */ .pd-alle-held { padding-bottom: 84px; } .pd-alle-held-innen { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; min-height: 400px; } .pd-alle-kopftext { position: relative; z-index: 2; } .pd-alle-titel { margin: 22px 0 12px !important; font: 800 clamp(56px, 8.4vw, 118px)/.92 var(--pd-titel); letter-spacing: -.01em; white-space: nowrap; } .pd-alle-satz { font: 800 22px/1.35 var(--pd-schrift); color: var(--pd-navy); margin-bottom: 26px !important; max-width: 26ch; } .pd .pd-genre-suche { margin: 0; max-width: 460px; } .pd-stapel { position: relative; height: 400px; } .pd-stapel-klotz { position: absolute; display: grid; place-items: center; width: 150px; height: 140px; border-radius: 36px; background: linear-gradient(170deg, var(--hell) 0%, var(--basis) 60%); box-shadow: inset 0 -9px 0 var(--dunkel), inset 0 4px 0 rgba(255, 255, 255, .55), inset 0 20px 24px -12px rgba(255, 255, 255, .55), 0 24px 30px -18px var(--dunkel); animation: pd-schweben 6s ease-in-out infinite; } .pd-stapel-klotz::before { content: ''; position: absolute; top: 10px; left: 16px; width: 46%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%); } .pd .pd-stapel-klotz img { position: relative; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .15)); } .pd-stapel-1 { left: 22%; top: 2%; transform: rotate(-12deg); z-index: 3; } .pd-stapel-2 { left: 52%; top: 6%; transform: rotate(10deg); animation-delay: -1s; z-index: 2; } .pd-stapel-3 { left: 8%; top: 38%; transform: rotate(8deg); animation-delay: -2s; z-index: 4; } .pd-stapel-4 { left: 38%; top: 34%; transform: rotate(-6deg); animation-delay: -3s; z-index: 5; } .pd-stapel-5 { left: 68%; top: 38%; transform: rotate(14deg); animation-delay: -1.5s; z-index: 3; } .pd-stapel-6 { left: 24%; top: 66%; transform: rotate(-14deg); animation-delay: -2.5s; z-index: 6; } .pd-stapel-7 { left: 56%; top: 66%; transform: rotate(7deg); animation-delay: -4s; z-index: 6; } .pd .pd-deko-stapel-1 { top: 0; left: 86%; width: 50px; } .pd .pd-deko-stapel-2 { top: 88%; left: 4%; width: 38px; animation-delay: -1.8s; } .pd-alle-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .pd .pd-klotz-riesig { min-height: 176px; border-radius: 34px; } .pd .pd-klotz-riesig .pd-klotz-symbol { height: 92px !important; } .pd-klotz-riesig .pd-klotz-name { font-size: 30px; } .pd .pd-klotz-riesig .pd-klotz-zahl { font-size: 17px; } .pd-alle-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .pd .pd-klotz-mit-zahl { min-height: 150px; } .pd .pd-klotz-mit-zahl .pd-klotz-symbol { height: 66px !important; } .pd-klotz-mit-zahl .pd-klotz-name { font-size: 19px; } .pd-klotz[hidden] { display: none; } .pd-alle-nichts { margin-top: 16px !important; text-align: center; font-weight: 800; color: var(--pd-text-hell); } .pd-alle-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 30px; min-height: 200px; padding: 20px 40px; border-radius: 34px; overflow: hidden; background: linear-gradient(100deg, #fff8dd 0%, #fff4e6 50%, #fdeaff 100%); border: 3px solid #ffe28c; box-shadow: 0 22px 40px -28px rgba(200, 140, 20, .55); } .pd .pd-alle-banner-geschenk { width: 150px; filter: drop-shadow(0 14px 14px rgba(120, 60, 160, .3)); animation: pd-schweben 5s ease-in-out infinite; } .pd .pd-alle-banner-stern { width: 140px; animation: pd-schweben 5.5s ease-in-out infinite; animation-delay: -2s; } .pd-alle-banner-text { position: relative; z-index: 1; font: 800 clamp(40px, 5vw, 72px)/.95 var(--pd-titel); text-align: center; } .pd-alle-banner-text .pd-3d-orange { display: block; } .pd-alle-banner-bereich .pd-ueber-seite { margin-top: 30px; } .pd-konfetti-genre i:nth-child(n+7), .pd-konfetti-stapel i:nth-child(n+8) { display: none; } @media (max-width: 1180px) { .pd .pd-genre-raster-klein { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-alle-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-alle-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .pd-genre-held-innen, .pd-alle-held-innen { grid-template-columns: 1fr; } .pd-genre-kopftext { order: -1; padding-top: 12px; } .pd-genre-buehne { height: 260px; max-width: 520px; width: 100%; margin: 0 auto; } .pd-stapel { height: 320px; max-width: 520px; width: 100%; margin: 0 auto; } .pd-ueber { grid-template-columns: 1fr; text-align: left; } .pd .pd-ueber-pokal, .pd .pd-ueber-genre .pd-ueber-pokal { width: 110px; margin: -50px 0 0; } .pd-ueber-text { columns: 1; } .pd .pd-deko-ueber-1 { left: 30%; top: 4%; } .pd-ueber-genre { padding: 18px 22px 22px; } .pd-konfetti-ueber, .pd .pd-deko-ueber-2 { display: none; } .pd-wissen-raster { grid-template-columns: 1fr; } .pd-wissen-text, .pd-wissen-einer .pd-wissen-text, .pd-wissen-mehrere .pd-wissen-artikel:last-child:nth-child(odd) .pd-wissen-text { columns: 1; } } @media (max-width: 760px) { .pd-genre-titel { font-size: clamp(44px, 13vw, 64px); } .pd-wissen-artikel { padding: 24px 20px 24px; border-radius: 24px; } .pd-wissen-artikel::before { left: 20px; } .pd-wissen-kopf { gap: 12px; } .pd-wissen-symbol { width: 50px; height: 47px; border-radius: 15px; } .pd .pd-wissen-symbol img { width: 30px; height: 30px; } .pd-wissen-text { font-size: 15.5px; } .pd-genre-satz, .pd-alle-satz { font-size: 17px; } .pd-genre-riesenklotz { width: 160px; height: 146px; border-radius: 38px; left: 8%; } .pd .pd-genre-riesenklotz img { width: 92px; height: 92px; } .pd .pd-genre-szene { width: 190px; } .pd .pd-genre-raster-klein { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pd .pd-genre-raster-klein > .pd-klotz { min-height: 96px; } .pd .pd-klotz-klein .pd-klotz-symbol { height: 42px !important; } .pd-klotz-klein .pd-klotz-name { font-size: 15px; } .pd-sortierung { gap: 8px; } .pd-sortier-chip { padding: 8px 14px; font-size: 14px; } .pd-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pd-seiten .page-numbers { min-width: 44px; height: 44px; font-size: 18px; } .pd-alle-titel { font-size: clamp(54px, 15vw, 76px); } .pd-stapel { height: 260px; } .pd-stapel-klotz { width: 104px; height: 98px; border-radius: 26px; } .pd .pd-stapel-klotz img { width: 58px; height: 58px; } .pd-alle-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pd .pd-klotz-mit-zahl { min-height: 112px; } .pd .pd-klotz-mit-zahl .pd-klotz-symbol { height: 46px !important; } .pd-klotz-mit-zahl .pd-klotz-name { font-size: 15px; } .pd-klotz-mit-zahl .pd-klotz-zahl { font-size: 12px; } .pd .pd-klotz-riesig { min-height: 140px; } .pd .pd-klotz-riesig .pd-klotz-symbol { height: 64px !important; } .pd-klotz-riesig .pd-klotz-name { font-size: 22px; } .pd-alle-banner { flex-direction: column; gap: 10px; padding: 24px 18px; } .pd .pd-alle-banner-geschenk, .pd .pd-alle-banner-stern { width: 90px; } } /* ---------- Spielseite (Mockup 5b) ---------- */ .pd-knopf-pink { --hell: #ff8cc8; --basis: #ff4f9e; --dunkel: #d92a7e; } .pd-knopf-blau { --hell: #6cc2ff; --basis: #2e9bff; --dunkel: #1675df; } .pd-knopf-gruen { --hell: #5ae6ad; --basis: #1fca8b; --dunkel: #0ea46c; } .pd-spiel { position: relative; z-index: 1; padding-top: 4px; padding-bottom: 26px; } .pd-spiel > .pd-krumen { margin-bottom: 16px; } .pd-spiel-raster { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 26px; align-items: start; } /* Rahmen: dicker, glänzender Rand von Hellblau nach Violett */ .pd-spiel-rahmen { position: relative; padding: 11px; border-radius: 34px; max-width: calc(78vh * var(--pd-verh, 1.6) + 22px); margin-inline: auto; background: linear-gradient(140deg, #7ad6ff 0%, #59b6ff 32%, #8f8cff 66%, #c29bff 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .7), inset 0 -5px 0 rgba(90, 70, 210, .35), 0 0 0 2px rgba(255, 255, 255, .75), 0 0 34px -4px rgba(120, 160, 255, .55), 0 26px 44px -24px rgba(70, 60, 200, .6); } .pd-spiel-flaeche { position: relative; width: 100%; border-radius: 24px; overflow: hidden; background: #1d2048; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); } /* Startbild: Spielbild, darauf der orange Knopf mit Schild, Sternen und Konfetti */ .pd-spiel-start { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: #2b2f5a; overflow: hidden; isolation: isolate; } .pd-spiel-start::before { content: ''; position: absolute; inset: -30px; z-index: -2; background: var(--pd-bild) center / cover; filter: blur(7px) saturate(1.25); transform: scale(1.06); } .pd-spiel-start-scharf::before { inset: 0; filter: saturate(1.08); transform: none; } .pd-spiel-start::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 42%, rgba(25, 20, 70, .3) 100%); } .pd-spiel-start-mitte { position: relative; display: flex; flex-direction: column; align-items: center; width: min(46%, 400px); } .pd .pd-spiel-start-knopf { position: relative; z-index: 1; width: 66%; height: auto; filter: drop-shadow(0 0 20px rgba(255, 200, 90, .55)) drop-shadow(0 18px 20px rgba(0, 0, 0, .3)); animation: pd-pulsieren 2.4s ease-in-out infinite; transition: transform .5s var(--pd-feder); } .pd-spiel-start:hover .pd-spiel-start-knopf { transform: scale(1.07) rotate(-3deg); } .pd-spiel-start-text { position: relative; z-index: 2; margin-top: -15%; padding: .24em .9em .32em; border-radius: 999px; font: 800 clamp(24px, 3vw, 46px)/1 var(--pd-titel); color: #fff; white-space: nowrap; text-shadow: 0 3px 0 #d94e00, 0 5px 10px rgba(150, 40, 0, .35); background: linear-gradient(180deg, #ffbd45 0%, #ff8a1a 55%, #ff6a0a 100%); box-shadow: inset 0 -6px 0 #e05200, inset 0 4px 0 rgba(255, 255, 255, .5), 0 0 0 5px #fff, 0 0 0 8px rgba(255, 170, 80, .45), 0 18px 28px -12px rgba(0, 0, 0, .45); transition: transform .4s var(--pd-feder); } .pd-spiel-start:hover .pd-spiel-start-text { transform: translateY(-3px) scale(1.04); } .pd .pd-spiel-start-stern { position: absolute; z-index: 3; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); animation: pd-funkeln 3.2s ease-in-out infinite; } .pd .pd-spiel-start-stern-1 { width: 15%; left: 0; top: 24%; } .pd .pd-spiel-start-stern-2 { width: 13%; right: 1%; top: 30%; animation-delay: -1.1s; } .pd .pd-spiel-start-stern-3 { width: 10%; left: 57%; top: -10%; animation-delay: -2s; } @keyframes pd-pulsieren { 50% { transform: scale(1.04); } } .pd-konfetti-start { inset: -16% -12%; z-index: 2; } .pd-konfetti-start i:nth-child(n+6) { display: none; } .pd-konfetti-start i:nth-child(1) { top: 8%; left: 26%; background: #18c6a3; rotate: 50deg; } .pd-konfetti-start i:nth-child(2) { top: 2%; left: 50%; background: #2ec5ff; rotate: -70deg; } .pd-konfetti-start i:nth-child(3) { top: 16%; left: 74%; background: #ff5c9e; rotate: -30deg; } .pd-konfetti-start i:nth-child(4) { top: 58%; left: 6%; background: #ff5c9e; rotate: 20deg; } .pd-konfetti-start i:nth-child(5) { top: 64%; left: 90%; background: #2ec5ff; rotate: -20deg; } .pd-spiel-laeuft iframe, .pd-spiel-laeuft embed, .pd-spiel-laeuft object, .pd-spiel-laeuft ruffle-player, .pd-spiel-laeuft ruffle-embed, .pd-spiel-laeuft ruffle-object, .pd-spiel-laeuft > div { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border: 0; } .pd-spiel-laeuft { background: #000; } .pd-spiel-rahmen:fullscreen { padding: 0; border-radius: 0; background: #000; display: grid; place-items: center; } .pd-spiel-rahmen:fullscreen .pd-spiel-flaeche { max-height: none; height: 100%; width: 100%; aspect-ratio: auto !important; border-radius: 0; } .pd-spiel-rahmen.pd-fast-vollbild { position: fixed; inset: 0; z-index: 999; padding: 0; border-radius: 0; background: #000; } .pd-spiel-rahmen.pd-fast-vollbild .pd-spiel-flaeche { height: 100%; max-height: none; aspect-ratio: auto !important; border-radius: 0; } /* Eingestelltes Spiel */ .pd .pd-spiel-tot { aspect-ratio: auto !important; max-height: none; background: linear-gradient(160deg, #6c5bf3 0%, #9b5cff 55%, #ff6fb5 120%); } .pd-spiel-tot .playchild-gone { padding: 46px 26px 50px; text-align: center; color: #fff; } .pd-spiel-tot .playchild-gone p { margin: 0 0 6px; font-size: 17px; } .pd-spiel-tot .playchild-gone-title { font: 800 clamp(24px, 2.6vw, 34px)/1.15 var(--pd-titel) !important; text-shadow: 0 3px 0 rgba(60, 30, 140, .5); } .pd-spiel-tot .playchild-gone-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 26px 0 0; padding: 0; list-style: none; } .pd-spiel-tot .playchild-gone-list a { display: block; width: 136px; color: #fff; transition: transform .4s var(--pd-feder); } .pd .pd-spiel-tot .playchild-gone-list img { display: block; width: 136px; height: 136px; object-fit: cover; border-radius: 24px; border: 5px solid #fff; box-shadow: 0 16px 24px -14px rgba(0, 0, 0, .5); margin-bottom: 8px; } .pd-spiel-tot .playchild-gone-list span { display: block; font: 800 15px/1.25 var(--pd-titel); } .pd-spiel-tot .playchild-gone-list a:hover { transform: translateY(-6px) rotate(-2deg); } /* Knopfleiste unter dem Spiel */ .pd-spiel-leiste { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 20px 0 8px; } .pd-spiel-leiste .pd-knopf { z-index: 1; padding: 15px 16px; font-size: 20px; } .pd-spiel-leiste .pd-knopf[disabled] { opacity: .5; cursor: not-allowed; } .pd-konfetti-leiste { inset: 0 auto 0 -30px; width: 30px; } .pd-konfetti-leiste i:nth-child(n+4) { display: none; } .pd-konfetti-leiste i:nth-child(1) { top: 8%; left: 30%; width: 12px; background: #18c6a3; rotate: 40deg; } .pd-konfetti-leiste i:nth-child(2) { top: 62%; left: 0; background: #ff5c9e; rotate: -24deg; } .pd-konfetti-leiste i:nth-child(3) { top: 112%; left: 40%; background: #ffc414; rotate: 30deg; } [data-pd-favorit] [data-an] { display: none; } [data-pd-favorit][aria-pressed="true"] [data-an] { display: inline; } [data-pd-favorit][aria-pressed="true"] [data-aus] { display: none; } .pd .pd-knopf-pink[aria-pressed="true"] { --hell: #ffd24a; --basis: #ffae17; --dunkel: #e08600; } .pd-pop { animation: pd-pop .5s var(--pd-feder); } @keyframes pd-pop { 40% { transform: scale(1.14) rotate(-3deg); } } /* Titel in 3D-Schrift mit weißem Rand, Sterne und Konfetti */ .pd-spiel-kopf { margin-top: 22px; } .pd-spiel-titelzeile { position: relative; display: inline-block; max-width: 100%; padding: 0 64px 0 8px; margin-left: -8px; } .pd-spiel-titel { position: relative; z-index: 1; font: 800 clamp(46px, 5.8vw, 82px)/1.04 var(--pd-titel); letter-spacing: -.005em; overflow-wrap: anywhere; } .pd .pd-3d-rand { filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 3px 0 var(--d)) drop-shadow(0 2px 0 var(--d)) drop-shadow(0 12px 14px rgba(40, 60, 160, .3)); } .pd .pd-deko-titel-1 { right: 12px; top: 0; width: 40px; } .pd .pd-deko-titel-2 { right: -14px; top: 66%; width: 28px; animation-delay: -1.6s; } .pd-konfetti-titel i:nth-child(n+7) { display: none; } .pd-konfetti-titel i:nth-child(1) { top: 8%; left: -2%; background: #ff5c9e; rotate: 40deg; } .pd-konfetti-titel i:nth-child(2) { top: 62%; left: -4%; background: #ffc414; rotate: -20deg; width: 12px; } .pd-konfetti-titel i:nth-child(3) { top: 30%; left: 100%; background: #2ec5ff; rotate: -40deg; } .pd-konfetti-titel i:nth-child(4) { top: 78%; left: 94%; background: #ffc414; rotate: 36deg; } .pd-konfetti-titel i:nth-child(5) { top: 2%; left: 128%; background: #ff5c9e; rotate: -36deg; } .pd-konfetti-titel i:nth-child(6) { top: 56%; left: 131%; background: #2e7bff; width: 8px; height: 8px; border-radius: 50%; } .pd-spiel-genres { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px !important; } .pd .pd-pille-gross { padding: 6px 22px; font: 800 17px/1.3 var(--pd-titel); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .07), inset 0 2px 0 rgba(255, 255, 255, .7), 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 14px -8px rgba(60, 60, 160, .4); transition: transform .3s var(--pd-feder); } .pd-pille-gross:hover { transform: translateY(-2px); } /* Bewerten: große glänzende 3D-Sterne statt der flachen Masken des Plugins */ .pd-spiel-werte { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .pd-bewerten { display: flex; align-items: center; gap: 16px; } .pd-bewerten-text { font: 800 20px/1 var(--pd-titel); color: var(--pd-navy); } .pd-bewerten .wp-postratings { --wp-postratings-size: 46px; --wp-postratings-gap: 10px; } /* Englischen Plugin-Text („votes, average …“) ausblenden, Sterne bleiben */ .pd-bewerten .wp-postratings { font-size: 0; line-height: 0; } .pd-bewerten .wp-postratings em { display: none; } .pd .pd-bewerten .wp-postratings-item { position: relative; background: none; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 6px 6px rgba(150, 90, 0, .22)); transition: transform .3s var(--pd-feder); } .pd-bewerten .wp-postratings-item::before, .pd-bewerten .wp-postratings-item::after { content: ''; position: absolute; inset: 0; background: url('bilder/deko-stern.webp') center / contain no-repeat; } .pd-bewerten .wp-postratings-item::before { filter: grayscale(1) brightness(1.22) contrast(.72); } /* Abstimmen: jeder Stern zeigt seinen Anteil der Wertung, beim Zeigen leuchten er und alle davor */ .pd-bewerten .wp-postratings-scale label .wp-postratings-item::after { clip-path: inset(0 calc(100% - var(--wp-postratings-step-fill, 0%)) 0 0); } .pd-bewerten .wp-postratings-scale:hover label .wp-postratings-item::after, .pd-bewerten .wp-postratings-scale:focus-within label .wp-postratings-item::after, .pd-bewerten .wp-postratings-scale:has(input:checked) label .wp-postratings-item::after { clip-path: inset(0 100% 0 0); } .pd .pd-bewerten .wp-postratings-scale label:hover .wp-postratings-item::after, .pd .pd-bewerten .wp-postratings-scale label:hover ~ label .wp-postratings-item::after, .pd .pd-bewerten .wp-postratings-scale input:focus-visible + label .wp-postratings-item::after, .pd .pd-bewerten .wp-postratings-scale input:focus-visible + label ~ label .wp-postratings-item::after, .pd .pd-bewerten .wp-postratings-scale input:checked + label .wp-postratings-item::after, .pd .pd-bewerten .wp-postratings-scale input:checked + label ~ label .wp-postratings-item::after { clip-path: inset(0); } .pd-bewerten label:hover .wp-postratings-item { transform: translateY(-3px) scale(1.12); } /* Nur Anzeige (schon abgestimmt): graue Spur, goldene Füllung */ .pd-bewerten .wp-postratings-track .wp-postratings-item::after { display: none; } .pd-bewerten .wp-postratings-fill .wp-postratings-item::before { display: none; } .pd-gespielt { display: inline-flex; align-items: center; gap: 12px; padding-left: 28px; border-left: 2px solid #dfe3f1; font: 700 18px/1 var(--pd-schrift); color: var(--pd-navy); } .pd .pd-gespielt .pd-svg { font-size: 36px; fill: #b3a6ff; color: #5b47e0; } /* Textkarten */ .pd-spiel-texte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 24px; margin-top: 28px; align-items: start; } .pd-textkarte { position: relative; display: flex; flex-direction: column; padding: 22px 26px 24px; border-radius: 26px; background: linear-gradient(160deg, #fff 0%, #f8f6ff 100%); border: 2px solid #ddd6f6; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 18px 34px -26px rgba(60, 50, 160, .5); } .pd-textkarte h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px !important; font: 800 32px/1.1 var(--pd-titel); color: var(--pd-navy); } .pd .pd-textkarte h2 img { width: 44px; height: auto; filter: drop-shadow(0 4px 4px rgba(160, 100, 0, .25)); } .pd .pd-textkarte h2 .pd-textkarte-birne { width: 40px; filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.05) drop-shadow(0 4px 4px rgba(160, 100, 0, .25)); } .pd-textkarte-inhalt { font-size: 16.5px; line-height: 1.72; color: #3b4477; } .pd-textkarte-inhalt p { margin: 0 0 10px; } .pd-textkarte-inhalt p:last-child { margin-bottom: 0; } .pd .pd-textkarte-szene { display: block; width: 52%; max-width: 230px; height: auto; margin: auto -16px -16px auto; padding-top: 10px; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .14)); } /* Nur eine Textkarte (keine Anleitung hinterlegt): volle Breite, Szene rechts neben dem Text */ .pd-spiel-texte-eins { grid-template-columns: 1fr; } .pd-spiel-texte-eins .pd-textkarte-darum { display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: auto 1fr; column-gap: 26px; } .pd-spiel-texte-eins .pd-textkarte-darum h2, .pd-spiel-texte-eins .pd-textkarte-inhalt { grid-column: 1; } .pd .pd-spiel-texte-eins .pd-textkarte-szene { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 100%; max-width: none; margin: 0 -10px -12px 0; } .pd-tasten-eins { grid-template-columns: 1fr; } /* „So geht’s“ als Karte mit Reiter oben links, Steuerung im 2×2-Raster */ .pd-textkarte-so { padding: 0; background: none; border: 0; box-shadow: none; } .pd-textkarte-so::before { content: ''; position: absolute; inset: 56px 0 0; z-index: 0; border: 2px solid #c4e1fb; border-radius: 0 26px 26px 26px; background: linear-gradient(170deg, #fbfdff 0%, #f2f8ff 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 18px 34px -26px rgba(40, 90, 180, .5); } .pd-textkarte-so > * { position: relative; z-index: 1; } .pd-textkarte-so > .pd-konfetti, .pd-textkarte-so > .pd-deko { position: absolute; } .pd-textkarte-so h2 { align-self: flex-start; height: 58px; margin: 0 !important; padding: 8px 30px 0 16px; border: 2px solid #c4e1fb; border-bottom: 0; border-radius: 24px 24px 0 0; background: #fbfdff; } .pd-textkarte-so h2::after { content: ''; position: absolute; right: -26px; bottom: 0; width: 26px; height: 26px; background: radial-gradient(circle at 100% 0, rgba(251, 253, 255, 0) 23.5px, #c4e1fb 24px, #c4e1fb 25.5px, #fbfdff 26px); } .pd-tasten { flex: 1 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-content: center; margin: 6px 20px 4px; padding: 0; list-style: none; } .pd-taste-feld { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 148px; padding: 14px 10px; text-align: center; } .pd-taste-feld:nth-child(odd):not(:last-child) { border-right: 2px solid #e2edfb; } .pd-tasten-viele .pd-taste-feld:nth-child(-n+2) { border-bottom: 2px solid #e2edfb; } .pd-taste-bild { display: grid; place-items: center; width: 100%; min-height: 92px; margin-bottom: 6px; } .pd-taste-feld b { font: 800 18px/1.15 var(--pd-titel); color: var(--pd-navy); } .pd-taste-feld > span:last-child { font: 600 16px/1.3 var(--pd-schrift); color: var(--pd-text); } .pd-taste-feld-leertaste b { display: none; } .pd .pd-taste-bild img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .15)); } .pd-pfeiltasten { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: 42px 42px; gap: 6px; } .pd-pfeiltasten .pd-taste-hoch { grid-column: 2; grid-row: 1; } .pd-pfeiltasten .pd-taste:not(.pd-taste-hoch) { grid-row: 2; } .pd-taste { display: grid; place-items: center; min-width: 44px; height: 42px; padding: 0 8px; border-radius: 11px; font: 800 17px/1 var(--pd-titel); font-style: normal; color: #fff; background: linear-gradient(180deg, #6ccaff 0%, #2b98ff 60%, #1f86f0 100%); box-shadow: inset 0 -5px 0 #136ad6, inset 0 2px 0 rgba(255, 255, 255, .55), 0 0 0 2px rgba(255, 255, 255, .7), 0 8px 12px -6px rgba(20, 80, 200, .6); } .pd-taste-leer { width: min(230px, 100%); height: 56px; border-radius: 14px; font-size: 20px; background: linear-gradient(180deg, #b49dff 0%, #8c6bff 55%, #7752f5 100%); box-shadow: inset 0 -6px 0 #5a37d8, inset 0 3px 0 rgba(255, 255, 255, .5), 0 0 0 2px rgba(255, 255, 255, .7), 0 10px 16px -8px rgba(80, 40, 200, .6); } .pd-textkarte-so .pd-textkarte-inhalt { padding: 6px 28px 24px; font-size: 14.5px; line-height: 1.6; color: #4a5384; } .pd .pd-deko-so-1 { top: 18px; right: 20%; width: 26px; } .pd .pd-deko-so-2 { top: 4px; right: 6%; width: 32px; animation-delay: -1.5s; } .pd-konfetti-so i:nth-child(n+7) { display: none; } .pd-konfetti-so i:nth-child(1) { top: 34%; left: 2%; background: #18c6a3; rotate: -30deg; width: 14px; } .pd-konfetti-so i:nth-child(2) { top: 46%; left: 1.4%; background: #2e9bff; width: 8px; height: 8px; border-radius: 50%; } .pd-konfetti-so i:nth-child(3) { top: 66%; left: 2%; background: #9b5cff; rotate: 30deg; width: 14px; } .pd-konfetti-so i:nth-child(4) { top: 8%; left: 60%; background: #ffc414; rotate: -50deg; } .pd-konfetti-so i:nth-child(5) { top: 44%; left: 97.4%; background: #2e9bff; width: 8px; height: 8px; border-radius: 50%; } .pd-konfetti-so i:nth-child(6) { top: 64%; left: 96%; background: #ff5c9e; rotate: -40deg; } /* Seitenleiste: eine gemeinsame helle Fläche, darin weiße Spielkarten und die Karte „Spiel des Tages“ */ .pd-spiel-seite { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 16px 14px 14px; border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .46)); border: 2px solid rgba(255, 255, 255, .95); box-shadow: inset 0 0 0 1px rgba(196, 214, 248, .6), 0 24px 44px -30px rgba(40, 50, 130, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .pd-seitenkarte-titel { display: flex; align-items: center; gap: 10px; margin: 0 6px 14px !important; font: 800 33px/1.1 var(--pd-titel); color: var(--pd-navy); } .pd-seitenkarte-titel-deko { position: relative; padding-left: 18px; } .pd-seitenkarte-titel-deko::before { content: ''; position: absolute; left: 0; bottom: 3px; width: 14px; height: 7px; border-radius: 6px; background: #ffc414; rotate: 42deg; } .pd-seitenkarte-titel-deko::after { content: ''; position: absolute; right: 30px; top: -6px; width: 16px; height: 7px; border-radius: 6px; background: #18c6a3; rotate: -38deg; } .pd .pd-seitenkarte-titel-deko img { width: 34px; height: auto; margin: 14px 0 0 auto; animation: pd-funkeln 3.2s ease-in-out infinite; } .pd-seitenliste { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .pd-seitenliste a { display: flex; align-items: center; gap: 16px; padding: 6px 10px 6px 6px; border-radius: 18px; background: #fff; border: 2px solid #e3edfb; box-shadow: 0 8px 16px -12px rgba(40, 80, 180, .4); transition: transform .35s var(--pd-feder), border-color .3s, box-shadow .3s; } .pd-seitenliste a:hover { transform: translateX(4px); border-color: #bcdcfa; box-shadow: 0 12px 20px -12px rgba(60, 120, 220, .5); } .pd-seitenliste-bild { position: relative; flex: none; width: 124px; height: 100px; border-radius: 14px; overflow: hidden; background: #eef0fb; } .pd .pd-seitenliste-bild img { width: 100%; height: 100%; object-fit: cover; } .pd-seitenliste-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .pd-seitenliste-text strong { font: 800 20px/1.15 var(--pd-titel); color: var(--pd-navy); overflow-wrap: anywhere; } .pd-seitenliste .pd-sterne { width: 112px; height: 21px; } .pd-seitenliste .pd-sterne-leer, .pd-seitenliste .pd-sterne-voll { background-size: 22.4px 21px; } .pd-seitenkarte-tag { position: relative; padding: 16px 18px 18px; border-radius: 26px; background: linear-gradient(170deg, #fff9df 0%, #fff2cc 100%); border: 3px solid #ffe398; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 14px 26px -18px rgba(200, 140, 20, .55); } .pd-seitenkarte-tag .pd-seitenkarte-titel { position: relative; z-index: 1; font-size: 31px; margin: 0 0 12px !important; } .pd .pd-seitenkarte-tag .pd-seitenkarte-titel img { width: 48px; height: auto; margin-top: -10px; } .pd-seitenkarte-tagspiel { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; } .pd-seitenkarte-tagbild { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: 18px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 10px 20px -12px rgba(60, 40, 120, .5); } .pd .pd-seitenkarte-tagbild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .pd-seitenkarte-tagspiel:hover .pd-seitenkarte-tagbild img { transform: scale(1.06); } .pd-seitenkarte-tagspiel strong { font: 800 21px/1.15 var(--pd-titel); color: var(--pd-navy); margin-top: 6px; } .pd-seitenkarte-tag .pd-sterne { width: 112px; height: 21px; } .pd-seitenkarte-tag .pd-sterne-leer, .pd-seitenkarte-tag .pd-sterne-voll { background-size: 22.4px 21px; } .pd-konfetti-tagkarte i:nth-child(n+6) { display: none; } .pd-konfetti-tagkarte i:nth-child(1) { top: 8%; left: 97%; background: #ffc414; rotate: -40deg; width: 12px; } .pd-konfetti-tagkarte i:nth-child(2) { top: 28%; left: 96%; background: #ff5c9e; rotate: 30deg; width: 12px; } .pd-konfetti-tagkarte i:nth-child(3) { top: 40%; left: 97%; background: #2e9bff; rotate: -50deg; width: 12px; } .pd-konfetti-tagkarte i:nth-child(4) { top: 56%; left: 96%; background: #ffc414; rotate: 20deg; width: 12px; } .pd-konfetti-tagkarte i:nth-child(5) { top: 66%; left: 97%; background: #18c6a3; rotate: -30deg; width: 12px; } /* „Mehr …-Spiele“: cremefarbenes Band, runde Pfeile links und rechts mittig neben der Reihe */ .pd-mehr-spiele { padding-top: 22px; } .pd-mehr-band { position: relative; padding: 18px 64px 26px; border-radius: 32px; background: linear-gradient(180deg, #fffaf0 0%, #fff5dc 100%); border: 3px solid #ffe7a3; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 22px 40px -28px rgba(200, 140, 20, .55); } .pd-mehr-titel { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 0 0 14px -26px !important; font: 800 clamp(28px, 3vw, 38px)/1.1 var(--pd-titel); color: var(--pd-navy); } .pd .pd-mehr-titel img { width: 46px; height: auto; filter: drop-shadow(0 4px 4px rgba(160, 100, 0, .25)); } .pd-reihe-pfeil { position: absolute; z-index: 2; top: calc(50% + 24px); transform: translateY(-50%); display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 26px; background: radial-gradient(circle at 38% 30%, #b49dff 0%, #8a63f7 55%, #6c45e6 100%); box-shadow: inset 0 -4px 0 #5230c9, inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 3px #fff, 0 10px 16px -8px rgba(80, 40, 200, .6); transition: transform .3s var(--pd-feder); } .pd-reihe-pfeil .pd-svg { stroke-width: 3.2; } .pd-reihe-pfeil-links { left: 7px; } .pd-reihe-pfeil-links .pd-svg { margin-left: -2px; } .pd-reihe-pfeil-rechts { right: 7px; } .pd-reihe-pfeil-rechts .pd-svg { margin-right: -2px; } .pd-reihe-pfeil:hover { transform: translateY(-50%) scale(1.1); } .pd-reihe-pfeil:active { transform: translateY(-50%) scale(.95); } .pd .pd-reihe-scroll { position: relative; z-index: 1; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 18px) / 5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 6px 12px; margin: -6px -6px -12px; } .pd-reihe-scroll::-webkit-scrollbar { display: none; } .pd-reihe-scroll .pd-karte { scroll-snap-align: start; } .pd-konfetti-mehr i:nth-child(n+8) { display: none; } .pd-konfetti-mehr i:nth-child(1) { top: 10%; left: 1.6%; background: #18c6a3; rotate: -40deg; width: 13px; } .pd-konfetti-mehr i:nth-child(2) { top: 22%; left: 2.8%; background: #ff5c9e; rotate: 60deg; width: 13px; } .pd-konfetti-mehr i:nth-child(3) { top: 88%; left: 1.8%; background: #ffa11c; rotate: 30deg; width: 13px; } .pd-konfetti-mehr i:nth-child(4) { top: 7%; left: 38%; background: #18c6a3; rotate: -40deg; } .pd-konfetti-mehr i:nth-child(5) { top: 11%; left: 40.5%; background: #ff5c9e; rotate: 30deg; } .pd-konfetti-mehr i:nth-child(6) { top: 22%; left: 97.6%; background: #9b5cff; rotate: -50deg; width: 13px; } .pd-konfetti-mehr i:nth-child(7) { top: 86%; left: 97.8%; background: #ffa11c; rotate: 40deg; width: 13px; } /* ---------- Normale Seiten (Impressum, Datenschutz) ---------- */ .pd-seite-inhalt { position: relative; z-index: 1; padding-bottom: 30px; } .pd-papier { position: relative; max-width: 980px; margin: 22px auto 0; padding: 46px 56px 50px; border-radius: 38px; background: rgba(255, 255, 255, .96); border: 2px solid #eef0fb; box-shadow: 0 30px 56px -34px rgba(40, 50, 130, .5); } .pd .pd-papier-deko { position: absolute; top: -46px; right: 34px; width: 110px; animation: pd-schweben 6s ease-in-out infinite; } .pd-papier-titel { margin: 0 120px 22px 0 !important; font: 800 clamp(40px, 5vw, 64px)/1 var(--pd-titel); } .pd-text { font-size: 16.5px; line-height: 1.78; color: #3b4477; overflow-wrap: anywhere; } .pd-text h2, .pd-text h3, .pd-text h4 { margin: 30px 0 10px; font-family: var(--pd-titel); font-weight: 800; color: var(--pd-navy); line-height: 1.2; } .pd-text h2 { font-size: 28px; } .pd-text h3 { font-size: 22px; } .pd-text p, .pd-text ul, .pd-text ol { margin: 0 0 14px; } .pd-text ul, .pd-text ol { padding-left: 24px; } .pd-text a { color: #3d5bd8; text-decoration: underline; text-underline-offset: 3px; } .pd-text strong { color: var(--pd-navy); } /* ---------- Suche ---------- */ .pd-suche-seite { position: relative; z-index: 1; padding-bottom: 30px; } .pd-suche-kopf { display: flex; align-items: center; gap: 22px; margin: 22px 0 28px; } .pd .pd-suche-lupe { width: 92px; filter: drop-shadow(0 10px 10px rgba(60, 40, 160, .25)) hue-rotate(200deg) saturate(3); animation: pd-schweben 5s ease-in-out infinite; } .pd-suche-titel { font: 800 clamp(36px, 4.2vw, 58px)/1.05 var(--pd-titel); } .pd-suche-anzahl { margin-top: 6px !important; font: 800 18px/1.3 var(--pd-schrift); color: var(--pd-navy); } .pd-suche-andere { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; } .pd-suche-andere a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 2px solid var(--pd-rand); font-weight: 800; color: var(--pd-navy); } .pd-suche-genres { margin-top: 34px; } /* ---------- 404 ---------- */ .pd-fehler { position: relative; z-index: 1; padding: 20px 32px 30px; text-align: center; } .pd-fehler-buehne { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; } .pd-fehler-ziffer { font: 800 clamp(120px, 19vw, 250px)/.9 var(--pd-titel); } .pd .pd-fehler-stern { width: clamp(120px, 15vw, 200px); animation: pd-wackeln 2.4s ease-in-out infinite; } .pd-fehler-titel { margin: 10px 0 8px !important; font: 800 clamp(30px, 3.6vw, 46px)/1.1 var(--pd-titel); color: var(--pd-navy); } .pd-fehler-text { font: 700 18px/1.5 var(--pd-schrift); color: var(--pd-text); max-width: 40ch; margin: 0 auto 22px !important; } .pd-fehler-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 40px !important; } .pd-fehler .pd-genre-raster { text-align: left; } /* Kurze Meldung (z. B. „Link kopiert“) */ .pd-meldung { position: fixed; left: 50%; bottom: 28px; z-index: 1000; transform: translateX(-50%); padding: 12px 24px; border-radius: 999px; background: var(--pd-navy); color: #fff; font: 800 16px/1.2 var(--pd-schrift); box-shadow: 0 16px 30px -12px rgba(20, 20, 60, .6); animation: pd-auf .3s var(--pd-feder); transition: opacity .5s; } .pd-meldung-weg { opacity: 0; } @media (max-width: 1180px) { .pd-spiel-raster { grid-template-columns: 1fr; } .pd-spiel-seite { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .pd .pd-reihe-scroll { grid-auto-columns: calc((100% - 2 * 18px) / 3); } } @media (max-width: 900px) { .pd-spiel-texte { grid-template-columns: 1fr; } .pd-spiel-seite { grid-template-columns: 1fr; } .pd-spiel-leiste { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .pd-krumen-haus ol { padding: 7px 16px 7px 12px; font-size: 15px; } .pd-krumen-haus .pd-svg-haus { width: 20px; height: 20px; margin-right: 8px; } .pd-spiel-rahmen { padding: 6px; border-radius: 26px; } .pd-spiel-flaeche { border-radius: 20px; } .pd-spiel-start-mitte { width: 70%; } .pd-spiel-start-text { font-size: 22px; } .pd-spiel-leiste { gap: 10px; } .pd-spiel-leiste .pd-knopf { padding: 11px 12px; font-size: 16px; } .pd-konfetti-leiste { display: none; } .pd-spiel-titelzeile { padding-right: 44px; } .pd-spiel-titel { font-size: clamp(34px, 10vw, 46px); } .pd .pd-deko-titel-1 { width: 30px; right: 6px; } .pd .pd-deko-titel-2, .pd-konfetti-titel i:nth-child(n+5) { display: none; } .pd-gespielt { padding-left: 0; border-left: 0; } .pd-bewerten { flex-wrap: wrap; gap: 8px; } .pd-bewerten .wp-postratings { --wp-postratings-size: 38px; --wp-postratings-gap: 6px; } .pd-textkarte { padding: 20px 18px; } .pd-textkarte h2 { font-size: 27px; } .pd-spiel-texte-eins .pd-textkarte-darum { display: flex; } .pd .pd-spiel-texte-eins .pd-textkarte-szene { width: 52%; max-width: 230px; margin: auto -10px -12px auto; } .pd-textkarte-so { padding: 0; } .pd-textkarte-so h2 { height: 54px; padding-right: 22px; } .pd-textkarte-so::before { top: 52px; } .pd-tasten { margin: 4px 8px 0; } .pd-taste-feld { min-height: 128px; padding: 10px 6px; } .pd-taste-feld b { font-size: 16px; } .pd-taste-feld > span:last-child { font-size: 14px; } .pd .pd-taste-bild img { width: 60px; height: 60px; } .pd-taste-leer { height: 50px; font-size: 17px; } .pd-textkarte-so .pd-textkarte-inhalt { padding: 4px 18px 20px; } .pd-seitenkarte-titel, .pd-seitenkarte-tag .pd-seitenkarte-titel { font-size: 27px; } .pd-seitenliste-bild { width: 108px; height: 86px; } .pd-seitenliste-text strong { font-size: 18px; } .pd-mehr-band { padding: 16px 12px 20px; border-radius: 28px; } .pd-mehr-titel { margin-left: 0 !important; } .pd .pd-reihe-scroll { grid-auto-columns: 44%; } .pd-reihe-pfeil, .pd-konfetti-mehr { display: none; } .pd-papier { padding: 40px 20px 30px; border-radius: 30px; } .pd .pd-papier-deko { width: 76px; top: -34px; right: 16px; } .pd-papier-titel { margin-right: 70px !important; } .pd-suche-kopf { gap: 12px; } .pd .pd-suche-lupe { width: 60px; } .pd-fehler { padding: 10px 0 20px; } } /* Neue Abschnitte auf kleineren Bildschirmen */ @media (max-width: 1180px) { .pd-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-welt, .pd-welt-gespiegelt { grid-template-columns: 1fr; } .pd-welt-gespiegelt .pd-welt-buehne { order: 0; } .pd-welt-buehne { min-height: 0; } } @media (max-width: 900px) { .pd-welt-spiele { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 34%); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; } .pd-welt-spiele .pd-karte { scroll-snap-align: start; } .pd-info-absaetze, .pd-notizen { grid-template-columns: 1fr; } } @media (max-width: 760px) { .pd-reihe { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; } .pd-reihe .pd-karte { scroll-snap-align: start; } .pd-welt { padding: 12px; border-radius: 28px; gap: 12px; margin-bottom: 20px; } .pd-welt-szene { width: 104px; } .pd-welt-text { flex: 1; } .pd-welt-name { font-size: 32px; } .pd-welt-satz { font-size: 14px; } .pd .pd-welt-knopf { font-size: 15px; padding: 9px 16px; white-space: normal; text-align: left; line-height: 1.15; } .pd-welt-spiele { grid-auto-columns: 44%; padding: 10px; border-radius: 22px; } .pd-chips { gap: 12px 10px; } .pd-chip { font-size: 15px; padding: 7px 16px 9px 9px; } .pd .pd-chip img { width: 28px; height: 28px; } .pd-info { padding: 50px 0 90px; } .pd-vorteile { gap: 10px; margin-bottom: 64px; } .pd-vorteil { min-width: 0; flex: 1 1 calc(50% - 10px); font-size: 15px; padding: 8px 14px 10px 9px; gap: 8px; } .pd .pd-vorteil img { width: 38px; height: 38px; } .pd-info-karte { padding: 48px 20px 24px; border-radius: 28px; } .pd .pd-info-maskottchen { width: 90px; top: -54px; } .pd-notiz, .pd-notiz-pink { flex-direction: column; gap: 6px; padding: 22px 20px; transform: none; } .pd-notiz-deko { width: 84px; margin: 0; } .pd .pd-notiz-deko img { width: 84px; } .pd .pd-notiz h2 { font-size: 23px; } .pd-info-wolke { width: 170px; } .pd-info-wolke-2 { width: 200px; } .pd .pd-info-stern-1, .pd .pd-info-stern-2 { display: none; } } /* Weniger Bewegung, wenn im System eingestellt */ @media (prefers-reduced-motion: reduce) { .pd *, .pd *::before, .pd *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }