/* Schriften liegen lokal unter /assets/fonts/ (SIL Open Font License). Fehlen sie, greifen die Ersatzschriften. */ /* WOFF2 je Zeichensatz (Fontsource, ca. 100 statt 600 KB): latin deckt Deutsch und Englisch ab, latin-ext lädt der Browser nur bei Zeichen wie ł oder ő in Spieletiteln. Die TTF dahinter nur als Rückfall, falls eine WOFF2 fehlt. */ @font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2"), url("fonts/BricolageGrotesque.ttf") format("truetype"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("fonts/BricolageGrotesque-latin-ext.woff2") format("woff2"), url("fonts/BricolageGrotesque.ttf") format("truetype"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap; src: url("fonts/InstrumentSans-latin.woff2") format("woff2"), url("fonts/InstrumentSans.ttf") format("truetype"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap; src: url("fonts/InstrumentSans-latin-ext.woff2") format("woff2"), url("fonts/InstrumentSans.ttf") format("truetype"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Dunkel (Standard) */ :root { --bg: #0f0d0b; --surface: #1a1714; --surface-2: #24201c; --border: rgba(242, 237, 228, .14); --text: #f2ede4; --muted: #a39b8f; --accent: #ff4a3d; --accent-ink: #fff; --good: #7fc98a; --warn: #f2b544; --bad: #ff8a7a; --veil: rgba(15, 13, 11, .72); --veil-strong: rgba(15, 13, 11, .96); --tile-opacity: .75; --radius: 10px; --shadow: 0 18px 40px rgba(0, 0, 0, .35); --display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", sans-serif; --body: "Instrument Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color-scheme: dark; } /* Hell: per Systemeinstellung oder per Umschalter (data-theme) */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f4efe6; --surface: #fffaf2; --surface-2: #ebe4d8; --border: rgba(22, 18, 15, .14); --text: #16120f; --muted: #6b6258; --accent: #d62a1e; --good: #2f7d3a; --warn: #a86a00; --bad: #b42318; --veil: rgba(244, 239, 230, .82); --veil-strong: rgba(244, 239, 230, .97); --tile-opacity: .7; --shadow: 0 18px 40px rgba(40, 28, 16, .16); color-scheme: light; } } :root[data-theme="light"] { --bg: #f4efe6; --surface: #fffaf2; --surface-2: #ebe4d8; --border: rgba(22, 18, 15, .14); --text: #16120f; --muted: #6b6258; --accent: #d62a1e; --good: #2f7d3a; --warn: #a86a00; --bad: #b42318; --veil: rgba(244, 239, 230, .82); --veil-strong: rgba(244, 239, 230, .97); --tile-opacity: .7; --shadow: 0 18px 40px rgba(40, 28, 16, .16); color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16.5px/1.55 var(--body); overflow-x: hidden; overflow-x: clip; /* wie .stage: nicht seitlich verschiebbar, wo der Browser es kann */ } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: .2em; } h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0 0 .5rem; letter-spacing: -.025em; font-weight: 800; } h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.04em; } h2 { font-size: 1.45rem; } h3 { font-size: 1.2rem; } p { margin: 0 0 .75rem; } .wrap { width: min(1100px, 100% - 32px); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* „Zum Inhalt springen“ (layout.php): unsichtbar, bis die Tastatur ihn erreicht */ .skip-link { position: fixed; left: 12px; top: -4rem; z-index: 100; padding: .6rem 1rem; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: var(--shadow); } .skip-link:focus { top: 12px; outline: 2px solid var(--text); outline-offset: 2px; } main:focus { outline: none; } /* Kopfzeile (layout.php). PC: schwebende Kapsel mit Abstand zum Rand, insgesamt etwa so hoch wie vorher (Sticky-Leisten darunter rechnen mit rund 4.4rem). Handy: schlanke Leiste mit Logo und Konto, Navigation in der Leiste unten */ .site-header { position: sticky; top: 0; z-index: 20; } .is-bare .site-header { position: fixed; left: 0; right: 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; } @media (min-width: 761px) { .site-header { padding: .45rem 0; } .header-inner { height: 54px; padding: 0 .45rem 0 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 80%, transparent); box-shadow: 0 12px 34px -20px rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); } .site-header .logo { font-size: 1.3rem; } .site-header .logo-mark { width: 32px; height: 32px; } } /* Schmaler PC / Tablet quer: nur das Logo-Zeichen, engere Punkte, „Anmelden“ im Drei-Punkte-Menü */ @media (min-width: 761px) and (max-width: 960px) { .site-header .logo-word { display: none; } .nav { margin-left: .4rem; } .nav-link { padding: .45rem .6rem; font-size: .88rem; } .nav-login { display: none; } } @media (max-width: 760px) { .site-header { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); } .header-inner { height: 58px; } .site-header .logo { font-size: 1.25rem; gap: .45rem; flex: none; } .site-header .logo-mark { width: 30px; height: 30px; } .site-header .nav, .nav-login, .nav-register, .header-search [data-search-toggle] { display: none; } } /* Suche in der Kopfzeile. Breiter PC: immer sichtbares Feld mit Lupe und Hinweis auf die Taste „/“ (app.js). Darunter klappt das Feld unter der Lupe auf; am Handy öffnet es der Suche-Knopf der Leiste unten, über die ganze Breite */ .header-search { position: relative; display: flex; } .header-search-form { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 60; width: min(22rem, calc(100vw - 24px)); } /* Grundform vor der Regel für breite PCs, sonst überschrieb sie dort Lupe und Abstände */ .header-search-form input { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .9rem; box-shadow: var(--shadow); } @media (min-width: 1041px) { .header-search [data-search-toggle] { display: none; } .header-search-form, .header-search-form[hidden] { display: block; position: relative; top: auto; right: auto; width: clamp(11rem, 17vw, 15rem); } .header-search-form input { padding: .48rem 2rem .48rem 2.25rem; border-radius: 999px; box-shadow: none; font-size: .9rem; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948b80' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat .8rem 50% / 1rem; } .header-search-form::after { content: "/"; position: absolute; right: .65rem; top: 50%; translate: 0 -50%; padding: 0 .38rem; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: .72rem; line-height: 1.4; pointer-events: none; } .header-search-form:focus-within::after { display: none; } .header-search .suggestions { left: auto; width: max(100%, 22rem); } } @media (max-width: 760px) { .header-search-form { position: fixed; top: calc(58px + .5rem); left: 12px; right: 12px; width: auto; } } /* Handy: Leiste unten wie in einer App (layout.php .bottom-nav), „Suche“ als runder Knopf in der Mitte; alles, was sonst unten am Rand klebt (Cookie-Hinweis, Begleiter, Auswahl-Leisten), rückt darüber. Feedback steht dort im „Mehr“-Blatt */ .bottom-nav, .sheet[hidden] { display: none; } @media (max-width: 760px) { :root { --bottom-nav: calc(4.1rem + env(safe-area-inset-bottom)); } body { padding-bottom: var(--bottom-nav); } .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); } .bottom-nav > a, .bottom-nav > button { position: relative; display: grid; justify-items: center; align-content: center; gap: .18rem; min-height: 3.3rem; padding: .2rem 0; border: 0; background: none; color: var(--muted); font: 600 .68rem/1.1 var(--body); cursor: pointer; -webkit-tap-highlight-color: transparent; } .bottom-nav > a:hover { text-decoration: none; } .bottom-nav .nav-icon { width: 1.4rem; height: 1.4rem; } .bottom-nav .is-active { color: var(--accent); } .bottom-nav .is-active::before { content: ""; position: absolute; top: -.32rem; width: 1.8rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); } .bottom-nav-search { color: var(--text) !important; } .bottom-nav-search-ring { display: grid; place-items: center; width: 3rem; height: 3rem; margin-top: -1.4rem; border-radius: 50%; border: 3px solid var(--bg); background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent) 75%, transparent); } .bottom-nav-search-ring .nav-icon { width: 1.3rem; height: 1.3rem; stroke-width: 2.4; } /* Cookie-Hinweis, Begleiter, Auswahl-Leiste und Feedback-Knopf: siehe Dateiende (müssen nach deren Grundregeln stehen) */ /* „Mehr“-Blatt von unten (app.js [data-sheet]) */ .sheet { position: fixed; inset: 0; z-index: 70; } .sheet-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .5); animation: fade-in .2s; } .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -18px 40px rgb(0 0 0 / .35); animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); } .sheet-grip { display: block; width: 2.6rem; height: 4px; margin: 0 auto .9rem; border-radius: 2px; background: var(--border); } .sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } .sheet-grid a { display: flex; align-items: center; gap: .45rem; padding: .85rem .9rem; border-radius: 14px; background: var(--surface-2); color: var(--text); font-weight: 600; font-size: .95rem; } .sheet-grid a:hover { text-decoration: none; } .sheet-grid a.is-primary { background: var(--accent); color: var(--accent-ink); } .sheet-grid .brand-icon { width: 1.05rem; height: 1.05rem; } .sheet-prefs { display: flex; gap: .5rem; margin: .9rem 0 0; } .has-sheet, .has-sheet body { overflow: hidden; } } @keyframes sheet-up { from { translate: 0 100%; } } @keyframes fade-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sheet-panel, .sheet-backdrop { animation: none; } } .header-search-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .header-search .suggestions { top: calc(100% + .4rem); left: 0; right: 0; min-width: 0; font-size: .95rem; } .header-search .suggestions li { padding: 0; } .header-search .suggestions a { flex: 1; display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; color: inherit; border-radius: 7px; } .header-search .suggestions a:hover, .header-search .suggestions a:focus { text-decoration: none; background: var(--accent); color: var(--accent-ink); } .header-search .suggestions li:hover { background: none; } .header-search .suggestions .none { padding: .6rem .8rem; } .header-search .suggestions .suggest-head { padding: .5rem .8rem .25rem; } /* Suchseite */ .search-page { padding: 2.5rem 0 3rem; } .search-page-form { display: flex; gap: .6rem; max-width: 36rem; margin: 0 0 1.5rem; } .search-page-form input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .75rem 1rem; } .search-empty { display: grid; gap: .8rem; justify-items: start; max-width: 36rem; padding: 1.2rem 1.3rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .search-empty p { margin: 0; color: var(--muted); } .search-empty strong { display: block; color: var(--text); } .logo { color: var(--text); font: 800 1.45rem/1 var(--display); letter-spacing: -.035em; display: flex; gap: .55rem; align-items: center; } .logo:hover { text-decoration: none; } /* Zeichen als Inline-SVG: Umriss in Textfarbe, gefülltes Cover in Akzentfarbe – passt so zu Hell und Dunkel */ .logo-mark { display: block; width: 36px; height: 36px; flex: none; color: var(--text); transition: transform .25s; } .logo-mark-fill { fill: var(--accent); } .logo:hover .logo-mark { transform: rotate(-4deg); } .logo-word { line-height: 1; } .logo-accent { color: var(--accent); } /* „.gg“ hinter dem Wortlogo (logo_tld, nur mit playalike.gg als Hauptadresse): in Akzentfarbe wie „play“, etwas leichter */ .logo-tld { color: var(--accent); font-weight: 700; } /* Footer (layout.php): Einladung als Karte, drei Spalten, Fußzeile mit Logo, Zahlen, Sprache und Hell/Dunkel */ .site-footer { margin-top: 5rem; padding: 0 0 2.2rem; color: var(--muted); font-size: .9rem; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface) 70%, transparent) 9rem); } .footer-cta { position: relative; display: flex; align-items: center; gap: 1.2rem 1.8rem; padding: 1.4rem 1.6rem; margin-bottom: 2.8rem; border-radius: 22px; background: radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); translate: 0 -1.6rem; } .footer-fan { position: relative; flex: none; width: 7.4rem; height: 5.6rem; } .footer-fan img { position: absolute; bottom: 0; left: calc(var(--i) * 1.9rem); width: 3.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 22px rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .12); rotate: calc((var(--i) - 1) * 9deg); transform-origin: 50% 110%; transition: rotate .3s, translate .3s; } .footer-cta:hover .footer-fan img { rotate: calc((var(--i) - 1) * 14deg); translate: 0 -.2rem; } .footer-cta-text { flex: 1; min-width: 0; } .footer-cta-text h2 { margin: 0 0 .25rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: var(--text); } .footer-cta-text p { margin: 0; } .footer-cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; } .footer-cta-actions .button { display: inline-flex; align-items: center; gap: .4rem; } .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2rem; padding-bottom: 2rem; } .footer-col { display: grid; align-content: start; gap: .45rem; justify-items: start; } .footer-col h2 { margin: 0 0 .35rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); font-family: var(--body); font-weight: 800; } .footer-col a { color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; } .footer-col a:hover { color: var(--text); text-decoration: none; } .footer-col .brand-icon { width: 1rem; height: 1rem; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--border); } .footer-logo .logo-mark { width: 28px; height: 28px; } .footer-stats { margin: 0; flex: 1; min-width: 12rem; } .footer-prefs { display: flex; gap: .4rem; margin: 0; } .footer-pill { font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; } .footer-pill:hover { border-color: var(--accent); text-decoration: none; } .site-footer .disclosure { margin: .6rem 0 .3rem; font-size: .8rem; } .fineprint { opacity: .75; font-size: .8rem; margin: 0; } @media (max-width: 760px) { .footer-cta { flex-wrap: wrap; padding: 1.1rem 1.2rem; } .footer-cta-text { flex-basis: calc(100% - 9rem); } .footer-cta-actions { flex-basis: 100%; } .footer-cta-actions .button { flex: 1; justify-content: center; } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-col:first-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; } .footer-col:first-child h2 { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .footer-fan img { transition: none; } } /* Buttons */ .button { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .2s, transform .2s; } .button:hover { text-decoration: none; border-color: var(--accent); } .button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .button.primary:hover { transform: translateY(-1px); } .button.primary:disabled { opacity: .45; cursor: not-allowed; transform: none; } .button.shop { font-size: .875rem; padding: .4rem .85rem; } .theme-toggle { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; } .theme-toggle:hover, .theme-toggle[aria-expanded="true"] { border-color: var(--accent); } .theme-toggle svg { width: 1.05rem; height: 1.05rem; } .header-tools { display: flex; align-items: center; gap: .55rem; flex: none; } /* Startseite: Cover-Wand */ /* overflow: clip statt hidden: Ein hidden-Bereich lässt sich weiter seitlich verschieben, und Browser (vor allem iOS) tun das, sobald die Trefferliste unter dem Eingabefeld kurz über den Rand ragt; danach blieb der Satz verschoben */ .stage { position: relative; min-height: min(100vh, 940px); min-height: min(100svh, 940px); display: grid; align-items: center; overflow: hidden; overflow: clip; isolation: isolate; } .wall { position: absolute; inset: -30% -20%; z-index: -2; display: flex; flex-direction: column; gap: 14px; transform: perspective(1400px) rotateX(22deg) rotateZ(-9deg); transform-origin: 50% 40%; } .wall-row { display: flex; gap: 14px; width: max-content; animation: drift var(--speed, 90s) linear infinite; } .wall-row:nth-child(even) { animation-direction: reverse; } @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tile { position: relative; flex: none; width: clamp(96px, 10vw, 150px); aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--surface); opacity: 0; transform: translateY(40px) scale(.85); animation: tile-in .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); transition: opacity .6s, filter .6s, box-shadow .6s; } .tile img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes tile-in { to { opacity: var(--tile-opacity); transform: none; } } /* Ruhige Fläche hinter Satz und Karussell, die Wand bleibt nur am Rand lebendig */ .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-strong) 45%, var(--veil) 72%, color-mix(in srgb, var(--bg) 35%, transparent) 100%), linear-gradient(to bottom, transparent 70%, var(--bg) 100%); } .tile img { filter: saturate(.75); } .wall.focus .tile { opacity: .14; filter: grayscale(1); } .wall.focus .tile.hit { opacity: 1; filter: none; box-shadow: 0 0 0 3px var(--accent), 0 0 40px 6px color-mix(in srgb, var(--accent) 55%, transparent); z-index: 1; } /* Startseite: Satz zum Ausfüllen */ /* Gleiche Breite und Kante wie .wrap darunter, damit Hero und Inhalt bündig sind */ .pitch { width: min(1100px, 100% - 32px); margin-inline: auto; padding: 7rem 0 4rem; } .kicker { font: 600 .8rem/1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: 0 0 1.4rem; opacity: 0; animation: rise .6s forwards; } /* Kurze Verzögerungen: Bis der Satz sichtbar ist, zählt die Seite für Google (LCP) als nicht geladen */ .sentence { font: 800 clamp(2.6rem, 7.5vw, 6.4rem)/.98 var(--display); letter-spacing: -.045em; margin: 0; } .sentence.many { font-size: clamp(2.2rem, 5.2vw, 4.6rem); } .sentence .w { display: inline-block; opacity: 0; transform: translateY(.4em); animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes rise { to { opacity: 1; transform: none; } } /* Titel dürfen umbrechen (lange liefen sonst aus der Seite); sehr lange bekommen dazu kleinere Schrift (.long, app.js) */ .fav { color: var(--accent); white-space: normal; overflow-wrap: anywhere; } .sentence.long { font-size: clamp(2rem, 4.6vw, 4rem); } /* Titel im Satz führt zu „Spiele wie …“ (markieren, Details); unauffällig, Unterstrich erst beim Überfahren */ .fav-link { color: inherit; text-decoration: none; } .fav-link:hover, .fav-link:focus-visible { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; } .fav button { font: 600 .32em/1 var(--body); vertical-align: .9em; margin-left: .15em; width: 1.7em; height: 1.7em; border-radius: 50%; padding: 0; border: 1px solid currentColor; background: transparent; color: var(--accent); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s; } .fav button:hover, .fav button:focus-visible { opacity: 1; background: var(--accent); color: var(--accent-ink); } .fav.new { animation: pop .45s cubic-bezier(.2, .9, .3, 1.3); display: inline-block; } /* Gewähltes Spiel ohne KI-Profil: kleiner, ruhiger Zusatz „vorläufig“ im Satz (Erklärung im Tooltip) */ .fav-note { display: inline-block; vertical-align: .9em; margin-left: .25em; padding: .2em .55em; border: 1px solid var(--border); border-radius: 999px; font: 600 .28em/1.2 var(--body); letter-spacing: .02em; color: var(--muted); cursor: help; } .live-head .live-unanalyzed { flex-basis: 100%; margin: 0; } /* Was alle gewählten Spiele verbindet: zeigt, dass die Suche die ganze Auswahl kombiniert */ /* Unten mehr Luft: Die Match-Stempel ragen über die Karten, die mittlere Karte steht höher, sonst klebt die Zeile daran */ .live-head .live-common { flex-basis: 100%; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; font-size: .88rem; } .live-common-label { color: var(--muted); font-weight: 600; } .live-common-chip { padding: .12rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .rs-unanalyzed { margin-top: .8rem; } @keyframes pop { from { transform: scale(.6); opacity: 0; } } /* z-index: die Vorschlagsliste muss über den später folgenden, animierten Elementen (Text, Schnellwahl) liegen */ .slot { position: relative; z-index: 40; display: inline-block; vertical-align: baseline; } .slot[hidden] { display: none; } .slot input { font: inherit; letter-spacing: inherit; color: var(--accent); background: transparent; border: 0; padding: 0 .05em; margin: 0; border-bottom: .07em solid var(--accent); border-radius: 0; outline: none; width: 5ch; min-width: 2.5ch; max-width: 78vw; caret-color: var(--accent); } .slot.more input { font-size: .5em; vertical-align: .35em; border-bottom-width: .1em; } /* Leeres Feld sieht aus wie ein Eingabefeld (Kasten mit Rahmen), nicht wie ein Wort im Satz: Besucher sollen sofort sehen, wo sie tippen */ .slot input::placeholder { color: color-mix(in srgb, var(--text) 30%, transparent); opacity: 1; } .slot input:placeholder-shown { box-sizing: content-box; padding: .04em .22em .1em; border: .045em solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: .16em; background: var(--surface); box-shadow: 0 .08em .3em rgb(0 0 0 / .12); cursor: text; animation: slot-pulse 2.4s ease-in-out 2s 3; } .slot input:placeholder-shown:focus { border-color: var(--accent); box-shadow: 0 0 0 .07em color-mix(in srgb, var(--accent) 30%, transparent); animation: none; } .slot.more input:placeholder-shown { border-width: .07em; } @keyframes slot-pulse { 50% { box-shadow: 0 0 0 .1em color-mix(in srgb, var(--accent) 35%, transparent); } } .slot-hint { position: absolute; left: 0; top: calc(100% + .6rem); display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font: 600 .95rem/1 var(--body); letter-spacing: 0; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: .5rem .85rem; cursor: text; box-shadow: 0 6px 16px rgb(0 0 0 / .18); } .slot-hint::before { content: ""; position: absolute; left: 1.1rem; top: -.35rem; border: .4rem solid transparent; border-top: 0; border-bottom-color: var(--accent); } .slot-hint svg { width: 1.1rem; height: 1.1rem; } .slot.more .slot-hint, .slot:has(input:not(:placeholder-shown)) .slot-hint, .is-dragging .slot-hint { display: none; } @media (max-width: 640px) { /* Platz unter dem Feld für den Hinweis, sonst liegt er über „geliebt.“ in der nächsten Zeile */ .slot:not(.more):has(input:placeholder-shown) { margin-bottom: 2.4rem; } .slot-hint { font-size: .8rem; padding: .42rem .7rem; } } .slot input:focus { border-bottom-style: dashed; } /* Deutlicher Fokusrahmen (Paket E6): Vorher zeigte das Feld mit Text nur eine gestrichelte Linie, leer einen blassen Schein */ .slot input:focus-visible { outline: 2px solid var(--accent); outline-offset: .12em; } .measure { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; left: -9999px; top: 0; } .suggestions { position: absolute; left: 0; top: calc(100% + .5rem); z-index: 30; min-width: min(26rem, 85vw); max-width: calc(100vw - 24px); list-style: none; margin: 0; padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font: 500 1.05rem/1.3 var(--body); letter-spacing: 0; /* Bis zu 12 Treffer: lange Listen scrollen statt über den Bildschirm hinauszuragen */ max-height: min(26rem, 60vh); overflow-y: auto; overscroll-behavior: contain; } .suggestions li { padding: .6rem .8rem; border-radius: 7px; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; } .suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--accent); color: var(--accent-ink); } .suggestions .year { color: var(--muted); } .suggestions li[aria-selected="true"] .year, .suggestions li:hover .year { color: inherit; } .suggestions .none, .suggestions .none:hover { color: var(--muted); background: none; cursor: default; } /* Live-Nachsuche: Treffer aus IGDB unter einer kleinen Überschrift, mit „+“; während der Übernahme der Status statt des Jahrs */ .suggestions .suggest-head, .suggestions .suggest-head:hover { margin-top: .3rem; padding: .5rem .8rem .25rem; border-top: 1px solid var(--border); border-radius: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: none; cursor: default; } /* Startseite: li > Titel + Jahr; Kopfzeile: li > a > Titel + Jahr */ .suggestions li.is-igdb > .year::after, .suggestions .is-igdb > a::after { content: "+"; margin-left: .5rem; font-weight: 700; } .suggestions li.is-igdb[data-label] > .year, .suggestions .is-igdb > a[data-label] .year { display: none; } .suggestions li.is-igdb[data-label]::after, .suggestions .is-igdb > a[data-label]::after { content: attr(data-label); margin-left: .5rem; font-size: .85rem; opacity: .8; } .suggestions [aria-busy="true"] { cursor: progress; opacity: .75; } /* Kleines Cover links in jedem Vorschlag (app.js gameThumb), Titel füllt die Mitte, Jahr rechts */ .suggestions li, .header-search .suggestions a { align-items: center; } .suggestions li > span:not(.year):not(.suggest-cover), .suggestions .suggest-title { flex: 1; min-width: 0; } .suggest-cover { flex: none; width: 2.1rem; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); } .suggest-cover.is-typo { display: grid; place-items: center; font: 800 .68rem var(--display); color: var(--muted); background: color-mix(in srgb, var(--text) 8%, var(--surface)); } .suggestions li { gap: .75rem; } .header-search .suggestions a { gap: .75rem; } .search-more { margin-top: 2rem; max-width: 36rem; } .search-more h2 { margin: 0 0 .3rem; font-size: 1.2rem; } .search-more-list { display: grid; gap: .4rem; margin: 1rem 0; padding: 0; list-style: none; } .search-more-list form { margin: 0; } .search-more-pick { display: flex; align-items: baseline; gap: .8rem; width: 100%; padding: .7rem 1rem; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s; } .search-more-pick:hover, .search-more-pick:focus-visible { border-color: var(--accent); } .search-more-pick .year { color: var(--muted); } .search-more-add { margin-left: auto; font-weight: 700; color: var(--accent); } .count { font: 600 .8rem/1 var(--body); color: var(--muted); margin: 1rem 0 0; min-height: 1rem; } /* Gäste: „Kein Konto, kein Steam nötig“ unter dem Satz, ruhig mit Haken in Grün */ .hero-note { display: flex; align-items: flex-start; gap: .45rem; max-width: 40rem; margin: .4rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; } .hero-note svg { flex: none; margin-top: .15em; color: var(--good); } .lead { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 36rem; margin: 1.4rem 0 1.4rem; } .stage .lead { opacity: 0; animation: rise .7s .35s forwards; } .quickpick { display: grid; gap: .9rem; width: 100%; opacity: 0; animation: rise .7s .45s forwards; } /* Die Wand bleibt neben den Texten greifbar (Cover in den Satz ziehen) */ .pitch { pointer-events: none; } .pitch > * { pointer-events: auto; width: fit-content; max-width: 100%; } .pitch > .quickpick { width: 100%; } /* Die Zeilen des Bereichs nehmen nur ihre eigene Breite ein, daneben bleibt die Wand greifbar */ .quickpick { pointer-events: none; } .quickpick > * { pointer-events: auto; } .tile[draggable="true"] { cursor: grab; } .tile[draggable="true"]:hover { opacity: 1; filter: brightness(1.12); } /* Karussell */ .shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; font-size: .92rem; } .shelf-hint { color: var(--muted); } .shelf-head strong { color: var(--muted); font-weight: 600; } /* Pfeile seitlich auf der Cover-Reihe: dezent sichtbar, beim Überfahren deutlich */ /* min-width: 0, sonst wird der Rahmen so breit wie alle Cover zusammen und schiebt den ganzen Hero zur Seite */ .carousel-wrap { position: relative; min-width: 0; } .carousel-arrow { position: absolute; top: 4.9rem; z-index: 3; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); opacity: .75; transition: opacity .2s, border-color .2s, color .2s; } .carousel-arrow.is-prev { left: -1.1rem; } .carousel-arrow.is-next { right: -1.1rem; } .carousel-wrap:hover .carousel-arrow, .carousel-arrow:focus-visible { opacity: 1; } .carousel-arrow:hover { border-color: var(--accent); color: var(--accent); } .carousel-arrow[hidden] { display: none; } .shelf-nav button { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--border); background: var(--veil); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; } .shelf-nav button:hover { border-color: var(--accent); color: var(--accent); } /* Wischbare Leisten (app.js scrollFade): Verlauf an der Seite, auf der noch etwas kommt. Vorher endeten Chips am Handy einfach am Rand und wirkten abgeschnitten statt wischbar (Andreas 08.11.) */ .fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.6rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.6rem), transparent); } .fade-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.6rem); mask-image: linear-gradient(to right, transparent, #000 2.6rem); } .fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.6rem, #000 calc(100% - 2.6rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.6rem, #000 calc(100% - 2.6rem), transparent); } .carousel { display: flex; gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem .1rem .7rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); } .carousel::-webkit-scrollbar { display: none; } .shelf-item { flex: none; width: 8.75rem; scroll-snap-align: start; display: grid; gap: .35rem; align-content: start; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: grab; } .shelf-item .cover { border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); transition: transform .2s, box-shadow .2s; } .shelf-item:hover .cover, .shelf-item:focus-visible .cover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 0 0 2px var(--accent), 0 12px 26px rgba(0, 0, 0, .35); } .shelf-item[aria-disabled="true"] { opacity: .35; cursor: default; } .shelf-item[aria-disabled="true"] .cover { transform: none; box-shadow: none; } .shelf-item:focus-visible { outline: none; } .shelf-item .cover-placeholder span { font-size: .85rem; } .shelf-title { font-size: .8rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .shelf-hours { font-size: .75rem; font-weight: 600; color: var(--muted); } /* Plattform-Auswahl mit Symbolen */ /* min-width: 0, sonst ist ein fieldset mindestens so breit wie sein Inhalt und die Seite scrollt quer */ .platforms { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; border: 0; margin: 0; padding: 0; min-width: 0; } .platforms legend { float: left; margin-right: .5rem; color: var(--muted); font-size: .9rem; } /* Unsichtbares Feld am eigenen Knopf verankern: sonst liegt es außerhalb der wischbaren Reihe und die Seite wird auf dem Handy breiter */ .platform { position: relative; } .platform input { position: absolute; inset: 0; opacity: 0; pointer-events: none; } /* Nur die äußere Pille (> span), sonst bekommt das Logo darin Rahmen und Hintergrund und verschwindet */ .platform > span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--veil); font-size: .9rem; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .platform span .brand-icon { width: 18px; height: 18px; flex: none; } .platform span .deck-logo { width: 18px; height: 18px; flex: none; } /* Karten: alle Plattformen als Icons in einem Badge (Name im Tooltip) */ .badge.badge-platforms { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .5rem; } .pf-icon { display: inline-flex; color: var(--text); opacity: .8; } .pf-icon:hover { opacity: 1; } .pf-icon .brand-icon, .pf-icon svg { width: .95rem; height: .95rem; } /* Steam Deck im Plattform-Badge: durch einen feinen Strich von den Plattformen getrennt, Logo in Textfarbe, Status (grüner Haken = verifiziert, gelbes i = spielbar) als kleiner Punkt unten rechts am Logo */ /* align-self: In Zeilen ohne Ausrichtung (Kacheln der Neuerscheinungen) streckte sich das Symbol sonst auf Zeilenhöhe und der Punkt hing unter dem Logo */ .pf-deck { position: relative; align-self: center; align-items: center; padding-left: .5rem; border-left: 1px solid var(--border); cursor: help; } .pf-deck .deck-logo { width: 1rem; height: 1rem; } .pf-deck .deck-status { position: absolute; right: -.28rem; bottom: -.18rem; width: .55rem; height: .55rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface); } .platform:hover > span { border-color: var(--accent); } /* Gewählte Filter neutral (Rot bleibt Auswahl, Treffern und Hauptaktionen vorbehalten) */ .platform input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); } .platform input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } /* Drag & Drop: Ziel im Satz hervorheben */ .is-dragging .slot input { background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom-style: dashed; } .is-over .slot input { background: color-mix(in srgb, var(--accent) 22%, transparent); } .is-dragging .slot::after { content: attr(data-drop-label); position: absolute; left: 0; top: 100%; margin-top: .4rem; white-space: nowrap; font: 700 .8rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } /* Wie „Heute Abend“: eigener Bereich mit Trennlinie, damit die Filter darüber nicht dazuzugehören scheinen */ .steam-picks { border-top: 1px solid var(--border); margin-top: 2.5rem; padding: 3rem 0 3rem; } /* 2.6rem statt 1.6rem: Die Match-Stempel ragen über die Karten, die mittlere steht höher, sonst klebt der Text daran */ .steam-picks .hint { margin-top: -1rem; margin-bottom: 2.6rem; } .pill { border: 1px solid var(--border); background: var(--veil); color: var(--text); border-radius: 999px; padding: .45rem .95rem; cursor: pointer; font: 500 .95rem var(--body); transition: border-color .2s, transform .2s; } .pill:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); } .pill:disabled { opacity: .35; cursor: default; } /* Mittig unter der Auswahl: der nächste Schritt für alle Spalten darüber */ .jump { display: block; width: fit-content; margin: 1.8rem auto 0; border: 0; border-radius: 999px; padding: .85rem 1.5rem; background: var(--accent); color: var(--accent-ink); font: 700 1.05rem/1 var(--body); cursor: pointer; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent); animation: rise .5s forwards, nudge 2.4s 1s ease-in-out infinite; } .jump[hidden] { display: none; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* Startseite: Geschmack in eigenen Worten */ /* Dezenter Umschalter unter dem Satz statt eigenem Kasten */ .describe-toggle { display: inline-flex; align-items: center; gap: .55rem; margin: 2.6rem 0 1.6rem; padding: 0; border: 0; background: none; color: var(--muted); font: 600 .95rem var(--body); cursor: pointer; opacity: 0; animation: rise .7s .35s forwards; } .describe-toggle:hover, .describe-toggle[aria-expanded="true"] { color: var(--text); } .describe-toggle [data-describe-label] { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: .25em; } .describe-toggle:hover [data-describe-label] { text-decoration-color: var(--accent); } .describe { width: min(100%, 44rem); margin: 0 0 1.4rem; border: 1px solid var(--border); border-radius: 14px; background: var(--veil); } .describe[hidden], .quickpick[hidden] { display: none; } .describe-badge { font: 700 .68rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); } .describe-body { padding: 1rem; display: grid; gap: .8rem; } .describe-status { flex-basis: 100%; color: var(--text); font-weight: 600; font-size: .9rem; } /* Ladezustand: Spinner und Platzhalter-Karten */ .spinner { display: inline-block; width: 1em; height: 1em; margin-right: .5rem; vertical-align: -.15em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .button .spinner { display: none; } .button.is-busy .spinner { display: inline-block; } .pick-ghost { aspect-ratio: 3 / 4; border-radius: 8px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } .live .loading { display: flex; align-items: center; margin-bottom: 1.4rem; } /* Analyse der ersten Suche (app.js analyzer, 3 s): 36 Balken je Merkmal pegeln wie ein Equalizer, ein Lichtstreifen läuft darüber, darunter die Stufe als Text und ein Balken, der sich in drei Sekunden füllt */ .analyze { position: relative; display: grid; gap: .9rem; justify-items: center; margin: 0 0 1.6rem; padding: 1.6rem 1.4rem 1.4rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); overflow: hidden; background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--surface); animation: options-in .35s cubic-bezier(.2, .8, .2, 1); } .analyze::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .09) 50%, transparent 65%); background-size: 250% 100%; animation: analyze-sweep 1.5s ease-in-out infinite; } .analyze-dna { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: min(100%, 30rem); height: 4.2rem; } .analyze-dna i { flex: 1; max-width: 9px; height: var(--h); border-radius: 3px 3px 1px 1px; transform-origin: bottom; background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 45%, #ffd36b)); animation: analyze-eq 1.1s ease-in-out infinite alternate; animation-delay: var(--d); opacity: .9; } .analyze[data-stage="2"] .analyze-dna i { animation-duration: .7s; } .analyze[data-stage="3"] .analyze-dna i { animation-duration: 1.6s; opacity: 1; } .analyze-step { margin: 0; min-height: 1.4em; font-weight: 700; font-size: 1.05rem; text-align: center; color: var(--text); } .analyze-step.is-in { animation: options-in .35s cubic-bezier(.2, .8, .2, 1); } .analyze-track { width: min(100%, 30rem); height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .analyze-track span { display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, var(--accent), #ffb547); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); animation: analyze-fill 3s cubic-bezier(.35, .1, .25, 1) forwards; } @keyframes analyze-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } } @keyframes analyze-sweep { from { background-position: 120% 0; } to { background-position: -20% 0; } } @keyframes analyze-fill { from { transform: scaleX(.02); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .analyze::after, .analyze-dna i { animation: none; } .analyze-track span { animation-duration: 3s; } } /* Filter bei den Treffern */ .live-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding-top: 2rem; scroll-margin-top: 3rem; } .live-filters[hidden] { display: none; } .live-filters-hint { margin: 0; } .live-filters-hint[hidden] { display: none; } /* Beschriftungen gleich breit, damit die Auswahl-Pillen der Zeilen untereinander fluchten */ .live-filters .platforms legend { width: 6.8rem; } .describe textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem; resize: vertical; min-height: 4.5rem; } .describe textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .describe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; } .describe-actions .hint { flex: 1 1 16rem; font-size: .8rem; } .describe-teaser p { margin: 0; } .describe-sample { position: relative; padding: .8rem 1rem; border-radius: 10px; background: var(--surface); border: 1px dashed var(--border); } .describe-quote { font-style: italic; } .describe-answer { color: var(--muted); margin-top: .4rem !important; } .describe-answer::before { content: "→ "; color: var(--accent); } .describe-summary { flex-basis: 100%; margin: .2rem 0 0; color: var(--muted); font-size: 1.05rem; } /* Startseite: Sofort-Ergebnisse */ /* Kein Hineinziehen in den Hero: bei vielen Filtern lag die Überschrift sonst über dem Knopf „Deine Treffer ansehen“ */ .live { position: relative; z-index: 5; padding: 1rem 0 3rem; scroll-margin-top: 5rem; } .live[hidden] { display: none; } .live-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.6rem; } /* h3: Blöcke in den Kapiteln der Startseite (home.php), sonst h2 */ .live-head :is(h2, h3) { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0; } .live-head :is(h2, h3) em { font-style: normal; color: var(--accent); } .live-head a { margin-left: auto; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; } .picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); } /* Knopf unter den drei Treffern der Startseite (app.js show) */ /* Ausblick unter den drei Treffern (app.js show): die ganze Karte führt zur Ergebnisseite. Links ein Fächer aus den Covern der nächsten Treffer, in der Mitte Titel und Hinweis, rechts der Knopf. Beim Überfahren fächert der Stapel auf */ .live-more { display: flex; align-items: center; gap: 1.4rem 2rem; margin-top: 2.6rem; padding: 1.1rem 1.4rem; border-radius: 18px; color: var(--text); background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 55%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); transition: border-color .2s, transform .2s, box-shadow .2s; } .live-more:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 34px rgb(0 0 0 / .3); } .live-more-fan { position: relative; flex: none; width: calc(3.4rem + (var(--n, 5) - 1) * 1.5rem); height: 4.6rem; } .live-more-fan img { position: absolute; left: calc(var(--i) * 1.5rem); bottom: 0; width: 3.4rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 16px rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .12); rotate: calc((var(--i) - 2) * 5deg); transform-origin: 50% 120%; transition: left .3s, rotate .3s, translate .3s; } .live-more:hover .live-more-fan img { left: calc(var(--i) * 1.85rem); rotate: calc((var(--i) - 2) * 8deg); translate: 0 -.3rem; } .live-more-text { display: grid; gap: .25rem; flex: 1; min-width: 0; } .live-more-text strong { font: 800 1.35rem/1.15 var(--display); letter-spacing: -.02em; } .live-more-text span { color: var(--muted); font-size: .9rem; } .live-more .button { flex: none; } @media (max-width: 640px) { .live-more { flex-wrap: wrap; justify-content: center; text-align: center; padding: 1rem; } .live-more-text { flex-basis: 100%; } .live-more .button { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .live-more-fan img { transition: none; } } .pick { position: relative; opacity: 0; transform: translateY(30px); animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d); } .pick-cover { display: block; position: relative; border-radius: 8px; overflow: hidden; transition: transform .25s ease-out; box-shadow: var(--shadow); } .pick-cover .cover { border-radius: 0; } .pick-cover .cover-placeholder span { font-size: clamp(1.4rem, 2.6vw, 2.2rem); } /* Unten liegen Preis und Bewertung auf dem Cover, oben Stempel und Bibliotheks-Hinweis: Titel des Ersatz-Covers mittig */ .pick-cover .cover-placeholder { align-items: center; } .pick .stamp { position: absolute; top: -.9rem; right: -.6rem; z-index: 2; } /* Warum es passt: Gründe als Haken-Liste, darunter kurz, worum es geht */ .pick-why { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .2rem; } .pick-why li { position: relative; padding-left: 1.2rem; color: var(--text); font-weight: 500; line-height: 1.35; } .pick-why li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; } /* Persönliche Begründung (Recommender::why): Satz zum Lieblingsspiel, Unterschied, „Passt auch zu …“ */ .pick-pitch { margin: .35rem 0 0; color: var(--text); font-weight: 500; line-height: 1.45; } .pick-contrast { margin: .4rem 0 0; font-size: .88rem; line-height: 1.4; padding-left: 1.2rem; position: relative; } .pick-contrast::before { content: "≠"; position: absolute; left: .1rem; color: var(--muted); font-weight: 800; } .pick-also { display: inline-flex; align-items: baseline; gap: .3rem; margin: .45rem 0 0; padding: .14rem .55rem; border-radius: 8px; line-height: 1.35; font-size: .78rem; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .pick-also::before { content: "+"; font-weight: 800; } .card .pick-pitch { font-size: .95rem; } .card .pick-pitch + .pick-contrast, .card .pick-also { margin-bottom: .2rem; } /* Ganz zeigen: ein bis zwei Sätze (ClaudeEnricher summary_de, gemessen 200–270 Zeichen, 5–6 Zeilen). Abgeschnitten wirkte es neben dem persönlichen Satz unfertig; auf dem Handy ist die Beschreibung ausgeblendet */ .pick-sum { margin: .55rem 0 0; font-size: .88rem; line-height: 1.45; } /* Worum es geht: zum Aufklappen unter der Formel */ .pick-more { margin-top: .6rem; } .pick-more > summary { cursor: pointer; width: fit-content; font-size: .8rem; font-weight: 600; color: var(--muted); list-style: none; } .pick-more > summary::-webkit-details-marker { display: none; } .pick-more > summary::after { content: " ▾"; } .pick-more[open] > summary::after { content: " ▴"; } .pick-more > summary:hover { color: var(--text); } .pick-more .pick-sum { margin-top: .35rem; } /* Formel statt Satz (partials/why-mix.php, buildMix): Cover der prägenden Lieblingsspiele, Anteilsbalken, Chips. Je Lieblingsspiel eine Farbe (is-c0…2), neutral für Gemeinsames. Beim Erscheinen schieben sich die Cover zusammen und der Balken füllt sich (Verzögerung --d wie die Karte) */ /* Bernstein statt Orange: Orange war neben dem roten Akzent nicht zu unterscheiden */ :root { --mix-0: #f5b335; --mix-1: #3fd2bd; --mix-2: #b892ff; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --mix-0: #b27200; --mix-1: #0d8a78; --mix-2: #7348d1; } } :root[data-theme="light"] { --mix-0: #b27200; --mix-1: #0d8a78; --mix-2: #7348d1; } .mix { margin: .2rem 0 0; min-width: 0; } .is-c0 { --c: var(--mix-0); } .is-c1 { --c: var(--mix-1); } .is-c2 { --c: var(--mix-2); } .mix-faces { display: flex; align-items: center; gap: .3rem; } .mix-face { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--text); font-weight: 800; font-size: .85rem; animation: mix-in .5s calc(var(--d, 0s) + .2s) cubic-bezier(.2, .9, .3, 1.3) both; } .mix-face:nth-of-type(2) { animation-name: mix-in-right; } /* Ausschnitt etwas über der Mitte: Dort stehen auf Covern meist Figur oder Logo */ .mix-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; } .mix-plus { color: var(--muted); font-weight: 800; font-size: .9rem; animation: mix-pop .3s calc(var(--d, 0s) + .55s) both; } .mix-solo { margin-left: .35rem; color: var(--text); font-size: .85rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mix-bar { display: flex; gap: 2px; height: 6px; margin-top: .6rem; border-radius: 3px; overflow: hidden; background: var(--surface-2); } .mix-bar i { width: var(--w); background: var(--c); animation: mix-fill .9s calc(var(--d, 0s) + .55s) cubic-bezier(.3, .7, .2, 1) both; } /* Darf umbrechen: Einzeilig gekürzt stand bei Serien dreimal „Grand …“. Die Karten bleiben trotzdem gleich hoch (Block gestreckt, „Worum geht es?“ bündig unten); nur ein einzelner sehr langer Titel wird mit … gekürzt. width 0 + min-width 100 %: Die Zeile meldet keine Mindestbreite aus dem ungekürzten Text, sonst wurde bei drei langen Titeln die ganze Kartenspalte breiter und Balken und Legende liefen in die Nachbarkarte */ .mix-legend { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: .35rem 0 0; font-size: .74rem; line-height: 1.3; color: var(--muted); width: 0; min-width: 100%; overflow: hidden; } .mix-legend span { position: relative; max-width: 100%; padding-left: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mix-legend span::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--c); } .mix-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .65rem 0 0; padding: 0; } .mix-chips li { padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--text); background: color-mix(in srgb, var(--c, var(--text)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--text)) 45%, transparent); animation: mix-pop .35s calc(var(--d, 0s) + .9s) both; } .mix-chips li:nth-child(2) { animation-delay: calc(var(--d, 0s) + 1s); } .mix-chips li:nth-child(3) { animation-delay: calc(var(--d, 0s) + 1.1s); } .mix-chips li:nth-child(4) { animation-delay: calc(var(--d, 0s) + 1.2s); } /* Gemeinsames neutral, damit die Spielfarben eindeutig bleiben */ .mix-chips .is-common { --c: var(--muted); } .mix-chips .is-diff { background: transparent; border-style: dashed; border-color: var(--border); color: var(--muted); font-weight: 500; } @keyframes mix-in { from { opacity: 0; transform: translateX(-14px) scale(.6); } } @keyframes mix-in-right { from { opacity: 0; transform: translateX(14px) scale(.6); } } @keyframes mix-pop { from { opacity: 0; transform: scale(.7); } } @keyframes mix-fill { from { width: 0; } } @media (prefers-reduced-motion: reduce) { .mix-face, .mix-plus, .mix-bar i, .mix-chips li { animation: none; } } /* Bester Treffer in der Mitte wie ein „Legendary“-Zug: links Platz 2, rechts Platz 3. Das Cover hebt sich leicht ab, goldener Rand mit sanftem Leuchten, ein Lichtstreif läuft beim Erscheinen einmal darüber, der Stempel wird golden. translate/scale statt transform: transform belegen die Einblend-Animation und das Kippen beim Überfahren (tilt) */ /* Überall: goldener Stempel und Lichtstreif über das Cover */ .picks > .pick:first-child .stamp { background: linear-gradient(135deg, #ffd36b, #f59e0b 55%, #ea6a12); color: #1d1206; box-shadow: 0 6px 22px rgb(245 158 11 / .55); } .picks > .pick:first-child .pick-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 236 180 / .55) 48%, rgb(255 255 255 / .75) 50%, transparent 68%); translate: -130% 0; animation: legendary-shine 1.1s cubic-bezier(.3, .6, .3, 1) calc(var(--d) + .9s) forwards; } @media (min-width: 641px) { .picks > .pick:first-child { order: 2; z-index: 1; } .picks > .pick:nth-child(2) { order: 1; } .picks > .pick:nth-child(3) { order: 3; } .picks > .pick:first-child { animation-delay: calc(var(--d) + .45s); } .picks > .pick:first-child .pick-cover { translate: 0 -.8rem; scale: 1.04; overflow: hidden; box-shadow: 0 0 0 2px #f5b942, 0 0 34px rgb(245 185 66 / .4), var(--shadow); animation: legendary-glow 3.2s ease-in-out calc(var(--d) + 1.6s) infinite; } } /* Handy (Karten untereinander, Platz 1 oben): die ganze Karte bekommt Goldrand und Leuchten */ @media (max-width: 640px) { .picks > .pick:first-child { border-color: #f5b942; box-shadow: 0 0 0 1px #f5b942, 0 0 26px rgb(245 185 66 / .3); } .picks > .pick:first-child .pick-cover { box-shadow: 0 0 0 1.5px #f5b942, var(--shadow); } } @keyframes legendary-shine { to { translate: 130% 0; } } /* „Legendary“ überall ab 80 % Match (helpers.php legendary(), app.js): goldener Stempel */ .match.is-legendary, .stamp.is-legendary { color: #1d1206; border: 0; background: linear-gradient(135deg, #ffd36b, #f59e0b 55%, #ea6a12); box-shadow: 0 6px 22px rgb(245 158 11 / .5); } /* Nur der Stempel wird golden: Goldrand und Leuchten um jedes Cover ab 80 % waren auf Seiten mit vielen guten Treffern zu viel. Den vollen Auftritt (Rand, Leuchten, Lichtstreif) hat nur der „Volltreffer“ (.picks erste Karte, Karussell) */ @keyframes legendary-glow { 50% { box-shadow: 0 0 0 2px #ffcf6b, 0 0 52px rgb(245 185 66 / .62), var(--shadow); } } @media (prefers-reduced-motion: reduce) { .picks > .pick:first-child .pick-cover, .picks > .pick:first-child .pick-cover::after { animation: none; } .picks > .pick:first-child .pick-cover::after { display: none; } } .pick h3 { font-size: 1.45rem; margin: 1rem 0 .35rem; } .pick h3 a { color: var(--text); } .pick h3 a:hover { color: var(--accent); text-decoration: none; } .pick blockquote { margin: 0; padding-left: .9rem; border-left: 3px solid var(--accent); color: var(--muted); font-size: .98rem; } .pick blockquote strong { color: var(--text); font-weight: 600; } /* „Schon gekauft“: Spieldauer und Koop als kleine Zeile über der Begründung (wie das Datum im Radar) */ .pick-extra { margin: 0 0 .35rem; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); } .loading { color: var(--muted); font-weight: 600; font-size: 1.1rem; } /* Startseite: So funktioniert's */ .how { border-top: 1px solid var(--border); padding: 4.5rem 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } .how b { display: block; font: 800 4.5rem/1 var(--display); color: var(--accent); letter-spacing: -.05em; margin-bottom: .6rem; } .how h3 { font-size: 1.35rem; margin: 0 0 .4rem; } .how p { color: var(--muted); margin: 0; } /* Auswahl-Chips (Ergebnisseite) */ .chips { display: contents; list-style: none; margin: 0; padding: 0; } .chips.static { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; } .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .95rem; font-weight: 500; } .chip a { color: var(--text); } .chip-remove { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 .1rem 0 .25rem; } .chip-remove:hover { color: var(--accent); } .select { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); } .select select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem; } .hint { color: var(--muted); font-size: .9rem; } /* Cover und Ersatz-Cover (Titel als Typo-Karte) */ .cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--surface-2); } .cover-placeholder { display: flex; align-items: flex-end; padding: .7rem; overflow: hidden; background: hsl(var(--hue) 32% 17%); color: #f2ede4; } .cover-placeholder span { font: 800 1.15rem/1.02 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; } .cover-placeholder .ph-initials { display: none; } .release .cover-placeholder { padding: 0; align-items: center; justify-content: center; } .release .cover-placeholder .ph-title { display: none; } .release .cover-placeholder .ph-initials { display: block; font-size: .85rem; } /* Match-Stempel */ .match, .stamp { flex: none; display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 6px; font: 800 1rem/1 var(--display); letter-spacing: -.02em; padding: .4rem .5rem .32rem; transform: rotate(4deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); } .stamp { font-size: 1.5rem; padding: .55rem .7rem .45rem; transform: rotate(8deg); } .stamp small { display: block; font: 600 .6rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; opacity: .85; } /* Ergebnisseite: Satz mit Cover-Fächer, Geschmack als Balken, bester Treffer groß, Rest als Cover-Raster */ .rs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2.5rem 0 1.5rem; } .rs-sentence { font: 800 clamp(1.8rem, 4.2vw, 3.1rem)/1.06 var(--display); letter-spacing: -.04em; margin: .3rem 0 1.1rem; } .rs-names a { color: var(--accent); } .rs-names a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; } .rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; } .rs-actions form { margin: 0; } .rs-intro > .hint { margin: .8rem 0 0; } .rs-fan { position: relative; width: calc(7rem + (var(--n) - 1) * 3.2rem); height: 11.5rem; } .rs-fan-item { position: absolute; top: .8rem; left: calc(var(--i) * 3.2rem); width: 7rem; transform-origin: 50% 130%; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)); } .rs-fan-item .cover { border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); } .rs-taste { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.3rem 1.2rem; margin: 0 0 1.6rem; } .rs-taste h2 { font: 700 .75rem/1 var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 1rem; } .rs-taste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .9rem 2rem; } .rs-taste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .4rem .5rem; font-size: .95rem; } .rs-taste-value { color: var(--muted); font-size: .8rem; } .rs-taste-short { display: none; } /* Handy: Merkmale als Chips statt fünf Balkenzeilen (spart rund 250 px, der erste Treffer kommt früher); „sehr stark“ ausgeprägte Merkmale mit Akzentrand, Stärke und Balken stehen in der Desktop-Ansicht */ @media (max-width: 640px) { .rs-taste { padding: .8rem .9rem; margin-bottom: 1.1rem; } .rs-taste h2 { margin-bottom: .6rem; } .rs-taste ul { display: flex; flex-wrap: wrap; gap: .35rem; } .rs-taste li { display: inline-flex; padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; background: var(--surface-2); border: 1px solid var(--border); } .rs-taste li.is-strong { border-color: var(--accent); font-weight: 600; } .rs-taste .rs-taste-value, .rs-taste .rs-bar { display: none; } /* Langer Name bleibt für Screenreader lesbar, sichtbar ist die Kurzform */ .rs-taste .rs-taste-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rs-taste .rs-taste-short { display: inline; } } /* Zielscheibe je Merkmal: setzt den Bereich als Schwerpunkt (results.php); gesetzt gefüllt in der Akzentfarbe */ .rs-taste li:has(.rs-taste-focus) { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } .rs-taste-focus { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: var(--muted); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s, transform .15s; } .rs-taste-focus:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.08); } .rs-taste-focus.is-active { color: #fff; background: var(--accent); border-color: var(--accent); } .rs-taste-focus .opt-icon { width: 14px; height: 14px; } @media (max-width: 640px) { .rs-taste li:has(.rs-taste-focus) { align-items: center; gap: .35rem; padding-right: .3rem; } .rs-taste-focus { width: 1.4rem; height: 1.4rem; } .rs-taste-focus .opt-icon { width: 12px; height: 12px; } } @media (pointer: coarse) { .rs-taste-focus { width: 2rem; height: 2rem; } } .rs-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .rs-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); } /* Feedback: technische Angaben (Formular und Admin) */ .feedback-context[hidden] { display: none; } .feedback-context details { margin: .3rem 0 0 1.9rem; } .feedback-tech { margin: .4rem 0 .6rem; } .feedback-tech dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .8rem; margin: .5rem 0; font-size: .85rem; } .feedback-tech dt { color: var(--muted); } .feedback-tech dd { margin: 0; overflow-wrap: anywhere; } .feedback-tech code { overflow-wrap: anywhere; } /* Admin: Seitenleiste unter Tabellen (admin/pager.php) */ .admin-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: .9rem 0 1.6rem; } .admin-pager[hidden], .admin-pager-nav[hidden] { display: none; } .admin-pager-nav { display: inline-flex; gap: .35rem; margin-left: auto; } .admin-pager-nav .button:disabled { opacity: .35; cursor: default; } .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem; margin: 2rem 0 3rem; } .pager-pos { color: var(--muted); font-size: .9rem; } /* Kurzfazit auf „Spiele wie …“ (10.11. neu): ein Block in voller Breite. Links Logo, „Kurzfazit“ und ein Satz, rechts je Fall aus SimilarSummary eine Mini-Karte. Ohne Fälle nur die Einordnung (dann eine Spalte) */ .sim-tldr { display: grid; gap: 1rem 1.6rem; align-items: center; margin: 1.6rem 0 1.4rem; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, var(--bg)); } .sim-tldr.has-picks { grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.6fr); } .sim-tldr-head { min-width: 0; } .sim-tldr-head h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .45rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .sim-tldr-head .say-avatar { width: 2.1rem; height: 2.1rem; } .sim-tldr-head .say-avatar svg { width: 1.2rem; height: 1.2rem; } .sim-tldr-head p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; } .sim-picks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .6rem; margin: 0; padding: 0; } /* Vier Fälle als 2 × 2 statt 3 + 1 */ .sim-picks:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sim-pick { display: flex; gap: .7rem; align-items: center; height: 100%; padding: .55rem .7rem .55rem .55rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .15s, transform .15s; } .sim-pick:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); transform: translateY(-1px); } .sim-pick-cover { flex: none; width: 2.7rem; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--surface-2); } .sim-pick-cover img, .sim-pick-cover .cover-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } /* Platzhalter-Cover sind für große Karten gebaut: im Mini-Cover nur die Initialen */ .sim-pick-cover .ph-title { display: none; } .sim-pick-cover .ph-initials { font-size: .8rem; } .sim-pick-text { display: grid; gap: .1rem; min-width: 0; line-height: 1.3; } .sim-pick-label { font-size: .74rem; font-weight: 700; color: var(--muted); } .sim-pick-title { font-size: .95rem; overflow-wrap: anywhere; } .sim-pick-meta { font-size: .78rem; color: var(--muted); } .sim-pick-meta b { color: var(--accent); white-space: nowrap; } @media (max-width: 860px) { .sim-tldr.has-picks { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .sim-tldr { margin: 1.2rem 0 1.1rem; padding: .9rem; border-radius: 14px; } .sim-picks { grid-template-columns: minmax(0, 1fr); gap: .45rem; } } /* Sprechblase von playalike: Logo-Zeichen links, Blase mit Spitze zum Logo (Einordnungen wie auf „Spiele wie …“) */ .say { display: flex; align-items: flex-end; gap: .75rem; max-width: 46rem; margin: 1.4rem 0 1.4rem; } .say-avatar { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .say-avatar svg { width: 1.45rem; height: 1.45rem; } /* Ruhig: kein Schatten, leiser Rand, damit die Blase nicht wie eine weitere Karte wirkt */ .say-bubble { --say-line: color-mix(in srgb, var(--text) 9%, transparent); position: relative; min-width: 0; margin: 0; padding: .8rem 1.05rem; border-radius: 18px 18px 18px 6px; border: 1px solid var(--say-line); background: color-mix(in srgb, var(--text) 3%, var(--bg)); color: color-mix(in srgb, var(--text) 80%, transparent); line-height: 1.55; } .say-bubble > p { margin: 0; } /* Spitze unten links zum Logo: ein gedrehtes Quadrat mit denselben Rändern */ .say-bubble::before { content: ""; position: absolute; left: -6px; bottom: 10px; width: 11px; height: 11px; background: color-mix(in srgb, var(--text) 3%, var(--bg)); border-left: 1px solid var(--say-line); border-bottom: 1px solid var(--say-line); transform: rotate(45deg); } /* „playalike in Zahlen“ (partials/stats-band.php): vier große Zahlen als Kacheln, darunter der Fun Fact des Tages */ .stats-band { margin-top: 3.2rem; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; } .stats-band.is-page .stats-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .stat { position: relative; overflow: hidden; display: grid; gap: .25rem; align-content: start; padding: 1.2rem 1.2rem 1.15rem; border-radius: 18px; border: 1px solid var(--border); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--surface); } .stat-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .45rem; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .stat-icon svg { width: 1.3rem; height: 1.3rem; } /* tabular-nums: beim Hochzählen springt die Breite nicht */ .stat-num { font: 800 clamp(1.9rem, 3.4vw, 2.7rem)/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); } .stat-label { font-weight: 700; color: var(--text); } .stat-note { font-size: .84rem; line-height: 1.4; color: var(--muted); } /* Fun Fact als breite Karte im Stil der Kacheln (gleicher Rand und Schimmer, Glühbirne links) */ .stats-fact { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 0; padding: .95rem 1.2rem; border-radius: 18px; border: 1px solid var(--border); background: radial-gradient(80% 220% at 0% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface); } .stats-fact .stat-icon { flex: none; margin: 0; } .stats-fact p { margin: 0; color: var(--text); font-weight: 600; line-height: 1.45; } .stats-fact-badge { display: inline-block; margin-right: .6rem; padding: .18rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; vertical-align: .12em; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); } /* Seite /zahlen */ .numbers-page { padding: 2.5rem 0 1rem; } .numbers-head { max-width: 46rem; margin-bottom: 1.6rem; } .numbers-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: .2rem 0 .6rem; } .numbers-page .stats-band { margin-top: 0; } .numbers-sub { margin: 2.6rem 0 .4rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .numbers-facts .say { margin: .9rem 0 0; } .numbers-cta { margin: 2.4rem 0 0; } /* Menüpunkte nie umbrechen („Zusammen spielen“ stand bei schmalem Fenster zweizeilig) */ .nav > a { white-space: nowrap; } /* Gruppen-Finder „Was spielen wir zusammen?“ (together.php, group.php, partials/group-*.php) */ .together-page, .group-page { padding: 2.4rem 0 1rem; } .together-head, .group-head { max-width: 46rem; margin-bottom: 1.6rem; } .together-head h1, .group-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: .2rem 0 .6rem; } .together-steps { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; } .together-steps li { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; } .together-steps b { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } /* Einstieg: Text links, Cover-Fächer rechts; darunter Formular und Beispiel-Vorschau nebeneinander */ .together-hero { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); align-items: center; gap: 2rem; margin-bottom: 1.6rem; } .together-hero .together-head { margin-bottom: 0; } .together-fan { position: relative; height: 15rem; } .together-fan-cover { position: absolute; top: 50%; left: 50%; width: 7.6rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; box-shadow: 0 22px 40px -18px rgb(0 0 0 / .8), 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); transform: translate(-50%, -50%) translateX(var(--x)) rotate(var(--r)); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .together-fan-cover:nth-child(1) { --x: -9.5rem; --r: -14deg; z-index: 1; } .together-fan-cover:nth-child(2) { --x: -4.8rem; --r: -7deg; z-index: 2; } .together-fan-cover:nth-child(3) { --x: 0rem; --r: 0deg; z-index: 3; width: 8.6rem; } .together-fan-cover:nth-child(4) { --x: 4.8rem; --r: 7deg; z-index: 2; } .together-fan-cover:nth-child(5) { --x: 9.5rem; --r: 14deg; z-index: 1; } .together-hero:hover .together-fan-cover { transform: translate(-50%, -50%) translateX(calc(var(--x) * 1.12)) rotate(calc(var(--r) * 1.2)); } .together-layout { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); gap: 2rem; align-items: start; } .together-aside { position: sticky; top: 5.5rem; display: grid; gap: 1.2rem; } .together-preview { padding: 1.1rem; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); background: color-mix(in srgb, var(--surface) 60%, transparent); } .together-preview-label { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .8rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .together-preview-label span { padding: .1rem .5rem; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); letter-spacing: 0; text-transform: none; font-weight: 700; } .together-preview-card { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .9rem; align-items: start; } .together-preview-cover { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; } .together-preview-card strong { display: block; margin-bottom: .55rem; font: 800 1.05rem/1.2 var(--display); } .together-preview-fit { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; } .together-preview-fit li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 2.6rem; align-items: center; gap: .5rem; } .together-preview-fit b { text-align: right; color: var(--accent); } .together-bar { height: .45rem; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .together-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--accent); } .together-facts { display: grid; gap: .9rem; margin: 0; padding: 0 .2rem; list-style: none; } .together-facts li { display: grid; gap: .15rem; padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); } .together-facts span { font-size: .88rem; color: var(--muted); } @media (max-width: 1000px) { .together-hero, .together-layout { grid-template-columns: minmax(0, 1fr); } .together-fan { display: none; } .together-aside { position: static; max-width: 46rem; } } .together-card, .group-join { max-width: 46rem; padding: 1.3rem; border-radius: 20px; border: 1px solid var(--border); background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), var(--surface); box-shadow: 0 24px 60px -30px rgb(0 0 0 / .6); } .group-form { display: grid; gap: 1.1rem; } .group-form .field input[type="search"] { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; width: 100%; } .group-form .field input:disabled { opacity: .5; } /* Rundenname und „Wie viele seid ihr?“ nebeneinander, am Handy untereinander */ .group-row { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 1.1rem 1rem; } @media (max-width: 640px) { .group-row { grid-template-columns: minmax(0, 1fr); } } /* Haken (öffentliche Runde, nur Bibliothek): Kästchen links, fetter Titel, kleine Erklärung darunter */ .group-check { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, transparent); } .group-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--accent); } .group-check span { display: grid; gap: .2rem; } .group-check small { color: var(--muted); font-size: .8rem; line-height: 1.4; } .group-check:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .group-check.is-locked { cursor: default; } .group-check.is-locked b { color: var(--muted); } .group-check small a { color: var(--accent); font-weight: 700; } /* Öffentliche Runde: Kontakte der anderen (nur für Mitglieder) und Hinweis zum Beitreten mit Steam oder Discord */ .group-contact { display: inline-flex; gap: .3rem; margin-left: .2rem; } .group-contact a { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 700; color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--text) 9%, transparent); } .group-contact a:hover, .group-contact a:focus-visible { background: color-mix(in srgb, var(--accent) 22%, transparent); } .group-contact svg, .group-contact .brand-icon { width: .85rem; height: .85rem; } .group-contact-hint { margin: -.6rem 0 1.4rem; font-size: .85rem; } .group-gate p { margin: 0 0 .5rem; } .group-gate-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem !important; } .group-check-inline { padding: .5rem .8rem; align-items: center; } .group-check-inline input { margin: 0; } /* Ergebnis-Ansicht: Spielweise, Genre, nur Bibliothek als ein Kasten mit drei gleich hohen Spalten und gleichen Überschriften (vorher drei verschieden gebaute Teile nebeneinander), am Handy untereinander */ .group-filters { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: .8rem 1.2rem; padding: 1rem 1.1rem; margin: 1rem 0 1.2rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .group-filters .group-mode { margin: 0; max-width: none; padding: 0; border: 0; background: none; box-shadow: none; } .group-filters .group-view { display: contents; } .group-view [hidden] { display: none; } .group-view-genre, .group-view-lib { display: grid; gap: .35rem; } .group-view-genre > span, .group-view-lib > span, .group-filters .more-options-legend { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--muted); } .group-view-genre select { width: 100%; height: 2.6rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 .7rem; } .group-filters .group-check-inline { height: 2.6rem; padding: 0 .8rem; border-radius: 10px; } .group-filters .group-check-inline b { font-size: .9rem; } .group-results > .empty { margin: 0; padding: 1rem 1.2rem; border: 1px dashed var(--border); border-radius: 14px; font-size: .95rem; } @media (max-width: 800px) { .group-filters { grid-template-columns: minmax(0, 1fr); } } /* „Offene Runden“ (partials/open-groups.php): Startseite und /zusammen */ .open-groups { margin: 2.4rem 0; } .open-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .9rem; } .open-group { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: .5rem .9rem; padding: .9rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; } .open-group:hover, .open-group:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .open-group-covers { grid-row: span 2; display: flex; } .open-group-cover { width: 2.9rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 7px; box-shadow: 0 0 0 2px var(--surface); } .open-group-cover + .open-group-cover { margin-left: -1.1rem; } .open-group-body { display: grid; gap: .3rem; min-width: 0; } .open-group-body b { font: 800 1rem/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .open-group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: .8rem; color: var(--muted); } .open-group-platforms { display: inline-flex; gap: .25rem; } .open-group-platforms svg, .open-group-platforms .brand-icon { width: .95rem; height: .95rem; } .open-group-genre { padding: .05rem .5rem; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); } .open-group-join { font-size: .85rem; font-weight: 800; color: var(--accent); } .open-groups-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: 18px; border: 1px solid var(--border); color: var(--text); text-decoration: none; background: radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface); } .open-groups-cta > span:first-child, .open-groups-cta-text { display: grid; gap: .25rem; } .open-groups-cta b { font: 800 1.2rem var(--display); } .open-groups-cta small { color: var(--muted); font-size: .9rem; } .group-public { display: inline-block; margin: 0 0 .8rem; padding: .25rem .7rem; border-radius: 99px; font-size: .82rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .group-error { margin: 0; padding: .7rem .9rem; border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--bad) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); } .group-platforms .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .group-platforms .platform > span { width: 100%; gap: .4rem; } .group-platforms .platform > span svg, .group-platforms .platform > span .brand-icon { width: 1.05rem; height: 1.05rem; flex: none; } /* Gewählte Spiele als kleine Cover-Kacheln mit Titel darunter und ✕ oben rechts */ .group-picked { display: grid; grid-template-columns: repeat(auto-fill, 6.2rem); gap: .7rem; } .group-picked:empty { display: none; } .group-chip { position: relative; display: grid; gap: .35rem; align-content: start; animation: options-in .22s cubic-bezier(.2, .8, .2, 1); } .group-chip-cover { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .7), 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); } .group-chip-cover.is-typo, .group-suggestion-cover.is-typo { display: grid; place-items: center; font: 800 1rem var(--display); color: var(--muted); background: color-mix(in srgb, var(--text) 8%, var(--surface)); } .group-chip-title { font-size: .78rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .group-chip button { position: absolute; top: -.45rem; right: -.45rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--bg); background: var(--text); box-shadow: 0 4px 12px rgb(0 0 0 / .4); } .group-chip button:hover, .group-chip button:focus-visible { background: var(--accent); color: #fff; } .group-search-wrap { position: relative; } /* Schnellauswahl „Beliebte Koop-Spiele“: wischbare Cover-Reihe; beim Ziehen leuchtet die Auswahl als Ablagefläche */ .group-quick { margin-top: .4rem; min-width: 0; } .group-quick[hidden] { display: none; } .group-quick-head { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; color: var(--muted); } /* Am PC ein Raster (alle Cover ganz sichtbar, nichts abgeschnitten); am Handy eine wischbare Reihe (siehe unten) */ .group-quick-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .9rem .6rem; padding-top: .3rem; } .group-quick-item { display: grid; gap: .3rem; align-content: start; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: grab; scroll-snap-align: start; transition: transform .15s; font: inherit; } .group-quick-item[hidden] { display: none; } .group-quick-item:hover, .group-quick-item:focus-visible { transform: translateY(-3px); } .group-quick-item:disabled { opacity: .4; cursor: default; transform: none; } .group-quick-item .group-chip-title { font-size: .72rem; } .group-form.is-dragging .group-picked, .group-form.is-dragging [data-group-search] { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 10px; } .group-form.is-dragging .group-picked:empty { display: block; min-height: 3rem; } .group-suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .3rem); margin: 0; padding: .3rem; list-style: none; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .6); } .group-suggestions[hidden] { display: none; } .group-suggestions button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .4rem .6rem; border: 0; border-radius: 8px; text-align: left; font: inherit; color: var(--text); background: none; cursor: pointer; } .group-suggestion-cover { flex: none; width: 2.1rem; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 5px; font-size: .7rem; } .group-suggestions button:hover, .group-suggestions button:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); } .group-submit { margin: 0; } .group-privacy { margin: 0; font-size: .8rem; } .group-share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; } .group-link { flex: 1 1 18rem; min-width: 0; padding: .6rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 600 .9rem var(--body); } .group-members { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; } .group-member { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .35rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; } .group-avatar { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--bg); background: var(--accent); font-weight: 800; } .group-member-platforms { display: inline-flex; gap: .25rem; color: var(--muted); } .group-member-platforms svg, .group-member-platforms .brand-icon { width: .95rem; height: .95rem; } .group-join { margin-bottom: 2rem; } /* Schon dabei (mit Konto): eigenen Eintrag ändern, darunter Verlassen und Auflösen (group.php) */ .group-own { margin-bottom: 1rem; } .group-own-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; } .group-member-you { color: var(--muted); font-weight: 500; } .group-join > summary { cursor: pointer; font: 800 1.1rem var(--display); list-style: none; } .group-join > summary::-webkit-details-marker { display: none; } .group-join > summary::before { content: "+ "; color: var(--accent); } .group-join[open] > summary { margin-bottom: 1rem; } .group-join[open] > summary::before { content: "– "; } .group-results h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 .6rem; } .group-mode { max-width: 34rem; margin: 1rem 0 .4rem; } .group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; margin-top: 1rem; } .group-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); } .group-cover { position: relative; align-self: start; } .group-cover .cover { width: 100%; height: auto; border-radius: 10px; display: block; } .group-cover .stamp { position: absolute; top: -.5rem; right: -.6rem; } .group-body h3 { margin: 0 0 .35rem; font-size: 1.15rem; } .group-rank { color: var(--muted); font-weight: 800; margin-right: .2rem; } .group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0 0 .6rem; font-size: .85rem; color: var(--muted); } .group-players { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--text); } .group-players .opt-icon { width: 1rem; height: 1rem; } .group-players.is-unknown { color: var(--muted); font-weight: 600; cursor: help; } .group-fit { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; } .group-fit li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; } .group-match { font-weight: 800; color: var(--accent); } .group-why { color: var(--muted); } @media (max-width: 640px) { .together-card, .group-join { padding: 1rem; border-radius: 16px; } .group-platforms .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .group-card { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .8rem; padding: .85rem; } /* Schnellauswahl als Wischreihe; Luft oben, damit das Anheben beim Antippen nicht abgeschnitten wird */ .group-quick-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 5.2rem; overflow-x: auto; padding: .5rem .1rem .7rem; scroll-snap-type: x proximity; scrollbar-width: none; } /* Match-Abzeichen kleiner, sonst deckte es das schmale Cover fast ganz zu */ .group-cover .stamp { transform: scale(.72); transform-origin: top right; } } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .stats-band { margin-top: 2.4rem; } .stats-grid, .stats-band.is-page .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .stat { padding: .9rem .85rem; border-radius: 14px; } .stat-icon { width: 2rem; height: 2rem; margin-bottom: .25rem; border-radius: 9px; } .stat-icon svg { width: 1.1rem; height: 1.1rem; } .stat-note { display: none; } .stats-fact { align-items: flex-start; gap: .75rem; margin-top: .55rem; padding: .85rem .9rem; border-radius: 14px; } .stats-fact p { font-size: .92rem; } .stats-fact-badge { display: table; margin: 0 0 .35rem; } } @media (max-width: 640px) { .say { gap: .55rem; } .say-avatar { width: 2.1rem; height: 2.1rem; } .say-avatar svg { width: 1.2rem; height: 1.2rem; } .say-bubble { padding: .75rem .9rem; font-size: .92rem; } } .rs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; } /* Sortieren und „Mehr Treffer zeigen“ (results.php, F2). Bricht am Handy um, statt seitlich zu wischen: Sonst lag der gewählte Chip („Günstigste zuerst“) rechts außerhalb des Bildes */ .rs-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; flex-basis: 100%; order: 3; padding: .1rem 0; } .rs-sort-label { color: var(--muted); font-size: .85rem; font-weight: 600; margin-right: .2rem; white-space: nowrap; } .rs-sort .option-chip { white-space: nowrap; flex: none; } .rs-sort .option-chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); } .rs-sort .option-chip:hover { text-decoration: none; border-color: var(--text); } .rs-anchor { grid-column: 1 / -1; height: 0; scroll-margin-top: 6rem; } .rs-more { display: flex; justify-content: center; margin: -1rem 0 2.5rem; } .rs-count { margin: 0; font-weight: 700; color: var(--muted); } .rs-top { margin-top: 0; } /* .card.card-top statt .card-top: Die allgemeine .card-Regel weiter unten (130px) gewann sonst, das Cover des besten Treffers war kleiner als die Kacheln darunter. Jetzt so breit wie eine Kachel (~210 px) und damit etwa so hoch wie die Box */ .card.card-top { grid-template-columns: 210px minmax(0, 1fr); padding: 1.3rem; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 55%); } .card-top .card-head h3 { font-size: clamp(1.5rem, 3vw, 2rem); } .card-top .card-head .match { font-size: 1.25rem; padding: .45rem .6rem .35rem; } .card-top-label { margin: 0 0 .25rem; } /* .reasons.reason-chips: schlägt die spätere .reasons-Regel mit rotem Strich links */ /* Merkmale als ruhige Magazin-Liste: Häkchen in Akzentfarbe, Text ohne Rahmen und Hintergrund (die runden Pillen wirkten beliebig und machten die Karten unruhig) */ .reasons.reason-chips { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; border-left: 0; padding-left: 0; margin: .35rem 0 .9rem; } .reason-chips li { color: var(--text); font-size: .92rem; font-weight: 500; padding: 0; border: 0; background: none; } .reason-chips li::before { content: "✓"; margin-right: .4rem; color: var(--accent); font-weight: 800; } .rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(45%, 11.5rem), 1fr)); gap: 1.6rem 1.1rem; margin: 1.6rem 0 2.5rem; } .rs-tile { position: relative; display: grid; gap: .35rem; align-content: start; transition: opacity .2s; } .rs-tile-cover { position: relative; display: block; transition: transform .2s; } .rs-tile-cover .cover { border-radius: 10px; box-shadow: var(--shadow); } .rs-tile:hover .rs-tile-cover { transform: translateY(-4px); } .rs-tile-cover .match { position: absolute; top: -.5rem; right: -.4rem; } .rs-tile h3 { margin: .35rem 0 0; font-size: 1.05rem; line-height: 1.2; } .rs-tile h3 a { color: var(--text); } .rs-tile h3 a:hover { color: var(--accent); text-decoration: none; } .rs-tile-why { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.35; } .rs-tile-why strong { color: var(--text); font-weight: 600; } /* Preis beim Titel (Kacheln, Treffer der Startseite, bester Treffer); Rabatt als grünes Schild */ .price-line, .pick-price { margin: 0; font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--text); } .price-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; } /* Bewertung darf umbrechen: Mit „Sehr positiv, 1.227.784 Reviews auf Steam“ war die Zeile am Handy breiter als der Bildschirm und schob die ganze Seite seitlich. Ebenso darf die Preiszeile nie breiter werden als ihr Platz */ .review-detail { white-space: normal; } .price-line { max-width: 100%; min-width: 0; } .price-line > * { min-width: 0; } /* Dieselben Schilder wie auf den Covern (.cf-price, .cf-rating, .cf-deck), nur in der Zeile statt auf dem Bild: Preis weiß mit grünem Rabatt, Bewertung blau (positiv), beige (ausgeglichen) oder rot (negativ) mit Daumen, Deck weiß */ .price-line .review-score { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .5rem; border-radius: 5px; font: 800 .85rem/1.1 var(--display); color: #fff; background: #8a7a5a; white-space: nowrap; } .price-line .review-score::before { content: ""; width: .85em; height: .85em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21h9.3a2 2 0 0 0 2-1.6l1.6-7A2 2 0 0 0 19 10h-5.2l.8-4.1A2 2 0 0 0 12.7 3.5L8 9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21h9.3a2 2 0 0 0 2-1.6l1.6-7A2 2 0 0 0 19 10h-5.2l.8-4.1A2 2 0 0 0 12.7 3.5L8 9z'/%3E%3C/svg%3E") center / contain no-repeat; } .price-line .review-score.is-good { background: #1a8fe0; } .price-line .review-score.is-bad { background: #b0412a; } .review-detail { font-weight: 500; font-size: .78rem; color: var(--muted); } .price-line .price-now { display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 5px; border: 1px solid var(--border); font: 800 .85rem/1.1 var(--display); color: #111; background: #fff; white-space: nowrap; } .price-line .price-now > * { display: flex; align-items: center; } .price-line .price-now { padding-right: .5rem; gap: .4rem; } .price-line .price-now:not(:has(b)) { padding-left: .5rem; } /* Rabatt wie auf den Cover-Schildern im Steam-Stil: grünes Feld, alter Preis durchgestrichen */ .price-line b, .pick-price b { display: inline-block; padding: .15rem .38rem; border-radius: 4px; font-size: .8rem; font-weight: 800; color: #beee11; background: #4c6b22; } .price-line .price-now b { border-radius: 0; padding: .22rem .42rem; } .price-line s { color: #6b7076; font-weight: 600; font-size: .85em; } .price-line .price-now .price-ends { color: #4c6b22; } /* Handy: Preisschild in einer Zeile. Der alte Preis entfällt (wie auf den Cover-Schildern); wird es trotzdem zu eng (hoher Preis, „noch 12 Tage“), kürzt sich nur die Restlaufzeit mit „…“, nie der Preis */ @media (max-width: 640px) { .price-line .price-now { flex-wrap: nowrap; } .price-line .price-now s { display: none; } .price-line .price-now .price-ends { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; } } /* Steam-Deck-Einstufung: Logo und Status-Symbol zusammen auf einem hellen Schild wie .cf-deck auf den Covern; Text nur im Tooltip */ .deck-badge { display: inline-flex; align-items: center; gap: .2rem; padding: .22rem .38rem; border-radius: 5px; cursor: help; color: #171a21; background: #fff; border: 1px solid var(--border); white-space: nowrap; } .price-now { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; } /* Restlaufzeit des Angebots, z. B. „noch 3 Tage“ */ .price-ends { font-size: .78em; font-weight: 600; color: #beee11; } :root[data-theme="light"] .price-ends { color: #4c6b22; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .price-ends { color: #4c6b22; } } /* Auf dem Cover wie im Steam-Shop: Preis unten links (Rabatt als grünes Feld, alter Preis durchgestrichen), Bewertung als „81 % positiv“ mit Daumen bündig links darüber, damit sie nicht mit dem Match verwechselt wird. Immer an derselben Stelle, mit und ohne Rabatt: Sonst springt die Bewertung in einer Reihe von rechts nach links */ .cf-price, .cf-rating { position: absolute; bottom: .7rem; z-index: 1; display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 6px; font: 800 1.1rem/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } .cf-price { left: .7rem; } /* Preis als helles Schild (hebt sich von jedem Cover ab), Rabatt davor im Steam-Grün */ .cf-price b { display: flex; align-items: center; padding: .45rem .5rem; color: #beee11; background: #4c6b22; } .cf-amount { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; color: #111; background: #fff; } .cf-amount s { color: #6b7076; font-weight: 600; font-size: .8em; } /* Bewertung als farbiges Schild in Steams Farben: positiv blau, ausgeglichen beige, negativ rot */ .cf-rating { left: .7rem; align-items: center; gap: .35rem; padding: .45rem .6rem; color: #fff; background: #8a7a5a; } .cf-rating::before { content: ""; width: .85em; height: .85em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21h9.3a2 2 0 0 0 2-1.6l1.6-7A2 2 0 0 0 19 10h-5.2l.8-4.1A2 2 0 0 0 12.7 3.5L8 9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21h9.3a2 2 0 0 0 2-1.6l1.6-7A2 2 0 0 0 19 10h-5.2l.8-4.1A2 2 0 0 0 12.7 3.5L8 9z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Mit Preis: Bewertung darüber; ohne Preis bleibt sie unten */ .pick-cover:has(.cf-price) .cf-rating { bottom: 3.05rem; } /* Steam Deck unten rechts: Deck-Logo, dahinter grüner Haken (verifiziert) oder gelbes i (spielbar), auf hellem Schild wie der Preis, damit das dunkle Logo auf jedem Cover lesbar ist (steam_deck_icons in helpers.php) */ .cf-deck { position: absolute; right: .7rem; bottom: .7rem; z-index: 1; display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .42rem; border-radius: 6px; color: #171a21; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } .cf-deck svg { width: 1.15rem; height: 1.15rem; display: block; } .rs-tile .cf-deck { right: .5rem; bottom: .5rem; padding: .24rem .32rem; gap: .2rem; border-radius: 5px; } .rs-tile .cf-deck svg { width: .95rem; height: .95rem; } /* Überall gleich wie im Plattform-Badge (.pf-deck): Logo hell auf dunklem Glas statt weißem Schild, Status als kleiner Punkt unten rechts am Logo. !important bei der Größe, weil die Kachel-Regeln (svg) sonst den Punkt mit aufblasen */ .cf-deck { gap: 0; padding-right: .5rem; color: #fff; background: rgb(16 14 12 / .72); border: 1px solid rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .cf-deck .deck-status { position: absolute; right: .14rem; bottom: .12rem; width: .5rem !important; height: .5rem !important; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(16 14 12); } /* In der Textzeile (game-facts): Logo und Status vor dem Text */ .deck-badge svg { width: 1.1em; height: 1.1em; flex: none; display: block; } .cf-rating.is-good { background: #1a8fe0; } .cf-rating.is-bad { background: #b0412a; } /* Kacheln: kleiner; die Markier-Knöpfe sitzen dort oben links (siehe .rs-tile .marks) */ .rs-tile .cf-price, .rs-tile .cf-rating { bottom: .5rem; font-size: .85rem; border-radius: 5px; } .rs-tile .cf-price, .rs-tile .cf-rating { left: .5rem; } /* Wie oben: Bewertung immer bündig links über dem Preis */ .rs-tile-cover:has(.cf-price) .cf-rating { bottom: 2.3rem; } .rs-tile .cf-price b, .rs-tile .cf-amount, .rs-tile .cf-rating { padding: .32rem .42rem; } @media (max-width: 640px) { /* Schmale Kacheln: Bewertung über dem Preis, beide links; alter Preis entfällt */ .rs-tile .cf-price, .rs-tile .cf-rating { font-size: .78rem; left: .45rem; bottom: .45rem; } .rs-tile .rs-tile-cover .cf-rating { right: auto; } .rs-tile .rs-tile-cover:has(.cf-price) .cf-rating { bottom: 2.05rem; } /* Schmale Kacheln: Deck unten rechts (die Kapsel ist hier eingeklappt, rechts ist Platz), nur zwei Stufen links */ .rs-tile .rs-tile-cover .cf-deck { right: .45rem; left: auto; bottom: .45rem; padding: .2rem .26rem; } .rs-tile .rs-tile-cover .cf-deck svg { width: .82rem; height: .82rem; } .rs-tile .cf-amount s { display: none; } /* Bewertung nur „👍 87 %“, das Wort „positiv“ steht im Tooltip */ .rs-tile .cf-rating-word { display: none; } } /* „Mehr Optionen“: seltener genutzte Filter (Preis, gleiche Reihe, Bibliothek) aufklappbar */ /* min-width: 0 wie bei .platforms: sonst wird das Menü so breit wie die längste wischbare Reihe darin und die Seite scrollt quer */ .more-options { flex-basis: 100%; min-width: 0; } /* Gäste: Auswahl als Vorlieben merken (home.php data-guest-prefs), unter den Filtern über die ganze Breite */ .guest-prefs { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .2rem 0 0; font-size: .88rem; } .guest-prefs[hidden] { display: none; } .guest-prefs .hint { margin: 0; } .guest-prefs strong { color: var(--text); } /* Als Knopf mit Filter-Symbol, damit es neben den Plattform-Pillen nicht untergeht */ .more-options > summary { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; padding: .45rem .95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; } .more-options > summary::-webkit-details-marker { display: none; } .more-options > summary::before { content: ""; width: 1rem; height: 1rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat; } .more-options > summary::after { content: "▾"; font-size: .8em; color: var(--muted); transition: transform .2s; } .more-options[open] > summary::after { transform: rotate(180deg); } .more-options > summary:hover { border-color: var(--accent); } /* Einmaliger Hinweis beim ersten Treffer-Laden: dreimal ein weicher Ring in Akzentfarbe, danach Ruhe */ .more-options > summary.is-nudged { animation: options-nudge 1.4s ease-out .9s 3; } @keyframes options-nudge { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); border-color: var(--accent); } 70% { box-shadow: 0 0 0 .7rem transparent; border-color: var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } } .more-options-count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px; font-size: .75rem; font-weight: 800; color: var(--accent-ink); background: var(--accent); } .more-options-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: .7rem; min-width: 0; } .more-options-legend { color: var(--muted); font-size: .9rem; width: 6.8rem; flex: none; } .option-chip { padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .9rem; } .option-chip:hover { border-color: var(--accent); text-decoration: none; } .option-chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); } .more-options-note { margin: 0; font-size: .8rem; } /* Optionen als Panel: jede Gruppe eine eigene Karte (.opt-group) mit Segment-Schalter (.seg) statt loser Pillen. Startseite (Formular, label.platform) und Ergebnisseite (Links, a.option-chip) teilen sich das Aussehen */ .more-options[open] > summary { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .more-options-body:has(> .opt-group) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .75rem; margin-top: .85rem; padding: .9rem; border: 1px solid var(--border); border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), var(--surface); box-shadow: 0 24px 60px -28px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .05); } .more-options[open] > .more-options-body:has(> .opt-group) { animation: options-in .28s cubic-bezier(.2, .8, .2, 1); } @keyframes options-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } } .more-options-body > .more-options-note { grid-column: 1 / -1; padding: 0 .2rem; } /* Viele Optionen (Preis): doppelt breit, sonst bricht der Schalter in zwei Zeilen um */ @media (min-width: 900px) { .more-options-body > .opt-group.is-wide { grid-column: span 2; } } .opt-group { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .55rem; padding: .75rem .8rem .8rem; border-radius: 14px; background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } /* float: left macht die legend zu einem normalen Element (sonst sitzt sie auf der Rahmenlinie des fieldset) */ .opt-group > legend, .opt-group > .more-options-legend { float: left; width: auto; margin: 0; padding: 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 65%, transparent); box-shadow: inset 0 1px 3px rgb(0 0 0 / .22); } .seg > .platform, .seg > .option-chip { flex: 1 1 auto; } /* label als Flex: Die Leerzeichen um das unsichtbare input im HTML machten sonst eine zweite, leere Textzeile (Knopf doppelt so hoch) */ .seg > .platform { display: flex; } /* width: 100% nur für die Pille im label (das label ist das Flex-Element); die Links der Ergebnisseite sind es selbst */ .seg .platform > span { width: 100%; } .seg .platform > span, .seg > .option-chip { display: flex; justify-content: center; align-items: center; padding: .45rem .7rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: .86rem; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; } .seg .platform:hover > span, .seg > .option-chip:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); text-decoration: none; } .seg .platform input:checked + span, .seg > .option-chip.is-active { color: var(--bg); background: var(--text); box-shadow: 0 6px 16px -6px rgb(0 0 0 / .6), 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); } /* Symbole im Panel (helpers.php opt_icon): an der Gruppen-Überschrift in Akzentfarbe, in den Optionen in Textfarbe */ .opt-group > legend, .opt-group > .more-options-legend, .pf-grid > legend { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; } /* Die alte Spaltenbreite der Filter-Überschriften (6.8rem) gilt hier nicht */ .live-filters .opt-group > legend, .rs-toolbar .opt-group > .more-options-legend { width: auto; } /* flex: none und content-box: sonst drückte die schmale Überschrift das Symbol zusammen */ .opt-group > legend .opt-icon, .opt-group > .more-options-legend .opt-icon, .pf-grid > legend .opt-icon { flex: none; box-sizing: content-box; width: 1rem; height: 1rem; padding: .3rem; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .seg .opt-icon { width: .95rem; height: .95rem; margin-right: .35rem; flex: none; } /* Plattformen als Kacheln: Logo groß, Name darunter, gewählt mit Leuchten in der Markenfarbe (--pf) und Haken */ .live-filters > .pf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; } /* Ein Panel für Plattformen und „Mehr Optionen“: Der Knopf sitzt unten hinter einer feinen Linie, die Optionen klappen im selben Panel auf (ohne eigenen Rahmen, sonst Kasten im Kasten) */ .live-filters.filter-panel { margin-top: 2rem; padding: .9rem; gap: .8rem; border: 1px solid var(--border); border-radius: 20px; background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), var(--surface); box-shadow: 0 24px 60px -30px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .05); } .filter-panel > .more-options { padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .filter-panel > .more-options > .more-options-body:has(> .opt-group) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .live-filters > .pf-grid > legend { float: left; grid-column: 1 / -1; width: auto; margin: 0 0 .1rem; padding: 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .pf-grid .platform { --pf: var(--text); display: block; } .pf-grid .pf-pc { --pf: #8fa3bf; } .pf-grid .pf-playstation { --pf: #2f6bff; } .pf-grid .pf-xbox { --pf: #3fbf4f; } .pf-grid .pf-switch { --pf: #ff4554; } .pf-grid .platform-deck { --pf: #8a6bff; } .pf-grid .platform > span { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; height: 100%; padding: .9rem .4rem .75rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center; transition: transform .18s, border-color .2s, background .2s, color .2s, box-shadow .25s; } .pf-grid .platform > span .brand-icon, .pf-grid .platform > span > svg, .pf-grid .platform > span .deck-logo { width: 28px; height: 28px; color: var(--text); opacity: .75; transition: opacity .2s, transform .2s; } .pf-grid .platform:hover > span { transform: translateY(-2px); color: var(--text); border-color: color-mix(in srgb, var(--pf) 55%, transparent); } .pf-grid .platform:hover > span :is(.brand-icon, svg) { opacity: 1; } .pf-grid .platform input:checked + span { color: var(--text); border-color: var(--pf); background: linear-gradient(160deg, color-mix(in srgb, var(--pf) 26%, transparent), color-mix(in srgb, var(--pf) 6%, transparent)); box-shadow: 0 12px 28px -14px var(--pf), inset 0 1px 0 rgb(255 255 255 / .08); } .pf-grid .platform input:checked + span :is(.brand-icon, svg) { opacity: 1; transform: scale(1.08); } /* Haken oben rechts an gewählten Kacheln */ .pf-grid .platform > span::after { content: "✓"; position: absolute; top: .4rem; right: .4rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .65rem; font-weight: 900; color: #fff; background: var(--pf); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; } .pf-grid .pf-all > span::after { color: var(--bg); } .pf-grid .platform input:checked + span::after { opacity: 1; transform: none; } /* Name unter dem Logo auch auf dem Handy (dort sonst nur Logos) */ .live-filters .pf-grid .platform-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; line-height: 1.15; } @media (max-width: 640px) { .live-filters > .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; } .live-filters.filter-panel { padding: .7rem; border-radius: 16px; margin-top: 1.4rem; } /* .platforms mit: die Handy-Regeln für die alte Pillen-Reihe stehen weiter unten und hätten sonst Vorrang */ .live-filters > .pf-grid.platforms > legend { float: left; margin: 0 0 .1rem; } .live-filters .opt-group.platforms > legend { float: left; margin: 0; } /* nowrap: Die alte Handy-Regel für .platforms (wrap) streckte die Schalter sonst auf doppelte Höhe */ .live-filters .opt-group.platforms { flex-wrap: nowrap; } /* Segment-Schalter als gleichmäßiges Raster statt unruhig umbrechender Reihe */ .seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); align-content: start; } /* Lange Texte („Noch nicht gekauft“) brechen im Knopf um, statt in den Nachbarn zu laufen (schmale Handys, große Schrift) */ .live-filters .seg .platform > span, .seg > .option-chip { white-space: normal; text-align: center; line-height: 1.2; padding: .45rem .45rem; min-width: 0; } .seg > .platform { min-width: 0; } /* Symbol über dem Text, sonst blieb für „Einzelspieler“ zu wenig Breite */ .live-filters .seg .platform > span:has(.opt-icon), .seg > .option-chip:has(.opt-icon) { flex-direction: column; gap: .2rem; } .seg .opt-icon { margin: 0; } .more-options-body:has(> .opt-group) { padding: .7rem; gap: .6rem; border-radius: 16px; } .live-filters .pf-grid .platform > span { padding: .7rem .3rem .6rem; font-size: .74rem; gap: .4rem; white-space: normal; } .pf-grid .platform > span .brand-icon, .pf-grid .platform > span > svg, .pf-grid .platform > span .deck-logo { width: 24px; height: 24px; } } /* Teilen (partials/share-button.php, shareButton in app.js) */ .share-button { display: inline-flex; align-items: center; gap: .4rem; } .share-button.is-copied { color: #3fbf7f; border-color: #3fbf7f; } .live-head .share-button { margin-left: auto; flex: none; } /* Jede Kachel gleich gebaut: Titel immer zwei Zeilen hoch, „Weil du …“ und Tag je eine Zeile, damit die Reihen ruhig fluchten */ .rs-tile h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .rs-tile-why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wichtigstes Merkmal der Kachel: wie die Merkmal-Liste mit Häkchen, ohne Pille */ .rs-tile-tag { justify-self: start; max-width: 100%; margin: .15rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 600; line-height: 1.2; color: color-mix(in srgb, var(--text) 85%, transparent); } .rs-tile-tag::before { content: "✓"; margin-right: .3rem; color: var(--accent); font-weight: 800; } /* Mit Schwerpunkt (Aspects): „Kampf wie Elden Ring“ statt „Weil du …“ und Tag, je Zeile ein Bereich mit Häkchen */ .rs-tile-aspects { list-style: none; display: grid; gap: .15rem; margin: 0; padding: 0; min-width: 0; } .rs-tile-aspects li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 700; line-height: 1.3; } .rs-tile-aspects li::before { content: "✓"; margin-right: .3rem; color: var(--accent); font-weight: 800; } /* Schwerpunkt und Mischpult (partials/focus-bar, 11.11.2026): Chips als Links, aktive gefüllt in der Akzentfarbe */ /* Eigener Name tune-bar: „focus“ ist schon die Klasse der Cover-Wand im Kopf der Startseite (.wall.focus, app.js). Mit Regeln unter diesem Namen rutschte die Wand beim Auswählen in den Seitenfluss und schob alles 1.000 px nach unten (11.11.) */ .tune-bar { margin: 0 0 1.4rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); } .tune-bar.is-active { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* Sprung von der Startseite (#schwerpunkt, #mischpult): nicht unter der festen Kopfleiste landen */ .tune-bar, .focus-mixer { scroll-margin-top: 6rem; } /* Umschalten ohne Neuladen (app.js): solange die neuen Treffer laden, treten die alten zurück; der geklickte Knopf pulsiert */ main.is-tuning :is(.rs-top, .rs-grid, .results, .rs-toolbar, .sim-tldr) { opacity: .45; transition: opacity .2s; pointer-events: none; } .is-pending { animation: tune-pending .8s ease-in-out infinite; } @keyframes tune-pending { 50% { opacity: .55; transform: scale(.97); } } @media (prefers-reduced-motion: reduce) { .is-pending { animation: none; opacity: .6; } } /* Startseite: Karte „Treffer feinjustieren“ unter den drei Treffern (home.php template data-tune-card, app.js show). Equalizer links (pulsiert sanft), Text mit Bereichs-Symbolen als Links, Knopf rechts; am Handy untereinander */ .live-tune { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.4rem; align-items: center; margin: 1.4rem 0 0; padding: 1.1rem 1.3rem; border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--surface); } .live-tune-eq { display: flex; align-items: flex-end; gap: 5px; height: 3.2rem; } .live-tune-eq i { width: 9px; height: 100%; border-radius: 5px; background: var(--accent); transform-origin: bottom; animation: tune-eq 2.4s ease-in-out infinite; } .live-tune-eq i:nth-child(2) { animation-delay: -.6s; opacity: .55; } .live-tune-eq i:nth-child(3) { animation-delay: -1.2s; } .live-tune-eq i:nth-child(4) { animation-delay: -1.8s; opacity: .55; } .live-tune-eq i:nth-child(5) { animation-delay: -.9s; opacity: .8; } @keyframes tune-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } .live-tune-title { margin: 0; font-family: var(--display, inherit); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; } .live-tune-new { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; vertical-align: .15em; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); } .live-tune-hint { margin: .2rem 0 .6rem; color: var(--muted); font-size: .9rem; } .live-tune-aspects { display: flex; flex-wrap: wrap; gap: .35rem; } .live-tune-aspects a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem .3rem .45rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .8rem; font-weight: 700; transition: border-color .15s, transform .15s; } .live-tune-aspects a:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); } .live-tune-aspects .opt-icon { width: 15px; height: 15px; color: var(--accent); } .live-tune-open { white-space: nowrap; } @media (max-width: 760px) { .live-tune { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; } .live-tune-eq { height: 2.4rem; } .live-tune-eq i { width: 7px; } .live-tune-open { grid-column: 1 / -1; justify-self: stretch; text-align: center; } } @media (prefers-reduced-motion: reduce) { .live-tune-eq i { animation: none; transform: scaleY(.7); } } .tune-bar { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), var(--surface); } .focus-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; margin: 0 0 .85rem; } .focus-head h2 { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.15rem; letter-spacing: -.01em; } .focus-head .hint { margin: 0; font-size: .84rem; } /* Kleiner Equalizer vor der Überschrift, wie auf der Karte der Startseite */ .focus-head-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.1rem; } .focus-head-eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; animation: tune-eq 2.4s ease-in-out infinite; } .focus-head-eq i:nth-child(2) { animation-delay: -.8s; opacity: .6; } .focus-head-eq i:nth-child(3) { animation-delay: -1.6s; } .focus-reset { margin-left: auto; font-size: .84rem; font-weight: 700; } /* Grenze sichtbar: Zähler „2 von 3“ (voll in der Akzentfarbe), „ersetzt Welt“ beim Überfahren, Hinweis nach dem Tausch */ .tune-count { padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 800; color: var(--muted); border: 1px solid var(--border); } .tune-count.is-full { color: #fff; background: var(--accent); border-color: var(--accent); } .focus-tile[data-replaces]::after, .mixer-cell[data-replaces]::after { content: attr(data-replaces); position: absolute; left: 50%; bottom: calc(100% + .35rem); z-index: 3; transform: translate(-50%, .2rem); padding: .2rem .5rem; border-radius: 6px; white-space: nowrap; pointer-events: none; font-size: .72rem; font-weight: 800; color: #fff; background: var(--accent); opacity: 0; transition: opacity .15s, transform .15s; } .focus-tile[data-replaces]:is(:hover, :focus-visible)::after, .mixer-cell[data-replaces]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); } .mixer-cell { position: relative; } .tune-swap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: .8rem 0 0; padding: .55rem .8rem; border-radius: 10px; font-size: .86rem; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); animation: tune-swap-in .3s ease-out; } .tune-swap a { font-weight: 800; } @keyframes tune-swap-in { from { opacity: 0; transform: translateY(-.3rem); } } @media (prefers-reduced-motion: reduce) { .tune-swap { animation: none; } } /* Bereiche als Kacheln: großes Symbol, Name; gewählt leuchtend mit „×3“, bei Herkunft das Cover des Spiels in der Ecke */ .focus-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; } .focus-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: .35rem; min-height: 5.6rem; padding: .7rem .4rem .6rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text); text-align: center; transition: transform .15s, border-color .15s, box-shadow .2s, background .2s; } .focus-tile:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); } .focus-tile-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transition: background .2s, color .2s; } .focus-tile-icon .opt-icon { width: 22px; height: 22px; } .focus-tile-label { font-size: .86rem; font-weight: 800; line-height: 1.15; } .focus-tile.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent); } .focus-tile.is-active .focus-tile-icon { color: #fff; background: var(--accent); } .focus-tile-badge { position: absolute; top: .35rem; right: .4rem; padding: .05rem .35rem; border-radius: 999px; font-size: .66rem; font-weight: 900; color: #fff; background: var(--accent); } .focus-tile-from { position: absolute; top: .3rem; left: .35rem; width: 1.35rem; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 2px var(--c, var(--accent)); } .focus-tile-from img, .focus-tile-from .cover-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } .focus-tile-from .ph-title { display: none; } .focus-tile-from .ph-initials { font-size: .5rem; } .focus-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-size: .9rem; font-weight: 600; white-space: nowrap; transition: border-color .15s, background .15s; } .focus-chip:hover { border-color: var(--accent); text-decoration: none; } .focus-chip .opt-icon { flex: none; width: 15px; height: 15px; color: var(--accent); } .focus-chip.is-active { color: #fff; background: var(--accent); border-color: var(--accent); } .focus-chip.is-active .opt-icon { color: currentColor; } .focus-chip.is-small { padding: .25rem .6rem; font-size: .8rem; } /* Genre-Fokus: Genres der eigenen Spiele vorn, die übrigen aufklappbar dahinter */ .focus-genres { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .7rem 0 0; } .focus-genres-label { margin-right: .2rem; font-size: .85rem; font-weight: 700; color: var(--muted); } .focus-genre-more summary { cursor: pointer; list-style: none; color: var(--muted); border-style: dashed; } .focus-genre-more summary::-webkit-details-marker { display: none; } .focus-genre-more summary::after { content: "▸"; margin-left: .1rem; transition: transform .2s; } .focus-genre-more[open] { flex-basis: 100%; } .focus-genre-more[open] summary { margin-bottom: .35rem; } .focus-genre-more[open] summary::after { transform: rotate(90deg); } .focus-genre-list { display: flex; flex-wrap: wrap; gap: .3rem; } .focus-mixer { margin: .85rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--border); } .focus-mixer summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; cursor: pointer; list-style: none; } .focus-mixer summary::-webkit-details-marker { display: none; } .focus-mixer summary::before { content: "▸"; color: var(--accent); transition: transform .2s; } .focus-mixer[open] summary::before { transform: rotate(90deg); } .focus-mixer-title { font-weight: 800; } .focus-mixer summary .hint { margin: 0; font-size: .84rem; } /* Mischpult als Raster: Spalten = Lieblingsspiele (je eine Farbe, wie die Formel auf den Karten), Zeilen = Bereiche. Gesetzte Zelle zeigt das Cover mit Rand in der Spielfarbe, leere ein blasses + */ .mixer-grid { display: grid; grid-template-columns: minmax(6.5rem, 9rem) repeat(var(--cols), minmax(0, 10rem)); gap: .35rem .45rem; align-items: center; margin: .9rem 0 0; } /* Spiel 4 und 5 der Auswahl: zwei Farben mehr als die Formel auf den Karten (is-c0…2) */ .tune-bar .is-c3 { --c: #ff7eb6; } .tune-bar .is-c4 { --c: #8fd14f; } .mixer-col { display: grid; justify-items: center; gap: .3rem; min-width: 0; padding-bottom: .2rem; text-align: center; } .mixer-col-cover { width: 2.6rem; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 2px var(--c); } .mixer-col-cover img, .mixer-col-cover .cover-placeholder, .mixer-cell-cover img, .mixer-cell-cover .cover-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } .mixer-col-cover .ph-title, .mixer-cell-cover .ph-title { display: none; } .mixer-col-cover .ph-initials, .mixer-cell-cover .ph-initials { font-size: .55rem; } .mixer-col-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 700; color: var(--c); } .mixer-row { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; font-size: .86rem; font-weight: 700; white-space: nowrap; } .mixer-row .opt-icon { flex: none; width: 16px; height: 16px; color: var(--accent); } .mixer-cell { display: grid; place-items: center; height: 2.4rem; border-radius: 10px; border: 1px dashed var(--border); color: var(--muted); font-weight: 800; transition: border-color .15s, background .15s, transform .15s; } .mixer-cell:hover { text-decoration: none; border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); } .mixer-cell.is-active { border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); } .mixer-cell-cover { width: 1.4rem; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; } /* Rezept: was gerade gilt; jedes Teil ein Link, der es entfernt */ .focus-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .9rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--border); } .focus-recipe-label { margin-right: .2rem; font-size: .85rem; font-weight: 800; } .focus-recipe-plus { color: var(--muted); font-weight: 800; } .focus-recipe-part { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem .3rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); color: var(--text); font-size: .84rem; font-weight: 700; } .focus-recipe-part:hover { text-decoration: none; border-color: var(--c, var(--accent)); } .focus-recipe-part .opt-icon { width: 15px; height: 15px; color: var(--c, var(--accent)); } .focus-recipe-x { margin-left: .15rem; font-size: .75rem; color: var(--muted); } .focus-recipe-part:hover .focus-recipe-x { color: var(--text); } @media (max-width: 900px) { .focus-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .tune-bar { padding: .85rem .9rem; } .focus-chip { font-size: .85rem; padding: .35rem .7rem; } .focus-chip.is-small { font-size: .78rem; padding: .25rem .55rem; } .focus-tiles { gap: .4rem; } .focus-tile { min-height: 4.8rem; padding: .55rem .25rem .5rem; border-radius: 12px; } .focus-tile-icon { width: 2rem; height: 2rem; border-radius: 10px; } .focus-tile-icon .opt-icon { width: 18px; height: 18px; } .focus-tile-label { font-size: .76rem; } /* Kleine Kacheln: Herkunfts-Cover stieß ans Symbol; die Herkunft steht im Raster und im Rezept */ .focus-tile-from { display: none; } .mixer-grid { grid-template-columns: minmax(4.6rem, 6rem) repeat(var(--cols), minmax(0, 1fr)); gap: .3rem; } .mixer-row { font-size: .76rem; gap: .25rem; } .mixer-row .opt-icon { width: 14px; height: 14px; } .mixer-col-title { font-size: .68rem; } .mixer-col-cover { width: 2.1rem; } } @media (pointer: coarse) { .focus-chip { min-height: 2.4rem; } .focus-chip.is-small { min-height: 2.1rem; } } @media (prefers-reduced-motion: reduce) { .focus-head-eq i { animation: none; transform: scaleY(.7); } } .rs-tile .badge.owned { justify-self: start; font-size: .72rem; } .rs-tile-facts { margin: .1rem 0 0; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Feierabend-Modus (Konto, „Für dich“): Auswahl als ruhige Leiste, darunter drei Kacheln im gewohnten Raster */ .tonight-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; } .tonight-head h2 { margin-bottom: .3rem; } .tonight-head .hint { margin: 0; } .tonight-next[hidden] { display: none; } /* „Neu würfeln“ direkt über den Covern, rechtsbündig; beim Würfeln schwingen die neuen Cover kurz ein (app.js is-rolling) */ .tonight-bar { display: flex; justify-content: flex-end; margin: 1rem 0 .7rem; } .tonight-bar:not(:has(.tonight-next:not([hidden]))) { margin: 0 0 1rem; } /* backwards statt both: danach soll die Kachel wieder ihr eigenes Verhalten haben (Kippen beim Überfahren) */ .tonight-grid.is-rolling .rs-tile { animation: tonight-roll .45s cubic-bezier(.2, .8, .2, 1) backwards; } .tonight-grid.is-rolling .tonight-item:nth-child(2) .rs-tile { animation-delay: .05s; } .tonight-grid.is-rolling .tonight-item:nth-child(3) .rs-tile { animation-delay: .1s; } .tonight-grid.is-rolling .tonight-item:nth-child(4) .rs-tile { animation-delay: .15s; } @keyframes tonight-roll { from { opacity: 0; transform: translateY(10px) rotate(-2deg) scale(.96); } } @media (max-width: 640px) { .tonight-bar .tonight-next { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .tonight-grid.is-rolling .rs-tile { animation: none; } } /* Auswahl im Look des Optionen-Panels der Suche (.filter-panel, .opt-group, .seg): je Gruppe eine Karte mit Symbol */ .tonight-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1.1rem 0 0; padding: .9rem; border: 1px solid var(--border); border-radius: 20px; background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), var(--surface); box-shadow: 0 24px 60px -30px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .05); } .tonight-options[hidden] { display: none; } .tonight-label { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .tonight-label .opt-icon { flex: none; box-sizing: content-box; width: 1rem; height: 1rem; padding: .3rem; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } /* Knöpfe statt Links: Schrift und Zeiger selbst setzen, gewählt über aria-pressed (app.js) */ .tonight-chip { font-family: var(--body); cursor: pointer; } .seg > .tonight-chip[aria-pressed="true"] { color: var(--bg); background: var(--text); box-shadow: 0 6px 16px -6px rgb(0 0 0 / .6), 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); } .tonight-chip .deck-logo { width: 1.05rem; height: 1.05rem; margin-right: .35rem; flex: none; } /* Steam Deck (einziger Knopf der Gruppe): als Kachel wie die Plattformen der Suche, großes Logo, gewählt mit Leuchten in Deck-Lila und Haken; ohne die Segment-Schale drumherum */ .tonight-group-device .seg { padding: 0; border: 0; background: none; box-shadow: none; } .seg > .tonight-chip[data-tonight-option="deck"] { --pf: #8a6bff; position: relative; gap: .6rem; padding: .6rem 1rem; border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--muted); font-weight: 700; transition: transform .18s, border-color .2s, background .2s, color .2s, box-shadow .25s; } .seg > .tonight-chip[data-tonight-option="deck"] .deck-logo { width: 1.6rem; height: 1.6rem; margin: 0; opacity: .8; transition: opacity .2s, transform .2s; } .seg > .tonight-chip[data-tonight-option="deck"]:hover { transform: translateY(-1px); color: var(--text); background: color-mix(in srgb, var(--text) 3%, transparent); border-color: color-mix(in srgb, var(--pf) 55%, transparent); } .seg > .tonight-chip[data-tonight-option="deck"][aria-pressed="true"] { color: var(--text); border-color: var(--pf); background: linear-gradient(160deg, color-mix(in srgb, var(--pf) 26%, transparent), color-mix(in srgb, var(--pf) 6%, transparent)); box-shadow: 0 12px 28px -14px var(--pf), inset 0 1px 0 rgb(255 255 255 / .08); } .seg > .tonight-chip[data-tonight-option="deck"]:is(:hover, [aria-pressed="true"]) .deck-logo { opacity: 1; } .seg > .tonight-chip[data-tonight-option="deck"][aria-pressed="true"] .deck-logo { transform: scale(1.08); } .seg > .tonight-chip[data-tonight-option="deck"]::after { content: "✓"; position: absolute; top: 50%; right: .7rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-radius: 50%; font-size: .65rem; font-weight: 900; color: #fff; background: var(--pf); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; } .seg > .tonight-chip[data-tonight-option="deck"][aria-pressed="true"]::after { opacity: 1; transform: none; } /* Hülle nur für die Daten je Spiel: im Raster zählt die Kachel selbst */ .tonight-item { display: contents; } .tonight-item[hidden] { display: none; } .tonight .empty[hidden] { display: none; } /* Schmal: Karten untereinander; auf dem Handy werden die Schalter zu Kacheln mit Symbol über dem Text (Regeln bei .seg) */ @media (max-width: 899px) { .tonight-options { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .tonight-options { gap: .45rem; padding: .55rem; border-radius: 16px; } /* Nur ein Knopf (Steam Deck): über die ganze Breite statt einer schmalen Rasterzelle */ .tonight-group-device .seg { display: flex; } /* Kompakt: Symbol neben dem Text statt darüber, Schalter fließen in eine Zeile; vorher ~680 px Auswahl vor dem ersten Spiel */ .tonight-options .opt-group { padding: .5rem .55rem .55rem; gap: .35rem; } .tonight-options .tonight-label .opt-icon { width: .85rem; height: .85rem; padding: .2rem; } .tonight-options .seg { display: flex; flex-wrap: wrap; } .tonight-options .seg > .option-chip { flex: 1 1 auto; flex-direction: row; gap: .3rem; padding: .4rem .55rem; white-space: nowrap; font-size: .82rem; } .tonight-options .seg .opt-icon { width: .85rem; height: .85rem; } .tonight-options .seg > .tonight-chip[data-tonight-option="deck"] { padding: .4rem .8rem; } .tonight-options .seg > .tonight-chip[data-tonight-option="deck"] .deck-logo { width: 1.2rem; height: 1.2rem; } /* „Weil du … magst“: drei Spalten; eine angefangene letzte Zeile mit nur 1–2 Covern ausblenden (4 → 3, 5 → 3, 7 → 6) */ .fy-row .radar-compact > :nth-child(3n+4):nth-last-child(-n+2), .fy-row .radar-compact > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; } } /* Herz, gespielt, ausblenden liegen unten links auf dem Cover (gleiche Rasterzelle), statt je nach Titellänge mal höher, mal tiefer */ .rs-tile-cover { grid-area: 1 / 1; } /* Oben links aufs Cover: unten stehen Preis und Bewertung, oben rechts der Match */ .rs-tile .marks { grid-area: 1 / 1; align-self: start; justify-self: start; z-index: 2; margin: .5rem 0 0 .5rem; gap: .25rem; transition: opacity .2s, transform .2s; } .rs-tile .mark { width: 1.85rem; height: 1.85rem; backdrop-filter: blur(4px); } .rs-tile .mark:not([aria-pressed="true"]) { color: #fff; background: rgb(0 0 0 / .55); border-color: rgb(255 255 255 / .2); } .rs-tile .mark:not([aria-pressed="true"]):hover { border-color: #fff; } .rs-tile:hover .marks { transform: translateY(-4px); } @media (hover: hover) { /* Am PC erst beim Überfahren; gesetzte Markierungen bleiben sichtbar */ .rs-tile .marks:not(:has([aria-pressed="true"])) { opacity: 0; } .rs-tile:hover .marks, .rs-tile .marks:focus-within { opacity: 1; } /* Treffer auf der Startseite genauso ruhig: Markier-Knöpfe und Daumen erst beim Überfahren, Gesetztes (Herz, abgegebener Daumen) bleibt stehen. Der Platz bleibt, damit beim Überfahren nichts springt. Die große Karte (Bester Treffer, Themenseiten) zeigt alles immer: Dort wirkte ein einzelnes Herz verloren */ .pick .mark:not([aria-pressed="true"]), .pick .pick-dismiss, .pick .vote:not(:has([aria-pressed="true"])), .rs-tile .vote:not(:has([aria-pressed="true"])) { opacity: 0; transition: opacity .2s; } .pick:hover .mark, .pick:focus-within .mark, .pick:hover .pick-dismiss, .pick:focus-within .pick-dismiss, .pick:hover .vote, .pick:focus-within .vote, .rs-tile:hover .vote, .rs-tile:focus-within .vote { opacity: 1; } } /* Touch und schmale Kacheln: Herz, Merken, gespielt, ausblenden und Mülleimer passen nicht auf ein 155 px breites Cover (sie lagen über dem Match-Schild). Dort als Zeile unter der Kachel, im hellen Stil wie bei den großen Karten */ @media (hover: none), (max-width: 640px) { .rs-tile .marks { grid-area: auto; order: 10; margin: .2rem 0 0; transform: none; flex-wrap: wrap; opacity: 1; } .rs-tile .mark { width: 1.75rem; height: 1.75rem; } .rs-tile .mark:not([aria-pressed="true"]) { color: var(--muted); background: var(--surface); border-color: var(--border); backdrop-filter: none; } } /* Markier-Knöpfe auf Covern (.marks-rail am main, layout.php): schmale Glas-Kapsel senkrecht am rechten Cover-Rand, unter dem Match-Stempel, zur Hälfte über den Rand hinaus. Gilt für Kacheln, große Karten (inkl. Themenlisten) und die Treffer der Startseite (.pick-head); Bibliothek und Kopf von „Spiele wie …“ behalten ihre Knöpfe. Symbole fein und weiß; Farbe beim Überfahren, gesetzte als Farbpunkt. Am PC ohne Überfahren nur angedeutet */ .marks-rail .rs-tile .marks, .marks-rail .card > .marks, .marks-rail .pick-head > .marks, .marks-rail .radar-item > .marks, .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks { flex-direction: column; justify-self: end; align-self: start; z-index: 2; flex-wrap: nowrap; gap: .1rem; padding: .22rem; border-radius: 999px; background: rgb(16 14 12 / .52); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); box-shadow: 0 10px 28px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .08); transition: opacity .25s, transform .2s; } /* Negativer Rand: die Kapsel ragt etwa zur Hälfte über den Cover-Rand hinaus (in den Abstand zur nächsten Kachel) */ .marks-rail .rs-tile .marks { grid-area: 1 / 1; order: 0; margin: 2.3rem -.85rem 0 0; } .marks-rail .card > .marks { grid-column: 1; grid-row: 1; margin: .55rem -.85rem 0 0; } /* Cover und Text fest platzieren, sonst schiebt die Kapsel (eigenes Rasterelement) sie in die nächste Zelle */ .marks-rail .card > .card-cover { grid-column: 1; grid-row: 1; } .marks-rail .card > .card-body { grid-column: 2; grid-row: 1; } /* Knöpfe ohne eigenen Kreis und Rahmen; gilt auch für gesetzte (überschreibt .mark-…[aria-pressed]) */ /* --tint nur hier setzen, nicht in der Regel mit [aria-pressed]: deren höhere Spezifität überschrieb sonst die Farben */ .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark { --tint: #fff; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark, .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark[aria-pressed="true"] { width: 1.7rem; height: 1.7rem; border: 0; background: transparent; backdrop-filter: none; color: rgb(255 255 255 / .82); transition: color .2s, background .2s, transform .15s, box-shadow .2s; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark svg { width: .95rem; height: .95rem; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark-heart { --tint: #ff5a4e; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark-wish { --tint: #f5b942; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark-played { --tint: #4fd37b; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark-hide { --tint: #e8e2d8; } /* Mülleimer (Vorschlag entfernen) als letzter Knopf der Kapsel, nie gesetzt; auf dem Handy nicht mehr eigenständig oben rechts */ .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .pick-dismiss { --tint: #ff5a4e; position: static; margin: 0; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark:hover, .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark:focus-visible { color: var(--tint); background: rgb(255 255 255 / .09); transform: scale(1.08); } /* Gesetzt: gefüllter Farbpunkt mit dunklem Symbol und leichtem Leuchten, auf einen Blick erkennbar */ .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark[aria-pressed="true"] { color: #15120f; background: var(--tint); box-shadow: 0 0 12px color-mix(in srgb, var(--tint) 55%, transparent); } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark[aria-pressed="true"]:hover { color: #15120f; background: var(--tint); } /* Gespielt/ausgeblendet: nur das Cover zurücknehmen, nicht die ganze Kachel, sonst verblasst auch der Farbpunkt */ .marks-rail .rs-tile.is-played, .marks-rail .rs-tile.is-hidden { opacity: 1; } .marks-rail .rs-tile.is-played .rs-tile-cover .cover { filter: saturate(.35) brightness(.75); transition: filter .2s; } .marks-rail .rs-tile.is-hidden .rs-tile-cover .cover { filter: grayscale(1) brightness(.55); transition: filter .2s; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark-heart[aria-pressed="true"] svg, .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark-wish[aria-pressed="true"] svg { fill: currentColor; } @media (hover: hover) { /* Ohne Überfahren nur angedeutet; mit gesetzter Markierung bleibt die Kapsel sichtbar, die übrigen Symbole gedämpft */ .marks-rail .rs-tile .marks, .marks-rail .card > .marks { opacity: .35; } .marks-rail .rs-tile .marks:has([aria-pressed="true"]), .marks-rail .card > .marks:has([aria-pressed="true"]) { opacity: 1; } .marks-rail .rs-tile .marks:has([aria-pressed="true"]) .mark:not([aria-pressed="true"]), .marks-rail .card > .marks:has([aria-pressed="true"]) .mark:not([aria-pressed="true"]) { color: rgb(255 255 255 / .35); } .marks-rail .rs-tile:hover .marks, .marks-rail .rs-tile .marks:focus-within, .marks-rail .card:hover > .marks, .marks-rail .card > .marks:focus-within { opacity: 1; } .marks-rail .rs-tile:hover .marks .mark:not([aria-pressed="true"]):not(:hover), .marks-rail .card:hover > .marks .mark:not([aria-pressed="true"]):not(:hover) { color: rgb(255 255 255 / .82); } } @media (hover: none), (max-width: 640px) { .marks-rail .rs-tile .marks { grid-area: 1 / 1; order: 0; margin: 2rem -.7rem 0 0; opacity: 1; } /* Touch: 2.1rem (rund 35 px) statt 1.5rem, sonst traf man leicht den Nachbarknopf */ .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark, .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark[aria-pressed="true"] { width: 2.1rem; height: 2.1rem; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .mark svg { width: 1.05rem; height: 1.05rem; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks { gap: .2rem; } /* Bester Treffer: Match steht hier auf dem Cover, die Kapsel beginnt darunter */ .marks-rail .card > .marks { grid-row: 1 / span 2; margin: 1.6rem -.7rem 0 0; opacity: 1; } } @media (max-width: 640px) { /* Wie ohne Kapsel: Cover neben Titel und Eckdaten (zwei Zeilen hoch) */ .marks-rail .card > .card-cover { grid-row: 1 / span 2; } } /* Bibliothek und Lieblingsspiele (Rasteransicht): Die Kapsel liegt im Cover (position: absolute) unter dem ↗-Link oben rechts und ragt wie überall über den Rand; dafür darf das Cover nicht mehr abschneiden, das Bild bekommt die Rundung. In der Listenansicht sind die Cover zu klein, dort bleibt es bei den bisherigen Regeln (ausgeblendet) */ .marks-rail .lib-grid:not(.is-list) .lib-cover { overflow: visible; } .marks-rail .lib-grid:not(.is-list) .lib-cover .cover { border-radius: 8px; } .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks { position: absolute; top: 2.4rem; right: -.85rem; left: auto; bottom: auto; justify-content: flex-start; pointer-events: auto; } .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks .mark { opacity: 1; } @media (hover: hover) { .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks { opacity: .35; } .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks:has([aria-pressed="true"]), .marks-rail .lib-grid:not(.is-list) .lib-card:hover .lib-cover > .marks, .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks:focus-within { opacity: 1; } } /* Sammlung (Lieblingsspiele): Dort ist jedes Spiel Lieblingsspiel, das gesetzte Herz auf jedem Cover sagte nichts und machte das Raster unruhig. Es erscheint beim Überfahren (PC) bzw. im aufgeklappten „⋯“ (Handy), zum Entfernen */ .marks-rail .fav-grid .lib-card:not(:hover):not(:focus-within) .lib-cover > .marks:not(.is-open) .mark-heart[aria-pressed="true"] { display: none; } @media (hover: hover) { .marks-rail .fav-grid .lib-card:not(:hover):not(:focus-within) .lib-cover > .marks:not(:has(.mark:not(.mark-heart)[aria-pressed="true"])) { opacity: .35; } } /* Handy: Kapsel eingeklappt. Sichtbar sind nur gesetzte Markierungen und „⋯“ (immer als erster Knopf, damit er beim Aufklappen unter dem Finger bleibt); Antippen klappt die übrigen darunter auf (.is-open, app.js). Am PC gibt es „⋯“ nicht, dort zeigt das Überfahren alles */ /* .marks davor: Die allgemeine Regel .mark { display: grid } steht weiter unten und würde sonst gewinnen */ .marks .marks-more { display: none; order: -1; } @media (hover: none), (max-width: 640px) { .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks .marks-more { display: grid; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks:not(.is-open) .mark:not([aria-pressed="true"]):not(.marks-more) { display: none; } .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks.is-open .marks-more { color: var(--text); background: rgb(255 255 255 / .12); } /* Eingeklappt ohne Gesetztes: nur ein kleiner runder Knopf, kein Kapsel-Rand nötig */ .marks-rail :is(.rs-tile, .card, .pick-head, .radar-item, .gotw-media, .lib-grid:not(.is-list) .lib-cover) > .marks:not(.is-open):not(:has([aria-pressed="true"])) { padding: .12rem; } } /* Treffer der Startseite (partials/pick-card.php, buildPick in app.js): Die Knöpfe stehen im Kopf unter dem Cover und werden am PC als Kapsel an den rechten Cover-Rand gesetzt (.pick ist position: relative, das Cover steht oben). Auf dem Handy liegt das Cover links neben dem Text, dort bleibt die Kapsel waagerecht im Kopf */ .marks-rail .pick-head > .marks { margin-top: 0; } @media (min-width: 641px) { /* Große Cover (bis ca. 350 px breit, oft unruhige Motive): Kapsel größer und dunkler, sonst geht sie unter */ .marks-rail .pick-head > .marks { position: absolute; top: 4rem; right: -1.05rem; padding: .3rem; gap: .2rem; background: rgb(14 12 10 / .7); } .marks-rail .pick-head > .marks .mark, .marks-rail .pick-head > .marks .mark[aria-pressed="true"] { width: 2.2rem; height: 2.2rem; } .marks-rail .pick-head > .marks .mark svg { width: 1.15rem; height: 1.15rem; } } @media (max-width: 640px) { .marks-rail .pick-head > .marks { flex-direction: row; align-self: flex-start; } /* Waagerechte Leiste unten rechts: „⋯“ ans Ende, damit es beim Aufklappen unter dem Finger bleibt (die übrigen Knöpfe klappen nach links auf). Die senkrechten Leisten behalten es oben (order: -1) */ .marks-rail .pick-head > .marks .marks-more { order: 99; } } @media (hover: hover) { /* Kräftiger angedeutet als bei den kleinen Kacheln: auf großen Covern wirkt .35 wie gar nicht da */ .marks-rail .pick-head > .marks { opacity: .7; } .marks-rail .pick-head > .marks:has([aria-pressed="true"]), .marks-rail .pick:hover .pick-head > .marks, .marks-rail .pick-head > .marks:focus-within { opacity: 1; } /* Die alte Regel blendete einzelne Knöpfe aus; in der Kapsel regelt das die Kapsel selbst */ .marks-rail .pick .pick-head > .marks .mark { opacity: 1; } } .rs-tile.is-hidden { opacity: .4; } .rs-tile.is-played { opacity: .6; } /* „Spiele wie …“: Kopfbereich mit dem eigenen Cover unscharf im Hintergrund, Treffer wie auf der Ergebnisseite */ .sim-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: start; margin: 2rem 0 1.6rem; padding: 1.8rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); } .sim-hero::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--cover, none) center / cover; filter: blur(40px) saturate(1.2); opacity: .4; } .sim-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 50%, transparent), var(--surface) 70%); } .sim-cover .cover { border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } .sim-body h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.02; letter-spacing: -.04em; margin: .2rem 0 .7rem; } .sim-body .summary { max-width: 46rem; color: var(--muted); } /* Titel und Markier-Knöpfe in einer Zeile; die Knöpfe rutschen bei langen Titeln darunter */ .sim-title { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .2rem 0 .7rem; } .sim-title h1 { margin: 0; } .sim-label { margin: 1rem 0 .2rem; font-weight: 600; } .sim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .6rem 0 0; } /* max-width: Sonst wird die Kaufzeile so breit wie alle Chips zusammen und schiebt die Seite mobil zur Seite */ .sim-actions .game-actions { margin: 0; padding: 0; border: 0; min-width: 0; max-width: 100%; } .sim-hero .theme-links { margin: 1rem 0 0; } /* Ganz zeigen, nicht auf drei Zeilen kürzen (brach mitten im Satz ab) */ .rs-tile-sum { margin: .1rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.4; } @media (max-width: 640px) { /* Cover so groß wie das des besten Treffers darunter; Titel, Knöpfe und Eckdaten stehen daneben */ .sim-hero { grid-template-columns: clamp(110px, 38%, 150px) minmax(0, 1fr); gap: 1rem; padding: 1.1rem; margin-top: 1.2rem; } .sim-body { display: contents; } .sim-body > :not(.eyebrow):not(.sim-title):not(.meta) { grid-column: 1 / -1; } .sim-cover { grid-row: 1 / span 3; } .sim-body h1 { font-size: 1.6rem; margin: 0; } } @media (max-width: 760px) { .rs-head { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.8rem; } .rs-fan { display: none; } } @media (max-width: 640px) { /* Bester Treffer: Cover etwa so groß wie die Kacheln darunter (bei 104px wirkte es neben dem großen Titel verloren) */ .card.card-top { grid-template-columns: clamp(110px, 38%, 150px) minmax(0, 1fr); padding: 1rem; } } /* Ergebnisse */ .results-head { padding: 2.5rem 0 1rem; } .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--accent); font-weight: 700; margin-bottom: .6rem; } .similar-head { display: grid; grid-template-columns: 160px 1fr; gap: 1.75rem; align-items: start; } .taste { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 1rem 0 1.5rem; } .taste p { color: var(--muted); } .traits { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 .75rem; } .traits li { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-radius: 999px; padding: .3rem .85rem; font-size: .9rem; font-weight: 600; } .results { display: grid; gap: 1.1rem; margin-top: 1rem; } .empty { color: var(--muted); } /* Knöpfe unter einem leeren Zustand („Spiele wie …“ ohne Treffer) */ .empty-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 3rem; } /* Kurze Meldung unten am Rand (app.js notify), z. B. wenn eine Markierung nicht gespeichert wurde */ .toast { position: fixed; left: 50%; bottom: 1.2rem; z-index: 45; width: max-content; max-width: min(28rem, calc(100% - 2rem)); padding: .7rem 1rem; border-radius: 12px; background: var(--text); color: var(--bg); font-size: .92rem; line-height: 1.4; box-shadow: 0 12px 30px rgb(0 0 0 / .3); opacity: 0; transform: translate(-50%, .8rem); pointer-events: none; transition: opacity .2s, transform .2s; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } .card { display: grid; grid-template-columns: 130px 1fr; gap: 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; transition: border-color .2s; } .card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .card-cover .cover { box-shadow: var(--shadow); } .card-cover-match { display: none; } /* nur auf dem Handy, siehe unten */ .card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; } .card-head h3 { font-size: 1.4rem; } .card-head h3 a { color: var(--text); } .card-head h3 a:hover { color: var(--accent); text-decoration: none; } .meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--muted); font-size: .85rem; } .badge { border: 1px solid var(--border); border-radius: 6px; padding: .05rem .45rem; font-size: .75rem; } .because { font-size: .92rem; color: var(--muted); margin-bottom: .4rem; } /* Daumen an Empfehlungen (partials/vote-buttons.php, app.js) im Stil der Markier-Kapsel: flache Pille mit feinen Symbolen, Farbe beim Überfahren, abgegebener Daumen als Farbpunkt (hoch grün, runter rot) */ .vote { display: inline-flex; align-items: center; gap: .05rem; justify-self: start; margin: .3rem 0 0; padding: .15rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); } .vote[hidden] { display: none; } .vote-q { display: none; } /* steht als Tooltip an der Pille; ältere Seiten im Cache haben das Wort noch im HTML */ .vote-btn { --tint: #4fd37b; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s, transform .15s, box-shadow .15s; } .vote-btn.vote-down { --tint: #ff5a4e; } .vote-btn svg { width: .9rem; height: .9rem; } .vote-btn:hover, .vote-btn:focus-visible { color: var(--tint); background: color-mix(in srgb, var(--tint) 14%, transparent); transform: scale(1.08); } .vote-btn[aria-pressed="true"] { color: #15120f; background: var(--tint); box-shadow: 0 0 10px color-mix(in srgb, var(--tint) 50%, transparent); } /* Kleine Symbole, große Tippfläche: unsichtbar etwa 40 px um Daumen und „⋯“ (Empfehlung für Touch: mindestens 40–44 px) */ .vote-btn, .marks .marks-more { position: relative; } .vote-btn::after, .marks .marks-more::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } .pick .vote { margin-top: .2rem; } .because strong { color: var(--text); } .reasons { margin: 0 0 .6rem; padding-left: 0; list-style: none; border-left: 3px solid var(--accent); padding-left: .9rem; } .reasons li { color: var(--muted); } .tags { display: flex; flex-wrap: wrap; gap: .35rem; } .tag { font-size: .75rem; background: var(--surface-2); border-radius: 6px; padding: .15rem .5rem; color: var(--muted); } .summary { color: var(--muted); font-size: .92rem; } .shops { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 0; } /* Navigation (layout.php): Punkte als Pillen, der aktuelle Bereich farbig hinterlegt; „Entdecken“ und das Konto-Menü klappen ein Feld auf (app.js [data-drop]). Am Handy übernimmt die Leiste unten (.bottom-nav) */ .nav { display: flex; align-items: center; gap: .15rem; margin: 0 auto 0 1rem; min-width: 0; } .nav-link { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border: 0; border-radius: 999px; background: none; color: var(--text); font: 600 .92rem/1.2 var(--body); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; } .nav-link:hover, .nav-drop.is-open > .nav-link { background: var(--surface); text-decoration: none; } .nav-link.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .nav-icon { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* „Für dich“ in der Kopfzeile: gefülltes Funkeln in Akzentfarbe; ein Punkt dahinter heißt „es gibt Neues“ (.has-news, Begleiter) */ .nav .nav-for-you .nav-icon { fill: var(--accent); stroke: none; } /* „Für Streamer“ als eigener Punkt in Twitch-Lila (mit Textfarbe gemischt, damit es hell und dunkel lesbar bleibt) */ .nav-stream { color: color-mix(in srgb, #9146ff 78%, var(--text)); } .nav-stream .stream-icon { width: 1.05rem; height: 1.05rem; } .nav-stream:hover { background: color-mix(in srgb, #9146ff 12%, transparent); } .nav-stream.is-active { background: color-mix(in srgb, #9146ff 16%, transparent); color: color-mix(in srgb, #9146ff 78%, var(--text)); } /* Platz in der Kopfzeile (Screenshot 11.11.: stieß bei 1190 px ans Suchfeld). Die Kopfzeile ist ab ~1180 px auf 1100 px begrenzt, breiter wird es also nicht: ab 1041 px engere Punkte und schmaleres Suchfeld. Gäste haben rechts noch „Anmelden“ und „Konto erstellen“: bei ihnen „Streamer“ statt „Für Streamer“ (layout.php), Suchfeld ohne „/“-Hinweis, noch etwas schmaler. Darunter nur das Symbol (Angemeldete bis 1120 px, Gäste bis 1179 px; gemessen im Browser) */ @media (min-width: 1041px) { .nav-link { padding: .45rem .65rem; } .nav { margin-left: .6rem; } .header-search-form, .header-search-form[hidden] { width: clamp(10rem, 14vw, 12.5rem); } .header-inner:has(.nav-stream.is-guest) .nav-link { padding: .45rem .55rem; } .header-inner:has(.nav-stream.is-guest) .header-search-form, .header-inner:has(.nav-stream.is-guest) .header-search-form[hidden] { width: 9rem; } .header-inner:has(.nav-stream.is-guest) .header-search-form::after { display: none; } .header-inner:has(.nav-stream.is-guest) .header-search-form input { padding-right: .8rem; } } @media (min-width: 761px) and (max-width: 1120px) { .nav-stream-label { display: none; } } @media (min-width: 761px) and (max-width: 1179px) { .nav-stream.is-guest .nav-stream-label { display: none; } } /* Handy, Blatt „Mehr“: Für Streamer als breite lila Kachel zuerst */ .sheet-grid a.sheet-stream { display: flex; align-items: center; justify-content: center; gap: .45rem; grid-column: 1 / -1; border-color: transparent; background: linear-gradient(135deg, #9146ff, #6d2ee0); color: #fff; font-weight: 800; } .sheet-grid a.sheet-stream .stream-icon { width: 1.15rem; height: 1.15rem; } /* Live-Schild (Profil, Community): rot mit pulsierendem Punkt */ .live-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px; background: #d7262e; color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; } .live-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; animation: onair-pulse 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .live-pill::before { animation: none; } } .nav-caret { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s; } .nav-drop.is-open .nav-caret { rotate: 180deg; } .nav-drop, .user-menu { position: relative; } .nav-panel { position: absolute; top: calc(100% + .75rem); z-index: 60; padding: .8rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); animation: options-in .2s cubic-bezier(.2, .8, .2, 1); } .nav-panel[hidden] { display: none; } /* Entdecken: drei Themen mit Cover-Fächer, rechts weitere Wege */ .nav-discover { left: -.8rem; width: min(40rem, calc(100vw - 2rem)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(9.5rem, .95fr); gap: .5rem; } .nav-tile { display: grid; gap: .1rem; padding: .7rem .75rem .75rem; border-radius: 14px; color: var(--text); background: var(--surface-2); } .nav-tile:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); } .nav-tile-fan { position: relative; height: 4.6rem; margin-bottom: .45rem; } .nav-tile-fan img { position: absolute; bottom: 0; left: calc(50% - 1.5rem + (var(--i) - 1) * 1.45rem); width: 3rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 14px rgb(0 0 0 / .35); rotate: calc((var(--i) - 1) * 8deg); transform-origin: 50% 110%; transition: rotate .25s; } .nav-tile-fan img:nth-child(2) { z-index: 1; } .nav-tile:hover .nav-tile-fan img { rotate: calc((var(--i) - 1) * 13deg); } .nav-tile strong { font: 800 .95rem/1.2 var(--display); letter-spacing: -.01em; } .nav-tile small { color: var(--muted); font-size: .78rem; } .nav-panel-links { display: grid; align-content: start; gap: .15rem; padding-left: .5rem; border-left: 1px solid var(--border); } .nav-panel-links a { padding: .5rem .6rem; border-radius: 10px; color: var(--text); font-weight: 600; font-size: .9rem; } .nav-panel-links a:hover { background: var(--surface-2); text-decoration: none; } /* Konto-Menü (Avatar bzw. drei Punkte): Liste von Einträgen, Abmelden als eigenes Formular */ .user-panel { right: 0; width: 15.5rem; display: grid; gap: .05rem; padding: .45rem; } .user-panel > a, .user-panel button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 .92rem/1.3 var(--body); text-align: left; cursor: pointer; } .user-panel > a:hover, .user-panel button:hover { background: var(--surface-2); text-decoration: none; } .user-panel form { margin: 0; } .user-panel hr { border: 0; border-top: 1px solid var(--border); margin: .3rem .3rem; } .user-panel .brand-icon { width: 1rem; height: 1rem; } .user-panel-head { display: grid; margin: 0; padding: .45rem .7rem .4rem; line-height: 1.3; } .user-panel-head span { color: var(--muted); font-size: .82rem; } .nav-login { color: var(--text); font-weight: 600; font-size: .92rem; padding: .4rem .5rem; white-space: nowrap; } .nav-login:hover { color: var(--accent); text-decoration: none; } /* Konto-Knopf mit Avatar oder Anfangsbuchstaben */ .account-chip { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 700 .95rem var(--display); } .account-chip:hover, .account-chip[aria-expanded="true"] { border-color: var(--accent); text-decoration: none; } .account-chip.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } .account-chip img { width: 100%; height: 100%; object-fit: cover; } .button.small { padding: .4rem .9rem; font-size: .875rem; } .alert { margin: 1.25rem 0 0; padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } .is-bare main > .alert { position: relative; z-index: 25; margin: 5rem auto 0; width: min(1100px, 100% - 32px); } .alert.success { border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); } .alert.error { border-color: color-mix(in srgb, var(--bad) 50%, transparent); color: var(--bad); } .alert.info { color: var(--muted); } /* Formulare */ .auth { max-width: 440px; padding: 3rem 0 1rem; } .form { display: grid; gap: 1rem; margin: 1.25rem 0; } .form label { display: grid; gap: .35rem; } .form label > span { font-size: .9rem; color: var(--muted); } .form input[type="email"], .form input[type="password"], .form input[type="text"] { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; } .form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* Passwortfeld mit Augen-Button rechts im Feld; Schrift wie die anderen Felder (nicht wie die Feldbeschriftung) */ .form label > .password-field { position: relative; display: grid; font-size: inherit; color: inherit; } .password-field input { padding-right: 2.9rem !important; } .password-toggle { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; } .password-toggle[hidden] { display: none; } .password-toggle:hover { color: var(--text); } .password-toggle svg { width: 1.2rem; height: 1.2rem; } .password-toggle .eye-off { display: none; } .password-toggle[aria-pressed="true"] .eye-off { display: inline; } /* Autofill des Browsers (Chrome/Edge färben gespeicherte Daten gelb, auf Dunkel wird das oliv): eigene Farben erzwingen */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--text); transition: background-color 9999s ease-out 0s; } .form .checkbox { display: flex; gap: .6rem; align-items: start; } .form .checkbox span { color: var(--text); } /* Registrierung: freiwilliges öffentliches Profil mit kurzem Nutzen */ .reg-profile { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .reg-profile ul { margin: 0; padding: 0 0 0 1.85rem; color: var(--muted); font-size: .9rem; display: grid; gap: .2rem; } .reg-profile .hint { padding-left: 1.85rem; font-size: .8rem; } .error { color: var(--bad); } .divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1.25rem 0 0; } .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); } /* Steam-Knopf im eigenen Design (neutral mit Steam-Logo statt Steam-Blau) */ .button.steam { background: var(--text); border-color: var(--text); color: var(--bg); width: 100%; justify-content: center; gap: .55rem; } .button.steam:hover { border-color: var(--text); opacity: .9; } .form .button.primary { justify-content: center; } .account-section .button.steam { width: auto; } .button.subtle { background: transparent; } .button.danger { background: #5a1e1e; border-color: #8a2b2b; color: #ffd5d5; } form.inline { display: inline; margin: 0; } /* Kontoseite */ .account-head { display: flex; gap: 1.25rem; align-items: center; padding: 2.5rem 0 1rem; } .avatar { border-radius: 50%; } .account-section { margin-top: 2.25rem; } .account-section > .hint { margin-bottom: .75rem; } .stats { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin: .75rem 0 1rem; } .stats li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem; color: var(--muted); } .stats strong { color: var(--text); font: 800 1.25rem var(--display); margin-right: .25rem; } /* Statistik im Admin: Tagesbalken und Tabellen nebeneinander */ .an-chart { display: flex; align-items: stretch; gap: 3px; height: 180px; padding: 1.4rem .5rem .4rem; margin: .5rem 0 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } /* Je Tag eine Spalte: Balken unten mit Anzahl darüber, darunter das Datum (nur jeder 5. Tag, sonst wird es eng) */ .an-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; } .an-bar { position: relative; height: max(2px, var(--h)); max-height: calc(100% - 1.1rem); background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; } .an-col:hover .an-bar { opacity: 1; } .an-bar b { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font: 700 .68rem/1 var(--body); color: var(--text); white-space: nowrap; } .an-col small { height: .8rem; font-size: .62rem; line-height: .8rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; } .an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem 2rem; margin-bottom: 1.5rem; } .an-grid h3 { margin: 0 0 .5rem; font-size: 1.05rem; } .an-grid td:not(:first-child), .an-grid th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } .an-grid td a { color: var(--text); word-break: break-all; } .an-grid h3:not(:first-child) { margin-top: 1.4rem; } /* Ausführliche Besucher-Auswertung (admin/visitors.php): Filterleiste, Kennzahlen mit Veränderung, Balken mit Vergleich */ .vx-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .8rem; padding: .9rem; margin: .8rem 0 .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .vx-filter label { display: grid; gap: .25rem; font-size: .75rem; font-weight: 700; color: var(--muted); } .vx-filter select, .vx-filter input[type="date"] { font: inherit; font-size: .88rem; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .4rem .55rem; } .vx-hours { display: inline-flex; align-items: center; gap: .3rem; } .vx-filter[data-range]:not([data-range="eigen"]) [data-vx-custom] { opacity: .55; } .vx-range { margin: 0 0 .8rem; } .vx-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; } .vx-kpis li { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } .vx-kpi-name { font-size: .78rem; color: var(--muted); } .vx-kpis strong { font: 800 1.45rem/1.1 var(--display); } .vx-delta { font-size: .8rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .vx-delta.is-up { color: var(--good, #2e9e5b); } .vx-delta.is-down { color: var(--bad, #d64545); } .vx-legend { display: flex; align-items: center; gap: .4rem; margin: -.2rem 0 0; font-size: .78rem; color: var(--muted); } .vx-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: var(--accent); } .vx-swatch.is-prev { margin-left: .6rem; background: color-mix(in srgb, var(--text) 30%, transparent); } .vx-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1px; min-height: 0; } .vx-bars .an-bar { flex: 1; max-width: 1.6rem; max-height: calc(100% - 1.1rem); } .vx-bars .an-bar.is-prev { flex: .6; background: color-mix(in srgb, var(--text) 30%, transparent); opacity: 1; } .vx-small { height: 140px; } .an-meter { width: 40%; } .an-meter span { display: block; height: .55rem; width: max(3px, var(--w)); margin-left: auto; border-radius: 99px; background: var(--accent); opacity: .85; } /* Reiter der Kontoseite */ .tabs { position: relative; display: flex; gap: .3rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 1rem 0 1.8rem; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } /* Weitere Reiter außerhalb der Leiste: Rand ausblenden (Klassen setzt app.js) */ .tabs.more-end { mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); } .tabs.more-start { mask-image: linear-gradient(to right, transparent, #000 3rem); } .tabs.more-start.more-end { mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); } .tabs a { flex: none; padding: .7rem 1rem; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.is-active { color: var(--text); border-bottom-color: var(--accent); } /* Konto: Symbol vor dem Namen; am Handy alle fünf Reiter gleich breit, Symbol über dem Kurznamen (kein Wischen nötig) */ .account > .tabs a { display: inline-flex; align-items: center; gap: .45rem; } .account > .tabs svg { width: 1.1rem; height: 1.1rem; flex: none; } .account > .tabs .tab-short { display: none; } @media (max-width: 640px) { .account > .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: visible; mask-image: none; } .account > .tabs a { flex-direction: column; gap: .25rem; padding: .55rem .15rem .5rem; font-size: .7rem; text-align: center; } .account > .tabs svg { width: 1.3rem; height: 1.3rem; } .account > .tabs .tab-long { display: none; } .account > .tabs .tab-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } } .tab-panel { padding-bottom: 1rem; } .tab-panel[hidden] { display: none !important; } .subtabs { margin: -.8rem 0 1.4rem; border-bottom: 0; gap: .4rem; flex-wrap: wrap; } .subtabs a { padding: .4rem .9rem; border: 1px solid var(--border); border-radius: 999px; margin: 0; font-size: .9rem; } .subtabs a.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .tab-badge { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 999px; background: var(--warn); color: #1a1408; font-size: .72rem; font-weight: 800; vertical-align: .1em; } .tab-badge.is-fail { background: var(--bad); color: #fff; } .has-tabs > .tab-panel.settings-section { border: 0; background: none; padding: 0; } /* Admin mit Seitenleiste: Gruppen links (läuft mit), alle Bereiche teilen sich die rechte Spalte. Die Unterreiter von Statistik, System und Jobs stehen schon links und bleiben ausgeblendet; nur die der Einstellungen (.is-keep) bleiben */ .admin.has-side { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 2.2rem; align-items: start; margin-top: 1rem; } .admin.has-side > .admin-side { grid-column: 1; grid-row: 1; position: sticky; top: 5.4rem; display: grid; gap: .5rem; align-content: start; /* Niedrige Laptop-Fenster: eigene Bildlaufleiste statt abgeschnittener Einträge unten */ max-height: calc(100vh - 6.4rem); overflow-y: auto; scrollbar-width: thin; } .admin-side-nav { display: grid; gap: .1rem; } /* Suche oben in der Leiste (app.js data-admin-search): Treffer klappen darunter auf, Taste / springt hinein */ .admin-search { position: relative; } .admin-search input { width: 100%; padding: .4rem 2rem .4rem .8rem; border-radius: 10px; font-size: .9rem; } .admin-search kbd { position: absolute; right: .55rem; top: .55rem; padding: 0 .35rem; border: 1px solid var(--border); border-radius: 5px; font: 600 .72rem/1.4 var(--body); color: var(--muted); pointer-events: none; } .admin-search input:focus + kbd, .admin-search input:not(:placeholder-shown) + kbd { display: none; } .admin-search-results { list-style: none; margin: .3rem 0 0; padding: .3rem; display: grid; gap: .1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); } .admin-search-results[hidden] { display: none; } /* Katalog, Suchen ohne Treffer: Hinweis und „Alle erledigt“ in einer Zeile, Knopf je Zeile rechts */ .misses-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .8rem; } .misses-head .hint { margin: 0; flex: 1 1 20rem; } .misses-action { text-align: right; white-space: nowrap; } .admin-search-results a { display: grid; gap: .05rem; padding: .45rem .6rem; border-radius: 8px; color: var(--text); font-size: .88rem; line-height: 1.3; } .admin-search-results a small { color: var(--muted); font-size: .74rem; } .admin-search-results a:hover, .admin-search-results a.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); text-decoration: none; } .admin-search-results .is-empty { padding: .45rem .6rem; color: var(--muted); font-size: .88rem; } /* Fund aus der Suche bzw. Direktlink: Feld kurz hervorheben */ .field.is-found { animation: field-found 2.4s ease-out; border-radius: 10px; } @keyframes field-found { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } } /* Einstellungen: Zwischenüberschriften je Shop bzw. Schlüssel, Link zum Kopieren je Feld, Testknopf unter dem Schlüssel */ .settings-group { margin: 2rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: 1rem; } .settings-section > legend + .settings-group { margin-top: 0; padding-top: 0; border-top: 0; } /* Labels sind sonst ein Raster (Link landete in eigener Zeile): mit Link nebeneinander */ .field > label:has(> .field-link):not(.checkbox) { display: flex; flex-wrap: wrap; align-items: baseline; } .field-link { margin-left: .4rem; padding: 0 .3rem; border-radius: 5px; color: var(--muted); font-weight: 700; opacity: 0; transition: opacity .15s; } .field:hover .field-link, .field-link:focus-visible { opacity: 1; } .field-link:hover { color: var(--accent); text-decoration: none; } .field-link.is-copied { opacity: 1; color: var(--good); } /* Touch-Geräte: kein Hover, Links teilt man dort ohnehin kaum. Ausblenden statt dauerhaft „#“ an jedem Feld */ @media (hover: none) { .field-link { display: none; } } .field-test { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: -.3rem 0 1.2rem; } .field-test .hint { margin: 0; } /* Speichern bleibt beim Scrollen langer Abschnitte unten sichtbar */ .settings-save { position: sticky; bottom: 0; z-index: 2; margin: 1.5rem 0 0; padding: .8rem 0; background: linear-gradient(transparent, var(--bg) 35%); } .admin.has-side > .tab-panel { grid-column: 2; grid-row: 1; min-width: 0; } .admin.has-side .subtabs:not(.is-keep) { display: none; } /* Schmalerer Inhalt neben der Leiste: Auswertungs-Tabellen untereinander statt überlappend nebeneinander (Herkunft hat fünf Spalten), notfalls seitlich scrollen; Konten: Aktionen untereinander, damit die Tabelle ohne Scrollen passt */ .admin.has-side .an-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); } .an-grid > section { min-width: 0; overflow-x: auto; } .admin.has-side .accounts-actions { white-space: normal; } .admin.has-side .accounts-actions form.inline { display: block; } .admin.has-side .accounts-actions form.inline + form.inline { margin-top: .3rem; } /* Gruppenüberschrift mit Linie, Einträge darunter eingerückt an einer Leiste: Überschriften sehen nicht wie Menüpunkte aus */ .admin-side-group { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .25rem; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--muted) 80%, transparent); } .admin-side-group::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Kompakt, damit die Leiste auf Laptop-Höhe ohne eigenes Scrollen passt */ .admin-side-nav a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .8rem; border-radius: 10px; color: color-mix(in srgb, var(--text) 78%, transparent); font-weight: 500; font-size: .88rem; } .admin-side-nav a:not([data-side-target="dashboard"]) { margin-left: .5rem; padding-left: .9rem; border-radius: 0 10px 10px 0; border-left: 1px solid var(--border); } .admin-side-nav a[data-side-target="dashboard"] { font-weight: 700; } .admin-side-nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; } .admin-side-nav a.is-active { color: var(--text); background: var(--surface); font-weight: 700; } .admin-side-nav a.is-active:not([data-side-target="dashboard"]) { border-left: 2px solid var(--accent); } .admin-side .tab-badge { margin-left: 0; } .admin-side-group:first-of-type { margin-top: .7rem; } @media (max-width: 900px) { .admin.has-side { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .admin.has-side > .tab-panel { grid-column: 1; grid-row: 2; } /* Handy und Tablet: Suche über eine wischbare Chip-Zeile, läuft nicht mit; Gruppennamen entfallen */ .admin.has-side > .admin-side { position: static; max-height: none; overflow: visible; } .admin-search-results { position: absolute; z-index: 20; left: 0; right: 0; } .admin-search kbd { display: none; } .admin-side-nav { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .2rem; } .admin-side-group { display: none; } .admin-side-nav a, .admin-side-nav a:not([data-side-target="dashboard"]) { flex: none; margin: 0; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; background: var(--surface); } .admin-side-nav a.is-active, .admin-side-nav a.is-active:not([data-side-target="dashboard"]) { border: 1px solid var(--accent); } } /* Dashboard */ .dash { display: grid; gap: 1rem; } .dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } .dash-kpi { display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .dash-kpi:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .dash-kpi strong { font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--display); letter-spacing: -.02em; } .dash-kpi-label { font-size: .82rem; color: var(--muted); font-weight: 600; } .dash-trend { font-size: .8rem; color: var(--muted); font-weight: 700; } .dash-trend.is-up { color: var(--good); } .dash-trend.is-down { color: var(--bad); } .dash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; } .dash-row.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-box { display: grid; gap: .6rem; align-content: start; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); min-width: 0; } .dash-head { margin: 0; font: 700 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .dash-head a { color: inherit; } .dash-list { list-style: none; margin: 0; padding: 0; display: grid; } .dash-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem 0; border-top: 1px solid var(--border); font-size: .92rem; } .dash-list li:first-child { border-top: 0; } .dash-list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-list li.is-bad b { color: var(--bad); } .dash-list a { display: flex; justify-content: space-between; gap: .8rem; width: 100%; color: var(--text); } .dash-list a:hover { text-decoration: none; color: var(--accent); } .dash-flag { color: var(--accent); } .dash-done { margin: 0; font-weight: 700; color: var(--good); } .dash-foot { margin: 0; font-size: .82rem; } .dash-bars { display: flex; align-items: flex-end; gap: 3px; height: 7.5rem; } .dash-bars span { flex: 1; min-width: 0; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 70%, transparent); } .dash-bars span.is-weekend { background: color-mix(in srgb, var(--accent) 40%, transparent); } .dash-bars span:hover { background: var(--accent); } @media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-row, .dash-row.is-three { grid-template-columns: minmax(0, 1fr); } } .has-tabs > .tab-panel.settings-section > legend { display: none; } /* Admin: Die Reiterleiste der Einstellungen ist weg (Abschnitte stehen links), also Abschnittstitel als Überschrift zeigen */ .admin.has-side .has-tabs > .tab-panel.settings-section > legend { display: block; padding: 0; margin: 0 0 1.2rem; font: 800 1.6rem/1.15 var(--display); letter-spacing: -.01em; } .admin:not(.has-tabs) > .tab-panel + .tab-panel { margin-top: 3rem; } .account:not(.has-tabs) .tab-panel + .tab-panel { margin-top: 3rem; } .tab-panel .sub-head { margin-top: 2.5rem; } .settings-list { display: grid; grid-template-columns: 10rem 1fr; gap: .8rem 1.5rem; margin: 0 0 1.5rem; align-items: center; } .settings-list dt { color: var(--muted); } .settings-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; } .coverage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-top: .5rem; max-width: 720px; } .coverage-figures { margin-bottom: .7rem; } .coverage-figures strong { font: 800 1.15rem var(--display); } .meter { position: relative; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: .7rem; } .meter span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; } .meter-matched { background: color-mix(in srgb, var(--accent) 30%, transparent); } .meter-profiled { background: var(--accent); } .coverage .hint { margin: 0; } .library { margin: 0 0 .75rem; padding: 0; list-style: none; max-width: 640px; } .library li { display: grid; grid-template-columns: 2.2rem 1fr 1.5rem 5.5rem; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); } .library .rank { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: .85rem; } .library .pick-game { display: flex; align-items: center; gap: .6rem; min-width: 0; cursor: pointer; } .library .pick-game input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; cursor: pointer; } .library .pick-game input:disabled { cursor: default; } .library .is-unknown .pick-game { color: var(--muted); padding-left: 1.65rem; cursor: default; } .library li:has(input:checked:not(:disabled)) { background: color-mix(in srgb, var(--accent) 10%, transparent); } .library .fav-mark { color: var(--accent); } .library .library-link { color: var(--muted); text-align: center; } .library .library-link:hover { color: var(--accent); text-decoration: none; } .library .hours { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; } .library-more summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: .5rem 0; } /* Steam-Bibliothek als Cover-Raster */ .library-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin: 1.6rem 0 1.2rem; } .library-tools .hint { margin: 0; max-width: 34rem; } .library-search { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .55rem 1rem; width: min(100%, 18rem); } .library-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.2rem 1rem; } .lib-card { position: relative; display: grid; gap: .4rem; align-content: start; cursor: pointer; } .lib-card.is-extra, .lib-card.is-filtered { display: none; } .lib-grid.show-all .lib-card.is-extra:not(.is-filtered) { display: grid; } .lib-cover { position: relative; display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); transition: transform .2s, box-shadow .2s; } .lib-cover .cover { border-radius: 0; } .lib-cover .cover-placeholder span { font-size: .95rem; } .lib-card:hover .lib-cover { transform: translateY(-3px); } .lib-check { position: absolute; top: .45rem; left: .45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 13, 11, .55); border: 2px solid rgba(255, 255, 255, .8); color: transparent; font-weight: 800; font-size: .85rem; transition: all .15s; } .lib-card:hover .lib-check { border-color: #fff; } /* Match zum Spielprofil, nur bei Sortierung „Passt zu mir“ */ .lib-match { display: none; position: absolute; left: .45rem; bottom: .45rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(15, 13, 11, .75); color: #fff; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; } .lib-grid.by-match:not(.is-list) .lib-match { display: block; } .lib-card:has(input:checked:not(:disabled)) .lib-cover { box-shadow: 0 0 0 3px var(--accent), 0 10px 24px rgba(0, 0, 0, .3); transform: translateY(-3px); } .lib-card:has(input:checked:not(:disabled)) .lib-check { background: var(--accent); border-color: var(--accent); color: #fff; } .lib-card:has(input:focus-visible) .lib-cover { outline: 2px solid var(--accent); outline-offset: 3px; } .lib-card.is-fav { cursor: default; } .lib-card.is-fav .lib-check { display: none; } .lib-fav { position: absolute; top: .45rem; left: .45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .85rem; } .lib-link { position: absolute; top: .45rem; right: .45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 13, 11, .6); color: #fff; font-size: .8rem; opacity: 0; transition: opacity .15s; } .lib-card:hover .lib-link, .lib-link:focus-visible { opacity: 1; text-decoration: none; } .lib-title { font-size: .85rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Im Raster immer Platz für zwei Zeilen, damit Balken und Stunden in einer Reihe auf gleicher Höhe stehen */ .lib-grid:not(.is-list) .lib-title { min-height: 2.5em; } .lib-hours { display: grid; gap: .25rem; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; } .lib-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .brand-icon { display: inline-block; width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; } /* Logo-Datei als Maske, gefüllt mit der Textfarbe */ .brand-mask { background: currentColor; -webkit-mask: var(--brand) center / contain no-repeat; mask: var(--brand) center / contain no-repeat; } .button .brand-icon { margin-right: .1rem; } .lib-steam { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--muted); white-space: nowrap; } .lib-steam:hover { color: var(--accent); text-decoration: none; } .lib-unknown li a { color: var(--text); } .lib-unknown li a:hover { color: var(--accent); } .lib-bar { display: block; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .lib-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; } .lib-more { text-align: center; margin: 1.6rem 0 0; } /* Umschalter Raster/Liste */ .library-controls { display: flex; align-items: center; gap: .6rem; } .view-toggle { display: inline-flex; padding: .2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .view-toggle button { width: 2.2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; } .view-toggle button svg { width: 1.05rem; height: 1.05rem; } .view-toggle button:hover { color: var(--text); } .view-toggle button[aria-pressed="true"] { background: var(--text); color: var(--bg); } /* Bibliothek, Ansicht „Regal“ (app.js is-shelf-view): Raster, Filter, Suche und Auswahl treten zurück, darunter das nachgeladene Regal (.lib-shelves, gleicher Baustein wie auf dem Profil) */ .library-form.is-shelf-view > :not(.library-tools, input[type="hidden"]) { display: none; } .library-form.is-shelf-view .library-search, .library-form.is-shelf-view .library-tools > .hint { display: none; } .library-form.is-shelf-view .library-tools { justify-content: flex-end; margin-bottom: 0; } .lib-shelves[hidden] { display: none; } .lib-shelves .pf-collection.is-account { margin-top: 0; } .lib-shelves-note { padding: 2rem 0; text-align: center; } /* Listenansicht der Bibliothek: kleines Cover, Titel, Spielzeit-Balken in einer Zeile */ .lib-grid.is-list { grid-template-columns: 1fr; gap: 0; max-width: 820px; } .is-list .lib-card { grid-template-columns: 2.6rem 1fr minmax(8rem, 14rem); align-items: center; gap: 1rem; padding: .4rem .6rem; border-bottom: 1px solid var(--border); border-radius: 8px; transition: background .15s; } .is-list .lib-card:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .is-list .lib-card:has(input:checked:not(:disabled)) { background: color-mix(in srgb, var(--accent) 12%, transparent); } .is-list .lib-cover { border-radius: 4px; box-shadow: none; } .is-list .lib-card:hover .lib-cover, .is-list .lib-card:has(input:checked:not(:disabled)) .lib-cover { transform: none; box-shadow: none; } .is-list .lib-cover .cover-placeholder { padding: 0; align-items: center; justify-content: center; } .is-list .lib-cover .ph-title { display: none; } .is-list .lib-cover .ph-initials { display: block; font-size: .7rem; } .is-list .lib-check, .is-list .lib-fav { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.25rem; height: 1.25rem; font-size: .7rem; } .is-list .lib-link { display: none; } .is-list .lib-title { font-size: .95rem; -webkit-line-clamp: 1; } .is-list .lib-hours { grid-template-columns: 1fr 8rem; align-items: center; gap: .7rem; font-size: .85rem; } .is-list .lib-meta { justify-content: flex-end; gap: .9rem; } /* Liste am Handy: Titel bekommt die ganze Zeile (bis zwei Zeilen), Spielzeit und Store darunter; der Store nur als Logo. Vorher passten neben Balken und „Battle.net“ nur „Call o…“ – alle Call-of-Duty-Teile sahen gleich aus */ @media (max-width: 640px) { .is-list .lib-card { grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: .8rem; row-gap: .3rem; } .is-list .lib-cover { grid-row: 1 / span 2; } .is-list .lib-title { -webkit-line-clamp: 2; font-size: .92rem; line-height: 1.25; } .is-list .lib-hours { grid-column: 2; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; font-size: .8rem; } .is-list .lib-meta { gap: .6rem; } .is-list .lib-steam, .is-list .lib-source { font-size: 0; gap: 0; } .is-list .lib-steam .brand-icon, .is-list .lib-source .brand-icon { width: 1rem; height: 1rem; } } /* Andere Stores: Upload, Bestätigung der erkannten Spiele, Liste je Store */ .store-import { margin: 1.2rem 0 2.8rem; } .store-card { padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 60%); } .store-card h3 { margin: .1rem 0 .4rem; font-size: 1.35rem; letter-spacing: -.02em; } .store-upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: 1.4rem; align-items: center; } .store-upload-text p { margin: 0; color: var(--muted); } .store-upload-text .eyebrow { margin-bottom: .2rem; color: var(--accent); } .store-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem !important; } .store-chips span { padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--text); background: var(--bg); } /* Ablagefläche: die ganze Fläche ist der Knopf zum Auswählen */ .store-drop { display: grid; justify-items: center; gap: .3rem; padding: 1.4rem 1rem; text-align: center; cursor: pointer; border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 14px; background: var(--bg); transition: border-color .15s, background .15s; } .store-drop svg { width: 2rem; height: 2rem; color: var(--accent); } .store-drop strong { font-size: 1.02rem; word-break: break-word; } .store-drop > span { font-size: .8rem; color: var(--muted); } .store-drop:hover, .store-drop.is-over, .store-drop:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); } .store-paste { grid-column: 2; display: grid; justify-items: center; gap: .4rem; margin: -.6rem 0 0; text-align: center; } .store-paste:not(:has(:not([hidden]))) { display: none; } .store-busy { color: var(--text) !important; font-weight: 600; } .store-busy[hidden] { display: none; } .store-upload.is-busy .store-drop { cursor: progress; } .store-upload.is-busy .store-drop > span:not(.store-busy), .store-upload.is-busy .store-drop svg { display: none; } .store-privacy { margin: .7rem .2rem 0; font-size: .8rem; } .store-pending { margin: 1rem .2rem 0; } /* Rückmeldung zu abgearbeiteten Titeln aus Screenshots: gefunden (grün) bzw. nicht gefunden */ .store-result { margin: .6rem .2rem 0; } .store-result.is-found { color: var(--good); } .store-result a { color: inherit; text-decoration: underline; text-underline-offset: .2em; } /* Herkunftsfrage für neue Steam-Konten oben auf „Für dich“ (dashboard.php .ask-card) */ .ask-card { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 0 0 1.4rem; padding: .9rem 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); } .ask-card label { flex: 1 1 100%; } .ask-card select { flex: 1 1 14rem; min-width: 0; max-width: 24rem; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; } .ask-card .hint { flex: 1 1 100%; margin: 0; } /* „Profil melden“ unter dem Vergleich auf fremden Profilen: bewusst unauffällig */ .pf-report { margin: .6rem 0 0; font-size: .82rem; } .pf-report a { color: var(--muted); text-decoration: underline; text-underline-offset: .2em; } .store-confirm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; } .store-confirm-head h3 { margin: 0; font-weight: 600; } .store-confirm select { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-weight: 600; } .lib-steam-head { display: flex; align-items: center; gap: .5rem; } /* Bibliothek ohne Steam: Steam als erster, wichtigster Weg in einem eigenen Kasten */ .lib-steam-first { padding: 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .lib-steam-first h3 { margin: 0 0 .4rem; } .lib-steam-first p { margin: 0 0 1rem; color: var(--muted); } .lib-steam-first .button .brand-icon, .s-actions .button .brand-icon { width: 1rem; height: 1rem; } .lib-steam-head .brand-icon { width: 20px; height: 20px; } @media (max-width: 760px) { .store-upload { grid-template-columns: minmax(0, 1fr); } .store-paste { grid-column: 1; } .store-card { padding: 1.1rem; } } .store-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .9rem; margin: 1rem 0; } .store-pick { position: relative; display: grid; gap: .35rem; cursor: pointer; } .store-pick input { position: absolute; top: .4rem; left: .4rem; z-index: 1; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); } .store-pick-cover .cover { border-radius: 8px; transition: opacity .15s; } .store-pick:has(input:not(:checked)) .store-pick-cover .cover { opacity: .35; } .store-pick-title { font-size: .82rem; line-height: 1.25; } /* Plattform je Spiel (Regalfotos mischen Konsolen): Auswahl unter dem Titel, Verteilung in der Überschrift */ .store-pick-main { position: relative; display: grid; gap: .35rem; align-content: start; cursor: pointer; } /* Kachel als Spalte: Die Auswahl sitzt bündig unten, egal ob der Titel ein- oder dreizeilig ist. .store-confirm davor: Die allgemeine Regel .store-confirm select (font: inherit, fett) war sonst stärker */ .store-picks > .store-pick { display: flex; flex-direction: column; gap: .4rem; } .store-confirm .store-pick-store { width: 100%; margin-top: auto; padding: .25rem .35rem; border-radius: 7px; font-size: .74rem; font-weight: 500; line-height: 1.2; } .store-confirm-split { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; } .store-confirm-split span { padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--border); font-size: .8rem; color: var(--muted); } .store-confirm-split strong { color: var(--text); } .store-confirm .lib-unknown { margin-top: 1rem; } .store-confirm-actions { display: flex; gap: .5rem; margin-top: 1.2rem; } .store-remove { border: 0; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 .3rem; cursor: pointer; } .store-remove:hover { color: var(--accent); } /* Filterleiste der Bibliothek: Launcher als Chips, darunter Spielzeit, Status und Sortierung */ .lib-filters { display: grid; gap: .9rem; margin: 0 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); } .lib-filters[hidden] { display: none; } .lib-stores { display: flex; flex-wrap: wrap; gap: .4rem; } .lib-store { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font: 600 .88rem var(--body); cursor: pointer; transition: border-color .15s, background .15s; } .lib-store span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; } .lib-store:hover { border-color: var(--accent); } .lib-store[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); } .lib-store[aria-pressed="true"] span { color: inherit; opacity: .7; } .lib-selects { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; } .lib-sort { display: inline-flex; align-items: center; gap: .4rem; } .lib-select { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); } .lib-select select { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-weight: 600; } /* Umkehren der Sortierung: gleicher Rahmen wie die Auswahl, gedrückt in Akzentfarbe */ .lib-reverse { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--muted); cursor: pointer; } .lib-reverse svg { width: 1.1rem; height: 1.1rem; } .lib-reverse:hover { color: var(--text); } .lib-reverse[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } /* iOS zoomt beim Antippen in Felder unter 16px heran und bleibt danach vergrößert */ @supports (-webkit-touch-callout: none) { .lib-select select { font-size: 16px; } } .lib-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; font-size: .85rem; color: var(--muted); } .lib-result button[hidden] { display: none; } .lib-source { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lib-empty { margin: 1rem 0; } .lib-empty[hidden] { display: none; } @media (max-width: 760px) { /* Handy: alles bündig in zwei Spalten (Beschriftung | Auswahl), damit die Felder links und rechts auf einer Linie stehen; beim Sortieren teilen sich Auswahl und Umkehr-Knopf die rechte Spalte */ .lib-filters { padding: .8rem; } .lib-selects { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; } .lib-select { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: .5rem; } .lib-select select { width: 100%; min-width: 0; max-width: none; } .lib-sort { display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem; align-items: center; gap: .4rem; } .lib-reverse { width: 2.4rem; height: 100%; min-height: 2.2rem; } /* Suche und Ansicht in einer vollen Zeile, die Suche nimmt den Rest */ .library-tools { flex-direction: column; align-items: stretch; } .library-controls { width: 100%; } .library-search { flex: 1; width: auto; min-width: 0; } .view-toggle { flex: none; } } .lib-unknown { margin-top: 2.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; } .lib-unknown summary { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; } .lib-unknown summary::-webkit-details-marker { display: none; } .lib-unknown summary > span:nth-child(2) { display: grid; gap: .15rem; } .lib-unknown summary .hint { font-size: .85rem; } .lib-unknown-count { flex: none; min-width: 2.8rem; height: 2.8rem; padding: 0 .5rem; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font: 800 1.05rem var(--display); color: var(--muted); } .lib-unknown-chevron { width: 1.2rem; height: 1.2rem; margin-left: auto; color: var(--muted); transition: transform .2s; } .lib-unknown[open] .lib-unknown-chevron { transform: rotate(180deg); } .lib-unknown summary:hover .lib-unknown-chevron { color: var(--accent); } .lib-unknown ul { list-style: none; padding: 0 1.2rem 1rem; margin: 0; columns: 3 14rem; column-gap: 2rem; font-size: .88rem; } .sync-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border); } .coverage > .sync-row:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .sync-state { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .88rem; } .sync-state svg { width: 1rem; height: 1rem; } .lib-unknown li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; break-inside: avoid; border-bottom: 1px solid var(--border); } /* Schalter „Teile derselben Reihe zeigen“: Checkbox auf der Startseite, Link auf der Ergebnisseite, beide als Kippschalter */ .series-toggle { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .9rem; } .series-toggle:hover { color: var(--text); text-decoration: none; } .series-toggle input { position: absolute; opacity: 0; pointer-events: none; } .series-toggle-track { position: relative; flex: none; width: 2.2rem; height: 1.25rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .2s; } .series-toggle-track::after { content: ""; position: absolute; top: 50%; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--muted); transform: translateY(-50%); transition: left .2s, background .2s; } .series-toggle.is-on .series-toggle-track, .series-toggle:has(input:checked) .series-toggle-track { background: var(--accent); border-color: var(--accent); } .series-toggle.is-on .series-toggle-track::after, .series-toggle:has(input:checked) .series-toggle-track::after { left: calc(100% - 1.05rem); background: #fff; } .series-toggle:has(input:focus-visible) .series-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; } /* Plattform-Mehrfachauswahl auf Themenseiten: einzelne Chips, aktive mit Häkchen */ .platform-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 1rem; } .platform-chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 600; font-size: .9rem; } .platform-chips a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; } .platform-chips a.is-active { background: var(--text); border-color: var(--text); color: var(--bg); } .platform-chips a[aria-pressed="true"]::after { content: "✓"; font-size: .8em; } .badge.owned { border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); } .pick .badge.owned { display: inline-block; margin: 0 0 .5rem; font-size: .75rem; } /* Herz und Ausblenden */ .marks { display: inline-flex; gap: .3rem; flex: none; } .mark { width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color .15s, background .15s, border-color .15s, transform .15s; } .mark svg { width: 1rem; height: 1rem; } .mark-heart svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } .mark:hover { color: var(--text); border-color: var(--text); } /* Mülleimer an Treffern der Startseite: wie die Markier-Knöpfe, beim Überfahren rot (app.js, dismissButton) */ .pick-dismiss { flex: none; width: 2rem; height: 2rem; margin-top: 1.05rem; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color .15s, border-color .15s, opacity .2s; } .pick-dismiss svg { width: 1rem; height: 1rem; } .pick-dismiss:hover, .pick-dismiss:focus-visible { color: var(--accent); border-color: var(--accent); } .pick-head .marks + .pick-dismiss { margin-left: -.35rem; } /* In den Kacheln sitzt der Mülleimer als letzter Knopf in der Markier-Leiste auf dem Cover */ .marks .pick-dismiss { margin: 0; } /* Vorschlag entfernen (Mülleimer): Die Karte kippt weg und verweht, der Nachrücker dreht sich wie eine umgedrehte Spielkarte herein, ein Lichtstreif läuft übers Cover und der Match-Stempel springt auf. Zeiten passen zu app.js (LEAVE_MS) */ .rs-tile.is-leaving, .pick.is-leaving, .radar-item.is-leaving { animation: card-out .38s cubic-bezier(.5, 0, .75, 0) forwards; pointer-events: none; } @keyframes card-out { 0% { opacity: 1; transform: none; filter: none; } 30% { opacity: 1; transform: translateY(-10px) rotate(-3deg) scale(1.03); } 100% { opacity: 0; transform: translateY(46px) rotate(9deg) scale(.72); filter: blur(6px); } } .rs-tile.is-arriving, .pick.is-arriving, .radar-item.is-arriving { opacity: 1; animation: card-in .75s cubic-bezier(.2, .9, .25, 1.15) both; } @keyframes card-in { 0% { opacity: 0; transform: perspective(900px) rotateY(-80deg) scale(.86); filter: brightness(1.9) blur(3px); } 55% { opacity: 1; transform: perspective(900px) rotateY(9deg) scale(1.03); filter: brightness(1.25) blur(0); } 100% { opacity: 1; transform: none; filter: none; } } /* Lichtstreif über die Hintergrund-Position statt per Verschieben: bleibt so im Cover, ohne overflow: hidden (das würde den überstehenden Match-Stempel abschneiden) */ .is-arriving :is(.rs-tile-cover, .pick-cover, .radar-cover)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 10px; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .45) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; animation: card-shine .9s .3s ease-out forwards; } @keyframes card-shine { to { background-position: 0 0; } } .is-arriving :is(.match, .stamp) { animation: pop .45s .45s cubic-bezier(.3, 1.6, .5, 1) both; } .mark-heart[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); } .mark-heart[aria-pressed="true"] svg { fill: currentColor; } .mark-heart[aria-pressed="true"]:active, .mark-heart:active { transform: scale(.88); } .mark-hide[aria-pressed="true"] { color: var(--bg); background: var(--text); border-color: var(--text); } .mark-played[aria-pressed="true"] { color: #fff; background: var(--good); border-color: var(--good); } /* Merken: Lesezeichen, gesetzt gefüllt in Gold */ .mark-wish[aria-pressed="true"] { color: #1a1408; background: #f2b33d; border-color: #f2b33d; } .mark-wish[aria-pressed="true"] svg { fill: currentColor; } .card.is-played, .pick.is-played { opacity: .6; } .card-head .marks { margin-left: auto; } .card-head .marks + .match { margin-left: .4rem; } /* Titel und Markier-Knöpfe in einer Zeile: Ein langer Titel bricht selbst um, statt die Knöpfe in eine eigene (am PC unsichtbare) Zeile zu schieben, die dann als Lücke vor der Begründung stand */ .pick-head { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: .3rem .6rem; } .pick-head h3 { flex: 1; min-width: 0; } .pick-head .marks { flex: none; } /* Zeilen über alle Treffer gleich hoch (Cover, Titel, Begründung, Daumen), auch wenn ein Titel zweizeilig ist. Stempel und „In deiner Bibliothek“ liegen über dem Cover und zählen nicht als Zeile */ @supports (grid-template-rows: subgrid) { .pick { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; } .pick blockquote, .pick .vote { align-self: start; } } /* PC: Begründungsblock über alle drei Karten gleich hoch (Randlinie gleich lang), „Worum geht es?“ bündig unten, auch wenn die Chips bei einer Karte zwei Zeilen brauchen */ @supports (grid-template-rows: subgrid) { @media (min-width: 641px) { .pick blockquote { align-self: stretch; display: flex; flex-direction: column; } .pick blockquote > .pick-more { margin-top: auto; padding-top: .6rem; } } } /* Auf dem Cover: deckend, damit es auf jedem Bild lesbar ist */ .pick .badge.owned { position: absolute; top: .6rem; left: .6rem; z-index: 2; margin: 0; padding: .2rem .5rem; font-weight: 700; color: #fff; background: var(--good); border-color: var(--good); box-shadow: 0 4px 12px rgb(0 0 0 / .35); } /* Preis in eigener Zeile direkt unter dem Titel */ .pick-head .marks { margin-top: 1.05rem; } /* Preis, Bewertung und Deck als Zeile unter dem Titel gibt es nur auf dem Handy (siehe unten); am PC stehen sie auf dem Cover. display: none hält sie am PC auch aus dem Subgrid heraus */ .pick-facts { display: none; } .pick.is-hidden { opacity: .4; } .pick.is-hidden blockquote { display: none; } .card.is-hidden { opacity: .45; } .card.is-hidden .card-body > :not(.card-head) { display: none; } /* In Cover-Kacheln unten rechts, erst beim Überfahren (Herz bleibt sichtbar, wenn gesetzt) */ /* Herz unten links, Ausblenden unten rechts (oben sitzen Auswahl-Haken und Link) */ .lib-cover .marks { position: absolute; left: .4rem; right: .4rem; bottom: .4rem; justify-content: space-between; pointer-events: none; } .lib-cover .marks .mark { pointer-events: auto; } .lib-cover .mark { width: 1.8rem; height: 1.8rem; background: rgba(15, 13, 11, .65); border-color: transparent; color: #fff; opacity: 0; } .lib-card:hover .mark, .lib-cover .mark:focus-visible, .lib-cover .mark[aria-pressed="true"] { opacity: 1; } .lib-cover .mark-heart[aria-pressed="true"] { background: var(--accent); } .lib-cover .mark-hide[aria-pressed="true"] { background: #fff; color: #111; } .lib-card.is-hidden .lib-cover > .cover, .lib-card.is-hidden .lib-cover > a > .cover { opacity: .3; filter: grayscale(1); } .lib-card.is-hidden .lib-title { color: var(--muted); text-decoration: line-through; } .is-list .lib-cover .marks { display: none; } @media (hover: none) { .lib-cover .mark { opacity: 1; } } .fav-grid .lib-card { cursor: default; } .fav-grid .lib-title { color: var(--text); } /* Konto, Lieblingsspiele: Kopfbereich mit unscharfem Cover wie auf „Spiele wie …“, größere Cover, Einladungskachel */ .fav-panel { position: relative; isolation: isolate; overflow: hidden; padding: 1.6rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); } .fav-panel::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--cover, none) center / cover; filter: blur(44px) saturate(1.2); opacity: .35; } .fav-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, transparent), var(--surface) 75%); } .fav-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.4rem; } .fav-panel-head h2 { margin: 0 0 .4rem; } .fav-panel-head .hint { margin: 0; max-width: 34rem; } .fav-count { display: inline-block; vertical-align: middle; margin-left: .35rem; padding: .15rem .55rem; border-radius: 999px; font: 700 .8rem/1.2 var(--body); color: var(--accent-ink); background: var(--accent); } .fav-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* Handy: drei Cover nebeneinander statt eines über die volle Breite (150 px Mindestbreite passten nur einmal hinein) */ @media (max-width: 640px) { .fav-panel { padding: 1.1rem; } /* Kompakter Knopf mit kurzem Text („Empfehlungen dazu →“), der lange füllte den Kasten zweizeilig aus */ .fav-panel-head .button { padding: .55rem 1rem; font-size: .92rem; } .fav-panel-head .label-long { display: none; } } .fav-panel-head .label-short { display: none; } @media (max-width: 640px) { .fav-panel-head .label-short { display: inline; } .fav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .7rem; } } .fav-add { display: grid; place-content: center; justify-items: center; gap: .5rem; aspect-ratio: 3 / 4; padding: 1rem; text-align: center; border-radius: 8px; border: 2px dashed color-mix(in srgb, var(--text) 22%, transparent); color: var(--muted); font-weight: 600; font-size: .9rem; transition: border-color .2s, color .2s, transform .2s; } .fav-add:hover { border-color: var(--accent); color: var(--text); text-decoration: none; transform: translateY(-3px); } .fav-add-plus { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.6rem; line-height: 1; } /* Gespielt und Ausgeblendet: zwei Kästen nebeneinander, darin kleine Cover mit Rückgängig-Link */ .mark-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-top: 1.2rem; } .mark-box { padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); } .mark-box-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: 1.25rem; } .mark-box-icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: .95rem; color: var(--bg); background: var(--good); } .mark-box-hide .mark-box-icon { background: var(--muted); } .mark-box-hide .fav-count { background: var(--muted); color: var(--bg); } .mark-box-played .fav-count { background: var(--good); color: var(--bg); } .mark-box .hint { margin: 0 0 1rem; font-size: .85rem; } .mark-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 1rem .8rem; } .mark-shelf > li > * { min-width: 0; } .mark-shelf li { display: grid; gap: .3rem; align-content: start; min-width: 0; transition: opacity .2s; } .mark-shelf .cover { border-radius: 6px; box-shadow: 0 6px 14px rgb(0 0 0 / .25); } .mark-shelf .cover-placeholder span { font-size: .75rem; } /* Immer Platz für zwei Zeilen: Sonst stehen „Gefallen?“, Daumen und „Entfernen“ bei einzeiligen Titeln höher als daneben */ .mark-shelf-title { min-height: 2.5em; font-size: .78rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mark-shelf-undo { justify-self: start; text-align: left; padding: 0; border: 0; background: none; color: var(--muted); font: 600 .75rem/1.2 var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: .15em; } .mark-shelf-undo:hover { color: var(--accent); } .mark-box-hide .mark-shelf .cover { filter: grayscale(.8); opacity: .75; } /* Nach dem Rückgängigmachen bleibt die Kachel blass stehen, bis die Seite neu geladen wird */ .mark-shelf li:not(.is-hidden):not(.is-played):not(.is-wished) { opacity: .35; } .mark-shelf li:not(.is-hidden):not(.is-played):not(.is-wished) button { pointer-events: none; text-decoration: none; } /* Merkliste als volle Breite über den beiden Kästen; erledigte (gespielte) Einträge werden blass */ .mark-box-wish { margin-top: 1.2rem; } .mark-box-wish .mark-box-icon { background: #f2b33d; } .mark-box-wish .fav-count { background: #f2b33d; color: #1a1408; } .mark-box-wish .mark-shelf { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .mark-box-wish li.is-played { opacity: .35; } .mark-box-wish .mark-shelf-title { color: var(--text); } /* Merkliste: Preis klein unter dem Titel, reduzierte mit grünem Rahmen und Hinweis darüber */ .mark-shelf .price-line { font-size: .72rem; gap: .1rem .3rem; } .mark-shelf .price-line b { padding: .08rem .25rem; font-size: .7rem; } .mark-shelf .price-line s { display: none; } .mark-shelf li.is-on-sale .cover { outline: 2px solid #4c6b22; outline-offset: 2px; } .wish-sale { margin: .2rem 0 .9rem; padding: .55rem .8rem; border-radius: 8px; font-size: .88rem; background: color-mix(in srgb, #4c6b22 22%, transparent); border: 1px solid color-mix(in srgb, #4c6b22 60%, transparent); } /* „Hat's gepasst?“ unter gespielten Spielen */ /* „Gepasst?“ über den beiden Daumen: nebeneinander wäre es breiter als eine Regal-Spalte und schob die Cover übereinander */ .rate { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; } .rate-label { flex-basis: 100%; font-size: .72rem; color: var(--muted); } .rate-btn { width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: .8rem; line-height: 1; filter: grayscale(1); opacity: .7; transition: filter .15s, opacity .15s, border-color .15s; } .rate-btn:hover { opacity: 1; } .rate-btn[aria-pressed="true"] { filter: none; opacity: 1; border-color: var(--accent); } /* Startseite: Themen als Einstieg */ .home-themes { border-top: 1px solid var(--border); padding: 3.5rem 0 0; margin-top: 3rem; } .home-themes .chip { color: var(--text); font-size: .95rem; padding: .5rem 1rem; } .home-themes .chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } /* Startseite: Release-Radar ganz unten */ .home-radar { border-top: 1px solid var(--border); padding: 3.5rem 0 1rem; margin-top: 3rem; } .home-radar .hint { margin-top: -1rem; margin-bottom: 1.6rem; } /* Heute Abend: eigener Bereich mit Trennlinie wie der Release-Radar. Ohne Linie wirkten die Filter darüber (Plattform, Mehr Optionen) wie eine Steuerung dieses Blocks; sie gehören aber zum Satz und zu den Treffern */ .home-tonight { border-top: 1px solid var(--border); margin-top: 2.5rem; padding: 3rem 0 3rem; } .home-tonight .hint { margin-top: -1rem; margin-bottom: 2.6rem; } /* ohne Spieldauer rutscht der Titel nicht nach oben an das Cover */ .home-tonight .radar-cover + .radar-title { margin-top: .5rem; } /* Schmale Spalten: Spieldauer klein und normal geschrieben, damit sie in eine Zeile passt */ @media (max-width: 640px) { /* Platz für zwei Zeilen reservieren: Bricht die Angabe nur in einer Spalte um, stehen die Titel trotzdem auf einer Höhe */ .home-tonight .radar-date { font-size: .72rem; letter-spacing: 0; text-transform: none; line-height: 1.25; min-height: 2.5em; } } .radar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); } /* align-content: start: Die Spalten einer Reihe sind gleich hoch; ohne verteilte der Browser den Rest zwischen Datum und Titel, und kürzere Einträge standen versetzt */ .radar-item { display: grid; gap: .35rem; align-content: start; color: var(--text); } .radar-item:hover { text-decoration: none; } .radar-cover { position: relative; display: block; border-radius: 8px; box-shadow: var(--shadow); transition: transform .2s; } .radar-cover .cover { border-radius: 8px; } .radar-item:hover .radar-cover { transform: translateY(-4px); } .radar-cover .stamp { position: absolute; top: -.7rem; right: -.5rem; font-size: 1.2rem; } .radar-date { margin-top: .5rem; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); } .radar-title { font: 800 1.2rem/1.15 var(--display); letter-spacing: -.02em; color: var(--text); } a.radar-title:hover { text-decoration: none; } /* „Heute Abend aus deinem Stapel“: Markier-Kapsel wie bei den Kacheln am rechten Cover-Rand, unter dem Match-Stempel */ .marks-rail .radar-item { position: relative; } .marks-rail .radar-item > .marks { position: absolute; top: 2.6rem; right: -.85rem; } .radar-item.is-played .radar-cover .cover { filter: saturate(.35) brightness(.75); } .radar-item.is-hidden .radar-cover .cover { filter: grayscale(1) brightness(.55); } @media (hover: hover) { .marks-rail .radar-item > .marks { opacity: .35; } .marks-rail .radar-item > .marks:has([aria-pressed="true"]), .marks-rail .radar-item:hover > .marks, .marks-rail .radar-item > .marks:focus-within { opacity: 1; } } @media (max-width: 640px) { .marks-rail .radar-item > .marks { top: 1.8rem; right: -.6rem; } /* Schmale Cover (drei nebeneinander): nur Bewertung und Deck, kleiner */ .radar-cover .cf-rating, .radar-cover .cf-deck { bottom: .35rem; font-size: .68rem; padding: .18rem .3rem; } .radar-cover .cf-rating { left: .35rem; } .radar-cover .cf-rating-word { display: none; } .radar-cover .cf-deck { right: .35rem; } .radar-cover .cf-deck svg { width: .8rem; height: .8rem; } } .radar-item:hover .radar-title { color: var(--accent); } .radar-cta { margin-top: 1.4rem !important; } @media (max-width: 760px) { .radar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; } .radar-title { font-size: .95rem; } .radar-cover .stamp { font-size: .9rem; } } /* Fußzeile der Spielkarten: Navigation links, Kaufen rechts */ .game-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); } .similar-link { font-weight: 600; color: var(--text); } .similar-link:hover { color: var(--accent); text-decoration: none; } .buy { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-left: auto; } .buy-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .2rem; } .buy-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: .82rem; font-weight: 600; transition: border-color .15s, color .15s; } .buy-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .buy-chip .brand-icon { width: 15px; height: 15px; } .buy-platform { font-size: .74rem; font-weight: 500; color: var(--muted); } /* Shop mit mehreren Plattform-Links (Amazon): ein Chip mit Dropdown der Plattformen. Ohne JavaScript hängt das Menü unter dem Chip; app.js setzt es fest an den Bildschirm, damit die wischbare Kaufleiste (Handy) es nicht abschneidet */ .buy-group { position: relative; display: inline-flex; } .buy-group > summary { cursor: pointer; list-style: none; user-select: none; } .buy-group > summary::-webkit-details-marker { display: none; } .buy-group[open] > summary { border-color: var(--accent); color: var(--accent); } .buy-count { display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--border); color: var(--text); font-size: .68rem; font-weight: 700; } .buy-caret { font-size: .7rem; transition: transform .15s; } .buy-group[open] .buy-caret { transform: rotate(180deg); } .buy-group-items { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 11.5rem; padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); } /* Über Cookie-Hinweis und Feedback-Knopf (40), unter der Kopfzeilen-Suche (60) */ .buy-group-items.is-fixed { position: fixed; right: auto; z-index: 50; } .buy-group-items .buy-chip { border: 0; border-radius: 8px; padding: .5rem .65rem; white-space: nowrap; } .buy-group-items .buy-chip:hover { background: var(--surface-2); } @media (prefers-reduced-motion: no-preference) { .buy-group[open] .buy-group-items { animation: buy-open .14s ease-out; } } @keyframes buy-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Zur Startseite mit diesem Spiel im Satz: dezenter Textlink statt großer Knopf */ .combine-link { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text); } .combine-link span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.1rem; line-height: 1; } .combine-link:hover { color: var(--accent); text-decoration: none; } .similar-head .game-actions { border-top: 0; padding-top: 0; justify-content: flex-start; } .similar-head .buy { margin-left: 0; } /* Hinweis zu Cookies (kein Zustimmungs-Banner) */ .cookie-note { position: fixed; z-index: 40; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(640px, calc(100% - 2rem)); display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: .88rem; } .cookie-note[hidden] { display: none; } .cookie-note p { margin: 0; color: var(--muted); } .cookie-note strong { color: var(--text); } .cookie-note .button { flex: none; } /* Mitlaufende Leisten und der Feedback-Knopf rücken über den Hinweis */ .has-cookie-note .library-bar { bottom: 6rem; } @media (max-width: 760px) { /* Handy: eine schmale Leiste statt eines Kastens über einem Fünftel des Bildschirms; Erklärung hinter „Details“ */ .cookie-note { gap: .6rem; bottom: .6rem; padding: .55rem .6rem .55rem .9rem; font-size: .82rem; } .cookie-note-more { display: none; } .has-cookie-note .feedback-fab { display: none; } } .legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 1rem 0; } .legal-table th, .legal-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; } .legal-table th { color: var(--muted); font-weight: 600; } /* Admin: einzelnes Spiel hinzufügen */ /* Admin › Konten: Suchfeld mit Zähler, sortierbare Spaltenköpfe (Pfeil zeigt die Richtung) */ /* Admin, Konten: „Wie auf uns aufmerksam geworden“ (Referral) als Balkenliste */ .referrals { margin: 0 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); max-width: 40rem; } .referrals h3 { margin: 0 0 .7rem; font-size: 1rem; } .referral-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; } .referral-list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(4rem, 1fr) auto auto; align-items: center; gap: .6rem; font-size: .9rem; } .referral-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .referral-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); } @media (max-width: 640px) { .referral-list li { grid-template-columns: minmax(0, 1fr) auto auto; } .referral-bar { grid-column: 1 / -1; order: 3; } } .accounts-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 .8rem; } .sort-head { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; } .sort-head:hover { color: var(--accent); } th[aria-sort="descending"] .sort-head::after { content: " ↓"; } th[aria-sort="ascending"] .sort-head::after { content: " ↑"; } .accounts-table tr[hidden] { display: none; } /* Kompakt, damit alle Spalten ohne seitliches Scrollen passen */ .accounts-table th, .accounts-table td { padding: .5rem .45rem; font-size: .85rem; } .accounts-table td { white-space: nowrap; } .accounts-table td:first-child { white-space: normal; min-width: 7rem; } .accounts-actions { text-align: right; } .accounts-actions form + form { margin-left: .3rem; } /* Admin-Überblick: jede Kachel springt in ihren Bereich; was Aufmerksamkeit braucht, ist rot umrandet */ .admin-overview li { padding: 0; } .admin-overview a { display: block; padding: .6rem .9rem; color: var(--muted); text-decoration: none; } .admin-overview a:hover { color: var(--text); } .admin-overview li:hover { border-color: var(--text); } .admin-overview li.is-attention { border-color: var(--accent); } /* Breite Tabellen (Kontenliste im Admin) scrollen auf dem Handy in sich statt die Seite zu verbreitern */ .table-scroll { overflow-x: auto; } .accounts-table td { white-space: nowrap; } .accounts-table .badge { margin-left: .35rem; font-size: .7rem; } .table-wrap { overflow-x: auto; } /* Begleiter (Hints, app.js): runder Knopf mit dem Playalike-Zeichen unten rechts, darüber eine Sprechblase. Unsichtbar, solange es nichts zu sagen gibt; roter Punkt = offener Tipp */ .buddy { position: fixed; right: 1rem; bottom: 1rem; z-index: 31; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; } .buddy[hidden], .buddy-bubble[hidden], .buddy-cover[hidden] { display: none; } .buddy-toggle { position: relative; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; padding: 0; border-radius: 50%; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 30px rgb(0 0 0 / .3); animation: buddy-in .5s cubic-bezier(.3, 1.5, .5, 1) both; transition: transform .2s, border-color .2s; } .buddy-toggle:hover, .buddy-toggle[aria-expanded="true"] { transform: rotate(-8deg) scale(1.06); border-color: var(--accent); } .buddy-toggle svg { width: 1.7rem; height: 1.7rem; } .buddy-dot { position: absolute; top: .1rem; right: .1rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); animation: buddy-ping 2s ease-out 3; } .buddy-toggle[aria-expanded="true"] .buddy-dot { display: none; } .buddy-bubble { position: relative; display: flex; gap: .8rem; width: min(21rem, calc(100vw - 2rem)); padding: .95rem 2.2rem .95rem 1rem; border-radius: 16px 16px 4px 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px rgb(0 0 0 / .35); transform-origin: bottom right; animation: buddy-bubble .35s cubic-bezier(.3, 1.4, .5, 1) both; } .buddy-cover { flex: none; width: 54px; height: 72px; object-fit: cover; border-radius: 6px; } .buddy-body { min-width: 0; } .buddy-text { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.45; } .buddy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 0; } .buddy-off { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; } .buddy-off:hover { color: var(--text); } .buddy-close { position: absolute; top: .35rem; right: .45rem; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; } .buddy-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } @keyframes buddy-in { from { opacity: 0; transform: translateY(1rem) scale(.6); } } @keyframes buddy-bubble { from { opacity: 0; transform: translateY(.5rem) scale(.85); } } @keyframes buddy-ping { 0% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 10px transparent; } } /* Cookie-Hinweis hat Vorrang (liegt unten über die ganze Breite) */ .has-cookie-note .buddy { display: none; } @media (max-width: 760px) { .buddy { right: .6rem; bottom: .6rem; } .buddy-toggle { width: 2.8rem; height: 2.8rem; } } @media (prefers-reduced-motion: reduce) { .buddy-toggle, .buddy-bubble, .buddy-dot { animation: none; } } /* Neues Konto ohne Grundlage: drei Startschritte auf „Für dich“ (dashboard.php .starter) */ .starter { margin: 1rem 0 3rem; padding: 1.4rem 1.5rem 1.6rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); } .starter-title { margin: 0 0 .3rem; font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--display); letter-spacing: -.02em; } .starter > .hint { margin: 0 0 1.2rem; } .starter-steps { list-style: none; counter-reset: starter; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; } .starter-steps li { counter-increment: starter; display: grid; align-content: start; justify-items: start; gap: .5rem; padding: 1rem; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); } .starter-steps li::before { content: counter(starter); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; } .starter-steps b { font-size: 1.05rem; } .starter-steps span { color: var(--muted); font-size: .92rem; line-height: 1.45; } .starter-steps .button { margin-top: .3rem; } .starter-alt { font-size: .85rem; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; } @media (max-width: 760px) { .starter { padding: 1.1rem 1rem 1.2rem; } .starter-steps { grid-template-columns: minmax(0, 1fr); } } /* Registrieren: Häkchen „Auswahl übernehmen“ erscheint erst, wenn app.js eine Auswahl findet (hidden darf nicht überstimmt werden) */ [data-picks-note][hidden] { display: none !important; } /* Anlass zum roten Punkt an „Für dich“: Karte oben im Konto statt nur im Knopf unten rechts (dashboard.php, data-news-slot) */ .news-card { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 0 0 1.4rem; padding: .9rem 3rem .9rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); } .news-card[hidden], .news-cover[hidden] { display: none; } .news-cover { flex: none; width: 54px; height: 72px; object-fit: cover; border-radius: 6px; } /* 10rem: Am Handy bleibt der Text neben dem Cover (mit 14rem rutschte er darunter, die Karte war 250 statt 167 px hoch) */ .news-body { flex: 1 1 10rem; min-width: 0; } .news-kicker { margin: 0 0 .25rem; font: 600 .72rem/1 var(--body); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); } .news-text { margin: 0; line-height: 1.45; } .news-card .button { flex: none; } .news-close { position: absolute; top: .45rem; right: .5rem; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; } .news-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } #heute-abend { scroll-margin-top: 6rem; } /* „Für dich“ im Menü: Punkt, solange ein persönlicher Tipp offen ist (app.js setzt has-news) */ .nav a.nav-for-you.has-news::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .1rem; border-radius: 50%; background: var(--accent); align-self: flex-start; box-shadow: 0 0 8px var(--accent); } .bottom-nav .nav-for-you.has-news::after { content: ""; position: absolute; top: .35rem; left: calc(50% + .55rem); width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } /* Feedback */ .feedback-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 30; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: .88rem; box-shadow: var(--shadow); } .feedback-fab:hover { border-color: var(--accent); text-decoration: none; } /* Sprach-Hinweis (layout.php): oben rechts unter dem Kopf, unten liegen schon Cookie-Hinweis und Feedback-Knopf */ .lang-hint { position: fixed; top: 5rem; right: 1rem; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; max-width: 22rem; padding: .8rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); animation: options-in .3s cubic-bezier(.2, .8, .2, 1); } .lang-hint[hidden] { display: none; } .lang-hint p { margin: 0; flex: 1 1 100%; font-weight: 600; font-size: .92rem; } @media (max-width: 640px) { .lang-hint { left: 1rem; right: 1rem; max-width: none; top: 4.6rem; } } .feedback { max-width: 620px; } .feedback textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; resize: vertical; } .feedback textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .feedback-kinds { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; padding: 0; margin: 0; } .feedback-kinds legend { font-size: .9rem; color: var(--muted); margin-bottom: .5rem; } .feedback-kinds .error { flex-basis: 100%; } .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .text-list { display: grid; gap: .5rem; max-width: 860px; } .text-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem 1rem; } .text-item summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; cursor: pointer; } .text-item .form { margin: .8rem 0 0; } .support-box { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 2.5rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .support-box > span { font-size: 1.6rem; } .support-box > .support-icon { display: grid; place-items: center; color: #5865f2; } .support-icon .brand-icon { width: 1.8rem; height: 1.8rem; } .discord-link { display: inline-flex; align-items: center; gap: .35rem; } .discord-link .brand-icon { width: 16px; height: 16px; } .support-box p { flex: 1 1 18rem; margin: 0; color: var(--muted); font-size: .92rem; } .support-box strong { display: block; color: var(--text); } .support-link { color: var(--text) !important; font-weight: 600; } /* Öffentliche Zahlen zum Katalog (Startseite, Kaffee-Seite) */ /* Eine kurze Zeile unter „So funktioniert's“; die Zahlen in Akzentfarbe */ .catalog-line { font: 800 clamp(1.2rem, 2.2vw, 1.6rem)/1.25 var(--display); letter-spacing: -.02em; margin: 2.5rem 0 0; } .catalog-line strong { color: var(--accent); font-weight: inherit; font-variant-numeric: tabular-nums; } .story .catalog-line { margin-top: 2.2rem; } /* Kaffee-Seite: Geschichte hinter Playalike als ruhige Lesespalte */ .story { max-width: 680px; padding: 2.5rem 0 3rem; } .story h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; margin: 0 0 2rem; } .story h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; } .story > p { color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin: 0; } .story-cta { margin-top: 2.8rem; padding: 1.4rem 1.5rem; border-radius: 14px; display: grid; gap: .8rem; justify-items: start; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); } .story-cta p { margin: 0; } .feedback-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; max-width: 820px; } .feedback-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; } .feedback-item header { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: .85rem; } .feedback-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin: .6rem 0 0; font-size: .88rem; color: var(--muted); } .feedback-from strong { color: var(--text); } .feedback-item time { color: var(--muted); } .feedback-message { margin: .7rem 0; white-space: normal; } .feedback-item.is-done { opacity: .55; } @media (max-width: 760px) { .feedback-fab { left: .6rem; bottom: .6rem; padding: .45rem .8rem; } } /* Handy: beim Herunterscrollen (Lesen) aus dem Weg, beim Hochscrollen wieder da (app.js setzt is-tucked) */ .feedback-fab { transition: transform .25s, opacity .25s; } @media (max-width: 760px) { .feedback-fab.is-tucked { transform: translateY(160%); opacity: 0; pointer-events: none; } } /* Konto am Handy: weniger Leerraum zwischen Begrüßung und Reitern */ @media (max-width: 640px) { .account-head { padding: 1.4rem 0 .2rem; } .account-head .meta:empty { display: none; } .account > .tabs { margin-top: .4rem; } } /* Themenseiten */ .breadcrumbs { margin: 1.5rem 0 0; font-size: .85rem; color: var(--muted); } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--accent); } /* Themen-Übersicht: Kopfbereich mit langsam ziehender Cover-Wand rechts, Text links auf ruhiger Fläche */ .themes-hero { position: relative; overflow: hidden; isolation: isolate; padding: 5.5rem 0 3.5rem; } .themes-wall { position: absolute; inset: -45% -10% -25% 32%; z-index: -2; display: flex; flex-direction: column; gap: 12px; transform: rotate(-8deg); } .themes-wall-row { display: flex; gap: 12px; width: max-content; animation: drift var(--speed, 120s) linear infinite; } .themes-wall-row:nth-child(even) { animation-direction: reverse; } .themes-wall img { flex: none; width: clamp(84px, 9vw, 130px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; opacity: var(--tile-opacity); filter: saturate(.75); } .themes-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--veil-strong) 0%, var(--veil-strong) 38%, var(--veil) 68%, color-mix(in srgb, var(--bg) 30%, transparent) 100%), linear-gradient(to bottom, transparent 65%, var(--bg) 100%); } .themes-hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: .98; letter-spacing: -.045em; margin: 0; max-width: 12ch; } .themes-hero .lead { max-width: 34rem; margin-bottom: 0; } /* Themen-Kacheln: eigener Farbton (--hue), gefächerte Cover der passendsten Spiele, ganze Kachel klickbar */ .theme-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.1rem; margin: 0 0 1rem; } .theme-card { --ink: #f4efe6; position: relative; display: flex; flex-direction: column; min-height: 23rem; overflow: hidden; isolation: isolate; border-radius: 16px; color: var(--ink); border: 1px solid hsl(var(--hue) 50% 35% / .5); background: radial-gradient(120% 80% at 100% 0%, hsl(var(--hue) 75% 45% / .55), transparent 60%), linear-gradient(165deg, hsl(var(--hue) 45% 20%), hsl(var(--hue) 40% 8%)); transition: transform .25s, box-shadow .25s; } .theme-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px hsl(var(--hue) 70% 30% / .8); } .theme-card-covers { display: flex; gap: 8px; height: 11rem; padding: 1.1rem 0 0 1.1rem; transform: rotate(-6deg) translateY(-.6rem) scale(1.12); transform-origin: left top; mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); } .theme-card-covers img { flex: none; width: 5.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px rgb(0 0 0 / .4); transition: transform .35s; } .theme-card-covers img:nth-child(even) { transform: translateY(1.2rem); } .theme-card:hover .theme-card-covers img { transform: translateY(-.3rem); } .theme-card:hover .theme-card-covers img:nth-child(even) { transform: translateY(.9rem); } .theme-card-body { margin-top: auto; padding: 0 1.3rem 1.2rem; display: grid; gap: .55rem; } .theme-card-count { margin: 0; font: 700 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--hue) 85% 72%); } .theme-card h2, .theme-card h3 { margin: 0; font-size: 1.55rem; line-height: 1.05; } .theme-card :is(h2, h3) a { color: var(--ink); } .theme-card :is(h2, h3) a:hover { text-decoration: none; } .theme-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Übersicht in Gruppen: kompaktere Kacheln, drei nebeneinander (etwa halb so hoch wie vorher) */ .theme-index:has(.is-compact) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 0; } .theme-card.is-compact { min-height: 16.5rem; } .theme-card.is-compact .theme-card-covers { height: 7.6rem; padding: .9rem 0 0 .9rem; } .theme-card.is-compact .theme-card-covers img { width: 4.3rem; } .theme-card.is-compact .theme-card-body { padding: 0 1.1rem 1rem; gap: .45rem; } .theme-card.is-compact h3 { font-size: 1.3rem; } .theme-card.is-compact .theme-card-intro { font-size: .85rem; } .theme-card.is-compact .theme-card-platforms a { padding: .25rem .55rem; font-size: .72rem; } .theme-card[hidden], .theme-group[hidden] { display: none; } /* Match-Stempel auf kopierten Karten unter „Deine Themen“: innen oben rechts (die Kachel schneidet Überstehendes ab) */ .theme-card > .stamp { position: absolute; top: .8rem; right: .8rem; z-index: 3; font-size: 1.1rem; } /* Sprungleiste zu den Gruppen und Suche */ .theme-jump { position: sticky; top: 4.4rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: -1.2rem 0 2rem; padding: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); backdrop-filter: blur(8px); width: fit-content; max-width: 100%; } .theme-jump > a { padding: .4rem .9rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--text); } .theme-jump > a:hover, .theme-jump > a:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); text-decoration: none; } .theme-search input { font: inherit; font-size: .88rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .9rem; width: 12rem; } .theme-search[hidden] { display: none; } .theme-search-empty { margin: 0 0 2rem; } .theme-group { scroll-margin-top: 8rem; } /* Koop-Thema: Hinweis auf den Gruppen-Finder */ .theme-together { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: 16px; color: var(--text); border: 1px solid color-mix(in srgb, var(--theme, var(--accent)) 40%, var(--border)); background: color-mix(in srgb, var(--theme, var(--accent)) 10%, var(--surface)); transition: border-color .15s; } .theme-together:hover, .theme-together:focus-visible { text-decoration: none; border-color: var(--theme, var(--accent)); } .theme-together > span:nth-child(2) { display: grid; gap: .2rem; } .theme-together small { color: var(--muted); } .theme-together-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; color: var(--theme, var(--accent)); background: color-mix(in srgb, var(--theme, var(--accent)) 16%, transparent); } /* „Für dich“ im Konto: Geschmackskarte (Farbton des Spielertyps), Reihen „Weil du … magst“ */ .taste-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; margin: 0 0 2.6rem; padding: 1.4rem 1.6rem; border-radius: 20px; border: 1px solid hsl(var(--hue) 55% 45% / .45); background: radial-gradient(120% 160% at 0% 0%, hsl(var(--hue) 70% 45% / .22), transparent 60%), var(--surface); } .taste-fan { position: relative; display: block; width: 9.5rem; height: 7.6rem; } .taste-fan-cover { position: absolute; bottom: 0; width: 4.6rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 9px; box-shadow: 0 12px 26px -12px rgb(0 0 0 / .8), 0 0 0 2px var(--surface); } .taste-fan-cover:nth-child(1) { left: 0; transform: rotate(-10deg); } .taste-fan-cover:nth-child(2) { left: 1.6rem; bottom: .5rem; transform: rotate(-3deg); z-index: 2; } .taste-fan-cover:nth-child(3) { left: 3.2rem; bottom: .5rem; transform: rotate(4deg); z-index: 3; } .taste-fan-cover:nth-child(4) { left: 4.8rem; transform: rotate(11deg); z-index: 1; } /* Selbst gewähltes Highlight: vorn, etwas größer, Rahmen im Farbton aus seinem Cover (wie auf dem Profil) */ .taste-fan-cover.is-highlight { z-index: 4; transform: rotate(3deg) scale(1.1); transform-origin: bottom center; box-shadow: 0 0 0 2px hsl(var(--hue) 80% 62%), 0 10px 26px rgb(0 0 0 / .55); } .taste-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; min-width: 0; } .taste-body .eyebrow { margin: 0; } .taste-type { margin: 0; font: 800 clamp(1.4rem, 2.8vw, 2rem)/1.15 var(--display); } .taste-text { margin: 0; color: var(--muted); font-size: .92rem; } .taste-dims { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 0; } .taste-dims span { padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--text); background: hsl(var(--hue) 70% 45% / .18); border: 1px solid hsl(var(--hue) 60% 50% / .35); } .taste-edit { align-self: start; } /* Knöpfe rechts untereinander: anpassen und als Bild teilen (Teilen erst mit JavaScript sichtbar, app.js) */ .taste-actions { align-self: start; display: grid; gap: .45rem; justify-items: stretch; margin: 0; } .taste-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .taste-share[hidden] { display: none; } .taste-share.is-busy { opacity: .6; pointer-events: none; } .fy-row + .fy-row { margin-top: 2rem; } .fy-row .live-head h3 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); } .fy-row .radar-date { text-transform: none; letter-spacing: 0; font-size: .78rem; } @media (max-width: 760px) { .taste-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.1rem; } .taste-fan { width: 8rem; height: 6.4rem; } .taste-fan-cover { width: 3.8rem; } .taste-fan-cover:nth-child(2) { left: 1.4rem; } .taste-fan-cover:nth-child(3) { left: 2.8rem; } .taste-fan-cover:nth-child(4) { left: 4.2rem; } .taste-edit { justify-self: start; } .taste-actions { display: flex; flex-wrap: wrap; justify-self: start; } } /* Blockbuster: großes Band im Radar und goldenes Abzeichen im Zeitstrahl */ .big-badge { position: absolute; left: .45rem; bottom: .45rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border-radius: 6px; font: 800 .7rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; color: #1d1206; background: linear-gradient(135deg, #ffd36b, #f59e0b 55%, #ea6a12); box-shadow: 0 6px 16px -6px rgb(234 106 18 / .7); } .big-badge .flame-icon { width: .85rem; height: .85rem; } .big-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); gap: 1.1rem; } .big-card { position: relative; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1.2rem; align-items: start; padding: 0; overflow: visible; border-radius: 16px; background: linear-gradient(135deg, rgb(245 185 66 / .12), transparent 55%), var(--surface); border: 1px solid rgb(245 185 66 / .55); box-shadow: 0 0 0 1px rgb(245 185 66 / .15), 0 18px 40px -22px rgb(245 185 66 / .5); } .big-cover { grid-row: 1 / span 3; display: block; border-radius: 15px 0 0 15px; box-shadow: none; } .big-cover .cover { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 15px 0 0 15px; display: block; } .big-card:hover .big-cover { transform: none; } .big-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: 1rem 1.1rem 1rem 0; align-content: start; min-width: 0; } .big-when { margin: 0; font: 800 .82rem/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; color: #f5b942; } .big-title { font: 800 clamp(1.2rem, 2.2vw, 1.55rem)/1.15 var(--display); color: var(--text); } .big-title:hover { color: #f5b942; text-decoration: none; } .big-date { margin: 0; font-size: .85rem; color: var(--muted); } .big-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 0; } .big-sum { margin: .3rem 0 0; font-size: .86rem; color: var(--muted); } /* Im Zeitstrahl: goldener Rahmen ums Cover */ .rl-tile.is-blockbuster .rs-tile-cover { box-shadow: 0 0 0 2px #f5b942, 0 14px 30px -14px rgb(245 185 66 / .7); border-radius: 10px; } /* Datum (auch unten links) über das Abzeichen rücken */ .rl-tile.is-blockbuster .rl-date { bottom: 2.15rem; } @media (max-width: 640px) { /* Kleine Cover (drei pro Reihe): Match-Stempel und Abzeichen deutlich kleiner, sonst decken sie das halbe Bild zu */ /* .stamp.stamp: gewinnt gegen die älteren Regeln weiter unten (.radar-compact .radar-cover .stamp) */ :is(.theme-wall .wall-cover, .radar-grid .radar-cover) > .stamp.stamp { top: -.4rem; right: -.3rem; font-size: .7rem; padding: .28rem .34rem .22rem; } :is(.theme-wall .wall-cover, .radar-grid .radar-cover) > .stamp.stamp small { font-size: .42rem; margin-top: .12rem; } .rl-tile .rs-tile-cover > .match.match { font-size: .72rem; padding: .2rem .4rem; top: -.35rem; right: -.25rem; } .rl-tile .big-badge { padding: .22rem .3rem; } .rl-tile .big-badge-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rl-tile.is-blockbuster .rl-date { bottom: .45rem; left: 2.1rem; } /* Großes Band: Cover hier nur 6,5rem breit, das Abzeichen ragte über den Rand. Als bündiges Band unten übers Cover */ .big-cover { position: relative; } .big-cover > .big-badge { left: 0; right: 0; bottom: 0; justify-content: center; gap: .2rem; padding: .3rem .2rem; border-radius: 0 0 0 15px; font-size: .58rem; letter-spacing: .02em; box-shadow: none; } .big-cover > .big-badge .flame-icon { width: .7rem; height: .7rem; } .big-card { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 .9rem; } /* .big-card.big-card: gewinnt gegen die allgemeine Regel weiter unten (bei den fold-actions) */ .marks-rail .big-card.big-card > .fold-actions { width: 6.5rem; padding-bottom: 1.9rem; } .big-body { padding: .8rem .8rem .8rem 0; } .big-sum { display: none; } } /* Release-Radar im Konto: Statuskarte, Merkliste mit Countdown, Zeitstrahl nach Monaten */ .radar-status { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 22rem); align-items: center; gap: 1.4rem; margin: 0 0 2.6rem; padding: 1.3rem 1.5rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--surface); } .radar-status-cover { position: relative; display: block; width: 5.6rem; } .radar-status-cover .cover { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); } .radar-status-cover .stamp { position: absolute; top: -.7rem; right: -.8rem; font-size: .95rem; } .radar-status-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; min-width: 0; } .radar-status-body .eyebrow, .radar-status-body .hint { margin: 0; } .radar-status-next { margin: 0; font: 800 clamp(1.2rem, 2.4vw, 1.6rem)/1.2 var(--display); } .radar-status-next a { color: var(--accent); } .radar-status-mail { padding-left: 1.4rem; border-left: 1px solid var(--border); } .radar-status-mail .radar-toggle { margin: 0; display: grid; gap: .6rem; justify-items: start; } .radar-status-mail p { margin: 0; font-size: .88rem; color: var(--muted); } .radar-status-mail b { color: var(--text); } .radar-wish { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .7rem; } .radar-wish a { display: flex; align-items: center; gap: .8rem; padding: .55rem; border-radius: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: border-color .15s; } .radar-wish a:hover, .radar-wish a:focus-visible { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .radar-wish-cover { flex: none; width: 2.8rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; } .radar-wish span { display: grid; gap: .1rem; min-width: 0; } .radar-wish b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .radar-wish small { color: var(--accent); font-weight: 700; } .radar-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.4rem; } .radar-filter[hidden], .radar-month[hidden], [data-radar-tile][hidden] { display: none; } .radar-month + .radar-month { margin-top: 1.8rem; } .radar-month-name { margin: 0 0 .8rem; font-size: 1.05rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } @media (max-width: 900px) { .radar-status { grid-template-columns: auto minmax(0, 1fr); } .radar-status-mail { grid-column: 1 / -1; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--border); } } @media (max-width: 640px) { .radar-status { padding: 1rem; gap: 1rem; } .radar-status-cover { width: 4.2rem; } /* Match-Stempel passend zum kleinen Cover (wie in der Wand) */ .radar-status-cover > .stamp.stamp { top: -.45rem; right: -.55rem; font-size: .72rem; padding: .28rem .36rem .22rem; } .radar-status-cover > .stamp.stamp small { font-size: .44rem; margin-top: .12rem; } .radar-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .radar-filter .wall-chip { flex: none; } } /* Themenseite: Podest (Platz 1 in der Mitte, größer), Filterleiste, Cover-Wand mit Details unter der Reihe */ .theme-browse { margin-top: 1rem; } /* Karten gleich hoch und oben bündig: Mit align-items: end standen die Karten unten auf einer Linie, je nach Textlänge begannen sie (und ihre Cover) oben aber unterschiedlich hoch (Andreas 08.11.). Die Kaufen-Zeile rutscht ans Kartenende */ .theme-podium { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; } .theme-podium[hidden] { display: none; } .podium-card { position: relative; display: grid; gap: .8rem; padding: 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); } .podium-card.is-place-1 { order: 2; border-color: #f5b942; box-shadow: 0 0 0 1px #f5b942, 0 18px 40px -20px rgb(245 185 66 / .5); padding: 1.2rem; } .podium-card.is-place-2 { order: 1; } .podium-card.is-place-3 { order: 3; } .podium-media { position: relative; width: 62%; margin: 0 auto; } .podium-card.is-place-1 .podium-media { width: 72%; } .podium-media .radar-cover { display: block; } .podium-media .radar-cover .cover { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); } .podium-media .radar-cover > .stamp.is-thread { position: absolute; top: -.7rem; right: -.8rem; z-index: 2; font-size: 1.1rem; } /* minmax(0, 1fr): Die Spalte schrumpft mit, sonst hielten die Kauf-Knöpfe (eine Zeile) sie breit und schoben am Handy die ganze Seite über den Rand */ .podium-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; text-align: left; min-width: 0; } .podium-body .theme-game { font-size: 1.2rem; line-height: 1.2; } .podium-card.is-place-1 .theme-game { font-size: 1.45rem; } .podium-body .meta, .podium-body .reasons { margin: 0; } .podium-body .summary { margin: 0; font-size: .88rem; color: var(--muted); } .podium-body .pick-toggle { justify-self: start; margin: 0; } /* Drei nebeneinander: Inhalt oben, Kaufen-Zeile und „Auswählen“ unten bündig; Platz 1 oben mit gleichem Abstand wie die anderen, damit die Cover auf einer Höhe beginnen (nach den Grundregeln, sonst überstimmten diese das) */ @media (min-width: 901px) { .podium-card { grid-template-rows: auto 1fr; align-content: start; } .podium-card.is-place-1 { padding: 1rem 1.2rem; } .podium-body { display: flex; flex-direction: column; } .podium-body > * { min-width: 0; } .podium-body > .game-actions { margin-top: auto; } .podium-body .pick-toggle { align-self: flex-start; } } /* Markier-Knöpfe im Textblock der Details als normale Zeile, nicht als Kapsel am Cover */ .wall-detail-body > .marks { position: static; justify-self: start; opacity: 1; transform: none; } .theme-rank { font-variant-numeric: tabular-nums; } /* Filterleiste: klebt beim Scrollen unter der Kopfzeile */ .wall-bar { position: sticky; top: 4.4rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 1.2rem; padding: .6rem .7rem; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border); backdrop-filter: blur(8px); } .wall-bar[hidden] { display: none; } .wall-sort select { font: inherit; font-size: .85rem; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: .38rem .8rem; } .wall-chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 18rem; } .wall-chip { padding: .32rem .75rem; border-radius: 999px; font: 700 .8rem var(--body); cursor: pointer; color: var(--text); background: transparent; border: 1px solid var(--border); transition: background .15s, border-color .15s; } .wall-chip.is-quick { border-style: dashed; } .wall-chip:hover { border-color: var(--theme, var(--accent)); } .wall-chip[aria-pressed="true"] { color: #fff; border-style: solid; border-color: transparent; background: var(--theme, var(--accent)); } .wall-count { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; } .wall-reset { border: 0; background: none; padding: .3rem .4rem; font: 700 .8rem var(--body); color: var(--accent); cursor: pointer; } .wall-reset[hidden] { display: none; } .link-button { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; } /* Cover-Wand: große Cover, darunter Titel und stärkstes Merkmal */ /* Spaltenzahl: Standard je Breite (--cols), vom Besucher mit − / + geändert (--user-cols, app.js) */ .theme-wall { --cols: 6; display: grid; grid-template-columns: repeat(var(--user-cols, var(--cols)), minmax(0, 1fr)); gap: 1.4rem 1rem; align-items: start; } /* minmax(0, 1fr): Ohne feste Spalte richtete sich die Kachel nach dem längsten Wort im Titel („Remastered“); bei vielen Covern pro Reihe am Handy wurde das Cover breiter als seine Spalte und lag über den Nachbarn (Andreas 08.11.) */ .wall-tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; min-width: 0; } .wall-tile[hidden] { display: none; } .wall-cover { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; overflow: visible; transition: transform .2s; } .wall-cover .cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); } .wall-cover:hover, .wall-cover:focus-visible { transform: translateY(-3px); } .wall-tile.is-open .wall-cover .cover { outline: 3px solid var(--theme, var(--accent)); outline-offset: 2px; } .wall-rank { position: absolute; top: .4rem; left: .4rem; z-index: 2; min-width: 1.7rem; padding: .15rem .4rem; border-radius: 8px; font: 800 .85rem/1.2 var(--display); color: #fff; background: rgb(0 0 0 / .62); backdrop-filter: blur(4px); } /* Schilder auf dem Wand-Cover klein (wie in den Kacheln): Bewertung unten links, Preis unten rechts, ohne „positiv“ und Streichpreis; das Steam Deck steht im Detailbereich */ .wall-cover { font: 700 .74rem/1.1 var(--body); } .wall-cover .cf-price, .wall-cover .cf-rating { bottom: .4rem; font-size: .74rem; border-radius: 5px; max-width: calc(100% - .8rem); } .wall-cover .cf-rating { left: .4rem; right: auto; padding: .22rem .34rem; gap: .25rem; } .wall-cover .cf-price { left: auto; right: .4rem; } .wall-cover .cf-price b, .wall-cover .cf-amount { padding: .22rem .32rem; } .wall-cover .cf-amount s, .wall-cover .cf-rating-word, .wall-cover .cf-deck { display: none; } /* Ist das Cover zu schmal für beide, steht der Preis über der Bewertung */ @container wallcover (max-width: 9.5rem) { .wall-cover .cf-price { right: auto; left: .4rem; bottom: 1.9rem; } } .wall-cover { container: wallcover / inline-size; } .wall-cover > .stamp.is-thread { position: absolute; top: -.6rem; right: -.55rem; z-index: 3; font-size: .95rem; padding: .4rem .5rem .32rem; } .wall-title { margin: .2rem 0 0; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; } .wall-title a { color: var(--text); } .wall-title a:hover { color: var(--theme, var(--accent)); text-decoration: none; } .wall-reason { margin: 0; font-size: .78rem; font-weight: 700; color: var(--theme, var(--accent)); } /* Nur für die Listenansicht */ .wall-meta, .wall-sum { display: none; } /* Viele kleine Cover (viele Spalten): Titel kleiner, Merkmal weg, Schilder ohne Preis */ .wall-tile { container: walltile / inline-size; } @container walltile (max-width: 8.5rem) { .wall-title { font-size: .8rem; } .wall-reason { display: none; } .wall-cover .cf-price { display: none; } .wall-rank { font-size: .72rem; min-width: 1.4rem; } } /* Listenansicht: eine Zeile je Spiel, Cover links, daneben Titel, Eckdaten, Merkmal, zwei Zeilen Beschreibung */ .theme-wall.is-list { grid-template-columns: minmax(0, 1fr); gap: .7rem; } .theme-wall.is-list > .wall-tile { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 1rem; row-gap: .25rem; align-items: start; padding: .7rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .theme-wall.is-list .wall-cover { grid-row: 1 / span 4; } .theme-wall.is-list .wall-cover :is(.cf-price, .cf-rating, .cf-deck) { display: none; } .theme-wall.is-list .wall-title { margin: 0; font-size: 1.05rem; } .theme-wall.is-list .wall-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; font-size: .8rem; } .theme-wall.is-list .wall-reason { display: block; order: 0; } .theme-wall.is-list .wall-sum { display: -webkit-box; margin: 0; font-size: .86rem; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Markier-Kapsel (absolut an der Kachel) in der Liste um den Kachel-Innenabstand aufs Cover verschieben */ .theme-wall.is-list > .wall-tile > .marks { margin: .7rem 0 0 .7rem; } .wall-title .theme-rank { color: var(--theme, var(--accent)); margin-right: .1rem; } .theme-wall.is-list > .wall-tile:hover { border-color: color-mix(in srgb, var(--theme, var(--accent)) 45%, var(--border)); } /* Umschalter Raster/Liste und Spaltenzahl in der Filterleiste */ .wall-view { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem; border-radius: 999px; border: 1px solid var(--border); } .wall-view-btn { display: grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .35rem; border: 0; border-radius: 999px; cursor: pointer; font: 800 1rem/1 var(--body); color: var(--muted); background: transparent; } .wall-view-btn svg { width: .95rem; height: .95rem; fill: currentColor; } .wall-view-btn:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .wall-view-btn[aria-pressed="true"] { color: #fff; background: var(--theme, var(--accent)); } .wall-view-btn:disabled { opacity: .35; cursor: default; } .wall-size { display: inline-flex; align-items: center; gap: .1rem; margin-left: .2rem; padding-left: .3rem; border-left: 1px solid var(--border); } .wall-size[hidden] { display: none; } .wall-cols { min-width: 1.2rem; text-align: center; font: 800 .82rem var(--body); color: var(--text); font-variant-numeric: tabular-nums; } /* Details unter der Reihe, über die volle Breite */ .wall-detail { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1.3rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--theme, var(--accent)) 45%, var(--border)); animation: options-in .25s cubic-bezier(.2, .8, .2, 1); } .wall-detail[hidden] { display: none; } .wall-detail .card-cover { position: relative; display: block; } .wall-detail .card-cover .cover { width: 100%; height: auto; border-radius: 10px; } .wall-detail-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; min-width: 0; padding-right: 2rem; } .wall-detail-title { margin: 0; font: 800 1.35rem/1.2 var(--display); } .wall-detail-title a { color: var(--text); } .wall-detail .meta, .wall-detail .reasons, .wall-detail .summary { margin: 0; } .wall-detail .pick-toggle { justify-self: start; margin: 0; } .wall-close { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); } .wall-close:hover { background: color-mix(in srgb, var(--text) 18%, transparent); } .wall-empty { margin: 1rem 0; } .wall-more-wrap { text-align: center; margin: 1.6rem 0 0; } .wall-more-wrap [hidden] { display: none; } @media (max-width: 1100px) { .theme-wall { --cols: 5; } } @media (max-width: 900px) { .theme-wall { --cols: 4; } .theme-podium { grid-template-columns: minmax(0, 1fr); } .podium-card { grid-template-columns: 110px minmax(0, 1fr); align-items: start; } .podium-card.is-place-1 { order: 0; } .podium-card .podium-media, .podium-card.is-place-1 .podium-media { width: 100%; } } @media (max-width: 640px) { .theme-wall { --cols: 3; gap: 1rem .6rem; } .wall-title { font-size: .82rem; } .wall-reason { display: none; } .wall-cover .cf-price { display: none; } .wall-detail { grid-template-columns: 80px minmax(0, 1fr); padding: 1rem; gap: .9rem; } .wall-detail-title { font-size: 1.1rem; } .wall-bar { top: 4rem; border-radius: 14px; } .wall-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-basis: 100%; order: 3; } .wall-chip { flex: none; } .podium-card { grid-template-columns: 84px minmax(0, 1fr); padding: .85rem; } .podium-body .summary { display: none; } } @media (max-width: 640px) { /* Handy: nicht mitlaufen (sonst schob sich die Faden-Leiste darüber und es blieb nur „Entdecken“ sichtbar); die vier Gruppen in einer Zeile, Suche darunter */ .theme-jump { position: relative; top: auto; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .3rem .1rem; border-radius: 16px; margin-top: -.6rem; } .theme-jump > a { padding: .35rem .45rem; font-size: .82rem; } .theme-jump > :not(a) { grid-column: 1 / -1; } .theme-search input { width: 100%; } .theme-search { flex: 1 1 100%; } .theme-together { grid-template-columns: minmax(0, 1fr); } .theme-together-icon { display: none; } } .theme-card-intro { margin: 0; color: color-mix(in srgb, var(--ink) 72%, transparent); font-size: .92rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .theme-card-platforms { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 0; } .theme-card-platforms a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--ink); background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .14); } .theme-card-platforms a:hover { background: hsl(var(--hue) 70% 45% / .45); text-decoration: none; } .theme-card-platforms .brand-icon { width: 14px; height: 14px; } /* Themenseite: alles im Farbton des Themas. --theme ist zur Schriftfarbe hin gemischt, damit es hell und dunkel lesbar bleibt */ .theme-page { --theme: color-mix(in srgb, hsl(var(--hue) 75% 55%) 72%, var(--text)); } .theme-hero { --ink: #f4efe6; position: relative; overflow: hidden; isolation: isolate; color: var(--ink); padding: 4.2rem 0 2.6rem; /* oben Platz für die feste Kopfzeile */ background: radial-gradient(90% 120% at 100% 0%, hsl(var(--hue) 75% 45% / .55), transparent 60%), linear-gradient(165deg, hsl(var(--hue) 45% 20%), hsl(var(--hue) 40% 8%)); } .theme-hero-text { position: relative; } .theme-hero .breadcrumbs, .theme-hero .breadcrumbs a { color: color-mix(in srgb, var(--ink) 65%, transparent); } .theme-hero .breadcrumbs a:hover { color: var(--ink); } .theme-hero-count { margin: 2.4rem 0 .7rem; font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--hue) 85% 72%); } .theme-hero h1 { color: var(--ink); font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1; letter-spacing: -.04em; margin: 0; max-width: 14ch; } .theme-hero-intro { color: color-mix(in srgb, var(--ink) 75%, transparent); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; max-width: 34rem; margin: 1rem 0 1.5rem; } .theme-hero .platform-chips { margin: 0; } .theme-hero .platform-chips a { color: var(--ink); background: rgb(0 0 0 / .28); border-color: rgb(255 255 255 / .16); } .theme-hero .platform-chips a:hover { border-color: hsl(var(--hue) 80% 65%); } .theme-hero .platform-chips a.is-active { background: var(--ink); border-color: var(--ink); color: #15110d; } /* Cover-Fächer rechts: die ersten fünf Spiele der Liste */ .theme-hero-fan { position: absolute; right: max(2rem, calc(50% - 560px)); top: 50%; width: 26rem; height: 20rem; transform: translateY(-46%); pointer-events: none; } .theme-hero-fan img { position: absolute; left: calc(var(--i) * 4.6rem); top: calc(var(--i) * .5rem); width: 9.5rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 40px rgb(0 0 0 / .5); z-index: calc(10 - var(--i)); transform: rotate(calc(-10deg + var(--i) * 5deg)); transform-origin: bottom center; opacity: 0; animation: fan-in .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.1s + var(--i) * .08s); } @keyframes fan-in { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } } .theme-page .theme-howto { margin-top: 1.8rem; background: color-mix(in srgb, hsl(var(--hue) 70% 50%) 10%, var(--surface)); border-color: color-mix(in srgb, hsl(var(--hue) 70% 50%) 35%, var(--border)); } .theme-page .theme-howto-icon { background: hsl(var(--hue) 65% 45%); } /* Liste: große Platzzahl in Themenfarbe, die ersten drei hervorgehoben */ .theme-page .theme-rank { color: var(--theme); font-variant-numeric: tabular-nums; margin-right: .1rem; } .theme-page .card:hover { border-color: color-mix(in srgb, hsl(var(--hue) 70% 50%) 55%, var(--border)); } .theme-page .card.is-top { border-color: color-mix(in srgb, hsl(var(--hue) 70% 50%) 40%, var(--border)); background: linear-gradient(100deg, color-mix(in srgb, hsl(var(--hue) 70% 50%) 12%, var(--surface)), var(--surface) 60%); } .theme-page .reasons { border-left-color: hsl(var(--hue) 70% 52%); } .theme-page .theme-cta { color: #f4efe6; border: 0; background: radial-gradient(80% 140% at 100% 0%, hsl(var(--hue) 75% 45% / .5), transparent 60%), linear-gradient(165deg, hsl(var(--hue) 45% 20%), hsl(var(--hue) 40% 9%)); } .theme-page .theme-cta h2 { color: #f4efe6; } .theme-page .theme-cta p { color: rgb(244 239 230 / .75); } /* Weitere Themen als kleine Kacheln in ihrer eigenen Farbe */ .theme-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .8rem; margin-top: 1rem; } .theme-mini { position: relative; display: flex; align-items: flex-end; min-height: 8.5rem; padding: .9rem 1rem; border-radius: 14px; overflow: hidden; isolation: isolate; color: #f4efe6; font: 800 1.1rem/1.1 var(--display); letter-spacing: -.02em; background: linear-gradient(165deg, hsl(var(--hue) 45% 22%), hsl(var(--hue) 40% 9%)); transition: transform .2s; } .theme-mini:hover { transform: translateY(-3px); text-decoration: none; color: #fff; } .theme-mini-covers { position: absolute; z-index: -1; top: -.4rem; right: -.6rem; display: flex; gap: 5px; transform: rotate(-8deg); mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); opacity: .85; } .theme-mini-covers img { width: 3.4rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; } @media (max-width: 960px) { .theme-hero-fan { right: -5rem; opacity: .35; } } @media (max-width: 760px) { .theme-hero-fan { width: 18rem; right: -6rem; top: 4rem; transform: none; opacity: .3; } .theme-hero-fan img { width: 6.5rem; left: calc(var(--i) * 3rem); } .theme-hero-count { margin-top: 1.8rem; } } @media (max-width: 760px) { /* Oben Platz für die darüberliegende Kopfzeile (58 px) plus Luft wie bei Community und Profil; mit 3.5rem saß „Themen“ bzw. „Release-Kalender“ direkt darunter (Andreas 08.11.) */ .themes-hero { padding: 5.4rem 0 2.5rem; } .themes-wall { inset: -30% -40% -10% 15%; } .theme-card { min-height: 20rem; } } .theme-platforms { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; } .theme-platforms .chip, .theme-links .chip, .theme-related .chip { font-size: .85rem; color: var(--text); } .theme-platforms .chip:hover, .theme-links .chip:hover, .theme-related .chip:hover { border-color: var(--accent); text-decoration: none; } .theme-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.1rem; } .theme-game { font-size: 1.4rem; margin: 0; } .theme-game a { color: var(--text); } .theme-game a:hover { color: var(--accent); text-decoration: none; } .theme-rank { color: var(--accent); } .title-year { color: var(--muted); font-weight: 400; } .theme-howto { display: flex; gap: .9rem; align-items: flex-start; margin: 1.4rem 0 1.6rem; padding: 1rem 1.2rem; max-width: 760px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); } .theme-howto p { margin: 0; color: var(--muted); } .theme-howto strong { display: block; color: var(--text); margin-bottom: .2rem; } .theme-howto-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; } /* „Mag ich“ auf Themenseiten */ .pick-toggle { flex: none; margin-left: auto; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 700 .88rem var(--body); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .pick-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent); } .pick-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .pick-toggle:disabled { opacity: .35; cursor: default; } .pick-toggle .pick-toggle-on, .pick-toggle[aria-pressed="true"] .pick-toggle-off { display: none; } .pick-toggle[aria-pressed="true"] .pick-toggle-on { display: inline; } .card-head .marks + .pick-toggle { margin-left: .4rem; } .theme-list .card:has(.pick-toggle[aria-pressed="true"]) { border-color: var(--accent); } .pick-bar { margin-left: auto; margin-right: auto; } .theme-list .card-head { flex-wrap: wrap; align-items: center; } .theme-guide { margin-top: 3rem; max-width: 760px; } .theme-guide h2 { font-size: 1.5rem; margin: 2rem 0 .8rem; } .theme-guide > p { color: var(--muted); line-height: 1.7; } .faq { display: grid; gap: .5rem; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; } .faq summary { cursor: pointer; font-weight: 600; } .faq details p { margin: .6rem 0 0; color: var(--muted); } .theme-cta { margin-top: 3rem; padding: 2rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; } .theme-cta p { color: var(--muted); } .theme-related { margin-top: 2.5rem; } .theme-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; margin: 1rem 0; } /* Themen als Textlinks mit Mittelpunkt dazwischen statt Pillen (wie die übrigen Links: unterstrichen in Akzentfarbe) */ .theme-links .chip { padding: 0; border: 0; border-radius: 0; background: none; font-size: .92rem; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; } .theme-links .chip:hover { color: var(--accent); } .theme-links .chip + .chip::before { content: "·"; display: inline-block; margin-right: .55rem; color: var(--muted); text-decoration: none; } /* Einstellungen der Kontoseite als Karten */ .s-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; } /* Einstellungen: zwei Spalten nach Thema, Kästen darin gestapelt */ .s-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.4rem; align-items: start; margin-top: .5rem; } .s-group { display: grid; gap: 1rem; } .s-group-head { margin: 0; font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } #einstellungen > .s-group-head { margin: 2.2rem 0 1rem; } .s-cards-quiet { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; } .s-cards-quiet .s-card { padding: 1rem 1.2rem; } /* Haken als Kippschalter */ .form label.check-inline { gap: .7rem; cursor: pointer; line-height: 1.35; } .form label.check-inline input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 2.4rem; height: 1.35rem; margin: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: background .2s, border-color .2s; } .form label.check-inline input[type="checkbox"]::before { content: ""; position: absolute; top: 50%; left: .15rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--muted); transform: translateY(-50%); transition: left .2s, background .2s; } .form label.check-inline input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .form label.check-inline input[type="checkbox"]:checked::before { left: calc(100% - 1.1rem); background: #fff; } .form label.check-inline input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .s-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.3rem; display: grid; gap: .8rem; align-content: start; } .s-card header { display: flex; align-items: center; gap: .7rem; } .s-card h3 { margin: 0; font-size: 1.15rem; } .s-icon { width: 2.3rem; height: 2.3rem; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .s-icon svg { width: 1.2rem; height: 1.2rem; } .s-status { margin-left: auto; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); } .s-status.is-on { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); } .s-card .hint { margin: 0; } .s-facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: .95rem; } .s-facts dt { color: var(--muted); } .s-facts dd { margin: 0; overflow-wrap: anywhere; } .s-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; } .s-danger { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); } .s-danger .s-icon { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); } /* Aufklappbares Formular in einer Einstellungskarte (z. B. Anzeigenamen ändern): Knopf verschwindet beim Öffnen */ .s-edit summary { list-style: none; width: fit-content; } .s-edit summary::-webkit-details-marker { display: none; } .s-edit[open] summary { display: none; } .s-edit .form { margin: 0; } .s-danger summary { list-style: none; width: fit-content; } .s-danger summary::-webkit-details-marker { display: none; } .s-danger details[open] summary { display: none; } .s-danger .form { margin: 0; } /* Einstellungen: Navigation links (läuft mit), rechts Abschnitte mit ruhigen Zeilen statt hoher Karten */ .st-layout { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 2rem; align-items: start; } .st-nav { position: sticky; top: 5.6rem; display: grid; gap: .15rem; } .st-nav a { padding: .5rem .8rem; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: .92rem; } .st-nav a:hover, .st-nav a:focus-visible { color: var(--text); background: var(--surface); text-decoration: none; } .st-main { display: grid; gap: 2rem; min-width: 0; } .st-section, .st-overview { scroll-margin-top: 5.6rem; } .st-head { display: flex; align-items: center; gap: .7rem; margin: 0 0 .7rem; font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .st-head .s-status { margin-left: 0; } .st-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .3rem 1.2rem; } .st-box > .hint, .st-box > .form { margin: .9rem 0; } #vorlieben.st-box { padding-block: .2rem; } .st-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center; padding: .85rem 0; } .st-row + .st-row { border-top: 1px solid var(--border); } .st-label { display: flex; align-items: center; gap: .45rem; font-weight: 700; } .st-label svg { width: 1.1rem; height: 1.1rem; flex: none; } .st-value { min-width: 0; overflow-wrap: anywhere; display: grid; gap: .15rem; } .st-value.hint { margin: 0; } .st-act { font-weight: 700; font-size: .9rem; color: var(--accent); cursor: pointer; white-space: nowrap; } .st-act.is-static { color: var(--muted); cursor: default; font-weight: 600; } .st-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; } /* Aufklappbare Zeile: Zusammenfassung wie eine Zeile, Formular darunter über die ganze Breite */ details.st-row { display: block; } .st-row-edit > summary { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center; list-style: none; cursor: pointer; } .st-row-edit > summary::-webkit-details-marker { display: none; } .st-row-edit[open] > summary .st-act { color: var(--muted); } .st-form { margin: .8rem 0 .2rem; display: grid; gap: .6rem; justify-items: start; } .st-form label { width: 100%; max-width: 26rem; } .st-danger .st-label, .st-danger .st-act { color: var(--bad); } /* Überblick: Avatar, Name, Spielertyp und Status-Schilder als Sprungmarken */ .st-overview { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--surface); } .st-overview-body { display: grid; gap: .5rem; min-width: 0; } .st-overview-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0; font-size: 1.15rem; } .st-overview-name > span { font-size: .9rem; font-weight: 700; color: color-mix(in srgb, hsl(var(--pf-hue, 8) 75% 55%) 78%, var(--text)); } .st-checks { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; } .st-check { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .st-check.is-on { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); border-color: color-mix(in srgb, var(--good) 35%, transparent); } .st-check:hover { text-decoration: none; border-color: currentColor; } /* Verknüpfungen mit echtem Logo (Steam, Discord, Twitch) */ .st-check .brand-icon, .st-check .twitch-icon, .st-check .s-icon-discord svg { width: 15px; height: 15px; } .st-check .s-icon-discord { display: inline-flex; } .st-overview-count { margin: 0; font-size: .85rem; } /* Sichtbarkeit: Schalter links, Vorschau der eigenen Community-Karte rechts */ .st-visibility { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.6rem; padding: 1rem 1.2rem; align-items: start; } .st-visibility .st-form { margin: 0; justify-items: stretch; } .st-visibility .st-form .hint { margin: 0 0 .3rem; } .st-switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--border); cursor: pointer; line-height: 1.35; } .st-switch input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 2.4rem; height: 1.35rem; margin: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: background .2s, border-color .2s; } .st-switch input::before { content: ""; position: absolute; top: 50%; left: .15rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--muted); transform: translateY(-50%); transition: left .2s, background .2s; } .st-switch input:checked { background: var(--accent); border-color: var(--accent); } .st-switch input:checked::before { left: calc(100% - 1.1rem); background: #fff; } .st-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Gegen die allgemeine Formular-Regel (.form label/input): Schalter rechts neben dem Text statt darunter */ .form label.st-switch { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; } .form label.st-switch input { width: 2.4rem; height: 1.35rem; min-height: 0; padding: 0; } .st-preview { display: grid; gap: .6rem; padding: .9rem; border-radius: 14px; background: var(--surface-2); } .st-preview-label { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .st-preview-card .cm-card { pointer-events: none; } .st-preview-off { display: none; margin: 0; font-size: .85rem; } .st-preview.is-private .st-preview-card { opacity: .45; filter: grayscale(.6); } .st-preview.is-private .st-preview-off { display: block; } /* Radar-Mail: Knopf als Schalter (schickt das Formular ab) */ .st-toggle { position: relative; display: inline-flex; align-items: center; width: 3.2rem; height: 1.6rem; padding: 0 .45rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font: 700 .66rem/1 var(--body); text-transform: uppercase; justify-content: flex-end; } .st-toggle::before { content: ""; position: absolute; left: .18rem; top: 50%; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--muted); transform: translateY(-50%); } .st-toggle[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; justify-content: flex-start; } .st-toggle[aria-checked="true"]::before { left: auto; right: .18rem; background: #fff; } @media (max-width: 900px) { .st-layout { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } /* Handy und Tablet: Chip-Zeile oben, läuft nicht mit (sonst überlagert sie Kopf und Meldungen) */ .st-nav { position: static; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; } .st-nav a { flex: none; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; background: var(--surface); } .st-visibility { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .st-row, .st-row-edit > summary { grid-template-columns: minmax(0, 1fr) auto; } .st-row > .st-value, .st-row-edit > summary > .st-value { grid-column: 1 / -1; grid-row: 2; } .st-row-wrap .st-actions { grid-column: 1 / -1; justify-content: flex-start; } .st-overview { grid-template-columns: minmax(0, 1fr); } .st-overview > .pf-avatar { display: none; } } .library-bar { position: sticky; bottom: 1rem; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; max-width: 640px; margin-top: 1rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); } .library-bar[hidden] { display: none; } .library-bar span { font-weight: 600; margin-right: auto; padding-left: .4rem; } .library-bar button:disabled { opacity: .45; cursor: not-allowed; } /* Auswahl-Leiste der Themenseiten (theme.php): immer eine Zeile, Mini-Cover der gewählten Spiele vorn. Weniger rund als die Pille der Bibliothek, damit sie bei voller Breite nicht wie ein Klotz wirkt */ .pick-bar { flex-wrap: nowrap; gap: .6rem; padding: .45rem .45rem .45rem .55rem; border-radius: 18px; } .pick-bar span { margin-right: 0; padding-left: 0; } .pick-bar .pick-bar-count { display: flex; align-items: baseline; gap: .4rem; min-width: 0; margin-right: auto; } .pick-bar-covers { display: flex; flex: none; } .pick-bar-covers img { width: 1.5rem; height: 2rem; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 2px var(--surface); } .pick-bar-covers img + img { margin-left: -.95rem; } .pick-bar-num { display: none; font: 800 1.05rem/1 var(--display); } .pick-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick-bar .button { flex: none; white-space: nowrap; } @media (max-width: 760px) { .pick-bar-num { display: inline; } .pick-bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pick-bar .button { padding: .6rem .95rem; font-size: .9rem; } } .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; } .danger details { margin-top: 1rem; } .danger summary { cursor: pointer; color: var(--muted); } /* Neuerscheinungen und Release-Radar */ .release-month { margin-top: 2rem; } .release-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; } .release { display: grid; grid-template-columns: 5.5rem 48px 1fr; gap: .9rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem; } .account-section .release { grid-template-columns: 6.5rem 1fr; } .release time { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; } .release .cover { border-radius: 5px; } .release-title { color: var(--text); font-weight: 600; } .release .meta, .release .because { margin: .2rem 0 0; } .release.is-match { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .release.is-out { opacity: .75; } .release .match { margin-right: .4rem; font-size: .85rem; transform: none; box-shadow: none; } /* Neuerscheinungen: Cover-Wand oben, drei Spiele im Rampenlicht, danach Cover-Raster je Monat */ .rl-hero { padding-bottom: 2.5rem; } .rl-hero .platform-chips { margin: 1.4rem 0 0; } .rl-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.03em; margin: 0 0 .2rem; } .rl-heading span { font: 600 .8rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .rl-spotlight { margin: 1rem 0 2.5rem; } .rl-spot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin-top: 1rem; } .rl-spot { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1.1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: transform .25s; } .rl-spot:hover { transform: translateY(-3px); } .rl-spot::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--cover, none) center / cover; filter: blur(36px) saturate(1.3); opacity: .45; } .rl-spot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 80%, transparent) 55%); } .rl-spot-cover .cover { border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); } .rl-countdown { margin: 0; font: 800 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .rl-spot h3 { margin: .45rem 0 .35rem; font-size: 1.3rem; line-height: 1.1; } .rl-spot h3 a { color: var(--text); } .rl-spot h3 a::after { content: ""; position: absolute; inset: 0; } .rl-spot-date { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; color: var(--muted); font-size: .85rem; } .rl-spot-match { margin: .6rem 0 0; } .rl-spot-why { margin-top: .55rem; font-size: .9rem; } /* Karussell der Top 3 (releases.php, app.js): je Folie links das breite Bild bzw. der Trailer, rechts Infos. Ohne JavaScript stehen die Folien untereinander; mit (.is-carousel) nebeneinander mit Scroll-Einrasten */ .rl-spotlight-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .rl-nav { display: flex; align-items: center; gap: .5rem; } .rl-nav[hidden] { display: none; } .rl-arrow { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--border); } .rl-arrow:hover { border-color: var(--accent); } .rl-arrow svg { width: 1.1rem; height: 1.1rem; } .rl-dots { display: flex; gap: .4rem; } .rl-dot { width: .6rem; height: .6rem; padding: 0; border-radius: 999px; cursor: pointer; border: 0; background: var(--border); transition: width .25s, background .25s; } .rl-dot[aria-current="true"] { width: 1.6rem; background: var(--accent); } .rl-carousel { display: grid; gap: 1rem; margin-top: 1rem; } /* Folien schmaler als die Bühne und mittig eingerastet: links und rechts schaut die Nachbarfolie herein, so sieht man, dass es weitergeht. Die aktive Folie (.is-active, app.js) voll, die Nachbarn gedämpft */ .rl-carousel.is-carousel { grid-auto-flow: column; grid-auto-columns: 80%; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: .4rem 0 .6rem; } .rl-carousel.is-carousel .rl-slide { scroll-snap-align: center; transition: opacity .35s, scale .35s; } .rl-carousel.is-carousel .rl-slide:not(.is-active) { opacity: .45; scale: .96; cursor: pointer; } .rl-carousel.is-carousel .rl-slide:not(.is-active):hover { opacity: .7; } @media (max-width: 760px) { .rl-carousel.is-carousel { grid-auto-columns: 88%; gap: .8rem; } } .rl-carousel.is-carousel::-webkit-scrollbar { display: none; } .rl-carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .rl-slide { position: relative; isolation: isolate; overflow: hidden; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.3rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); } .rl-slide::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--cover, none) center / cover; filter: blur(40px) saturate(1.3); opacity: .4; } .rl-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 85%, transparent) 50%); } /* Bild bzw. Trailer im Format 16:9 */ .rl-media { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 18px 40px rgb(0 0 0 / .45); } .rl-shot { width: 100%; height: 100%; object-fit: cover; display: block; } .rl-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Ohne breites Bild: das Cover mittig vor dem verschwommenen Hintergrund */ .rl-media.is-cover { background: transparent; box-shadow: none; display: grid; place-items: center; } .rl-media-cover { height: 100%; } .rl-media-cover .cover { height: 100%; width: auto; aspect-ratio: 3 / 4; border-radius: 10px; box-shadow: 0 14px 30px rgb(0 0 0 / .45); } /* Play-Knopf mittig, Beschriftung und YouTube-Hinweis unten auf einem Verlauf: Das Bild bleibt gut sichtbar */ .rl-play { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; gap: .2rem; padding: 1rem 1rem .8rem; border: 0; cursor: pointer; color: #fff; text-align: center; font: inherit; background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .1) 45%, transparent); transition: background .2s; } .rl-play:hover { background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / .2) 55%, rgb(0 0 0 / .05)); } .rl-play-text { text-shadow: 0 2px 8px rgb(0 0 0 / .7); } /* Kinomodus-Knopf oben rechts im Bild (über dem Play-Knopf) */ .rl-cinema { position: absolute; top: .6rem; right: .6rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .25); cursor: pointer; font: 700 .78rem/1 var(--body); color: #fff; background: rgb(14 12 10 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s; } .rl-cinema:hover, .rl-cinema:focus-visible { background: rgb(14 12 10 / .85); border-color: var(--accent); } .rl-cinema svg { width: 1rem; height: 1rem; } /* Kinomodus: Trailer groß, Seite dahinter abgedunkelt */ .rl-cinema-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: grid; place-items: center; } .rl-cinema-dialog::backdrop { background: rgb(0 0 0 / .92); } .rl-cinema-stage { width: min(94vw, calc((100vh - 6rem) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / .6); } .rl-cinema-stage iframe { width: 100%; height: 100%; border: 0; display: block; } .rl-cinema-close { position: fixed; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .1); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; } .rl-cinema-close:hover, .rl-cinema-close:focus-visible { background: var(--accent); border-color: var(--accent); } html.has-cinema { overflow: hidden; } @media (max-width: 760px) { .rl-cinema span { display: none; } .rl-cinema { padding: .4rem; } } .rl-play-note { text-shadow: 0 1px 4px rgb(0 0 0 / .8); } .rl-play-icon { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); box-shadow: 0 8px 26px rgb(0 0 0 / .45); transition: transform .2s; } .rl-play:hover .rl-play-icon { transform: scale(1.08); } .rl-play-icon svg { width: 1.6rem; height: 1.6rem; margin-left: .2rem; } .rl-play-text { font-weight: 800; font-size: 1.05rem; } .rl-play-note { max-width: 22rem; font-size: .72rem; opacity: .8; } .rl-slide-body { min-width: 0; } .rl-slide h3 { margin: .45rem 0 .35rem; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; } .rl-slide h3 a { color: var(--text); } .rl-slide-sum { margin: .7rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .rl-slide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; } .rl-slide-actions .marks { margin: 0; } .rl-more { font-weight: 700; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; } /* Titelleiste unter dem Karussell: alle Spiele auf einen Blick, das aktive hervorgehoben, der Balken unten zeigt die Zeit bis zum automatischen Wechsel (app.js wechselt am Ende der Animation) */ .rl-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .7rem; margin-top: .9rem; } .rl-thumbs[hidden] { display: none; } .rl-thumb { position: relative; overflow: hidden; display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .55rem .7rem .7rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .rl-thumb:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .rl-thumb[aria-current="true"] { color: var(--text); background: var(--surface-2); border-color: var(--accent); } .rl-thumb.is-top[aria-current="true"] { border-color: #f5b942; } .rl-thumb-cover { flex: none; width: 2.6rem; } .rl-thumb-cover .cover { border-radius: 5px; } .rl-thumb-cover .cover-placeholder span { font-size: .6rem; } .rl-thumb-text { display: grid; gap: .15rem; min-width: 0; } .rl-thumb-title { font-weight: 800; font-size: .95rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-thumb-meta { font-size: .78rem; color: var(--muted); } .rl-thumb-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; } .rl-thumb.is-top .rl-thumb-bar { background: #f5b942; } .rl-thumb[aria-current="true"] .rl-thumb-bar { animation: rl-progress 5s linear forwards; } @keyframes rl-progress { to { transform: scaleX(1); } } /* Anhalten: Pause-Knopf oder laufender Trailer (.is-paused), Maus über dem Karussell, Tastaturfokus darin */ .rl-spotlight.is-paused .rl-thumb-bar, .rl-spotlight:hover .rl-thumb-bar, .rl-spotlight:has(:focus-visible) .rl-thumb-bar { animation-play-state: paused; } .rl-pause .rl-resume-icon, .rl-pause[aria-pressed="true"] .rl-pause-icon { display: none; } .rl-pause[aria-pressed="true"] .rl-resume-icon { display: block; } .rl-pause svg { width: .95rem; height: .95rem; } @media (prefers-reduced-motion: reduce) { .rl-thumb[aria-current="true"] .rl-thumb-bar { animation: none; } .rl-pause { display: none; } } @media (max-width: 760px) { .rl-thumbs { gap: .45rem; } .rl-thumb { padding: .5rem .55rem .65rem; } .rl-thumb-cover { display: none; } .rl-thumb-title { font-size: .8rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .rl-thumb-meta { font-size: .7rem; } } /* Platz 1 als Volltreffer wie bei den Treffern der Startseite: Goldrand, goldener Match, Lichtstreif über das Bild */ .rl-slide.is-top { border-color: #f5b942; box-shadow: inset 0 0 0 1px #f5b942, 0 0 30px rgb(245 185 66 / .25); } .rl-slide.is-top .match { background: linear-gradient(135deg, #ffd36b, #f59e0b 55%, #ea6a12); color: #1d1206; box-shadow: 0 6px 22px rgb(245 158 11 / .5); } .rl-slide.is-top .rl-media:not(.is-playing)::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(115deg, transparent 30%, rgb(255 236 180 / .5) 48%, rgb(255 255 255 / .7) 50%, transparent 68%); translate: -130% 0; animation: legendary-shine 1.2s cubic-bezier(.3, .6, .3, 1) .6s forwards; } @media (max-width: 760px) { .rl-slide { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: .9rem; align-items: start; } .rl-slide::after { background: color-mix(in srgb, var(--surface) 75%, transparent); } .rl-slide-sum { -webkit-line-clamp: 3; font-size: .9rem; } /* Der Hinweis auf YouTube bleibt auch am Handy sichtbar (Einwilligung vor dem Klick), nur kleiner */ .rl-play-note { font-size: .64rem; } .rl-play-icon { width: 3rem; height: 3rem; } /* Kleines Bild: „Trailer ansehen“ entfällt (der Play-Knopf sagt es, Name für Screenreader im Knopf bleibt per Hinweis) */ .rl-play-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } @media (prefers-reduced-motion: reduce) { .rl-slide.is-top .rl-media::after { display: none; } } .rl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; margin: 0 0 2.5rem; padding: 1rem 1.2rem; border-radius: 14px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); } .rl-cta p { flex: 1 1 22rem; margin: 0; color: var(--muted); } .rl-cta strong { color: var(--text); } .rl-cta-icon { font-size: 1.5rem; } .rl-month { margin: 0 0 1rem; scroll-margin-top: 5rem; } /* Je Monat nur die besten Spiele, der Rest per „Alle … anzeigen“ (app.js) */ .rl-month.is-collapsed .rl-extra { display: none; } .rl-month-more { margin: 1.2rem 0 2.2rem; text-align: center; } /* Sprungleiste: alle Monate auf einen Blick */ .rl-months-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: 0 0 2.2rem; } .rl-months-nav a { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .2s, transform .2s; } .rl-months-nav a:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); } .rl-months-nav strong { font: 800 1rem/1.2 var(--display); } .rl-months-nav span { color: var(--muted); font-size: .8rem; } .rl-months-nav em { font-style: normal; color: var(--accent); font-weight: 700; } @media (max-width: 640px) { .rl-months-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } } .rl-grid { grid-template-columns: repeat(auto-fill, minmax(min(30%, 9.5rem), 1fr)); gap: 1.4rem 1rem; margin-top: 1rem; } .rl-tile h3 { font-size: .95rem; } .rl-date { position: absolute; left: .45rem; bottom: .45rem; padding: .25rem .5rem; border-radius: 6px; font: 700 .78rem/1 var(--body); font-variant-numeric: tabular-nums; color: #fff; background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); } /* Kein Rahmen um passende Spiele mehr: Seit jedes Spiel einen Match hat und nach ihm sortiert wird, trug fast jede Kachel den roten Rand. Der Match-Stempel (Akzentfarbe ab der Radar-Schwelle, sonst dunkel) reicht als Hinweis */ /* Match unter der Radar-Schwelle: angezeigt, aber zurückhaltend (dunkles Schild statt Akzentfarbe) */ .match.is-weak { color: #fff; background: rgb(20 18 16 / .78); box-shadow: none; border: 1px solid rgb(255 255 255 / .18); } .rl-platforms { display: flex; gap: .4rem; margin: 0; color: var(--muted); } /* Neuerscheinungen und Release-Radar: Merken und Ausblenden sitzen wie überall als Kapsel am Cover-Rand (.marks-rail). Reihenfolge per order, weil die Knöpfe im HTML direkt nach dem Cover stehen */ .rs-tile.rl-tile { grid-template-columns: minmax(0, 1fr); } .rs-tile.rl-tile > :not(.marks) { grid-column: 1 / -1; } /* Titel hier einzeilig (voller Titel im Tooltip des Links): Die zwei reservierten Zeilen der übrigen Kacheln ließen bei den meist kurzen Titeln eine Lücke über den Plattformen */ .rs-tile.rl-tile h3 { order: 1; min-height: 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-tile.rl-tile .rl-platforms { order: 2; align-self: center; } .rs-tile.rl-tile .rs-tile-tag, .rs-tile.rl-tile .rs-tile-why { order: 4; } /* Große Karten oben: Merken unter dem Datum; über dem Link, der die ganze Karte anklickbar macht (h3 a::after) */ .rl-spot .marks { position: relative; z-index: 1; margin-top: .6rem; transition: opacity .2s; } @media (hover: hover) { .rl-spot .marks:not(:has([aria-pressed="true"])) { opacity: 0; } .rl-spot:hover .marks, .rl-spot .marks:focus-within { opacity: 1; } } .rl-platforms .brand-icon { width: 14px; height: 14px; opacity: .8; } @media (max-width: 640px) { .rl-spot { grid-template-columns: 5.5rem minmax(0, 1fr); padding: .9rem; } .rl-spot h3 { font-size: 1.1rem; } } /* Community und Geschmacksprofile */ .pf-avatar { flex: none; display: grid; place-items: center; border-radius: 50%; object-fit: cover; } .pf-avatar.is-small { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; } .pf-avatar.is-large { width: 6.5rem; height: 6.5rem; font-size: 2.8rem; box-shadow: 0 14px 32px rgb(0 0 0 / .35); } .pf-avatar.is-initial { font: 800 1em/1 var(--display); color: #fff; background: linear-gradient(140deg, hsl(var(--hue) 65% 52%), hsl(calc(var(--hue) + 40) 60% 32%)); } .cm-hero { padding: 5.5rem 0 2rem; background: radial-gradient(70% 90% at 90% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); } .cm-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.045em; margin: 0; } .cm-hero .lead { max-width: 38rem; } .cm-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; } .cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; } .cm-card { position: relative; display: grid; gap: .8rem; padding: 1.1rem; border-radius: 16px; overflow: hidden; color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: transform .2s, border-color .2s; } .cm-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); text-decoration: none; } /* Cover als Fächer über die ganze Kartenbreite verteilt und zentriert: --shown Cover, Abstand höchstens 4.6rem */ .cm-covers { --shown: min(var(--n, 3), 3); --step: min(4.6rem, (100% - 5.6rem) / max(var(--shown) - 1, 1)); --mid: calc((var(--shown) - 1) / 2); position: relative; height: 8.5rem; } .cm-covers img { position: absolute; top: 0; width: 5.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 7px; left: calc((100% - 5.6rem - (var(--shown) - 1) * var(--step)) / 2 + var(--i) * var(--step)); box-shadow: 0 10px 22px rgb(0 0 0 / .35); transform: rotate(calc((var(--i) - var(--mid)) * 5deg)) translateY(calc((var(--i) - var(--mid)) * (var(--i) - var(--mid)) * .3rem)); } .cm-covers img:nth-child(n+4) { display: none; } /* Selbst gewähltes Highlight (zweiter Platz = Mitte bei drei Covern): obenauf, gerade, Rahmen im Farbton */ .cm-covers img.is-highlight { z-index: 2; transform: translateY(-.25rem) scale(1.06); box-shadow: 0 0 0 2px hsl(var(--pf-hue) 80% 62%), 0 12px 24px rgb(0 0 0 / .4); } /* Eine Spalte: Karte ist breit genug für alle fünf Cover, sonst bleibt rechts viel leer */ @media (max-width: 640px) { .cm-grid .cm-covers { --shown: min(var(--n, 3), 5); } .cm-grid .cm-covers img:nth-child(n+4) { display: block; } /* Bei fünf Covern tauschen Highlight (2.) und 3. die Plätze, damit das Highlight wieder in der Mitte steht */ .cm-grid .cm-covers[style*="--n: 5"] img.is-highlight { --i: 2 !important; } .cm-grid .cm-covers[style*="--n: 5"] img.is-highlight + img { --i: 1 !important; } } .cm-person { display: flex; align-items: center; gap: .7rem; } .cm-person > span:not(.match) { display: grid; gap: .2rem; min-width: 0; } .cm-person .match { margin-left: auto; } .cm-demo { justify-self: start; font-size: .68rem; } .cm-blurb { color: var(--muted); font-size: .9rem; } .cm-card { background: radial-gradient(90% 70% at 100% 0%, hsl(var(--pf-hue, 8) 70% 50% / .14), transparent 70%), var(--surface); } .cm-type { justify-self: start; font-weight: 700; font-size: .9rem; color: color-mix(in srgb, hsl(var(--pf-hue, 8) 75% 55%) 78%, var(--text)); } .cm-note { margin-bottom: 2.5rem; } /* Community in Kapiteln: Kopf mit eigener Karte, beste Treffer, alle Spieler mit Filter, zusammen spielen, mitmachen */ .cm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2rem; align-items: center; } .cm-hero-grid > :only-child { grid-column: 1 / -1; } .cm-own { display: grid; gap: .6rem; } .cm-own.is-private { padding: 1.1rem; border-radius: 16px; border: 1px dashed var(--border); background: var(--surface); } .cm-own.is-private .hint { margin: 0; } .cm-own.is-private .button { justify-self: start; } .cm-own-label { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .cm-own-status { color: var(--muted); } .cm-own-status.is-on { color: #3fbf7f; } .cm-own-type { margin: 0; font-weight: 700; color: color-mix(in srgb, hsl(var(--pf-hue, 8) 75% 55%) 78%, var(--text)); } .cm-own-actions { display: flex; gap: 1.2rem; margin: 0; font-size: .9rem; font-weight: 700; } .cm-chapters { margin-top: 1.5rem; } .cm-best { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.1rem; } .cm-best-card { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; border: 1px solid color-mix(in srgb, hsl(var(--pf-hue, 8) 70% 50%) 35%, var(--border)); background: var(--surface); overflow: hidden; } .cm-best-card > .cm-card { border: 0; border-radius: 0; } .cm-best-card > .cm-card:hover { transform: none; } .cm-why { display: grid; gap: .55rem; margin: 0; padding: .9rem 1.1rem 1.1rem; border-top: 1px solid var(--border); font-size: .9rem; } .cm-why div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .6rem; } .cm-why dt { color: var(--muted); font-weight: 700; } .cm-why dd { margin: 0; min-width: 0; } .cm-empty { margin: 0; padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px dashed var(--border); color: var(--muted); } .cm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; } .cm-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .cm-chips small { margin-left: .15rem; opacity: .7; font-weight: 700; } .cm-sort { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); } .cm-sort select { width: auto; } .cm-item { display: grid; } .cm-item[hidden] { display: none; } .cm-new { color: #1b7f52; border-color: color-mix(in srgb, #3fbf7f 45%, transparent); background: color-mix(in srgb, #3fbf7f 14%, transparent); } .cm-together { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; } .chapter .open-groups + .cm-together { margin-top: 1.2rem; } .cm-together-card { display: grid; gap: .35rem; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .2s, transform .2s; } .cm-together-card:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .cm-together-card b { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; } .cm-together-card b svg { width: 1.2rem; height: 1.2rem; } .cm-together-card small { color: var(--muted); font-size: .88rem; } .cm-together-go { margin-top: .3rem; font-weight: 700; color: var(--accent); } .cm-together-card.is-discord .cm-together-go { color: #5865f2; } .cm-privacy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem 1.3rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); } .cm-privacy p { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; } .cm-privacy > div:last-child b { color: var(--accent); } .cm-privacy-cta { margin: 1.1rem 0 0; } @media (max-width: 800px) { .cm-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } .cm-privacy { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .cm-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; } .cm-chips .wall-chip { flex: none; } .cm-why div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } } /* Spiel der Woche: Cover links, Text rechts, ohne Effekte */ .gotw { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.8rem; align-items: center; margin: 3rem 0 0; padding: 1.4rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); } .gotw-cover .cover { border-radius: 10px; box-shadow: var(--shadow); } /* Cover mit Icon-Leiste (Klappe am PC, „⋯“-Kapsel am Handy), Kapsel wie bei „Schon gekauft“ am rechten Rand */ .gotw-media { position: relative; align-self: center; } .gotw-cover { display: block; } .marks-rail .gotw-media > .marks { position: absolute; top: 2.4rem; right: -.85rem; } @media (max-width: 640px) { .marks-rail .gotw-media > .marks { top: 1.6rem; right: -.6rem; } .gotw-media { align-self: start; } } @media (hover: hover) and (min-width: 641px) { .marks-rail .gotw-slide { --fold-r: 12px; } .marks-rail .gotw-media > .marks { top: .45rem; right: auto; left: calc((var(--fold-w, 2.55rem) - var(--fold-m, 1.7rem)) / 2); } } .gotw :is(h2, h3) { margin: .1rem 0 .6rem; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.035em; } .gotw :is(h2, h3) a { color: var(--text); } .gotw :is(h2, h3) a:hover { color: var(--accent); text-decoration: none; } .gotw-text { margin: 0 0 .5rem; max-width: 42rem; color: var(--muted); line-height: 1.55; } .gotw-traits { margin: 0 0 1rem; font-weight: 600; } .gotw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; } .gotw-actions .button { display: inline-flex; align-items: center; gap: .45rem; } .gotw-actions .brand-icon { width: 16px; height: 16px; } .gotw-actions .price-pop { margin-left: auto; } .gotw .price-line { margin: 0 0 .7rem; font-size: .95rem; } @media (max-width: 640px) { .gotw { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem; align-items: start; } .gotw-body { display: contents; } .gotw-body > :not(.eyebrow):not(h2):not(h3) { grid-column: 1 / -1; } .gotw-cover, .gotw-media { grid-row: 1 / span 2; } } /* Startseite: Profile als wischbare Reihe, die Karten rasten ein; rechts läuft die Reihe sichtbar weiter */ .home-community { margin-top: 3rem; } .cm-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 17rem); gap: 1rem; margin-top: 1rem; padding: .3rem .2rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; mask-image: linear-gradient(90deg, #000 85%, transparent); } .cm-strip .cm-card { scroll-snap-align: start; } /* Profilseite: Farbton --pf-hue kommt vom Spielertyp (Community::type), --pf ist daraus die lesbare Akzentfarbe */ .pf { --pf: color-mix(in srgb, hsl(var(--pf-hue) 75% 55%) 78%, var(--text)); --pf-soft: hsl(var(--pf-hue) 70% 50% / .16); } /* Ruhig wie eine Magazinseite: keine Kacheln, Glows oder Balken; die Typfarbe nur in der Unterzeile und der Vergleichszahl */ .pf-hero { padding: 5.2rem 0 2.2rem; border-bottom: 1px solid var(--border); } .pf-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; } .pf-who .breadcrumbs { margin: 0 0 1.4rem; } .pf-id { display: flex; align-items: center; gap: 1.2rem; } .pf-id h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -.045em; margin: 0 0 .5rem; } .pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: 0; color: var(--muted); font-size: .92rem; } .pf-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-weight: 600; } .pf-link:hover { color: var(--text); } .pf-link svg, .pf-link .brand-icon { width: 16px; height: 16px; } .pf-twitch.is-live { color: var(--text); } .pf-twitch .live-pill { margin-left: .2rem; } /* Profil: gerade live auf Twitch (Pages::profile, StreamLive) */ .pf-live { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 14px; border: 1px solid color-mix(in srgb, #d7262e 40%, var(--border)); background: color-mix(in srgb, #d7262e 8%, var(--surface)); font-weight: 600; } .pf-live .button { display: inline-flex; align-items: center; gap: .4rem; } /* Profilkarte: streamt auf Twitch, rot mit „Live“, wenn auf Sendung */ .cm-twitch { display: inline-flex; align-items: center; gap: .25rem; justify-self: start; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .cm-twitch svg { width: 14px; height: 14px; } .cm-twitch.is-live { padding: .05rem .45rem .05rem .3rem; border-radius: 999px; background: #d7262e; color: #fff; } .cm-twitch.is-live .twitch-icon { fill: #fff; } /* Community, Kapitel „Streamer“: Live-Karten, übrige Kanäle als Chips, Einladung für Streamer */ .cm-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; } .cm-live-card { display: grid; gap: .6rem; align-content: start; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid color-mix(in srgb, #d7262e 35%, var(--border)); background: radial-gradient(120% 90% at 0 0, hsl(var(--pf-hue, 0) 70% 50% / .14), transparent 60%), var(--surface); } .cm-live-head { display: flex; align-items: center; gap: .7rem; } .cm-live-head > div { display: grid; flex: 1; min-width: 0; } .cm-live-name { font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-live-head small { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .8rem; } .cm-live-head small svg { width: 14px; height: 14px; } .cm-live-now { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 700; min-width: 0; } .cm-live-now > span:not(.live-pill) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-live-now small { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .cm-live-title { margin: 0; color: var(--muted); font-size: .88rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cm-live-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; } .cm-live-actions .button { display: inline-flex; align-items: center; gap: .4rem; } .cm-streamers { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 0; } .cm-streamers .hint { margin: 0 .3rem 0 0; } .cm-streamer { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .88rem; font-weight: 600; } .cm-streamer:hover { border-color: #9146ff; text-decoration: none; } .cm-streamer svg { width: 15px; height: 15px; } .cm-stream-invite { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 16px; color: var(--text); border: 1px dashed color-mix(in srgb, #9146ff 45%, var(--border)); background: color-mix(in srgb, #9146ff 7%, var(--surface)); } .cm-stream-invite:hover { text-decoration: none; border-style: solid; } .cm-stream-invite > span:nth-of-type(1) { display: grid; gap: .2rem; flex: 1; min-width: 0; } .cm-stream-invite small { color: var(--muted); font-size: .88rem; } .cm-stream-invite .stream-icon { flex: none; width: 1.7rem; height: 1.7rem; color: #9146ff; } .cm-stream-invite .cm-together-go { color: color-mix(in srgb, #9146ff 78%, var(--text)); font-weight: 800; white-space: nowrap; } @media (max-width: 640px) { .cm-stream-invite { flex-wrap: wrap; } } .s-icon-discord svg { width: 20px; height: 20px; } .pf-type { margin: 1.8rem 0 .5rem; font: 800 clamp(1.4rem, 3vw, 2rem)/1.15 var(--display); letter-spacing: -.03em; color: var(--pf); } .pf-lede { margin: 0; max-width: 40rem; color: var(--muted); font-size: 1.08rem; line-height: 1.6; } .pf-match { margin: 1.2rem 0 0; color: var(--muted); } .pf-match a { font-weight: 600; } /* Profil teilen (partials/share-profile.php): im Profilkopf eigene Zeile unter „Das ist dein Profil“ */ .pf-share { display: flex; margin-top: .8rem; } .share-profile-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; vertical-align: middle; } .share-profile { display: inline-flex; align-items: center; gap: .45rem; } .share-profile.is-done { border-color: #2f9e5b; color: #2f9e5b; } .share-url { width: min(22rem, 100%); font-size: .82rem; padding: .35rem .6rem; } .share-nudge { font-size: .85rem; font-weight: 600; color: var(--accent); } .share-profile-wrap.is-nudge .share-profile { border-color: var(--accent); animation: share-nudge 1.6s ease-in-out 3; } @keyframes share-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgb(232 65 44 / 0); } 50% { box-shadow: 0 0 0 6px rgb(232 65 44 / .28); } } @media (prefers-reduced-motion: reduce) { .share-profile-wrap.is-nudge .share-profile { animation: none; } } .pf-match-number { font: 800 1.6rem/1 var(--display); letter-spacing: -.03em; color: var(--pf); margin-right: .2rem; } .pf-signature { display: grid; gap: .6rem; width: clamp(9rem, 16vw, 12rem); color: var(--text); } .pf-signature:hover { text-decoration: none; } .pf-signature-cover .cover { border-radius: 8px; box-shadow: var(--shadow); } .pf-signature-caption { display: grid; gap: .2rem; font-size: .88rem; font-weight: 600; line-height: 1.25; } .pf-signature-caption span { font-weight: 500; font-size: .78rem; color: var(--muted); } .pf-signature-wrap { display: grid; gap: .6rem; justify-items: start; } .pf-signature-note { margin: 0; max-width: 14rem; font-size: .88rem; font-style: italic; line-height: 1.4; color: var(--text); } .pf-signature-edit { font-size: .8rem; font-weight: 600; color: var(--muted); } /* Highlight (AccountPages::highlight): Der Kopf nimmt das große Spielbild als Hintergrund an (zur Textseite hin in die Seitenfarbe verlaufend, damit alles lesbar bleibt), Farbton --pf-hue kommt aus dem Cover. Das Cover wird größer und bekommt einen Schein in dieser Farbe, wie eine Vitrine */ .pf-hero.has-shot { position: relative; isolation: isolate; overflow: hidden; } .pf-hero.has-shot::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--shot) center 30% / cover no-repeat; filter: saturate(1.15); } .pf-hero.has-shot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 18%, color-mix(in srgb, var(--bg) 78%, transparent) 50%, color-mix(in srgb, var(--bg) 30%, transparent)), linear-gradient(180deg, transparent 55%, var(--bg)), radial-gradient(70% 90% at 85% 40%, hsl(var(--pf-hue) 80% 50% / .22), transparent 70%); } .has-highlight .pf-signature { width: clamp(10rem, 19vw, 14rem); } .has-highlight .pf-signature-cover .cover { box-shadow: 0 0 0 2px hsl(var(--pf-hue) 80% 60% / .7), 0 22px 50px hsl(var(--pf-hue) 80% 30% / .55); transform: rotate(-2deg); transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); } .has-highlight .pf-signature:hover .pf-signature-cover .cover { transform: rotate(0) translateY(-4px); } .has-highlight .pf-signature-caption span { color: var(--pf); font-weight: 700; } /* minmax(0, 1fr): sonst wächst die Spalte auf die Breite der waagerecht scrollenden Plattform-Kacheln (Handy: Seite 583 px breit) */ .pf-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.8rem; padding: 2.4rem 0 3.5rem; } .pf-body .rs-grid { margin: 1rem 0 0; } .pf-section .hint { margin: .3rem 0 0; } .pf-h { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.03em; } /* Meistgespielt: dieselben Kacheln wie die Steam-Bibliothek im Konto, nur ohne Auswahl */ .pf-lib { margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(30%, 8.5rem), 1fr)); } .pf-lib .lib-card { cursor: default; } .pf-lib .lib-title { color: var(--text); } .pf-lib .lib-title:hover { color: var(--accent); text-decoration: none; } .pf-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 8.5rem), 1fr)); gap: 1.2rem 1rem; margin-top: 1rem; } .pf-shelf-item { display: grid; gap: .45rem; align-content: start; color: var(--text); } .pf-shelf-item:hover { text-decoration: none; color: var(--accent); } .pf-shelf-cover { position: relative; display: block; transition: transform .2s; } .pf-shelf-cover .cover { border-radius: 9px; box-shadow: var(--shadow); } .pf-shelf-item:hover .pf-shelf-cover { transform: translateY(-3px); } .pf-shelf-title { font-size: .88rem; font-weight: 600; line-height: 1.25; } /* Sammlung als Regal (partials/profile-shelves.php, app.js): Plattform-Kacheln mit Cover-Fächer, darunter das Regal mit Hüllenrücken, herausgezogene Hülle vorn. --band: Farbe der Plattform (Band oben auf Rücken und Hülle) */ .pf-collection { --row: 170px; --spine: 156px; --board: 9px; } .is-steam { --band: #2a475e; } .is-playstation { --band: #0070d1; } .is-xbox { --band: #107c10; } .is-nintendo { --band: #e60012; } .is-epic { --band: #3a3a3a; } .is-gog { --band: #86328a; } .is-ubisoft { --band: #1f5fe0; } .is-ea { --band: #e8413e; } .is-battlenet { --band: #148eff; } .is-rockstar { --band: #c98a00; } .is-amazon { --band: #e08600; } .is-itch { --band: #fa5c5c; } .is-other { --band: #6b6258; } .shelf-docks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .9rem; margin-top: 1rem; } .shelf-dock { position: relative; display: grid; gap: .2rem; padding: .9rem 1rem 1rem; text-align: left; font: inherit; color: var(--text); cursor: pointer; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: inset 0 3px 0 var(--band); transition: border-color .2s, transform .2s; } .shelf-dock:hover, .shelf-dock.is-open { border-color: var(--band); } .shelf-dock:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Pfeil zum geöffneten Regal */ .shelf-dock.is-open::after { content: ""; position: absolute; left: 50%; bottom: -11px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: var(--band); } .shelf-fan { position: relative; display: block; height: 96px; margin-bottom: .5rem; } .shelf-fan img { position: absolute; bottom: 0; width: 60px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px rgb(0 0 0 / .4); transition: transform .35s cubic-bezier(.2, .9, .3, 1.25); } .shelf-fan img:nth-child(1) { left: 0; transform: rotate(-8deg); } .shelf-fan img:nth-child(2) { left: 34px; z-index: 1; } .shelf-fan img:nth-child(3) { left: 68px; transform: rotate(8deg); } .shelf-dock:hover .shelf-fan img:nth-child(1), .shelf-dock.is-open .shelf-fan img:nth-child(1) { transform: translateX(-6px) rotate(-14deg); } .shelf-dock:hover .shelf-fan img:nth-child(2), .shelf-dock.is-open .shelf-fan img:nth-child(2) { transform: translateY(-6px); } .shelf-dock:hover .shelf-fan img:nth-child(3), .shelf-dock.is-open .shelf-fan img:nth-child(3) { transform: translateX(8px) rotate(14deg); } .shelf-dock-name { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1.02rem; } .shelf-dock-name .brand-icon { width: 18px; height: 18px; flex: none; } .shelf-dock-count { color: var(--muted); font-size: .85rem; } /* Ohne JavaScript stehen alle Regale offen; mit fährt nur das gewählte aus (0fr → 1fr) */ .shelf { margin-top: 1.4rem; } .js-shelves .shelf { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .5s cubic-bezier(.3, .7, .2, 1), margin-top .5s; } .js-shelves .shelf.is-open { grid-template-rows: 1fr; margin-top: 1.4rem; } .shelf-inner { min-height: 0; overflow: hidden; } .js-shelves .shelf:not(.is-open) .shelf-inner { visibility: hidden; transition: visibility 0s .5s; } /* Regal: dunkle Rückwand, schlichte Böden passend zur Seite (kein Holz) mit einer Lichtkante in der Plattformfarbe. Die Böden sind ein wiederkehrender Streifen unter jeder Reihe (Reihe = --row, Boden = --board) */ .shelf-board { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--board) 3px; margin: 0; padding: 0 14px var(--board); border-radius: 14px; border: 1px solid var(--border); background-color: color-mix(in srgb, var(--surface) 70%, #000); background-image: repeating-linear-gradient(to bottom, transparent 0 var(--row), color-mix(in srgb, var(--band) 75%, #fff) var(--row), color-mix(in srgb, var(--band) 75%, #fff) calc(var(--row) + 1px), color-mix(in srgb, var(--text) 18%, var(--surface)) calc(var(--row) + 1px), color-mix(in srgb, var(--text) 6%, var(--surface)) calc(var(--row) + var(--board))), radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--band) 14%, transparent), transparent 70%); box-shadow: inset 0 12px 28px rgb(0 0 0 / .4); } .shelf-board li { position: relative; display: flex; align-items: flex-end; height: var(--row); } /* display: flex oben überstimmt sonst „hidden“: Die Hüllen ab Nr. 61 standen schon vor „Alle zeigen“ im Regal */ .shelf-board li[hidden] { display: none; } /* backwards statt both: Eine nach dem Ende gehaltene transform-Animation macht jedes Fach zur eigenen Ebene */ .js-shelves .shelf.is-open .shelf-board li { animation: spine-in .45s calc(var(--i, 0) * 14ms) cubic-bezier(.2, .8, .2, 1) backwards; } .case-spine { position: relative; width: var(--w, 30px); height: var(--spine); padding: 0; border: 0; border-radius: 3px 3px 2px 2px; overflow: hidden; cursor: pointer; background: hsl(var(--hue, 20) 30% 26%); box-shadow: inset -2px 0 0 rgb(0 0 0 / .35), inset 2px 0 0 rgb(255 255 255 / .08), 0 2px 4px rgb(0 0 0 / .4); transition: transform .22s cubic-bezier(.2, .8, .3, 1.3), filter .22s; } .case-spine:hover, .case-spine:focus-visible { transform: translateY(-9px); filter: brightness(1.15); } /* Die drei Hüllen im Fächer heben sich im Regal leicht an */ .case-spine.is-lift { transform: translateY(-6px); filter: brightness(1.1); } .case-spine:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .case-spine.is-out { visibility: hidden; } /* Hüllen-Fächer (app.js): ein Anker je Regal, unten mittig am überfahrenen Rücken (top/left aus dem Skript), darin drei Hüllen. Mitte groß, Nachbarn drei Viertel so groß, gekippt und dahinter. Gleitet beim Weiterfahren mit */ .shelf-board { position: relative; } .case-fan { --cw: calc(var(--spine) * .72); --sw: calc(var(--cw) * .76); position: absolute; z-index: 6; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transition: left .22s cubic-bezier(.2, .8, .3, 1); } .case-fan.no-glide { transition: none; } .case-peek { position: absolute; bottom: 0; left: calc(var(--cw) / -2); width: var(--cw); height: var(--spine); overflow: hidden; pointer-events: none; border-radius: 6px; background: hsl(var(--hue, 20) 30% 24%); box-shadow: 0 18px 36px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .15); opacity: 0; transform-origin: 50% 100%; transform: translateY(24px) scale(.6); transition: transform .3s cubic-bezier(.2, .9, .3, 1.15), opacity .18s; } .case-peek.is-cur { z-index: 2; } .case-peek.is-prev, .case-peek.is-next { z-index: 1; width: var(--sw); height: calc(var(--spine) * .76); transition-delay: .04s; } .case-peek.is-prev { left: calc(var(--cw) / -2 - var(--sw) * .62); } .case-peek.is-next { left: calc(var(--cw) / 2 - var(--sw) * .38); } .case-fan.is-on .case-peek.is-cur { opacity: 1; transform: translateY(-10px); } .case-fan.is-on .case-peek.is-prev { opacity: 1; transform: translateY(-4px) rotate(-7deg); } .case-fan.is-on .case-peek.is-next { opacity: 1; transform: translateY(-4px) rotate(7deg); } .case-peek.is-none { visibility: hidden; } /* Hüllen-Optik wie die herausgezogene Hülle (.case-front): Band mit Logo und Plattform, Scharnier links, Plastikglanz */ .case-peek::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 7px; background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(255 255 255 / .08)); } .case-peek::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / .2), transparent 45%); } .case-peek-band { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 20px; display: flex; align-items: center; gap: .25rem; padding-left: 11px; color: #fff; background: var(--band); font-weight: 700; font-size: .62rem; white-space: nowrap; overflow: hidden; } .case-peek-band .brand-icon { width: 11px; height: 11px; flex: none; } .case-peek img { position: absolute; inset: 20px 0 0; width: 100%; height: calc(100% - 20px); object-fit: cover; display: block; } .case-peek.is-empty { display: grid; place-items: center; padding: 1.6rem .6rem .6rem .9rem; text-align: center; color: #fff; font: 800 .85rem/1.15 var(--display); } .case-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(1.15); } .case-band { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 22px; display: grid; place-items: center; color: #fff; background: var(--band); } .case-band .brand-icon { width: 13px; height: 13px; } .case-title { position: absolute; z-index: 1; inset: 28px 0 8px; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font: 700 .7rem/1 var(--body); text-shadow: 0 1px 2px rgb(0 0 0 / .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shelf-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: .8rem 0 0; } /* Interaktionspunkte (Pages::shelfMarks): Treffer ab LEGENDARY_MATCH mit goldener Kante, die besten je Regal (Volltreffer bzw. eigene Schätze) zusätzlich mit goldenem Band, sanftem Atmen und einem Lichtstreif, der alle paar Sekunden versetzt (--s am Fach) über den Rücken läuft. Beim Überfahren ruckelt ein Volltreffer kurz, als wolle er raus */ .pf-collection { --gold: #f2b33d; --gold-hi: #ffd978; } .case-spine.is-hit { box-shadow: inset 0 0 0 1.5px var(--gold), 0 2px 4px rgb(0 0 0 / .4); } .case-spine.is-star { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); animation: star-breathe 3.2s var(--s, 0s) ease-in-out infinite alternate; } .case-spine.is-star .case-band { color: #1a1408; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); } .case-spine.is-star::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(255 236 180 / .55), transparent); animation: spine-sweep 6s var(--s, 0s) ease-in-out infinite; } .case-spine.is-star:hover { animation: spine-wiggle .5s ease-in-out; } @keyframes star-breathe { from { filter: brightness(1); } to { filter: brightness(1.22); } } @keyframes spine-sweep { 0%, 70% { top: -40%; } 100% { top: 110%; } } @keyframes spine-wiggle { 0% { transform: translateY(-9px) rotate(0); } 20% { transform: translateY(-11px) rotate(-3deg); } 40% { transform: translateY(-9px) rotate(3deg); } 60% { transform: translateY(-10px) rotate(-2deg); } 80% { transform: translateY(-9px) rotate(1deg); } 100% { transform: translateY(-9px) rotate(0); } } /* Spiele, die der Besucher auch besitzt: Punkt am Fuß des Rückens */ .shelf-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3fd2bd; box-shadow: 0 0 0 2px rgb(0 0 0 / .45); } .case-dot { position: absolute; z-index: 2; bottom: 5px; left: 50%; margin-left: -3.5px; } /* Abzeichen auf der Kachel */ .shelf-dock-badge { justify-self: start; margin-top: .3rem; padding: .12rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #1a1408; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); } /* Leiste über dem Regal: Filter und Zuklappen (Zuklappen nur mit JavaScript, ohne stehen alle Regale offen) */ .shelf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .8rem; } .shelf-chip, .shelf-close { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; } .shelf-chip:hover, .shelf-close:hover { border-color: var(--band); } .shelf-chip.is-gold { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); } .shelf-chip[aria-pressed="true"] { color: #1a1408; background: var(--gold); border-color: var(--gold); } .shelf-chip[aria-pressed="true"]:not(.is-gold) { color: #04221d; background: #3fd2bd; border-color: #3fd2bd; } .shelf-close { display: none; color: var(--muted); } /* Umschalter Regal / Cover (nur mit JavaScript) */ .shelf-view { display: none; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .js-shelves .shelf-view { display: inline-flex; } .js-shelves .shelf-view { margin-left: auto; } .shelf-view button { padding: .25rem .75rem; border: 0; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; } .shelf-view button:hover { color: var(--text); } .shelf-view button[aria-pressed="true"] { color: var(--bg); background: var(--text); } /* Cover-Ansicht: dieselben Fächer als normales Cover-Raster (Band oben bleibt, Titel nur ohne Cover), kein Fächer beim Überfahren; Gold, Filter, Sortierung und Herausziehen wie im Regal */ .shelf.is-covers .shelf-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; padding: 14px; background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--band) 14%, transparent), transparent 70%); } .shelf.is-covers .shelf-board > li { display: block; height: auto; } .shelf.is-covers .shelf-board > li[hidden] { display: none; } .shelf.is-covers .case-spine { width: 100%; height: auto; aspect-ratio: 3 / 4.15; border-radius: 8px; box-shadow: 0 8px 18px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .1); } .shelf.is-covers .case-spine.is-hit { box-shadow: 0 0 0 2px var(--gold), 0 8px 18px rgb(0 0 0 / .45); } .shelf.is-covers .case-spine.is-star { box-shadow: 0 0 0 2px var(--gold), 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent); } .shelf.is-covers .case-spine:hover, .shelf.is-covers .case-spine:focus-visible { transform: translateY(-5px); } .shelf.is-covers .case-art { top: 20px; height: calc(100% - 20px); filter: none; } .shelf.is-covers .case-band { height: 20px; } .shelf.is-covers .case-title { display: none; } .shelf.is-covers .case-spine:not(.has-cover) .case-title { display: flex; inset: 24px 8px 8px; justify-content: center; writing-mode: horizontal-tb; transform: none; white-space: normal; text-align: center; font-size: .78rem; line-height: 1.2; } .shelf.is-covers .case-fan { display: none; } /* Herausgezogen: in der Cover-Ansicht ausgegraut statt einer Lücke im Raster */ .shelf.is-covers .case-spine.is-out { visibility: visible; opacity: .3; filter: grayscale(1); transform: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); animation: none; } .shelf.is-covers .case-spine.is-out::after { display: none; } @media (max-width: 640px) { .shelf.is-covers .shelf-board { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; padding: 10px; } } /* Highlight-Auswahl in den Einstellungen: Vorschlagsliste der Startseite (.suggestions) direkt unter dem Feld */ .highlight-field { position: relative; display: block; } .highlight-field input[type="text"] { width: 100%; } .highlight-field .suggestions { top: calc(100% + .3rem); width: 100%; min-width: 0; font-size: .95rem; } /* Sortieren: rechts neben den Filtern, vor dem Zuklappen (nur mit JavaScript sinnvoll) */ .shelf-sort { display: none; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: var(--muted); } .js-shelves .shelf-sort { display: inline-flex; } .shelf-sort select { padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: .82rem; color: var(--text); background: var(--surface); cursor: pointer; } .js-shelves .shelf-close { display: inline-flex; } /* Filter: Treffer bzw. gemeinsame Spiele bleiben hell, der Rest tritt zurück */ .shelf-board.is-filter-hit > li:not(.is-hit), .shelf-board.is-filter-shared > li:not(.is-shared) { opacity: .22; filter: grayscale(.8); transition: opacity .25s, filter .25s; } /* Match-Stempel auf der mittleren Hülle im Fächer und in der herausgezogenen Hülle */ .case-peek-match { position: absolute; z-index: 4; right: 5px; bottom: 5px; padding: .1rem .38rem; border-radius: 6px; font: 800 .68rem/1.3 var(--display); color: #fff; background: rgb(0 0 0 / .7); } .case-peek-match.is-gold { color: #1a1408; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); } .case-fan .case-peek:not(.is-cur) .case-peek-match { display: none; } .case-info-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; } .case-info-tags:not(:has(> :not([hidden]))) { display: none; } .case-info-match, .case-info-shared { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 1px solid var(--border); } .case-info-match.is-gold { color: #1a1408; background: var(--gold); border-color: var(--gold); } .case-info-match[hidden], .case-info-shared[hidden] { display: none; } /* Markier-Kapsel an der herausgezogenen Hülle: gläserne Leiste am rechten Rand wie auf „Spiele wie …“ (.sx-cover) */ .case-front-wrap { position: relative; flex: none; } .case-front-wrap > .marks { position: absolute; top: .7rem; right: -.85rem; z-index: 4; display: flex; flex-direction: column; gap: .1rem; padding: .22rem; border-radius: 999px; background: rgb(16 14 12 / .6); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: mix-pop .35s .45s both; } .case-front-wrap > .marks .mark { width: 1.75rem; height: 1.75rem; border: 0; background: transparent; color: rgb(255 255 255 / .82); } .case-front-wrap > .marks .mark:hover { color: #fff; background: rgb(255 255 255 / .1); } /* Gesetzt in der Farbe des Merkmals wie an den Kacheln (--tint, unten bei .sx-cover für beide Kapseln) */ .case-front-wrap > .marks .mark[aria-pressed="true"] { color: #15120f; background: var(--tint, var(--accent)); } .case-front-wrap > .marks .marks-more { display: none; } .marks-rail .case-front-wrap > .fold-flap { display: none; } /* Am PC die neue Klappe: Der linke Cover-Streifen unter dem Plattform-Band knickt beim Überfahren weg, dahinter liegt ein dunkler Streifen mit den Knöpfen. Kleines Cover: schmale Fassung nur mit Symbolen wie an den Kacheln (die breite mit Kurztexten wie auf „Spiele wie …“ deckte fast die ganze Hülle ab) */ @media (hover: hover) and (min-width: 761px) { .case-front-wrap { --fold-w: 2.75rem; --fold-m: 2rem; perspective: 650px; } .case-front-wrap::before { content: ""; position: absolute; inset: 30px auto 0 0; z-index: 3; width: var(--fold-w); border-radius: 0 0 0 10px; pointer-events: none; background: linear-gradient(to right, rgb(10 9 8 / .94), rgb(22 19 17 / .88)); box-shadow: inset -1px 0 0 rgb(255 255 255 / .14); opacity: 0; transition: opacity .25s; } /* Nur mit Knöpfen: Spiele ohne Katalogeintrag (z. B. Playtests aus Steam) haben keine, sonst stand ein leerer Streifen da */ .case-front-wrap:has(> .marks):is(:hover, :has(:focus-visible))::before { opacity: 1; } .marks-rail .case-front-wrap > .fold-flap { display: block; inset: 30px 0 0; z-index: 3; transform-origin: var(--fold-w) 50%; clip-path: inset(0 calc(100% - var(--fold-w)) 0 0 round 0 0 0 10px); transition: transform .45s cubic-bezier(.3, .7, .2, 1), filter .45s; } .marks-rail .case-front-wrap:is(:hover, :has(:focus-visible)) > .fold-flap { transform: rotateY(-105deg); filter: brightness(.35); } .case-front-wrap > .marks { top: calc(30px + .45rem); right: auto; left: calc((var(--fold-w) - var(--fold-m)) / 2); padding: 0; gap: .15rem; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } .case-front-wrap > .marks .mark { display: grid; place-items: center; width: var(--fold-m); height: var(--fold-m); border-radius: 999px; transition: opacity .2s, transform .25s, max-height .3s cubic-bezier(.3, .7, .2, 1), color .2s, background .2s; } .case-front-wrap > .marks .mark svg { width: 1rem; height: 1rem; } /* „⋯“ nur für Touch: .mark oben (display: grid) holte es sonst zurück */ .case-front-wrap > .marks .marks-more { display: none; } .case-front-wrap > .marks .mark:not([aria-pressed="true"]) { opacity: 0; transform: translateX(-.4rem); pointer-events: none; max-height: 0; } .case-front-wrap > .marks .mark[aria-pressed="true"] { box-shadow: 0 2px 8px rgb(0 0 0 / .45); } .case-front-wrap:is(:hover, :has(:focus-visible)) > .marks .mark { opacity: 1; transform: none; pointer-events: auto; max-height: 3rem; } /* Trailer unten im Streifen, rundes Symbol (fold-actions is-compact), spielt im Kinomodus auf der Seite */ .case-front-wrap > .fold-actions { position: absolute; left: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 .5rem calc((var(--fold-w) - var(--fold-m)) / 2); pointer-events: none; opacity: 0; transform: translateX(-.4rem); transition: opacity .2s, transform .25s; } .case-front-wrap:is(:hover, :has(:focus-visible)) > .fold-actions { opacity: 1; transform: none; transition-delay: .2s; } .case-front-wrap:not(:hover, :has(:focus-visible)) .fold-action { pointer-events: none; } .case-front-wrap:is(:hover, :has(:focus-visible)) > .marks .mark:not([aria-pressed="true"]):hover { color: #fff; background: rgb(255 255 255 / .1); } } /* Handy und Touch: dieselbe Klappe über „⋯“ wie im Kopf von „Spiele wie …“ (keine Kapsel am rechten Rand mehr) */ @media (hover: none), (max-width: 760px) { /* --fold-m 1.7rem: „⋯“ und vier Knöpfe passen unter das Band der kleinen Handy-Hülle (180 px hoch), mit 2rem ragte „Ausblenden“ unten heraus */ .case-front-wrap { --fold-w: 2.4rem; --fold-m: 1.7rem; perspective: 650px; } .case-front-wrap::before { content: ""; position: absolute; inset: 30px auto 0 0; z-index: 3; width: var(--fold-w); border-radius: 0 0 0 10px; pointer-events: none; background: linear-gradient(to right, rgb(10 9 8 / .92), rgb(22 19 17 / .86)); box-shadow: inset -1px 0 0 rgb(255 255 255 / .14); opacity: 0; transition: opacity .25s; } .marks-rail .case-front-wrap > .fold-flap { display: block; inset: 30px 0 0; z-index: 3; transform-origin: var(--fold-w) 50%; clip-path: inset(0 calc(100% - var(--fold-w)) 0 0 round 0 0 0 10px); transition: transform .45s cubic-bezier(.3, .7, .2, 1), filter .45s; } .case-front-wrap:has(> .marks.is-open)::before { opacity: 1; } .marks-rail .case-front-wrap:has(> .marks.is-open) > .fold-flap { transform: rotateY(-105deg); filter: brightness(.35); } .case-front-wrap > .marks { top: calc(30px + .3rem); right: auto; left: calc((var(--fold-w) - var(--fold-m)) / 2); padding: 0; gap: .1rem; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } .case-front-wrap > .marks .mark { width: var(--fold-m); height: var(--fold-m); } .case-front-wrap > .marks .mark svg { width: .9rem; height: .9rem; } .case-front-wrap > .marks .marks-more { display: grid; order: -1; color: #fff; background: rgb(16 14 12 / .72); box-shadow: 0 2px 8px rgb(0 0 0 / .4); } .case-front-wrap > .marks:not(.is-open) .mark:not([aria-pressed="true"]):not(.marks-more) { display: none; } } /* Goldene Hülle auch im Fächer und beim Herausziehen: goldenes Band, goldener Rand mit Schein */ .case-peek.is-gold { box-shadow: 0 0 0 2px var(--gold), 0 0 26px color-mix(in srgb, var(--gold) 55%, transparent), 0 18px 36px rgb(0 0 0 / .55); } .case-peek.is-gold .case-peek-band, .case-out.is-gold .case-front-band { color: #1a1408; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); } .case-out.is-gold .case-front { box-shadow: 0 0 0 2px var(--gold), 0 0 34px color-mix(in srgb, var(--gold) 50%, transparent), 0 22px 44px rgb(0 0 0 / .5); } /* Warum es passt: Einleitung und die Gründe als goldene Chips */ .case-info-why { margin: .9rem 0 0; } .case-info-why[hidden] { display: none; } .case-info-why-head { margin: 0 0 .45rem; font-size: .85rem; color: var(--muted); } .case-info-why-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; } .case-info-why-list li { padding: .22rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); } .case-info-why-list li::before { content: "✓ "; color: var(--gold); font-weight: 800; } @media (prefers-reduced-motion: reduce) { .case-spine.is-star, .case-spine.is-star:hover { animation: none; } .case-spine.is-star::after { display: none; } } .shelf-own { margin-top: 1rem !important; } /* Herausgezogene Hülle: kommt von unten aus dem Regal, dreht sich nach vorn */ .case-out { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding: 1.2rem .4rem 1.6rem; perspective: 900px; } .case-front { position: relative; flex: none; width: 168px; height: 236px; border-radius: 10px; overflow: hidden; background: hsl(var(--hue, 20) 30% 22%); box-shadow: 0 22px 44px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .14); } /* Einflug für Hülle samt Klappe und Knöpfen (.case-front-wrap): Flog nur die Hülle ein, stand der Bildstreifen der Klappe schon an seinem Platz, bevor das Cover ankam */ .case-front-wrap { transform-origin: 50% 100%; animation: case-pull .65s cubic-bezier(.2, .9, .3, 1.15) both; } /* Linke Kante (Scharnier) und Glanz der Plastikhülle */ .case-front::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 9px; background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(255 255 255 / .08)); } .case-front::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .18), transparent 42%); } .case-front-band { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: .35rem; padding-left: 16px; color: #fff; background: var(--band); font-weight: 700; font-size: .78rem; } .case-front-band .brand-icon { width: 15px; height: 15px; } .case-front-art { position: absolute; inset: 30px 0 0; } .case-front-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-front-art.is-empty { display: grid; place-items: center; padding: 1rem 1rem 1rem 1.4rem; text-align: center; color: #fff; font: 800 1.05rem/1.15 var(--display); } .case-info { flex: 1 1 14rem; min-width: 0; } /* Trailer in der Seite: Der Player fährt unter Hülle und Text über die volle Breite auf */ .case-out > .trailer-panel { flex: 1 1 100%; } .case-info-title { margin: 0; font: 800 clamp(1.3rem, 2.6vw, 1.8rem)/1.1 var(--display); letter-spacing: -.03em; } .case-info-meta { margin: .4rem 0 0; color: var(--muted); } /* Drei gleich große Knöpfe in einer Reihe (Formular für das Highlight fügt sich ein), „Zurück ins Regal“ ruhiger */ .case-info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 0; } .case-info-actions > form { display: contents; } .case-info-actions .case-info-back { color: var(--muted); background: transparent; } .case-info-actions .case-info-back:hover { color: var(--text); } @keyframes spine-in { from { opacity: 0; transform: translateX(-24px); } } @keyframes case-pull { 0% { opacity: 0; transform: translateY(90px) rotateY(78deg) scale(.55); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js-shelves .shelf, .js-shelves .shelf.is-open .shelf-board li, .case-front, .case-front-wrap, .case-spine, .shelf-fan img, .case-peek, .case-fan { transition: none; animation: none; } } @media (max-width: 640px) { .pf-collection { --row: 138px; --spine: 126px; --board: 8px; } /* Auf dem Handy kein Hover: Tippen zieht die Hülle direkt heraus */ .case-fan { display: none; } /* Kacheln zum Wischen statt untereinander */ .shelf-docks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .9rem; } .shelf-dock { scroll-snap-align: start; } .shelf-board { padding: 0 8px var(--board); } .case-front { width: 128px; height: 180px; } } .pf-back { margin: 0; } .form label.check-inline { display: flex; align-items: center; gap: .5rem; } .form .s-edit summary { cursor: pointer; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; } .form .s-edit summary strong { color: var(--text); font-weight: 600; } .form .s-edit summary:hover { color: var(--accent); } @media (max-width: 760px) { .pf-hero-inner { grid-template-columns: 1fr; } /* Lieblingsspiel Nr. 1 auf dem Handy klein mit Titel daneben (es fehlt sonst, denn die Reihe darunter lässt es aus) */ .pf-signature { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; width: auto; } .pf-avatar.is-large { width: 4.5rem; height: 4.5rem; font-size: 2rem; } } /* Radar-Benachrichtigung als Band mit Glocke, wie der Hinweis auf der Neuerscheinungen-Seite */ .radar-toggle { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.5rem; padding: 1rem 1.2rem 1rem 3.6rem; border-radius: 14px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); } .radar-toggle::before { content: "🔔"; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; } .radar-toggle p { flex: 1 1 22rem; margin: 0; color: var(--muted); } .form.radar-toggle { display: grid; max-width: 640px; } .form.radar-toggle::before { top: 1.6rem; } #radar .rl-grid { margin-top: 1rem; } /* Kontokopf: Avatar mit Ring, leichter Akzent-Schimmer im Hintergrund */ .account-head { position: relative; isolation: isolate; } .account-head::before { content: ""; position: absolute; inset: -6rem 0 0 -4rem; z-index: -1; pointer-events: none; background: radial-gradient(40% 80% at 20% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); } .account-head .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 14px 30px rgb(0 0 0 / .35); } /* Setup-Assistent und Admin-Bereich */ .install { max-width: 760px; padding: 2.5rem 0 1rem; } .settings-form { gap: 1.5rem; } .settings-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.25rem 1.25rem; margin: 0; display: grid; gap: 1rem; } .settings-section legend { font: 800 1.05rem var(--display); padding: 0 .4rem; } .field { display: grid; gap: .35rem; } .field > label { font-size: .9rem; color: var(--muted); } .field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="password"], .field input[type="number"], .field select, .field textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; width: 100%; } .field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; resize: vertical; } .field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .55; } .field .checkbox { display: flex; gap: .6rem; align-items: center; color: var(--text); } .field .hint { color: var(--muted); font-size: .8rem; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); } .field-row { display: grid; grid-template-columns: 1fr 8rem; gap: 1rem; } .install-submit { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(transparent, var(--bg) 35%); margin: 0; } .hint-box { font-size: .85rem; color: var(--muted); } .hint-box summary { cursor: pointer; } .code-block { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; font-size: .82rem; white-space: pre; } .admin-nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; } .checks { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; } .check { display: grid; grid-template-columns: 5.5rem minmax(10rem, 16rem) 1fr; gap: .75rem; padding: .45rem .7rem; border-radius: 8px; background: var(--surface); font-size: .9rem; } .check-status { font-weight: 700; font-size: .8rem; } .check-ok .check-status { color: var(--good); } .check-warn .check-status { color: var(--warn); } .check-fail .check-status { color: var(--bad); } .check-detail { color: var(--muted); } .check.job { grid-template-columns: minmax(10rem, 16rem) 1fr; } .check.job.check-warn .check-detail { color: var(--warn); } .legal-text { line-height: 1.65; } .legal h2 { font-size: 1.15rem; margin-top: 1.5rem; } .message { padding: 4rem 0; max-width: 640px; } /* Knöpfe und Zusatzformular auf Hinweisseiten (views/message.php, views/404.php) */ .message-actions { display: flex; flex-wrap: wrap; gap: .6rem; } .message-resend { display: grid; gap: .6rem; justify-items: start; max-width: 26rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); } .message-resend .hint { margin: 0; } .message-resend input[type="email"] { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .9rem; } /* „Wie wird das berechnet?“ neben der Trefferzahl */ .match-help { font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: .2em; } .match-help:hover { color: var(--text); } /* Meldung nach dem Speichern, vom Seitenanfang in den Abschnitt umgezogen (app.js, Konto) */ .alert.is-inline { margin: 0 0 1rem; } .todo { border-left: 3px solid var(--warn); padding-left: .9rem; color: var(--warn); } @media (max-width: 760px) { .pitch { padding-top: 6rem; } .picks, .how { grid-template-columns: 1fr; } /* Treffer als kompakte Karte: Cover links, Titel, Knöpfe, Bibliothek und Begründung rechts daneben */ .picks { gap: .8rem; } .pick { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: none; grid-row: auto; column-gap: .9rem; row-gap: .5rem; align-content: start; padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .pick > :not(.pick-cover):not(.stamp) { grid-column: 2; } .pick-cover { grid-column: 1; grid-row: 1 / span 4; align-self: start; } .pick-cover .cover-placeholder span { font-size: 1.05rem; } .pick-head { flex-direction: column; gap: .5rem; } .pick h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; } .pick-head .marks { margin-top: 0; } /* Handy: Mülleimer oben rechts in die Karte statt als eigene Zeile unter dem Titel */ .pick .pick-dismiss { position: absolute; top: .55rem; right: .55rem; margin: 0; width: 1.8rem; height: 1.8rem; } .pick h3 { padding-right: 2.2rem; } .pick .badge.owned { position: static; justify-self: start; margin: 0; padding: .05rem .45rem; font-weight: inherit; box-shadow: none; color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); border-color: color-mix(in srgb, var(--good) 50%, transparent); } .pick-head { flex-wrap: wrap; } .pick blockquote { font-size: .9rem; padding-left: .7rem; } /* Stempel an der linken oberen Cover-Ecke, damit er nicht in den Titel daneben ragt */ .pick .stamp { left: .35rem; right: auto; top: .3rem; font-size: .95rem; padding: .35rem .45rem .3rem; transform: rotate(-6deg); } .pick .stamp small { font-size: .5rem; } /* Schmales Cover neben dem Text: Bewertung über dem Preis, beide links; alter Preis entfällt */ .pick .cf-price, .pick .cf-rating { left: .3rem; right: auto; bottom: .3rem; font-size: .72rem; border-radius: 4px; } .pick .pick-cover .cf-rating { bottom: 1.65rem; } /* Schmales Cover: Deck nicht neben den Preis, sondern als dritte Stufe über die Bewertung */ .pick .cf-deck { left: .3rem; right: auto; bottom: 3rem; padding: .18rem .26rem; gap: .15rem; border-radius: 4px; } .pick .cf-deck svg { width: .8rem; height: .8rem; } .pick .pick-cover:not(:has(.cf-rating)) .cf-deck { bottom: 1.65rem; } .pick .cf-price b, .pick .cf-amount, .pick .cf-rating { padding: .25rem .32rem; } .pick .cf-amount s { display: none; } /* Ruhigere Karte: Auf dem Cover bleibt nur der Match. Titel, Eckdaten (Bewertung, Preis, Deck) und Begründung stehen rechts daneben, Daumen und „⋯“ teilen sich die letzte Zeile. .pick-head löst sich auf (display: contents), damit Titel und Kapsel eigene Rasterplätze bekommen; die letzte Zeile nimmt die restliche Cover-Höhe auf. Nur bis 640 px: darüber hängt die Kapsel als position: absolute am Cover-Rand */ @media (max-width: 640px) { .pick { grid-template-rows: auto auto auto auto 1fr; row-gap: 0; } .pick-cover { grid-row: 1 / span 5; } .pick .pick-cover :is(.cf-price, .cf-rating, .cf-deck) { display: none; } .pick-head { display: contents; } .pick-head h3 { grid-column: 2; grid-row: 1; } .pick .badge.owned { grid-row: 2; margin-top: .4rem; } .pick-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; grid-column: 2; grid-row: 3; margin-top: .45rem; } .pick-facts:empty { display: none; } .pick-facts > :is(.cf-price, .cf-rating, .cf-deck) { position: static; box-shadow: none; font-size: .72rem; border-radius: 4px; } .pick-facts .cf-price b, .pick-facts .cf-amount, .pick-facts .cf-rating { padding: .22rem .32rem; } /* In der Textzeile wie das Plattform-Badge: Logo in Textfarbe, ohne Glas */ /* inset: auto, sonst verschieben die Cover-Werte (left, bottom: 3rem aus .pick .cf-deck) das Symbol über die Karte */ .pick-facts .cf-deck { position: relative; inset: auto; padding: .16rem .4rem .16rem .26rem; color: var(--text); background: transparent; border: 1px solid var(--border); -webkit-backdrop-filter: none; backdrop-filter: none; } .pick-facts .cf-deck .deck-status { box-shadow: 0 0 0 1.5px var(--surface); } .pick-facts .cf-deck svg { width: .8rem; height: .8rem; } .pick-facts .cf-rating-word, .pick-facts .cf-amount s { display: none; } /* Begründung kompakt: zwei Gründe, ohne Kurzbeschreibung (die steht auf „Spiele wie …“) */ .pick blockquote { grid-row: 4; margin-top: .55rem; } .pick-why li:nth-child(n+3), .pick .pick-sum, .pick .pick-more { display: none; } /* Formel kompakt: kleinere Cover, Legende und Chips etwas kleiner */ .pick .mix-face { width: 32px; height: 32px; } .pick .mix-legend { font-size: .7rem; } .pick .mix-chips li { font-size: .74rem; padding: .16rem .5rem; } .pick-why li { font-size: .88rem; } .pick-pitch { font-size: .88rem; } .pick-contrast { font-size: .82rem; } .pick > .vote { grid-row: 5; align-self: end; justify-self: start; margin-top: .55rem; } .marks-rail .pick-head > .marks { grid-column: 2; grid-row: 5; align-self: end; justify-self: end; margin-top: .55rem; } /* Aufgeklappte Kapsel braucht die ganze Zeile: Daumen solange ausblenden */ .pick:has(.pick-head > .marks.is-open) > .vote { visibility: hidden; } } .carousel-arrow { display: none; } /* auf dem Handy wird gewischt */ /* Gewählte Spiele im Satz dürfen umbrechen, sonst ragen lange Titel („Assassin's Creed Brotherhood“) aus dem Bild */ .fav { white-space: normal; overflow-wrap: anywhere; } /* Filter bei den Treffern: Überschrift darüber, Optionen umbrechend (als wischbare Reihe sah man nicht, dass rechts noch „bis 30 €“ oder „ab 90 %“ kommen); Plattformen nur als Logo */ .live-filters { gap: .9rem; } .live-filters .platforms { flex-wrap: wrap; gap: .35rem; } .live-filters .platforms legend { float: none; margin: 0 0 .4rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .live-filters .platform { flex: none; } .live-filters .platform > span { padding: .45rem .85rem; white-space: nowrap; } .live-filters .platform span .brand-icon { width: 20px; height: 20px; } .live-filters .platform-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .shelf-item { width: 7rem; } } @media (max-width: 640px) { .check { grid-template-columns: 1fr; gap: .15rem; } .field-row { grid-template-columns: 1fr; } /* Spielkarten: Cover neben Titel, Knöpfen und Eckdaten; Begründung, Text und Kauf-Links über die volle Breite */ .card { grid-template-columns: 72px minmax(0, 1fr); column-gap: .85rem; row-gap: .55rem; padding: .85rem; } .card-body { display: contents; } .card-cover { grid-row: 1 / span 2; align-self: start; } .card-head { grid-column: 2; flex-wrap: wrap; align-items: center; gap: .45rem .35rem; } .card-head > h2, .card-head > h3 { flex: 1 0 100%; margin: 0; font-size: 1.12rem; line-height: 1.2; } .card-head .marks { margin-left: 0; } .card-head .mark { width: 1.85rem; height: 1.85rem; } .card-head .pick-toggle, .card-head .match { margin-left: auto; } .card-head .pick-toggle { padding: .35rem .75rem; font-size: .82rem; } .card-body > .meta { grid-column: 2; margin: 0; } .card-body > :not(.card-head):not(.meta) { grid-column: 1 / -1; min-width: 0; } .card .summary { font-size: .92rem; } /* Bester Treffer: „Bester Treffer“ neben das Cover statt in eine eigene Zeile darunter (sonst stand das Cover allein oben) */ .card-top .card-body > .card-top-label { grid-column: 2; margin: 0; } .card-top .card-cover { grid-row: 1 / span 2; } /* Match aufs Cover (wie bei den Kacheln), im Kopf nur noch Titel und Knöpfe */ .card-cover { position: relative; } .card-cover .card-cover-match { display: block; position: absolute; top: -.45rem; right: -.45rem; font-size: .8rem; padding: .2rem .4rem .15rem; } .card-head > .match { display: none; } /* Eckdaten unter Cover und Titel über die volle Breite, statt in die schmale Spalte daneben gequetscht */ .card-body > .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; } .card-body > .meta .price-line { flex-basis: 100%; gap: .3rem .9rem; } /* Trennpunkte nur in einer Zeile sinnvoll; hier trennt der Abstand, die lange Review-Angabe steht im Tooltip */ .card .review-detail { display: none; } /* Kauf-Links in einer wischbaren Zeile statt mehrerer umbrochener Reihen */ /* nowrap: bei Umbruch wäre jede Spalte so breit wie die längste Kauf-Zeile und die Seite scrollte quer */ .game-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .6rem; margin-top: .3rem; } .buy { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .buy::-webkit-scrollbar { display: none; } .buy-chip, .buy-group { flex: none; } /* Große Spielkarten (Themenseiten, bester Treffer): Kauf-Links umbrechen statt am Rand abgeschnitten zu werden; min-width: 0 hält die Kartenspalte schmal, damit die Seite nicht quer scrollt */ .card .game-actions, .card .buy { min-width: 0; } .card .buy { flex-wrap: wrap; overflow: visible; } /* Podest der Themenseiten ebenso: dort lief „Instant Gaming“ rechts aus der Karte (Andreas 08.11.) */ .podium-card .game-actions, .podium-card .buy { min-width: 0; } .podium-card .buy { flex-wrap: wrap; overflow: visible; } /* Themenkarten kompakter: etwas größeres Cover, Merkmale als Chips, Beschreibung auf drei Zeilen */ .theme-list .card { grid-template-columns: 84px minmax(0, 1fr); } .theme-list .reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; border-left: 0; } .theme-list .reasons { gap: .2rem .9rem; } .theme-list .reasons li { padding: 0; font-size: .82rem; color: var(--text); background: none; border: 0; } .theme-list .reasons li::before { content: "✓"; margin-right: .3rem; color: var(--accent); font-weight: 800; } .theme-list .summary { margin: 0; } /* Cover klein oben links, der Text läuft daneben und darunter über die volle Breite */ .similar-head { display: block; } .similar-cover { float: left; width: 88px; margin: 0 1rem .6rem 0; } .similar-head > div:last-child::after { content: ""; display: block; clear: both; } } /* ===== „Spiele wie …“ im Stil einer Spieleseite (Nov. 2026): dunkler Kopf mit Bild, großes Cover mit Play-Knopf und Markier-Kapsel, großer Titel, eine Info-Zeile ohne Kästen, Merkmale als Balken, nur zwei Handlungen ===== */ /* Play-Knopf mitten auf dem Cover (partials/trailer-button.php) */ .trailer-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 3.6rem; height: 3.6rem; display: grid; place-items: center; padding: 0 0 0 .2rem; border-radius: 50%; cursor: pointer; color: #fff; background: rgb(13 11 10 / .55); border: 1.5px solid rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgb(0 0 0 / .45); transition: transform .2s, background .2s, border-color .2s; } .trailer-play svg { width: 1.45rem; height: 1.45rem; } .trailer-play:hover, .trailer-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); border-color: var(--accent); } .trailer-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .trailer-play-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Trailer in der Seite (app.js toggleTrailerPanel): fährt unter dem Inhalt des Kopfs bzw. der Karte auf */ .trailer-panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2, .8, .3, 1), opacity .3s; } .trailer-panel.is-open { grid-template-rows: 1fr; opacity: 1; } .trailer-panel-inner { min-height: 0; overflow: hidden; } .trailer-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; } .trailer-panel-head strong { font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trailer-panel-close { flex: none; padding: .45rem .85rem; border-radius: 999px; cursor: pointer; font: 700 .82rem/1 var(--body, inherit); color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--border); } .trailer-panel-close:hover, .trailer-panel-close:focus-visible { border-color: var(--accent); color: var(--accent); } /* Gäste: Hinweis „Dafür brauchst du ein Konto“ beim Klick auf ein Markier-Symbol (app.js) */ .guest-prompt { position: fixed; z-index: 80; width: min(20rem, calc(100vw - 24px)); padding: 1rem 1rem .9rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .7); animation: options-in .2s cubic-bezier(.2, .8, .2, 1); } .guest-prompt p { margin: 0; padding-right: 1.4rem; font-size: .9rem; line-height: 1.45; } .guest-prompt .guest-prompt-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; padding: 0; } .guest-prompt-close { position: absolute; top: .45rem; right: .5rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; } .guest-prompt-close:hover, .guest-prompt-close:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } /* „Auf YouTube ansehen ↗“ neben Schließen (altersbeschränkte Trailer laufen nur auf youtube.com) */ .trailer-panel-tools { display: inline-flex; align-items: center; gap: .9rem; flex: none; } .trailer-youtube { font: 700 .82rem/1 var(--body, inherit); color: var(--muted); white-space: nowrap; text-decoration: none; } .trailer-youtube:hover, .trailer-youtube:focus-visible { color: var(--accent); text-decoration: underline; } .rl-cinema-youtube { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); padding: .55rem 1rem; border-radius: 999px; color: #fff; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .3); } /* Ein Vorfahre mit eigenem z-index würde den Player unter das Abdunkeln sperren (app.js toggleTrailerPanel) */ .trailer-unstack { z-index: auto !important; } /* Neuerscheinungen: Trailer unter dem Kasten über die volle Breite */ .rl-spotlight + .trailer-panel.is-open .trailer-panel-inner { padding-top: 1.2rem; } @media (max-width: 640px) { .trailer-youtube { font-size: .76rem; } .trailer-panel-tools { gap: .6rem; } } .trailer-panel-frame { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 24px 60px -24px #000; } .trailer-panel-frame iframe { display: block; width: 100%; height: 100%; border: 0; } /* Im Kopf: unter Cover und Text, mit dem Innenabstand des Kopfs */ .sx-hero > .trailer-panel .trailer-panel-inner { padding: 0 2.6rem; } .sx-hero > .trailer-panel.is-open .trailer-panel-inner { padding-bottom: 2.6rem; } /* In der Karte: über die volle Breite unter allem */ .card-top > .trailer-panel.is-open .trailer-panel-inner { padding-top: .4rem; } .trailer-play[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); } /* Solange ein Trailer läuft: Rest der Seite leicht abgedunkelt, Kopf bzw. Karte mit dem Player liegt hell darüber */ .trailer-dim { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .55); opacity: 0; pointer-events: none; transition: opacity .35s; } .has-trailer .trailer-dim { opacity: 1; pointer-events: auto; cursor: pointer; } .trailer-host-active { position: relative; z-index: 61; } /* Player in einem Raster (unter der Reihe): nur er liegt über der Abdunklung, die Cover drumherum werden mit dunkel */ .trailer-panel.is-lifted { position: relative; z-index: 61; } .card.trailer-host-active { box-shadow: 0 30px 80px -30px #000; } @media (prefers-reduced-motion: reduce) { .trailer-panel { transition: none; } } @media (max-width: 760px) { .sx-hero > .trailer-panel .trailer-panel-inner { padding: 0 1.3rem; } .sx-hero > .trailer-panel.is-open .trailer-panel-inner { padding-bottom: 1.3rem; } /* Am Handy steht der Player im Raster direkt unter dem Cover; der Abstand kommt vom Raster */ .sx-inner > .trailer-panel .trailer-panel-inner { padding: 0; } .sx-inner > .trailer-panel .trailer-panel-frame { border-radius: 12px; } } /* Eckdaten als eine Zeile (partials/info-line.php): Jahr · Plattformen · Bewertung · Preis, ohne Schilder */ .info-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem; margin: .8rem 0 0; font-size: .95rem; color: var(--muted); } .info-line .badge-platforms { border: 0; background: none; padding: 0; gap: .45rem; color: inherit; } .info-line .il-sep { opacity: .45; } .info-line .il-rating { font-weight: 700; color: var(--text); } /* Altersfreigabe (AgeRatings) in den Farben der USK-Kennzeichen: 0 weiß, 6 gelb, 12 grün, 16 blau, 18 rot; PEGI genauso nach Stufe */ .info-line .il-age { padding: .05rem .4rem; border-radius: 5px; font-size: .78rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4; color: #fff; background: var(--age, #888); } .info-line .il-age.age-0 { --age: #f2f2f2; color: #1a1a1a; } .info-line .il-age.age-6 { --age: #f5c400; color: #1a1408; } .info-line .il-age.age-12 { --age: #2f9e44; } .info-line .il-age.age-16 { --age: #1c7fd0; } .info-line .il-age.age-18 { --age: #d7262e; } .info-line .il-rating.is-good { color: #3fbf7f; } .info-line .il-rating.is-bad { color: var(--bad, #e5484d); } .info-line .il-price { font-weight: 800; color: var(--text); } .info-line .il-sale { color: #3fbf7f; } .info-line s { font-weight: 400; opacity: .6; } /* Steam-Link direkt hinter dem Preis */ .info-line .il-steam { display: inline-flex; align-items: center; gap: .25rem; margin-left: .45rem; padding: .15rem .5rem; border-radius: 6px; font-size: .8rem; font-weight: 700; color: var(--muted); text-decoration: none; background: color-mix(in srgb, currentColor 12%, transparent); transition: color .15s, background .15s; } .info-line .il-steam:hover, .info-line .il-steam:focus-visible { color: #fff; background: #1a9fff; } .info-line .il-steam .brand-icon { width: 15px; height: 15px; } .info-line .il-ext { opacity: .75; } /* „Kaufen ab … ▾“ (partials/buy-menu.php): ein Knopf, die Shops klappen darunter auf */ .buy-menu { position: relative; } /* Offenes Kaufen-Menü im Kopf von „Spiele wie …“: Der Kopf ist ein eigener Stapelbereich (isolation), sein z-index im Menü zählt nur darin. Ohne das lag die Sprechblase „Am nächsten an …“ darunter über Amazon & Co. */ .sx-hero:has(.buy-menu[open]) { z-index: 5; } .buy-menu-toggle { list-style: none; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--text); border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 6%, transparent); } .buy-menu-toggle::-webkit-details-marker { display: none; } .buy-menu-toggle:hover, .buy-menu[open] .buy-menu-toggle { border-color: var(--accent); } .buy-menu .buy-caret { font-size: .75em; transition: transform .2s; } .buy-menu[open] .buy-caret { transform: rotate(180deg); } /* Flache Liste: jeder Kauf-Link eine Zeile, auch Amazon je Plattform (Logo + Plattform), kein zweites Menü */ .buy-menu-list { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; min-width: 14rem; display: grid; gap: .3rem; padding: .5rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .buy-menu-list .buy-chip { display: flex; align-items: center; gap: .55rem; justify-content: flex-start; border-radius: 10px; padding: .6rem .75rem; } /* So breit wie der längste Eintrag: „Nintendo Switch* · Amazon“ bricht nicht mehr um */ .buy-menu-list { width: max-content; max-width: min(22rem, calc(100vw - 2rem)); } .buy-menu-list .buy-chip span, .buy-menu-list .buy-shop { white-space: nowrap; } .buy-menu-list .buy-chip .brand-icon { width: 18px; height: 18px; flex: none; } .buy-menu-list .buy-shop { margin-left: -.25rem; font-weight: 500; color: var(--muted); } /* Preisliste „Wo kaufen“ (partials/price-list.php, Offers): je Shop eine Zeile, der günstigste oben mit dunklem Knopf, Amazon mit einem Knopf je Konsole. Ersetzt „Kaufen ab … ▾“ und die Shop-Chips */ .price-list { display: grid; } .price-list-head { margin: 0 0 .15rem; font: 700 .72rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .price-rows { list-style: none; margin: 0; padding: 0; } .price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .35rem .8rem; padding: .6rem 0; border-top: 1px solid var(--border); } .price-row:first-child { border-top: 0; } .price-row.has-platforms { grid-template-columns: minmax(0, 1fr) auto; } .price-shop { display: flex; align-items: center; gap: .65rem; min-width: 0; } .price-logo { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .price-logo .brand-icon { width: 1.1rem; height: 1.1rem; } .price-name { display: grid; min-width: 0; line-height: 1.3; } .price-name b { font-size: .95rem; color: var(--text); } .price-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .78rem; } .price-best { display: inline-block; margin-left: .25rem; padding: .05rem .45rem; border-radius: 6px; vertical-align: .12em; font-size: .68rem; font-weight: 700; color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); } .price-amount { display: grid; justify-items: end; line-height: 1.2; text-align: right; } .price-amount b { font: 800 1.02rem/1.2 var(--display); color: var(--text); } .price-amount small { color: var(--muted); font-size: .76rem; white-space: nowrap; } .price-cut { color: var(--good); font-weight: 700; } .price-go, .price-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .85rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: .82rem; font-weight: 600; white-space: nowrap; transition: border-color .15s, background .15s; } .price-go:hover, .price-chip:hover { text-decoration: none; border-color: var(--text); } /* Rot wie die übrigen Hauptknöpfe: --text/--bg gingen im dunklen Kopf von „Spiele wie …“ (eigene --text) weiß auf weiß */ .price-go.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .price-go.is-primary:hover { filter: brightness(1.08); } .price-chip .platform-icon, .price-chip svg { width: 14px; height: 14px; } .price-platforms { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; } .price-note { margin: .35rem 0 0; font-size: .72rem; line-height: 1.4; color: var(--muted); } /* Sehr schmal: Preis unter den Shopnamen, Knopf bleibt rechts */ @media (max-width: 400px) { .price-row { grid-template-columns: minmax(0, 1fr) auto; } .price-row .price-amount { grid-column: 1; grid-row: 2; justify-items: start; text-align: left; padding-left: 2.75rem; } .price-row .price-go { grid-column: 2; grid-row: 1 / span 2; } .price-row.has-platforms .price-platforms { grid-column: 1 / -1; justify-content: flex-start; padding-left: 2.75rem; } } /* Im Kopf von „Spiele wie …“ und auf der Karte des besten Treffers: eigene ruhige Fläche */ .sx-prices, .card-prices { max-width: 36rem; margin: 1.3rem 0 0; padding: .75rem 1rem .6rem; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); } .card-prices { max-width: none; } /* Kompakt auf Karten und Kacheln (partials/price-pop.php): „ab 35,99 € · 3 Shops“ öffnet die Liste. PC: schwebendes Feld am Knopf (app.js setzt es fest an den Bildschirm, sonst schnitte die Karte es ab). Handy: Blatt von unten */ .price-pop { position: relative; } .price-pop > summary { list-style: none; display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .6rem .38rem .85rem; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; user-select: none; font-size: .84rem; color: var(--text); white-space: nowrap; } .price-pop > summary::-webkit-details-marker { display: none; } .price-pop > summary b { font-weight: 800; } .price-pop-count { color: var(--muted); font-weight: 500; } .price-pop-count::before { content: "·"; margin-right: .45rem; } .price-pop > summary:hover, .price-pop[open] > summary { border-color: var(--text); } .price-pop[open] .buy-caret { transform: rotate(180deg); } .price-pop-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: min(23rem, calc(100vw - 16px)); padding: .75rem 1rem .6rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); text-align: left; } .price-pop-panel.is-fixed { position: fixed; right: auto; } .price-pop-title { margin: 0 0 .35rem; font: 800 1rem/1.2 var(--display); color: var(--text); } /* Dunkler Hintergrund hinter dem Blatt (Handy): eigenes Element am (app.js), nicht ::before im Karussell */ .price-pop-backdrop { position: fixed; inset: 0; z-index: 69; background: rgb(0 0 0 / .5); } @media (max-width: 760px) { .price-pop-panel, .price-pop-panel.is-fixed { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; z-index: 70; width: auto; max-height: 80vh; overflow-y: auto; padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; } } /* Kopf */ /* Kein overflow: hidden, sonst schnitt der Kopf das Menü „Kaufen ab …“ ab (Amazon verschwand); Bild und Verlauf runden ihre Ecken selbst ab */ .sx-hero { position: relative; isolation: isolate; margin: 1.4rem 0 0; border-radius: 22px; background: #0d0b0a; color: #f4efe6; border: 1px solid rgb(255 255 255 / .06); --text: #f4efe6; --muted: rgb(244 239 230 / .72); --border: rgb(255 255 255 / .16); --surface: #1a1613; } .sx-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 25%; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 65%); mask-image: linear-gradient(90deg, transparent 15%, #000 65%); } /* Ohne breites Bild: kein Bild, dafür ein roter Schein oben rechts und ein feines Raster wie ein Menü-Hintergrund */ .sx-hero:not(.has-shot) { background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), repeating-linear-gradient(135deg, rgb(255 255 255 / .025) 0 2px, transparent 2px 14px), #0d0b0a; } .sx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(0deg, #0d0b0a 0%, rgb(13 11 10 / .4) 55%, rgb(13 11 10 / .1)), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); } /* Cover vertikal mittig zum Text (unten bündig ließ oben links ein Loch) */ .sx-inner { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2.4rem; align-items: center; padding: 2.6rem; } .sx-hero.has-shot .sx-inner { min-height: 440px; } .sx-cover { position: relative; border-radius: 14px; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgb(255 255 255 / .08); } .sx-cover .cover { display: block; width: 100%; border-radius: 14px; } /* Markier-Kapsel am rechten Cover-Rand, wie an den Kacheln */ .sx-cover > .marks { position: absolute; top: .7rem; right: -.85rem; z-index: 3; flex-direction: column; gap: .1rem; padding: .22rem; border-radius: 999px; background: rgb(16 14 12 / .6); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .sx-cover > .marks .mark { width: 1.75rem; height: 1.75rem; border: 0; background: transparent; color: rgb(255 255 255 / .82); } .sx-cover > .marks .mark:hover { color: #fff; background: rgb(255 255 255 / .1); } .sx-cover > .marks .mark[aria-pressed="true"] { color: #15120f; background: var(--tint, var(--accent)); } /* Farben der Merkmale wie an Kacheln und Karten (.marks-rail … --tint): Lieblingsspiel rot, Merken gold, Gespielt grün, Ausblenden hell. Vorher war hier und an der Hülle (.case-front-wrap) alles rot */ :is(.sx-cover, .case-front-wrap) > .marks .mark-heart { --tint: #ff5a4e; } :is(.sx-cover, .case-front-wrap) > .marks .mark-wish { --tint: #f5b942; } :is(.sx-cover, .case-front-wrap) > .marks .mark-played { --tint: #4fd37b; } :is(.sx-cover, .case-front-wrap) > .marks .mark-hide { --tint: #e8e2d8; } :is(.sx-cover, .case-front-wrap) > .marks .mark-heart[aria-pressed="true"] svg, :is(.sx-cover, .case-front-wrap) > .marks .mark-wish[aria-pressed="true"] svg { fill: currentColor; } .sx-cover > .marks .marks-more { display: none; } /* Am PC wie die großen Karten: Klappe mit breitem, beschriftetem Streifen (Kurztexte data-short), unten der Trailer. Der Play-Knopf in der Mitte läge unter dem Streifen und blendet beim Aufklappen aus */ .sx-cover > .fold-actions { display: none; } @media (hover: hover) and (min-width: 761px) { .sx-cover { --fold-w: 9.5rem; --fold-m: 2.1rem; --fold-r: 14px; perspective: 650px; } .sx-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: var(--fold-w); border-radius: 14px 0 0 14px; background: linear-gradient(to right, rgb(10 9 8 / .94), rgb(22 19 17 / .88)); box-shadow: inset -1px 0 0 rgb(255 255 255 / .14); opacity: 0; transition: opacity .25s; } .sx-cover:is(:hover, :has(:focus-visible))::before { opacity: 1; } .sx-cover > .fold-flap { z-index: 1; } .sx-cover:is(:hover, :has(:focus-visible)) > .fold-flap { transform: rotateY(-105deg); filter: brightness(.35); } .sx-cover > .trailer-play { transition: opacity .2s; } .sx-cover:is(:hover, :has(:focus-visible)) > .trailer-play { opacity: 0; pointer-events: none; } .sx-cover > .marks { top: .5rem; right: auto; left: .45rem; padding: 0; gap: .2rem; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .sx-cover > .marks .mark { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; width: var(--fold-m); height: var(--fold-m); padding: 0 calc((var(--fold-m) - 1rem) / 2); overflow: hidden; border-radius: 999px; transition: opacity .2s, transform .25s, width .3s cubic-bezier(.3, .7, .2, 1), max-height .3s cubic-bezier(.3, .7, .2, 1), border-radius .3s, color .2s, background .2s; } .sx-cover > .marks .mark svg { flex: none; width: 1rem; height: 1rem; } .sx-cover > .marks .marks-more { display: none; } .sx-cover > .marks .mark::after { content: attr(data-short); font-size: .82rem; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .2s; } .sx-cover > .marks .mark:not([aria-pressed="true"]) { opacity: 0; transform: translateX(-.4rem); pointer-events: none; max-height: 0; } .sx-cover > .marks .mark[aria-pressed="true"] { box-shadow: 0 2px 8px rgb(0 0 0 / .45); } .sx-cover:is(:hover, :has(:focus-visible)) > .marks .mark { opacity: 1; transform: none; pointer-events: auto; max-height: 3rem; width: calc(var(--fold-w) - .9rem); border-radius: 9px; } .sx-cover:is(:hover, :has(:focus-visible)) > .marks .mark::after { opacity: 1; transition-delay: .15s; } .sx-cover:is(:hover, :has(:focus-visible)) > .marks .mark:not([aria-pressed="true"]):hover { color: #fff; background: rgb(255 255 255 / .1); } .sx-cover > .fold-actions { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 0 .6rem .45rem; pointer-events: none; opacity: 0; transform: translateX(-.4rem); transition: opacity .2s, transform .25s; } .sx-cover:is(:hover, :has(:focus-visible)) > .fold-actions { opacity: 1; transform: none; transition-delay: .2s; } .sx-cover:not(:hover, :has(:focus-visible)) .fold-action { pointer-events: none; } } .sx-hero .eyebrow { margin: 0 0 .5rem; color: var(--accent); } .sx-hero h1 { margin: 0; font: 800 clamp(2.3rem, 4.6vw, 3.8rem)/.95 var(--display); letter-spacing: -.045em; color: #fff; } .sx-hero h1 span { display: block; color: var(--accent); } .sx-sum { margin: .9rem 0 0; max-width: 42rem; color: var(--muted); line-height: 1.55; } .sx-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; max-width: 38rem; margin: 1.3rem 0 0; padding: 0; list-style: none; } .sx-traits li { display: grid; gap: .35rem; font-size: .84rem; font-weight: 600; } .sx-bar { display: block; height: 5px; border-radius: 9px; background: rgb(255 255 255 / .1); overflow: hidden; } .sx-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--accent), #ff8a3d); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); } .sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.5rem 0 0; } .sx-actions .button.primary { padding: .8rem 1.3rem; border-radius: 12px; font-size: .95rem; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent); } .sx-hero .theme-links { margin: 1.3rem 0 0; } .sx-hero .theme-links .hint { color: var(--muted); } /* Bester Treffer: ruhige Karte mit Match-Ring, eine Info-Zeile, unten nur zwei Knöpfe und die Daumen */ .card.card-top { grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 1.8rem; padding: 1.4rem; border-radius: 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface)); } /* Cover und Markier-Kapsel oben in der Zeile (zentriert hing die Kapsel über dem Cover); der Play-Knopf sitzt auf der Cover-Mitte: Cover 3:4, also halbe Höhe = Breite × 2/3, minus halber Knopf */ .card-top > .card-cover { align-self: start; } .card-top > .trailer-play { grid-column: 1; grid-row: 1; position: static; transform: none; align-self: start; justify-self: center; margin-top: calc(200px * 2 / 3 - 1.8rem); } .card-top > .trailer-play:hover, .card-top > .trailer-play:focus-visible { transform: scale(1.08); } .card-top .card-head { align-items: flex-start; } .card-top .card-head h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.02; } .card-top .card-cover-match { display: none !important; } /* Beschreibungen ganz zeigen (ein bis zwei Sätze): Auf drei Zeilen gekürzt brachen sie mitten im Satz ab, mobil fast immer */ .card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .card-foot .vote { margin: 0 0 0 auto; } .card-foot .buy-menu-toggle { padding: .5rem .9rem; border-radius: 999px; font-size: .85rem; } .match-ring { --p: 0; --ring: var(--accent); flex: none; margin-left: auto; width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 10%, transparent) 0); } .match-ring.is-legendary { --ring: #ffb347; box-shadow: 0 0 28px -6px rgb(255 179 71 / .6); } .match-ring b { width: 4.3rem; height: 4.3rem; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--surface); font: 800 1.35rem/1 var(--display); color: var(--text); } .match-ring.is-legendary b { color: #ffbf5a; } .match-ring small { display: block; margin-top: .2rem; font: 700 .55rem/1 var(--body, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } @media (max-width: 760px) { .sx-inner { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; min-height: 0; padding: 1.3rem; } .sx-cover { width: 9.5rem; } .sx-hero h1 { font-size: 2.1rem; } .sx-traits { grid-template-columns: minmax(0, 1fr); } .sx-actions .button.primary, .sx-actions .buy-menu, .sx-actions .buy-menu-toggle { flex: 1 1 100%; justify-content: center; } } @media (max-width: 640px) { .card.card-top { grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem .9rem; padding: 1rem; } .card-top > .trailer-play { grid-row: 1 / span 2; width: 2.8rem; height: 2.8rem; margin-top: calc(7rem * 2 / 3 - 1.4rem); } .card-top > .trailer-play svg { width: 1.1rem; height: 1.1rem; } .match-ring { width: 3.8rem; height: 3.8rem; } .match-ring b { width: 3.1rem; height: 3.1rem; font-size: 1rem; } .card-top .card-head h3 { font-size: 1.35rem; } .card-foot .vote { margin-left: 0; } } /* ===== FAQ: Abschnitte mit Inhaltsverzeichnis, alle Antworten sichtbar ===== */ .faq { max-width: 760px; } .faq .lead { color: var(--muted); font-size: 1.05rem; line-height: 1.6; } .faq-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.4rem 0 .5rem; } .faq-toc a { padding: .4rem .85rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: .88rem; font-weight: 600; } .faq-toc a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .faq-group { scroll-margin-top: 5rem; } .faq.legal .faq-group > h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 2.4rem 0 .4rem; padding-top: 1.6rem; border-top: 1px solid var(--border); } .faq-item { scroll-margin-top: 5rem; margin-top: 1.4rem; } .faq-item h3 { font-size: 1.08rem; margin: 0 0 .35rem; } .faq-item p { margin: 0; line-height: 1.65; color: var(--muted); } .faq-item .faq-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .45rem; } .faq-links a { font-weight: 600; font-size: .92rem; } .faq-more { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); } /* ===== Vorlieben (Prefs): Formular im Konto und Hinweis auf gefilterten Seiten ===== */ .prefs-form { display: grid; gap: .9rem; } .prefs-form .platforms { gap: .4rem; } .prefs-form .platforms legend { float: none; display: block; width: 100%; margin: 0 0 .45rem; padding: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .prefs-form label.platform { display: inline-block; margin: 0; } .prefs-form .platform > span { font-size: .88rem; } .prefs-form .platform .brand-icon, .prefs-form .platform svg { width: 16px; height: 16px; } .prefs-form .hint, .prefs-form .s-actions { margin: 0; } .prefs-hint { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: 1.2rem 0; padding: .65rem 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-size: .9rem; color: var(--muted); } .prefs-hint strong { color: var(--text); } .prefs-hint-icon { color: var(--accent); } .prefs-hint a { font-weight: 700; } .prefs-hint a:first-of-type { margin-left: auto; } @media (max-width: 640px) { .prefs-hint a:first-of-type { margin-left: 0; } } /* Kompakt in der Werkzeugleiste (prefs-hint mit chip): Vorlieben als Chip, ✕ hebt den Filter für diese Seite auf */ .rs-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; } .prefs-chip { display: inline-flex; align-items: stretch; margin: 0; border-radius: 999px; font-size: .84rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .prefs-chip a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .75rem; color: var(--text); } .prefs-chip a:hover { text-decoration: none; color: var(--accent); } .prefs-chip .prefs-chip-clear { padding: .3rem .7rem .3rem .45rem; color: var(--muted); border-left: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); } @media (pointer: coarse) { .prefs-chip a { min-height: 2.5rem; } } /* ===== Startseite neu geordnet (Nov. 2026): Für dich → Entdecken → Radar → Community ===== */ /* Gäste: „So funktioniert's“ als ruhige Leiste, die Katalogzahl direkt darunter */ .how.how-compact { padding: 2.2rem 0 0; margin-top: 2.5rem; gap: 1.6rem; } .how-compact > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; } .how-compact b { font-size: 2rem; margin: 0; } .how-compact p { font-size: .92rem; line-height: 1.45; } .how-compact strong { display: block; color: var(--text); font-size: 1rem; margin-bottom: .15rem; } .how-compact + .catalog-line { margin: 1.4rem 0 0; } /* „Für dich“: ein Block mit zwei Reitern statt zwei großer Bereiche */ .home-foryou { border-top: 1px solid var(--border); margin-top: 2.5rem; padding-top: 2.4rem; } .home-foryou > .steam-picks, .home-foryou > .home-tonight { border-top: 0; margin-top: 0; padding-top: 0; } .home-foryou > .home-tonight { padding-bottom: 1rem; } .home-foryou > .steam-picks:not(:last-child) { padding-bottom: 1rem; } .home-foryou:not(.is-tabbed) > .steam-picks + .home-tonight { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 2.4rem; } .foryou-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; } .foryou-tabs button { font: 800 clamp(1.05rem, 2.2vw, 1.45rem)/1.1 var(--display); letter-spacing: -.02em; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; } .foryou-tabs button:hover { color: var(--text); border-color: var(--accent); } .foryou-tabs button[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } .foryou-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Ohne eigene Überschrift: der Konto-Link steht rechts neben dem Hinweis */ .home-foryou.is-tabbed .live-head { float: right; margin: 0 0 .6rem 1.2rem; } .home-foryou.is-tabbed .hint { margin-top: 0; } .home-foryou.is-tabbed [role="tabpanel"] { display: flow-root; } .home-foryou.is-tabbed :is(.picks, .radar-grid) { clear: both; } .home-foryou.is-tabbed [role="tabpanel"][hidden] { display: none; } /* Entdecken: Spiel des Tages und Themen nebeneinander */ .home-discover { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 3rem; align-items: stretch; } .home-discover.is-single { grid-template-columns: minmax(0, 1fr); } /* Spiel des Tages in der Entdecken-Reihe: oben ein Hintergrund (Screenshot oder weichgezeichnetes Cover), der nach unten in die Karte ausläuft; Cover und Text sitzen unten darauf. So füllt das Bild die Höhe, die der Würfel daneben vorgibt, statt einer leeren Fläche unter den Knöpfen */ .home-discover .gotw { position: relative; overflow: hidden; isolation: isolate; margin: 0; padding: 1.4rem; grid-template-columns: clamp(9rem, 30%, 12.5rem) minmax(0, 1fr); gap: 1.4rem; align-items: center; align-content: end; min-height: 100%; } .gotw-backdrop { position: absolute; inset: 0 0 auto; width: 100%; height: 70%; object-fit: cover; z-index: -1; opacity: .4; mask-image: linear-gradient(180deg, #000 30%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); } /* Noch ohne Screenshot: ruhiger Schein in Akzentfarbe statt eines verwaschenen Covers */ .home-discover .gotw:not(.has-shot) { align-items: center; align-content: center; background: radial-gradient(110% 75% at 75% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%), var(--surface); } .home-discover .gotw::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 20%, var(--surface) 72%); } .home-discover .gotw .gotw-cover .cover { border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); } /* Text auf drei Zeilen, damit die Karte nicht höher wird als nötig; der ganze Text steht auf „Spiele wie …“ */ .home-discover .gotw .gotw-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .home-discover .gotw .gotw-actions .button { padding: .45rem .85rem; } .home-discover .gotw :is(h2, h3) { font-size: clamp(1.4rem, 2.6vw, 2rem); } /* Spiele des Tages als Karussell: Rahmen am Karussell, die Folien gleiten darin (Wisch-Leiste mit Einrasten, auch ohne JS) */ .gotw-carousel { position: relative; min-width: 0; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; } .gotw-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; } .gotw-track::-webkit-scrollbar { display: none; } .gotw-carousel .gotw-slide { scroll-snap-align: start; border: 0; border-radius: 0; min-height: 100%; } /* Pfeile und Punkte oben rechts auf dem Bild (unten lagen sie am Handy über den Knöpfen) */ .gotw-nav { position: absolute; right: 1rem; top: 1rem; z-index: 3; display: flex; align-items: center; gap: .35rem; padding: .3rem .45rem; border-radius: 999px; background: rgb(16 14 12 / .55); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .gotw-nav[hidden] { display: none; } .gotw-arrow { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; padding: 0 0 .1rem; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: #fff; font-size: 1.25rem; line-height: 1; } .gotw-arrow:hover, .gotw-arrow:focus-visible { background: rgb(255 255 255 / .14); } .gotw-dot { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgb(255 255 255 / .4); transition: width .25s, background .25s; } .gotw-dot[aria-current="true"] { width: 1.3rem; background: var(--accent); } @media (prefers-reduced-motion: reduce) { .gotw-track { scroll-behavior: auto; } } /* Angebote-Box: Umschalter Karussell | Liste oben links (Pfeile und Punkte stehen rechts), Liste wie Steams Angebote */ .deals-switch { position: absolute; left: 1rem; top: 1rem; z-index: 3; background: rgb(16 14 12 / .55); border-color: rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .deals-switch .wall-view-btn { color: rgb(255 255 255 / .75); background: transparent; } .deals-switch .wall-view-btn[aria-pressed="true"] { color: #fff; background: var(--accent); } .deals-list { display: none; padding: 3.6rem 1rem 1rem; } /* Zwei Listen-Ansichten: 'list' = Angebote bei Steam, 'flash' = Flash-Deals von Gamesplanet (home.php data-deals-list) */ :is([data-deals][data-view="list"], [data-deals][data-view="flash"]) :is(.gotw-track, .gotw-nav) { display: none; } [data-deals][data-view="list"] .deals-list[data-deals-list="list"], [data-deals][data-view="flash"] .deals-list[data-deals-list="flash"] { display: grid; gap: .6rem; } :is([data-deals][data-view="list"], [data-deals][data-view="flash"]) .deals-switch { background: var(--surface-2); border-color: var(--border); } :is([data-deals][data-view="list"], [data-deals][data-view="flash"]) .deals-switch .wall-view-btn:not([aria-pressed="true"]) { color: var(--muted); } .deals-head { position: absolute; top: 1.45rem; left: 6.2rem; margin: 0; } /* Drei Knöpfe im Umschalter: Überschrift weiter rechts; am Handy die kurze Fassung, immer einzeilig */ .has-three-views .deals-head { left: 8.35rem; } .deals-head { white-space: nowrap; } .deals-head-short { display: none; } @media (max-width: 640px) { .deals-head-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .deals-head-short { display: inline; } } .deals-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .deal-row[hidden] { display: none; } .deal-link { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .45rem .6rem .45rem .45rem; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); transition: background .15s; } .deal-link:hover, .deal-link:focus-visible { text-decoration: none; background: color-mix(in srgb, var(--accent) 10%, transparent); } .deal-cover { width: 2.9rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; } .deal-body { display: grid; gap: .1rem; min-width: 0; } .deal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; } .deal-traits, .deal-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; color: var(--muted); } .deal-meta { display: flex; gap: .6rem; } .deal-rating { color: #2f9bff; font-weight: 700; } /* Flash-Deals von Gamesplanet oben in der Liste (home.php): eigenes Etikett, leicht hervorgehobene Zeile */ .deal-flash { color: var(--warn); font-weight: 700; } .deal-flash::before { content: "⚡"; margin-right: .2rem; } .deal-row.is-flash .deal-link { background: color-mix(in srgb, var(--warn) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 28%, transparent); } .deal-price { display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; font-weight: 800; white-space: nowrap; } .deal-cut { display: grid; place-items: center; padding: 0 .5rem; color: #1d2b05; background: #a4d007; font-size: .9rem; } .deal-amounts { display: grid; justify-items: end; align-content: center; padding: .25rem .55rem; background: color-mix(in srgb, var(--text) 10%, transparent); line-height: 1.15; } .deal-amounts s { font-size: .72rem; font-weight: 600; color: var(--muted); } .deal-amounts strong { font-size: .95rem; } .deals-more { justify-self: center; } @media (max-width: 640px) { .deals-list { padding: 3.4rem .7rem .8rem; } .deal-link { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .55rem; padding: .4rem .45rem .4rem .4rem; } .deal-cover { width: 2.5rem; } .deal-traits { display: none; } /* Titel zweizeilig statt „Assassin's C…“, Laufzeit weg, Preisblock schmaler */ .deal-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .88rem; line-height: 1.2; } .deal-meta > span:not(.deal-rating) { display: none; } .deal-cut { padding: 0 .35rem; font-size: .78rem; } .deal-amounts { padding: .2rem .4rem; } .deal-amounts strong { font-size: .85rem; } .deal-amounts s { font-size: .66rem; } .deals-head { left: 5.8rem; top: 1.35rem; } } .home-discover > .home-themes { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin: 0; padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; } .home-discover > .home-themes .eyebrow { margin: 0; } .home-discover > .home-themes .chips { margin: 0; gap: .4rem; } .home-discover > .home-themes .chip { font-size: .88rem; padding: .4rem .85rem; } .home-themes-all { margin-top: auto; font-weight: 700; } /* Spiele-Würfel: Kopf mit Würfel, Themen-Chips, darunter die Bühne für den Wurf */ .dice-head { display: flex; align-items: center; gap: .9rem; } .dice-head :is(h2, h3) { margin: .1rem 0 0; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.1; letter-spacing: -.03em; } .dice-head .eyebrow { margin: 0; } .dice-die { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .dice-die-icon { width: 2rem; height: 2rem; } .home-dice.is-rolling .dice-die-icon { animation: dice-spin .65s cubic-bezier(.3, .7, .4, 1); } @keyframes dice-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } /* Themen-Suche: Feld mit aufklappender Liste aller Themen, daneben der Würfel-Knopf */ .dice-pick { display: flex; gap: .5rem; align-items: stretch; } .dice-pick[hidden] { display: none; } .dice-combo { position: relative; flex: 1; min-width: 0; } .dice-combo input { width: 100%; height: 100%; min-height: 2.6rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: .92rem; } .dice-combo input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .dice-list { position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; right: 0; max-height: 16rem; overflow-y: auto; margin: 0; padding: .3rem; list-style: none; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .dice-list li { padding: .5rem .7rem; border-radius: 8px; cursor: pointer; font-size: .92rem; } .dice-list li[aria-selected="true"], .dice-list li:hover { background: var(--surface-2); color: var(--accent); } .dice-list .dice-list-empty { cursor: default; color: var(--muted); background: none; } .dice-go { display: inline-flex; align-items: center; gap: .45rem; flex: none; } .dice-icon { width: 1.1em; height: 1.1em; flex: none; } .dice-stage { display: grid; gap: .6rem; align-content: start; perspective: 900px; } .dice-hint { margin: 0; } .home-dice.is-rolling .dice-card { opacity: .35; transition: opacity .2s; } /* Ein Wurf: Cover links, Titel, Gründe und Knöpfe rechts; dreht sich beim Erscheinen um wie eine Karte */ .dice-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: .9rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); animation: dice-flip .5s cubic-bezier(.2, .8, .3, 1) both; } @keyframes dice-flip { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } } /* Cover mit der Icon-Leiste darunter (Herz, Merken, gespielt, ausblenden), so breit wie das Cover */ .dice-media { display: grid; gap: .55rem; align-content: start; } .dice-media .marks { justify-content: center; gap: .2rem; } .dice-media .mark { width: 1.75rem; height: 1.75rem; } .dice-media .mark svg { width: .9rem; height: .9rem; } .dice-card.is-hidden .dice-cover .cover { filter: grayscale(1) brightness(.55); } .dice-card.is-played .dice-cover .cover { filter: saturate(.35) brightness(.75); } .dice-cover { position: relative; display: block; border-radius: 8px; box-shadow: var(--shadow); } .dice-cover .cover { border-radius: 8px; } .dice-cover .stamp { position: absolute; top: -.55rem; right: -.5rem; font-size: .9rem; } .dice-cover .cf-rating, .dice-cover .cf-deck, .dice-cover .cf-price { bottom: .3rem; font-size: .66rem; padding: .15rem .3rem; } .dice-cover .cf-rating { left: .3rem; } .dice-cover .cf-rating-word, .dice-cover .cf-price { display: none; } .dice-cover .cf-deck { right: .3rem; } .dice-theme { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .dice-body h3 { margin: .2rem 0 .45rem; font: 800 1.15rem/1.15 var(--display); letter-spacing: -.02em; } .dice-body h3 a { color: var(--text); } .dice-body h3 a:hover { color: var(--accent); text-decoration: none; } .dice-why { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0 0 .75rem; padding: 0; list-style: none; } .dice-why li { font-size: .8rem; color: var(--muted); } .dice-why li::before { content: "✓"; margin-right: .3rem; color: var(--accent); font-weight: 800; } .dice-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; } .dice-actions .button { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .4rem .75rem; } /* Goldener Wurf: Goldrand und ein Lichtstreif wie beim Volltreffer */ .dice-card.is-gold { position: relative; overflow: hidden; border-color: #f5b13d; box-shadow: 0 0 0 1px #f5b13d, 0 10px 30px -12px rgba(245, 158, 11, .55); } .dice-card.is-gold::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 220, 140, .28) 50%, transparent 65%); transform: translateX(-100%); animation: dice-shine 1.1s .45s ease-out both; } @keyframes dice-shine { to { transform: translateX(100%); } } .dice-card.is-gold .dice-theme strong { color: #f5b13d; } @media (prefers-reduced-motion: reduce) { .dice-card, .dice-card.is-gold::after, .home-dice.is-rolling .dice-die-icon { animation: none; } } @media (max-width: 640px) { /* Cover neben Thema und Titel, Gründe und Knöpfe darunter über die volle Breite (sonst blieb links unter dem Cover eine leere Fläche und die Knöpfe stapelten sich in der schmalen Spalte) */ .dice-card { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem .9rem; padding: .8rem; } .dice-body { display: contents; } .dice-media { grid-row: 1 / span 2; } .dice-media .marks { gap: .1rem; } .dice-media .mark { width: 1.55rem; height: 1.55rem; } .dice-theme { align-self: end; } .dice-body h3 { align-self: start; margin: 0; } .dice-why, .dice-actions { grid-column: 1 / -1; } .dice-why { margin: .3rem 0 0; } .dice-actions .button { font-size: .8rem; padding: .4rem .7rem; } /* Suchfeld bekommt den Platz: der Knopf zeigt nur den Würfel (Name bleibt für Screenreader) */ .dice-go { padding-inline: .9rem; } .dice-go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dice-go .dice-icon { width: 1.35em; height: 1.35em; } .dice-combo input { font-size: .88rem; padding-inline: .8rem; } } /* Radar: sechs kleine Cover in einer Reihe, Datum und Titel knapp */ .home-radar { padding-top: 2.6rem; } .radar-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.7rem, 1.6vw, 1.3rem); } .radar-compact .radar-date { margin-top: .35rem; font-size: .74rem; } .radar-compact .radar-title { font-size: .98rem; line-height: 1.2; } .radar-compact .radar-cover .stamp { font-size: .95rem; top: -.55rem; right: -.4rem; } /* Community: drei Profile nebeneinander, kein Wischen mehr */ .home-community { border-top: 1px solid var(--border); padding-top: 2.6rem; } .cm-strip.cm-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; mask-image: none; padding: .3rem 0 1rem; } /* Startseite in Kapiteln (home.php .chapters): links eine durchgehende Linie mit einem Punkt je Kapitel, Kopf aus Kapitelname und Überleitung. Die Blöcke darin verlieren ihre eigenen Trennlinien und Abstände nach oben */ .chapters { position: relative; margin-top: 3.4rem; } .chapter { position: relative; padding: 0 0 3.6rem 2.8rem; } .chapter::before { content: ""; position: absolute; left: .6rem; top: 1.2rem; bottom: -.4rem; width: 2px; border-radius: 2px; background: linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 18%, transparent)); } .chapter:last-child { padding-bottom: 1rem; } .chapter:last-child::before { bottom: auto; height: 2.4rem; background: color-mix(in srgb, var(--accent) 30%, transparent); } .chapter-head { position: relative; margin-bottom: 1.6rem; } .chapter-head::before { content: ""; position: absolute; left: -2.55rem; top: .2rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .3rem var(--bg), 0 0 0 .45rem color-mix(in srgb, var(--accent) 30%, transparent); } .chapter-head .eyebrow { margin: 0; } .chapter-title { margin: .15rem 0 0; font: 800 clamp(1.6rem, 3.2vw, 2.5rem)/1.1 var(--display); letter-spacing: -.02em; color: var(--text); } .chapter > * + * { margin-top: 2.4rem; } .chapter > .chapter-head + * { margin-top: 0; } .chapter .home-discover, .chapter .home-radar, .chapter .home-community, .chapter .open-groups, .chapter .stats-band, .chapter .how.how-compact { margin-top: 0; border-top: 0; padding-top: 0; } .chapter > * + .home-community, .chapter > * + .stats-band, .chapter > * + [data-home-radar] { margin-top: 2.4rem; } .chapter .open-groups { margin-bottom: 0; } /* Unterüberschriften im Kapitel eine Stufe kleiner als der Kapitelkopf */ .chapter .live-head :is(h2, h3) { font-size: clamp(1.2rem, 2.2vw, 1.55rem); } .chapter .live-head { margin-bottom: 1rem; } /* Roter Faden: Leiste „Alles hier passend zu …“ (klebt beim Scrollen oben) und Stempel an Spiel des Tages und Radar */ .thread-bar { position: sticky; top: 4.6rem; z-index: 6; display: flex; align-items: center; gap: .6rem; width: fit-content; max-width: 100%; margin: 0 0 1.6rem; padding: .45rem .5rem .45rem .9rem; border-radius: 999px; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 10px 28px -16px rgb(0 0 0 / .45); animation: options-in .25s cubic-bezier(.2, .8, .2, 1); } .thread-bar[hidden] { display: none; } /* /themen: unter die mitlaufende Sprungleiste rücken, sonst lag die Faden-Leiste über Spielgefühl/Spielweise/Welten (Handy: Sprungleiste läuft dort nicht mit, Regel bei .theme-jump) */ @media (min-width: 641px) { body:has(.theme-jump) .thread-bar { top: calc(4.4rem + 3.6rem + .5rem); } } .thread-bar b { color: var(--accent); } .thread-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); flex: none; } .thread-clear { border: 0; border-radius: 999px; padding: .3rem .7rem; font: 600 .8rem var(--body); cursor: pointer; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); } .thread-clear:hover, .thread-clear:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 14%, transparent); } .gotw-cover { position: relative; } .gotw-cover .stamp { position: absolute; top: -.7rem; right: -.7rem; z-index: 2; font-size: 1.15rem; } .stamp.is-thread { animation: options-in .3s cubic-bezier(.2, .8, .2, 1); } .cm-person .match.is-thread { animation: options-in .3s cubic-bezier(.2, .8, .2, 1); } /* Werbekarte des Gruppen-Finders mit Cover-Fächer links */ /* Drei Spalten: Fächer, Text, Knopf (ein Raster statt Flex, sonst rutschte der lange Text in eine eigene Zeile) */ .open-groups-cta.has-fan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.6rem; padding: 1.4rem 1.8rem; } .open-groups-cta-text { display: grid; gap: .35rem; } /* Ganze Karte ist ein Link: beim Drüberfahren nicht alles unterstreichen (a:hover), stattdessen Rahmen und Knopf hervorheben */ .open-groups-cta:hover, .open-groups-cta:focus-visible, .open-group:hover, .open-group:focus-visible { text-decoration: none; } .open-groups-cta { transition: border-color .15s, transform .15s; } .open-groups-cta:hover, .open-groups-cta:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .open-groups-cta:hover .button.primary { filter: brightness(1.08); } .open-groups-cta.has-fan .open-groups-cta-text b { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; } .open-groups-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; } .open-groups-facts > span { padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .open-groups-fan { position: relative; display: block; flex: none; width: 10.5rem; height: 8rem; } .open-groups-fan-cover { position: absolute; bottom: .2rem; width: 5rem; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 9px; box-shadow: 0 14px 28px -14px rgb(0 0 0 / .8), 0 0 0 2px var(--surface); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .open-groups-fan-cover:nth-child(1) { left: 0; transform: rotate(-10deg); } .open-groups-fan-cover:nth-child(2) { left: 2.75rem; z-index: 2; bottom: .7rem; } .open-groups-fan-cover:nth-child(3) { left: 5.5rem; transform: rotate(10deg); } .open-groups-cta.has-fan:hover .open-groups-fan-cover:nth-child(1) { transform: rotate(-14deg) translateX(-.3rem); } .open-groups-cta.has-fan:hover .open-groups-fan-cover:nth-child(3) { transform: rotate(14deg) translateX(.3rem); } @media (max-width: 760px) { .open-groups-cta.has-fan { grid-template-columns: auto minmax(0, 1fr); padding: 1.1rem; gap: 1rem; } .open-groups-cta.has-fan > .button { grid-column: 1 / -1; justify-self: start; } .open-groups-fan { width: 7rem; height: 5.6rem; } .open-groups-fan-cover { width: 3.4rem; } .open-groups-fan-cover:nth-child(2) { left: 1.8rem; } .open-groups-fan-cover:nth-child(3) { left: 3.6rem; } } @media (max-width: 900px) { .home-discover { grid-template-columns: minmax(0, 1fr); } .radar-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.3rem; } } @media (max-width: 640px) { /* Handy: Linie schmaler und näher am Rand, damit die Inhalte Breite behalten */ .chapter { padding-left: 1.5rem; padding-bottom: 2.8rem; } .chapter::before { left: .3rem; } .chapter-head::before { left: -1.45rem; width: .75rem; height: .75rem; } .thread-bar { top: 4rem; font-size: .82rem; } } @media (max-width: 760px) { .how.how-compact { grid-template-columns: 1fr; gap: .9rem; padding-top: 1.6rem; } .cm-strip.cm-grid { grid-template-columns: minmax(0, 1fr); } .foryou-tabs button { padding: .5rem .85rem; } } @media (max-width: 640px) { /* Handy: oben Platz für den Hintergrund, Cover neben Titel, der Rest über die volle Breite */ .home-discover .gotw { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 5.5rem 1rem 1rem; } .gotw-backdrop { height: 55%; } /* Themen am Handy als wischbare Zeile statt einer langen Liste */ .home-discover > .home-themes { padding: 1rem; } .home-discover > .home-themes .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; mask-image: linear-gradient(90deg, #000 85%, transparent); } .home-discover > .home-themes .chip { flex: none; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .wall-row, .themes-wall-row { animation: none; } .theme-hero-fan img { animation: none; opacity: 1; } .tile, .kicker, .sentence .w, .stage .lead, .quickpick, .describe-toggle, .pick, .fav.new, .jump { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } .pick-cover { transition: none; } /* Entfernen und Nachrücken: nur kurz ein- und ausblenden, ohne Drehen und Lichtstreif */ .rs-tile.is-leaving, .pick.is-leaving, .radar-item.is-leaving { animation: none !important; opacity: 0; transition: opacity .2s; } .rs-tile.is-arriving, .pick.is-arriving, .radar-item.is-arriving { animation: none !important; opacity: 1; } .is-arriving :is(.rs-tile-cover, .pick-cover, .radar-cover)::after { display: none; } .is-arriving :is(.match, .stamp) { animation: none; } } /* Klappe: Am PC knickt beim Überfahren des Covers der linke Streifen nach hinten weg, darunter liegt ein dunkler Streifen mit den Markier-Knöpfen, die nacheinander einlaufen. Gilt für Kacheln, „Schon gekauft“, Treffer der Startseite, große Karten (Ergebnisse, Themenlisten) und den Würfel, jeweils nur mit Markier-Knöpfen. Die Klappe ist dasselbe Bild (helpers.php fold_flap, buildPick in app.js), per clip-path auf den Streifen zugeschnitten und am inneren Rand angeschlagen. Gesetzte Markierungen bleiben als Farbpunkte stehen. Handy/Touch: wie bisher („⋯“-Kapsel). Steht am Dateiende, damit es die Kapsel-Regeln weiter oben gleicher Gewichtung überschreibt. --fold-w Streifenbreite, --fold-m Knopfgröße, --fold-r Rundung des Covers */ .fold-flap { display: none; } @media (hover: hover) and (min-width: 641px) { .marks-rail .rs-tile { --fold-r: 10px; } .marks-rail .pick { --fold-w: 3rem; --fold-m: 2.2rem; } .marks-rail :where(.rs-tile:has(> .marks), .radar-item:has(> .marks), .pick:has(> .pick-head > .marks), .card:has(> .marks), .dice-card:has(> .dice-media > .marks), .gotw-slide:has(.gotw-media > .marks), .lib-grid:not(.is-list) .lib-card:has(.lib-cover > .marks)) :is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover) { position: relative; perspective: 650px; } /* Dunkler Streifen unter der Klappe, mit hellem Knick an der Kante */ .marks-rail :where(.rs-tile:has(> .marks), .radar-item:has(> .marks), .pick:has(> .pick-head > .marks), .card:has(> .marks), .dice-card:has(> .dice-media > .marks), .gotw-slide:has(.gotw-media > .marks), .lib-grid:not(.is-list) .lib-card:has(.lib-cover > .marks)) :is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover)::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fold-w, 2.55rem); border-radius: var(--fold-r, 8px) 0 0 var(--fold-r, 8px); background: linear-gradient(to right, rgb(10 9 8 / .92), rgb(22 19 17 / .86)); box-shadow: inset -1px 0 0 rgb(255 255 255 / .14); opacity: 0; transition: opacity .25s; z-index: 1; } /* Eigene Ebenen: Manche Cover-Bilder bilden selbst eine Ebene (z. B. mit transform), dann lag der Streifen darunter. Schilder auf dem Cover (Preis, Bewertung, Match, Datum) bleiben über Streifen und Klappe */ .marks-rail :is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover) > :is(.cf-price, .cf-rating, .cf-deck, .match, .stamp, .rl-date) { z-index: 2; } .marks-rail .fold-flap { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: var(--cover) center / cover no-repeat; clip-path: inset(0 calc(100% - var(--fold-w, 2.55rem)) 0 0 round var(--fold-r, 8px) 0 0 var(--fold-r, 8px)); transform-origin: var(--fold-w, 2.55rem) 50%; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .2, 1), filter .45s; } /* Auf: Maus über Cover oder Knöpfen (nicht über dem Text der großen Karten), oder ein Knopf hat den Tastaturfokus */ .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible) :is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover)::before { opacity: 1; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible) .fold-flap { transform: rotateY(-105deg); filter: brightness(.35); } /* Knöpfe im Streifen statt als Kapsel am rechten Rand */ .marks-rail :is(.rs-tile > .marks, .radar-item > .marks, .pick-head > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; padding: 0; gap: .2rem; z-index: 3; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; } .marks-rail .rs-tile > .marks, .marks-rail .card > .marks { justify-self: start; align-self: start; margin: .45rem 0 0 calc((var(--fold-w, 2.55rem) - var(--fold-m, 1.7rem)) / 2); } .marks-rail .radar-item > .marks { top: .45rem; right: auto; left: calc((var(--fold-w, 2.55rem) - var(--fold-m, 1.7rem)) / 2); transition: transform .2s; } .marks-rail .radar-item:hover > .marks { transform: translateY(-4px); } .marks-rail .pick-head > .marks { top: .5rem; right: auto; left: calc((var(--fold-w, 2.55rem) - var(--fold-m, 1.7rem)) / 2); } /* „In deiner Bibliothek“ bleibt oben links; um die Streifenbreite verschoben landete es auf großen Covern (breiter Streifen) auf dem Match-Abzeichen. Beim Aufklappen blendet es aus (siehe unten, wie Preis und Bewertung) */ .marks-rail .pick:has(> .pick-head > .marks) .badge.owned { transition: opacity .2s; } /* Große Karten: Das Cover-Feld wurde auf die Kartenhöhe gestreckt, Streifen und Klappe reichten dann unter das Bild */ .marks-rail .card > .card-cover { align-self: start; } /* Würfel: Knöpfe aufs Cover (gleiche Rasterzelle) statt als Leiste darunter, im Stil der Kapsel-Knöpfe */ .marks-rail .dice-media > .dice-cover { grid-area: 1 / 1; } .marks-rail .dice-media > .marks { grid-area: 1 / 1; justify-self: start; align-self: start; margin: .45rem 0 0 calc((var(--fold-w, 2.55rem) - var(--fold-m, 1.7rem)) / 2); } .marks-rail .dice-media > .marks .mark { --tint: #fff; width: var(--fold-m, 1.7rem); height: var(--fold-m, 1.7rem); border: 0; background: transparent; color: rgb(255 255 255 / .85); } .marks-rail .dice-media > .marks .mark svg { width: .95rem; height: .95rem; } .marks-rail .dice-media > .marks .mark-heart { --tint: #ff5a4e; } .marks-rail .dice-media > .marks .mark-wish { --tint: #f5b942; } .marks-rail .dice-media > .marks .mark-played { --tint: #4fd37b; } .marks-rail .dice-media > .marks .mark-hide { --tint: #e8e2d8; } .marks-rail .dice-media > .marks .mark:hover { color: var(--tint); background: rgb(255 255 255 / .09); } .marks-rail .dice-media > .marks .mark[aria-pressed="true"] { color: #15120f; background: var(--tint); } /* Ungesetzte Knöpfe erst, wenn die Klappe aufgeht; nacheinander von oben */ .marks-rail :is(.rs-tile > .marks, .radar-item > .marks, .pick-head > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) .mark:not([aria-pressed="true"]) { opacity: 0; transform: translateX(-.4rem); pointer-events: none; max-height: 0; transition: opacity .2s, transform .25s, max-height .3s cubic-bezier(.3, .7, .2, 1), color .2s, background .2s; } /* max-height 0: Zugeklappt nehmen die unsichtbaren Knöpfe keinen Platz ein, die gesetzten stehen eng untereinander (sonst schwebten z. B. Herz und Haken mit einer Lücke); beim Aufklappen fährt die Leiste auseinander */ .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible) :is(.rs-tile > .marks, .radar-item > .marks, .pick-head > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) .mark { opacity: 1; transform: none; pointer-events: auto; max-height: 3rem; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible) :is(.rs-tile > .marks, .radar-item > .marks, .pick-head > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) .mark:hover { transform: scale(1.08); transition-delay: 0s; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover) .marks > :nth-child(1) { transition-delay: .12s; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover) .marks > :nth-child(2) { transition-delay: .16s; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover) .marks > :nth-child(3) { transition-delay: .2s; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover) .marks > :nth-child(4) { transition-delay: .24s; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover) .marks > :nth-child(5) { transition-delay: .28s; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover) .marks > :nth-child(6) { transition-delay: .32s; } /* Gesetzte Markierungen ohne Überfahren: Farbpunkte mit Schatten, damit sie auf hellen Covern lesbar sind */ .marks-rail :is(.rs-tile > .marks, .radar-item > .marks, .pick-head > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) .mark[aria-pressed="true"] { box-shadow: 0 2px 8px rgb(0 0 0 / .45); } } @media (hover: hover) and (min-width: 641px) and (prefers-reduced-motion: reduce) { .marks-rail .fold-flap { transition: none; } .marks-rail :is(.rs-tile, .radar-item, .pick, .card, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible) .fold-flap { transform: none; opacity: 0; } .marks-rail .marks .mark { transition-delay: 0s !important; } } /* Große Cover („Für dich“-Karten, bester Treffer): Der Streifen wird beim Aufklappen breit, die Knöpfe zeigen Symbol und Kurztext (data-short aus partials/mark-buttons.php bzw. markButtons in app.js). Unten im Streifen der „Für dich“-Karten: Trailer und „Ähnliche Spiele“ (partials/fold-actions.php, foldActions in app.js). Zu: gesetzte Markierungen bleiben als runde Farbpunkte stehen, ohne Text */ /* Breit: „Für dich“-Karten (.pick), „Schon gekauft“ (.home-tonight .radar-item) und bester Treffer (.card-top). Schmal (übrige Cover): unten im Streifen nur ein rundes Trailer-Symbol (fold-actions.is-compact), falls es einen gibt */ .fold-actions { display: none; } @media (hover: hover) and (min-width: 641px) { .marks-rail :is(.pick, .card-top, .home-tonight .radar-item) { --fold-w: 10.5rem; --fold-m: 2.1rem; } .marks-rail :is(.pick-head, .home-tonight .radar-item) > .marks { left: .45rem; } .marks-rail .card-top > .marks { margin-left: .45rem; } .marks-rail :is(.pick-head, .card-top, .home-tonight .radar-item) > .marks .mark { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; width: var(--fold-m); height: var(--fold-m); padding: 0 calc((var(--fold-m) - 1rem) / 2); overflow: hidden; border-radius: 999px; transition: opacity .2s, transform .25s, width .3s cubic-bezier(.3, .7, .2, 1), max-height .3s cubic-bezier(.3, .7, .2, 1), border-radius .3s, color .2s, background .2s; } .marks-rail :is(.pick-head, .card-top, .home-tonight .radar-item) > .marks .mark svg { flex: none; width: 1rem; height: 1rem; } /* „⋯“ gibt es nur am Handy (die display:flex-Regel oben hätte es sonst wieder eingeblendet) */ .marks-rail :is(.pick-head, .card-top, .home-tonight .radar-item) > .marks .marks-more { display: none; } .marks-rail :is(.pick-head, .card-top, .home-tonight .radar-item) > .marks .mark::after { content: attr(data-short); font-size: .82rem; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .2s; } /* Auf: breite Knöpfe mit Text */ .marks-rail :is(.pick, .card-top, .home-tonight .radar-item):has(:is(.pick-cover, .card-cover, .radar-cover, .marks, .fold-actions):hover, .marks :focus-visible, .fold-actions :focus-visible) :is(.pick-head > .marks, .marks) .mark { width: calc(var(--fold-w) - .9rem); border-radius: 9px; } .marks-rail :is(.pick, .card-top, .home-tonight .radar-item):has(:is(.pick-cover, .card-cover, .radar-cover, .marks, .fold-actions):hover, .marks :focus-visible, .fold-actions :focus-visible) :is(.pick-head > .marks, .marks) .mark::after { opacity: 1; transition-delay: .15s; } .marks-rail :is(.pick-head, .card-top, .home-tonight .radar-item) > .marks .mark:hover { transform: none; } /* Preis und Bewertung liegen unten links unter dem Streifen: beim Aufklappen ausblenden */ .marks-rail :is(.rs-tile-cover, .radar-cover, .pick-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover) :is(.cf-price, .cf-rating, .rl-date) { transition: opacity .2s; } /* Neuerscheinungen: Das Datum unten links lag über dem Trailer-Symbol */ .marks-rail .rl-tile:has(:is(.rs-tile-cover, .marks, .fold-actions):hover, .marks :focus-visible, .fold-actions :focus-visible) .rl-date { opacity: 0; } .marks-rail :is(.rs-tile, .radar-item, .pick, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible, .fold-actions :focus-visible) :is(.rs-tile-cover, .radar-cover, .pick-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover) :is(.cf-price, .cf-rating) { opacity: 0; } .marks-rail .pick:has(:is(.pick-cover, .marks, .fold-actions):hover) .pick-cover .cf-deck { opacity: 0; } .marks-rail .pick:has(:is(.pick-cover, .marks, .fold-actions):hover, .marks :focus-visible, .fold-actions :focus-visible) .badge.owned { opacity: 0; } /* Aktionen unten im Streifen: Fläche so groß wie das Cover (3:4, das Cover steht oben links und füllt die Breite), Knöpfe unten links, nur sie fangen Klicks */ .marks-rail .dice-media { position: relative; } .marks-rail :is(.rs-tile, .radar-item, .pick, .dice-media, .gotw-media) > .fold-actions { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .35rem; width: 100%; aspect-ratio: 3 / 4; padding: 0 0 .6rem .45rem; pointer-events: none; opacity: 0; transform: translateX(-.4rem); transition: opacity .2s, transform .25s; } .marks-rail :is(.rs-tile, .radar-item, .pick, .dice-card, .gotw-slide, .lib-card):has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible, .fold-actions :focus-visible) .fold-actions { opacity: 1; transform: none; transition-delay: .2s; } .fold-action { pointer-events: auto; display: flex; align-items: center; gap: .55rem; width: calc(var(--fold-w, 9.5rem) - .9rem); padding: .5rem .6rem; border: 1px solid rgb(255 255 255 / .14); border-radius: 9px; background: rgb(255 255 255 / .08); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s; } .fold-action:hover, .fold-action:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; } .fold-action svg { flex: none; width: 1rem; height: 1rem; } /* Schmal: nur ein rundes Symbol, mittig im Streifen */ .fold-actions.is-compact { padding: 0 0 .5rem calc((var(--fold-w, 2.55rem) - var(--fold-m, 1.7rem)) / 2); } .fold-actions.is-compact .fold-action { justify-content: center; width: var(--fold-m, 1.7rem); height: var(--fold-m, 1.7rem); padding: 0; border-radius: 50%; } .fold-actions.is-compact .fold-action svg { width: .85rem; height: .85rem; } .fold-actions.is-compact .fold-action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Blockbuster-Band (Radar): die Karte ist viel breiter als ihr Cover. Mit width 100% wurde die Fläche 590 × 787 px groß und der Trailer-Knopf lag unterhalb der Karte. Auf die Cover-Spalte begrenzen, unten Platz für das Abzeichen lassen */ .marks-rail .big-card > .fold-actions { width: 9.5rem; padding-bottom: 2.4rem; } /* Zu und nicht überfahren: Aktionen nicht anklickbar */ .marks-rail :is(.rs-tile, .radar-item, .pick, .dice-card, .gotw-slide):not(:has(:is(.rs-tile-cover, .radar-cover, .pick-cover, .dice-cover, .gotw-cover, .lib-cover, .marks, .fold-actions):hover, .marks :focus-visible, .fold-actions :focus-visible)) .fold-action { pointer-events: none; } } /* Bibliothek und Meine Spiele (Rasteransicht): Streifen wie überall links, deshalb sitzen Auswahl-Haken und Lieblingsspiel-Marke oben rechts und der ↗-Link unten rechts */ .lib-grid:not(.is-list) :is(.lib-check, .lib-fav) { left: auto; right: .45rem; z-index: 2; } .lib-grid:not(.is-list) .lib-link { top: auto; bottom: .45rem; z-index: 2; } @media (hover: hover) and (min-width: 641px) { .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks { top: .45rem; bottom: auto; right: auto; left: calc((var(--fold-w, 2.55rem) - var(--fold-m, 1.7rem)) / 2); } } /* Handy und Touch: Es gibt kein Überfahren, deshalb öffnet der „⋯“-Knopf (oben links im Streifen, app.js .is-open) denselben Streifen wie am PC: Klappe knickt weg, die Knöpfe stehen darin untereinander. Zu: nur „⋯“ und gesetzte Markierungen. Die „Für dich“-Karten (Cover klein neben dem Text) und kleine Listen-Cover behalten ihre Leiste */ @media (hover: none), (max-width: 640px) { /* Alle großen Karten (nicht nur der beste Treffer): sonst blieb dort am Handy die Kapsel am rechten Rand */ .marks-rail :is(.rs-tile, .radar-item, .card, .dice-card, .gotw-slide, .lib-card) { --fold-w: 2.6rem; --fold-m: 2rem; } .marks-rail .rs-tile { --fold-r: 10px; } .marks-rail :is(.rs-tile-cover, .radar-cover, .card > .card-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover) { position: relative; perspective: 650px; } .marks-rail :is(.rs-tile-cover, .radar-cover, .card > .card-cover, .dice-cover, .gotw-cover, .lib-grid:not(.is-list) .lib-cover)::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: var(--fold-w, 2.6rem); border-radius: var(--fold-r, 8px) 0 0 var(--fold-r, 8px); background: linear-gradient(to right, rgb(10 9 8 / .92), rgb(22 19 17 / .86)); box-shadow: inset -1px 0 0 rgb(255 255 255 / .14); opacity: 0; transition: opacity .25s; pointer-events: none; } .marks-rail .fold-flap { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--cover) center / cover no-repeat; clip-path: inset(0 calc(100% - var(--fold-w, 2.6rem)) 0 0 round var(--fold-r, 8px) 0 0 var(--fold-r, 8px)); transform-origin: var(--fold-w, 2.6rem) 50%; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .2, 1), filter .45s; } /* Auf (.is-open am Knopf-Container) */ .marks-rail :is(.rs-tile, .radar-item, .card, .dice-card, .gotw-slide, .lib-card):has(.marks.is-open) :is(.rs-tile-cover, .radar-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover)::before { opacity: 1; } .marks-rail :is(.rs-tile, .radar-item, .card, .dice-card, .gotw-slide, .lib-card):has(.marks.is-open) .fold-flap { transform: rotateY(-105deg); filter: brightness(.35); } .marks-rail :is(.rs-tile, .radar-item, .card, .dice-card, .gotw-slide, .lib-card):has(.marks.is-open) :is(.cf-price, .cf-rating, .rl-date) { opacity: 0; } /* Schilder über Streifen und Klappe (wie am PC): Sonst lag der Bildstreifen der Klappe über ihrem linken Teil, vom Datum „29.10.“ blieb nur „0.“ sichtbar */ .marks-rail :is(.rs-tile-cover, .radar-cover, .card-cover, .dice-cover, .gotw-cover, .lib-cover) > :is(.cf-price, .cf-rating, .cf-deck, .match, .stamp, .rl-date, .big-badge) { z-index: 2; } /* Knöpfe im Streifen: untereinander, ohne Kapsel */ .marks-rail :is(.rs-tile > .marks, .radar-item > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: .15rem; padding: 0; z-index: 3; opacity: 1; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .marks-rail :is(.rs-tile > .marks, .radar-item > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) .mark { width: var(--fold-m, 2rem); height: var(--fold-m, 2rem); } .marks-rail :is(.rs-tile > .marks, .radar-item > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) .marks-more { display: grid; order: -1; color: #fff; background: rgb(16 14 12 / .72); box-shadow: 0 2px 8px rgb(0 0 0 / .4); } .marks-rail :is(.rs-tile > .marks, .radar-item > .marks, .card > .marks, .dice-media > .marks, .gotw-media > .marks, .lib-grid:not(.is-list) .lib-cover > .marks) .mark[aria-pressed="true"] { box-shadow: 0 2px 8px rgb(0 0 0 / .45); } /* Lage: oben links im Streifen */ .marks-rail .rs-tile > .marks, .marks-rail .card > .marks { justify-self: start; align-self: start; margin: .4rem 0 0 calc((var(--fold-w) - var(--fold-m)) / 2); } /* Normale Karten haben ein kleineres Cover: zu bleiben nur „⋯“ und gesetzte Markierungen, der Rest kommt mit der Klappe */ .marks-rail .card:not(.card-top) > .marks:not(.is-open) .mark:not([aria-pressed="true"]):not(.marks-more) { display: none; } .marks-rail :is(.radar-item, .gotw-media) > .marks, .marks-rail .lib-grid:not(.is-list) .lib-cover > .marks { top: .4rem; bottom: auto; right: auto; left: calc((var(--fold-w) - var(--fold-m)) / 2); } .marks-rail .dice-media { position: relative; } .marks-rail .dice-media > .dice-cover, .marks-rail .dice-media > .marks { grid-area: 1 / 1; } .marks-rail .dice-media > .marks { justify-self: start; align-self: start; margin: .4rem 0 0 calc((var(--fold-w) - var(--fold-m)) / 2); } .marks-rail .dice-media > .marks .mark { border: 0; background: transparent; color: rgb(255 255 255 / .85); } .marks-rail .dice-media > .marks .mark-heart { --tint: #ff5a4e; } .marks-rail .dice-media > .marks .mark-wish { --tint: #f5b942; } .marks-rail .dice-media > .marks .mark-played { --tint: #4fd37b; } .marks-rail .dice-media > .marks .mark-hide { --tint: #e8e2d8; } .marks-rail .dice-media > .marks .mark[aria-pressed="true"] { color: #15120f; background: var(--tint); } .marks-rail .dice-media > .marks .marks-more { background: rgb(16 14 12 / .72); color: #fff; } .marks-rail .dice-media > .marks:not(.is-open) .mark:not([aria-pressed="true"]):not(.marks-more) { display: none; } /* Bester Treffer: Cover etwas größer, sonst ragte der letzte Knopf des Streifens unter das Bild */ .marks-rail .card.card-top { grid-template-columns: 8.5rem minmax(0, 1fr); } } /* Große Treffer der Startseite auf Tablets mit Touch (kein Überfahren, breiter als 640 px): Klappe über „⋯“ statt der Kapsel am rechten Rand (am Handy steht „⋯“ unten in der Karte, am PC klappt sie beim Überfahren) */ @media (hover: none) and (min-width: 641px) { .marks-rail .pick { --fold-w: 3rem; --fold-m: 2.2rem; } .marks-rail .pick-cover { position: relative; perspective: 650px; } .marks-rail .pick-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: var(--fold-w); border-radius: var(--fold-r, 8px) 0 0 var(--fold-r, 8px); background: linear-gradient(to right, rgb(10 9 8 / .92), rgb(22 19 17 / .86)); box-shadow: inset -1px 0 0 rgb(255 255 255 / .14); opacity: 0; transition: opacity .25s; pointer-events: none; } .marks-rail .pick:has(.pick-head > .marks.is-open) .pick-cover::before { opacity: 1; } .marks-rail .pick:has(.pick-head > .marks.is-open) .fold-flap { transform: rotateY(-105deg); filter: brightness(.35); } .marks-rail .pick-head > .marks { top: .5rem; right: auto; left: calc((var(--fold-w) - var(--fold-m)) / 2); flex-direction: column; gap: .15rem; padding: 0; z-index: 3; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .marks-rail .pick-head > .marks .mark, .marks-rail .pick-head > .marks .mark[aria-pressed="true"] { width: var(--fold-m); height: var(--fold-m); } .marks-rail .pick-head > .marks .marks-more { display: grid; order: -1; color: #fff; background: rgb(16 14 12 / .72); box-shadow: 0 2px 8px rgb(0 0 0 / .4); } .marks-rail .pick-head > .marks:not(.is-open) .mark:not([aria-pressed="true"]):not(.marks-more) { display: none; } } /* Kopf von „Spiele wie …“ am Handy: derselbe Streifen über „⋯“ */ @media (hover: none), (max-width: 760px) { .sx-cover { --fold-w: 2.6rem; --fold-m: 2rem; --fold-r: 14px; perspective: 650px; } .sx-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: var(--fold-w); border-radius: 14px 0 0 14px; pointer-events: none; background: linear-gradient(to right, rgb(10 9 8 / .92), rgb(22 19 17 / .86)); box-shadow: inset -1px 0 0 rgb(255 255 255 / .14); opacity: 0; transition: opacity .25s; } .sx-cover > .fold-flap { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--cover) center / cover no-repeat; clip-path: inset(0 calc(100% - var(--fold-w)) 0 0 round 14px 0 0 14px); transform-origin: var(--fold-w) 50%; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3, .7, .2, 1), filter .45s; } .sx-cover:has(> .marks.is-open)::before { opacity: 1; } .sx-cover:has(> .marks.is-open) > .fold-flap { transform: rotateY(-105deg); filter: brightness(.35); } .sx-cover > .marks { top: .45rem; right: auto; left: calc((var(--fold-w) - var(--fold-m)) / 2); padding: 0; gap: .15rem; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .sx-cover > .marks .mark { width: var(--fold-m); height: var(--fold-m); } .sx-cover > .marks .marks-more { display: grid; order: -1; color: #fff; background: rgb(16 14 12 / .72); box-shadow: 0 2px 8px rgb(0 0 0 / .4); } .sx-cover > .marks:not(.is-open) .mark:not([aria-pressed="true"]):not(.marks-more) { display: none; } } /* Zuschauerwahl für Streamer (/stream, stream.php): Kopf, drei Schritte, Steuerpult mit Live-Stand, fünf Plätzen, Bibliothek, Overlay-Adresse und Verlauf. Das OBS-Overlay selbst hat eigenes CSS (overlay.css) */ .stream-icon { vertical-align: -.2em; } /* Twitch-Zeichen in Twitch-Lila, auf gefüllten Knöpfen in Schriftfarbe (weiß) */ .twitch-icon { flex: none; vertical-align: -.2em; fill: #9146ff; } .button.primary .twitch-icon { fill: currentColor; } /* In Reihen mit Steam und Discord (Profilzeile, Überblick der Einstellungen) einheitlich in Textfarbe statt Lila (Wunsch 11.11.) */ .pf-link .twitch-icon, .st-check .twitch-icon { fill: currentColor; } .stream-hero { padding: 2.2rem 0 1.4rem; max-width: 52rem; } .stream-hero h1 { margin: 0; font: 800 clamp(2rem, 4.4vw, 3.4rem)/1.05 var(--display); letter-spacing: -.02em; } .stream-hero .eyebrow { display: inline-flex; align-items: center; gap: .45rem; } .stream-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .6rem; } .stream-cta .button { display: inline-flex; align-items: center; gap: .5rem; } .stream-connected { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; } .stream-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); } .stream-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .stream-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 .8rem; padding: 0; } .stream-steps li { counter-increment: step; display: grid; gap: .35rem; padding: 1.2rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); } .stream-steps li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 1rem var(--display); } .stream-steps strong { font: 700 1.1rem var(--display); } .stream-steps span { color: var(--muted); } .stream-note { margin-bottom: 3rem; } /* Stufe 3: animierte Vorschau auf der Erklärseite (partials/stream-demo.php). Stream-Bild 16:9 mit Overlay unten, daneben der Chat; Farben wie das echte Overlay (overlay.css). Schmal: Bild ohne festes Format, Spiele 2 × 2 */ .stream-demo { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; grid-template-areas: "screen chat" "caption caption"; gap: .8rem 1rem; margin: .4rem 0 1.6rem; } .demo-screen { grid-area: screen; position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 9; padding: 3%; border-radius: 18px; overflow: hidden; container-type: inline-size; box-shadow: 0 24px 60px rgb(0 0 0 / .35); background: radial-gradient(60% 70% at 70% 30%, rgb(255 138 61 / .35), transparent 70%), radial-gradient(50% 60% at 20% 70%, rgb(145 70 255 / .35), transparent 70%), linear-gradient(180deg, #2b2140 0%, #1a1424 55%, #0f0c14 100%); } .demo-scene { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 8%) bottom / 100% 45% no-repeat; } .demo-live { position: absolute; top: 4%; left: 3%; padding: .15rem .55rem; border-radius: 6px; background: #d7262e; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .demo-viewers { position: absolute; top: 4%; left: calc(3% + 3.6rem); padding: .15rem .55rem; border-radius: 6px; background: rgb(0 0 0 / .45); color: #fff; font-size: .72rem; font-weight: 700; } .demo-ov { position: relative; padding: .7rem .8rem; border-radius: 14px; background: rgb(14 12 10 / .82); color: #fff; box-shadow: 0 14px 40px rgb(0 0 0 / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .demo-ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; } .demo-ov-title { margin: 0; font: 800 clamp(.95rem, 2.6cqw, 1.35rem)/1.1 var(--display); } .demo-ov-meta { margin: 0; font-size: .78rem; font-weight: 600; color: rgb(255 255 255 / .72); white-space: nowrap; font-variant-numeric: tabular-nums; } .demo-choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; } .demo-choice { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .4rem; border-radius: 10px; background: rgb(255 255 255 / .07); transition: opacity .4s, transform .4s, box-shadow .4s, background .4s; } .demo-choice img { width: 2.4rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; } .demo-choice-text { display: grid; gap: .25rem; min-width: 0; } .demo-name { font-size: .8rem; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .demo-bar { height: .4rem; border-radius: 999px; background: rgb(255 255 255 / .15); overflow: hidden; } .demo-bar > span { display: block; height: 100%; border-radius: inherit; background: #ff5a3c; transition: width .35s cubic-bezier(.2, .8, .2, 1); } .demo-num { font-size: .75rem; font-variant-numeric: tabular-nums; } .demo-ov.is-ended .demo-choice:not(.is-winner) { opacity: .45; } .demo-choice.is-winner { background: rgb(242 193 78 / .16); box-shadow: inset 0 0 0 2px #f2c14e, 0 8px 24px rgb(242 193 78 / .3); transform: translateY(-4px); } .demo-choice.is-winner .demo-bar > span { background: #f2c14e; } .demo-badge { position: absolute; top: -.8rem; right: .4rem; padding: .05rem .5rem; border-radius: 999px; background: #f2c14e; color: #1a1408; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; animation: slot-in .45s cubic-bezier(.2, .8, .2, 1.2); } .demo-brand { margin: .5rem 0 0; text-align: right; font-size: .75rem; font-weight: 600; color: rgb(255 255 255 / .72); } .demo-brand strong { padding: .05rem .4rem; border-radius: 5px; background: #ff5a3c; color: #fff; } .demo-chat { grid-area: chat; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding: .8rem; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; } .demo-chat-head { margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .demo-chat-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; font-size: .84rem; line-height: 1.35; overflow: hidden; } .demo-chat-log li { animation: chat-in .35s ease-out; overflow-wrap: anywhere; } .demo-chat-log li.is-own { padding: .45rem .55rem; border-radius: 10px; background: color-mix(in srgb, #ff5a3c 12%, var(--bg)); box-shadow: inset 3px 0 0 #ff5a3c; } @keyframes chat-in { from { opacity: 0; transform: translateY(8px); } } .demo-caption { grid-area: caption; margin: 0; color: var(--muted); font-size: .92rem; max-width: 48rem; } @media (max-width: 900px) { .stream-demo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "screen" "chat" "caption"; } /* Chat unter dem Bild: feste Höhe (neue Zeilen unten, alte verschwinden oben), damit die Seite nicht springt */ .demo-chat { grid-template-rows: auto auto; } .demo-chat-log { height: 8.5rem; } } @container (max-width: 520px) { .demo-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .demo-screen { aspect-ratio: auto; padding: 3.2rem .6rem .6rem; } .demo-ov { padding: .6rem; } .demo-ov-head { flex-direction: column; gap: .15rem; } } @media (prefers-reduced-motion: reduce) { .demo-bar > span, .demo-choice, .demo-chat-log li, .demo-badge { transition: none; animation: none; } } /* Kanalseite: Live-Schild über der Überschrift (app.js data-channel-live zählt herunter) */ .channel-onair { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; padding: .35rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .channel-onair[hidden] { display: none; } .channel-onair.is-live { background: #d7262e; color: #fff; } .channel-onair.is-live .onair-dot { animation: onair-pulse 1.2s ease-in-out infinite; } .channel-onair.is-next { background: #f2c14e; color: #1a1408; } .stream-hero .stream-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .stream-panel { margin: 1.4rem 0; padding: clamp(1rem, 2vw, 1.6rem); border-radius: 18px; border: 1px solid var(--border); background: var(--surface); } .stream-panel > h2, .stream-form-head h2 { margin: 0 0 .9rem; font: 800 1.35rem var(--display); } .stream-panel form.inline { margin-top: .8rem; } /* Live-Stand: Kopf mit Frage, Restzeit, Stimmen; je Spiel Cover, Kurztitel, Balken, Anteil */ .stream-live-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 0 0 .9rem; } .stream-live-head strong { font-size: 1.1rem; } .stream-live-time { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; } .stream-live-time.is-active { color: var(--accent); } .stream-live-total { color: var(--muted); } .stream-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .stream-bars li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .45rem .6rem; border-radius: 12px; } .stream-bars li.is-winner { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px var(--accent); } .stream-bars img { width: 2.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; } .stream-bar-text { display: grid; gap: .3rem; min-width: 0; } .stream-bar-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stream-bar-text .stream-badge { justify-self: start; } .stream-bar { height: .55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .stream-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s ease; } .stream-bar-num { display: grid; justify-items: end; font-weight: 800; font-variant-numeric: tabular-nums; } .stream-bar-num small { color: var(--muted); font-weight: 600; } /* Auswahl: Frage und Dauer, fünf Plätze, Knöpfe, Bibliothek als Raster zum Antippen */ .stream-form-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; } .stream-count { color: var(--muted); font-weight: 700; } .stream-count.is-full { animation: stream-shake .4s; color: var(--bad); } @keyframes stream-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .stream-dirty { color: var(--warn); font-weight: 700; font-size: .85rem; } .stream-settings { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .8rem 1rem; margin: 0 0 1rem; } .stream-settings .field > span { font-size: .85rem; color: var(--muted); font-weight: 600; } /* Zuletzt verwendet: Kopf mit „Letzte Umfrage übernehmen“, Listen ohne eigene Bildlaufleiste */ .stream-recent-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; } .stream-recent-head .stream-lib-head { margin-bottom: .3rem; } .stream-lib.stream-lib-recent { max-height: none; overflow: visible; } /* Overlay-Vorschau (Regiepult, data-overlay-screen): Mini-Bildschirm 16:9, jede mögliche Stelle ist ein Klickfeld. Die gewählte ist gefüllt und zeigt drei Zeilen wie das echte Overlay; die anderen sind gestrichelt */ .ov-screen-hint { margin: .2rem 0 .5rem; font-size: .88rem; color: var(--muted); } .ov-screen-hint strong { color: var(--text); } .ov-screen { position: relative; aspect-ratio: 16 / 9; margin: 0 0 .6rem; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #4b3b30 0%, #241c17 55%, #120e0b 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .ov-screen-game { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .22); font: 800 clamp(.8rem, 2.4vw, 1.1rem) var(--display); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; } .ov-zone { position: absolute; display: grid; align-content: center; padding: 3%; border-radius: 6px; border: 2px dashed rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; } .ov-zone:hover, .ov-zone:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); outline: none; } .ov-zone.is-active { border: 0; background: rgba(14, 12, 10, .82); box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(0, 0, 0, .45); } .ov-zone.is-saved { animation: ov-zone-pop .45s cubic-bezier(.2, .8, .2, 1.3); } @keyframes ov-zone-pop { 40% { transform: scale(1.06); } } .ov-zone-rows { display: none; gap: 12%; height: 100%; } .ov-zone.is-active .ov-zone-rows { display: grid; } .ov-zone-rows i { display: block; min-height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .22); } .ov-zone-rows i:first-child { background: linear-gradient(90deg, var(--accent) 62%, rgba(255, 255, 255, .22) 62%); } .ov-zone-oben .ov-zone-rows, .ov-zone-unten .ov-zone-rows { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5%; } .ov-zone-unten { left: 22%; right: 22%; bottom: 6%; height: 20%; } .ov-zone-oben { left: 22%; right: 22%; top: 6%; height: 20%; } .ov-zone-links { left: 3%; top: 12%; width: 16%; height: 52%; } .ov-zone-rechts { right: 3%; top: 12%; width: 16%; height: 52%; } .ov-zone-kompakt { right: 3%; bottom: 6%; width: 16%; height: 22%; } /* Umschalter Umfrage/Turnier oben im Auswahl-Formular */ .stream-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.2rem; } .stream-mode { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .stream-mode small { color: var(--muted); font-size: .8rem; } .stream-mode:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .stream-mode.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); } /* Turnier im Live-Bereich: Kopf, Sieger, „Nächstes Duell“, Baum (je Runde eine Spalte, am Handy wischbar) */ .stream-tournament { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); } .stream-tournament-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; } .stream-tournament-head h3 { margin: 0; font: 700 1.1rem var(--display); } .stream-tournament-head form.inline { margin: 0; } .stream-champion { margin: .8rem 0; font: 800 1.3rem var(--display); color: var(--accent); } .stream-next { margin: .8rem 0; } .stream-next .button { display: inline-flex; align-items: center; gap: .45rem; } .stream-bracket { display: grid; grid-template-columns: repeat(var(--rounds), minmax(11.5rem, 1fr)); gap: .9rem; margin-top: 1rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; } .sb-round { display: grid; grid-template-rows: auto 1fr; gap: .5rem; min-width: 0; } .sb-round-name { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sb-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-around; gap: .5rem; } .sb-match { position: relative; display: grid; gap: .2rem; padding: .35rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); } .sb-match.is-live { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } .sb-match.is-next { border-style: dashed; border-color: var(--accent); } .sb-match.is-tie { border-color: var(--warn); } .sb-flag { position: absolute; top: -.55rem; right: .5rem; padding: 0 .4rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .sb-match.is-tie .sb-flag { background: var(--warn); color: #1a1408; } .sb-game { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: .45rem; padding: .15rem .25rem; border-radius: 6px; font-size: .82rem; font-weight: 600; min-width: 0; } .sb-game > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-game img, .sb-ph { width: 1.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: var(--surface-2); } .sb-game.is-open { display: block; color: var(--muted); font-weight: 500; font-style: italic; padding: .35rem .3rem; } .sb-game.is-winner { background: color-mix(in srgb, var(--accent) 14%, transparent); } .sb-game.is-out { opacity: .45; } .sb-decide { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .78rem; } .sb-decide .button { padding: .2rem .6rem; font-size: .76rem; } @media (max-width: 640px) { .stream-modes { grid-template-columns: minmax(0, 1fr); } } .stream-chat { display: grid; gap: .4rem; margin: 0 0 1.2rem; } .stream-chat .checkbox { display: flex; align-items: center; gap: .6rem; } .stream-chat .hint, .stream-chat .alert { margin: .2rem 0 0; } /* Öffentliche Kanalseite (stream-channel.php): Kandidaten als Karten mit Balken, frühere Gewinner, Einladung */ .stream-cands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .7rem; } .stream-cands a { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .8rem; align-items: center; height: 100%; padding: .6rem; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .stream-cands a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .stream-cands .is-winner a { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); } .stream-cands img { width: 4rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; } .stream-cand-text { display: grid; gap: .35rem; min-width: 0; } .stream-cand-text .stream-badge { justify-self: start; } .stream-cand-text small { color: var(--muted); font-size: .8rem; } .stream-winners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .5rem; } .stream-winners a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .7rem; align-items: center; padding: .4rem .55rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .stream-winners a:hover { text-decoration: none; border-color: var(--accent); } .stream-winners img { width: 2.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; } .stream-winners span { display: grid; min-width: 0; } .stream-winners strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; } .stream-winners small { color: var(--muted); font-size: .76rem; } /* Geschmacks-Match auf der Kanalseite: Ring mit Prozent (conic-gradient über --p), daneben Text und gemeinsame Merkmale */ .stream-match { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); } .stream-match-ring { --p: 0; display: grid; place-items: center; width: 7.5rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--surface) 76%, transparent 77%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0); } .stream-match-ring span { font: 800 1.7rem var(--display); } .stream-match-ring.is-unknown { background: radial-gradient(closest-side, var(--surface) 76%, transparent 77%), conic-gradient(var(--surface-2) 0 100%); } .stream-match-ring.is-unknown span { color: var(--muted); } .stream-match-text h2 { margin: 0 0 .3rem; } .stream-match-word { margin: 0 0 .6rem; color: var(--accent); font-weight: 800; } .stream-match-text .chip { display: inline-flex; margin: .15rem .2rem .15rem 0; cursor: default; } .stream-match-text .stream-cta { margin-top: .8rem; } .stream-cand-match { justify-self: start; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); font-size: .76rem; font-weight: 800; } .stream-note-own { margin: 0 0 1rem; } @media (max-width: 640px) { .stream-match { grid-template-columns: minmax(0, 1fr); justify-items: start; } .stream-match-ring { width: 5.5rem; } .stream-match-ring span { font-size: 1.3rem; } } .stream-invite { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .stream-invite p:not(.stream-cta) { max-width: 40rem; } .stream-slots { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; } .stream-slot { position: relative; display: grid; align-content: start; gap: .5rem; min-height: 7rem; padding: .6rem; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); } .stream-slot.is-empty { place-items: center; align-content: center; border-style: dashed; color: var(--muted); font-weight: 600; text-align: center; } .stream-slot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; } .stream-slot-body { display: grid; gap: .25rem; min-width: 0; } .stream-slot-body strong { font-size: .92rem; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .stream-slot-body small { color: var(--muted); font-size: .78rem; } .stream-slot-label { display: grid; gap: .2rem; margin-top: .2rem; } .stream-slot-label-head { font-size: .72rem; color: var(--muted); font-weight: 600; } .stream-slot-label input { width: 100%; min-width: 0; box-sizing: border-box; padding: .35rem .5rem; font-size: .85rem; } /* Mit JavaScript: Name als Text mit Stift (bricht um statt abgeschnitten), Antippen öffnet das Feld mit Zähler */ .stream-slot-label-show, .stream-slot-count { display: none; } /* Felder in einer Reihe auf gleicher Höhe (Wunsch 11.11.): Name immer zwei Zeilen hoch, Spielzeit einzeilig. Am Handy (Karten untereinander) nicht nötig */ @media (min-width: 641px) { .studio-stage .stream-slot-body > strong { min-height: calc(2 * 1.2em); } .studio-stage .stream-slot-body > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Stift in der Textzeile statt eigener Spalte: in schmalen Karten brach „Borderlands“ sonst mitten im Wort */ .studio.has-js .stream-slot-label-show { display: block; width: 100%; padding: .3rem .4rem; border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .8rem; font-weight: 650; line-height: 1.25; text-align: left; cursor: text; } .studio.has-js .stream-slot-label-show:hover, .studio.has-js .stream-slot-label-show:focus-visible { border-style: solid; border-color: var(--accent); outline: none; } .stream-slot-label-show span { overflow-wrap: break-word; hyphens: auto; } .stream-slot-label-show svg { display: inline-block; vertical-align: -.1em; margin-left: .3rem; opacity: .55; } .stream-slot-label-show:hover svg { opacity: 1; color: var(--accent); } .studio.has-js .stream-slot-label input { display: none; } .studio.has-js .stream-slot-label.is-editing input { display: block; } .studio.has-js .stream-slot-label.is-editing .stream-slot-label-show { display: none; } .studio.has-js .stream-slot-label.is-editing .stream-slot-count { display: block; justify-self: end; font-size: .7rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .stream-slot-count.is-full { color: var(--warn) !important; } .stream-slot-remove { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: rgb(16 14 12 / .75); color: #fff; font-size: .85rem; cursor: pointer; } .stream-slot-remove:hover { background: var(--bad); } .stream-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .4rem; } .stream-actions .button { display: inline-flex; align-items: center; gap: .45rem; } .stream-lib-head { margin: 2rem 0 .8rem; font: 700 1.1rem var(--display); } .stream-lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; } .stream-lib-tools input { flex: 1 1 16rem; max-width: 24rem; } .stream-lib-chips { display: flex; flex-wrap: wrap; gap: .4rem; } /* Filter-Chips: klickbar und der gewählte deutlich hervorgehoben (wie die Sortier-Chips der Ergebnisseite) */ .stream-lib-chips .chip { cursor: pointer; color: var(--text); font: inherit; font-size: .9rem; transition: background .15s, border-color .15s, color .15s; } .stream-lib-chips .chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .stream-lib-chips .chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 700; } .stream-lib-stores { margin: -.2rem 0 .7rem; } .stream-lib-count { margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .72rem; letter-spacing: 0; text-transform: none; } .stream-lib { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .5rem; max-height: 32rem; overflow-y: auto; scrollbar-width: thin; } .stream-lib-item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: .7rem; width: 100%; padding: .4rem .55rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-align: left; cursor: pointer; font: inherit; } .stream-lib-item:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .stream-lib-item.is-picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); } .stream-lib-item img { width: 2.6rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; } .stream-lib-ph { width: 2.6rem; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--surface-2); } .stream-lib-item:disabled { opacity: .6; cursor: progress; } /* Treffer außerhalb der Bibliothek (Katalog, IGDB) über der Bibliothek, mit eigenen Zwischenüberschriften */ .stream-more { margin: 0 0 1.2rem; } .stream-more h4, .stream-lib-sub { margin: 1rem 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .stream-more .stream-lib { max-height: none; overflow: visible; } .stream-lib-text { display: grid; gap: .1rem; min-width: 0; } .stream-lib-text strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stream-lib-text small { color: var(--muted); font-size: .76rem; } .stream-copy { display: flex; gap: .5rem; margin: .4rem 0 .4rem; } .stream-copy input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .85rem; } .stream-history { list-style: none; margin: 0; padding: 0; display: grid; } .stream-history li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--border); } .stream-history li:first-child { border-top: 0; } .stream-history-date, .stream-history-votes { color: var(--muted); font-variant-numeric: tabular-nums; } .stream-danger { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; background: none; } .stream-danger form.inline { margin: 0; } .stream-danger .hint { margin: 0; } @media (max-width: 900px) { .stream-slots { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } } @media (max-width: 640px) { .stream-steps, .stream-settings { grid-template-columns: minmax(0, 1fr); } /* Handy: Plätze untereinander, Cover klein links statt bildschirmhoch (sonst fünf Bildschirme Scrollen) */ .stream-slots { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .stream-slot { min-height: 0; } .stream-slot.is-empty { min-height: 3rem; } .stream-slot.is-filled { grid-template-columns: 3.6rem minmax(0, 1fr); align-items: start; gap: .7rem; } .stream-slot.is-filled img { width: 3.6rem; border-radius: 8px; } .stream-slot.is-filled .stream-slot-body { padding-right: 2.2rem; } .stream-slot-remove { top: .5rem; right: .5rem; } .stream-history li { grid-template-columns: minmax(0, 1fr) auto; } .stream-history-date { grid-column: 1 / -1; font-size: .82rem; } } /* Regiepult (stream.php, Umbau 11.11.2026): On-Air-Leiste, Bühne, Spielekiste, Zahnrad-Panel. --studio-top: Höhe des Seitenkopfs (setzt app.js), darunter klebt die On-Air-Leiste */ .studio { --studio-top: 4.4rem; --onair-h: 4.2rem; margin-top: 1rem; } .onair { position: sticky; top: var(--studio-top); z-index: 15; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .6rem 1.2rem; margin: 0 0 1.2rem; padding: .7rem .9rem .7rem 1.1rem; border-radius: 18px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgb(0 0 0 / .18); } .onair-channel { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; } .onair-channel strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .onair-status { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .35rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--surface-2); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .onair-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; } .onair-status.is-live { background: #d7262e; color: #fff; } .onair-status.is-live .onair-dot { animation: onair-pulse 1.2s ease-in-out infinite; } .onair-status.is-tournament { background: #f2c14e; color: #1a1408; } @keyframes onair-pulse { 50% { opacity: .25; } } .onair-action { justify-self: end; } .onair-main { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; font-size: 1rem; font-weight: 800; border-radius: 999px; white-space: nowrap; } .onair-main.is-stop { background: #d7262e; border-color: #d7262e; color: #fff; } .onair-main.is-tie { background: #f2c14e; border-color: #f2c14e; color: #1a1408; } .onair-tools { display: inline-flex; gap: .3rem; } .onair-copy { display: inline-flex; } .onair-tool { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; } .onair-tool:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .onair-tool.is-copied { color: var(--good); border-color: var(--good); } /* Einstellungen beschriftet und hervorgehoben (ein Zahnrad allein fand niemand) */ .onair-tool.is-labeled { display: inline-flex; gap: .4rem; padding: 0 .9rem; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); font-size: .88rem; } /* Einstellungen auf einen Blick über der Bühne: jeder Chip öffnet das Panel */ .studio-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .summary-chip { display: inline-flex; align-items: baseline; gap: .35rem; max-width: 100%; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .82rem; } .summary-chip span { color: var(--muted); font-weight: 600; } .summary-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; } .summary-chip:hover { border-color: var(--accent); text-decoration: none; } .summary-edit { margin-left: auto; } /* Bühne links, Spielekiste rechts (bleibt beim Scrollen stehen, scrollt in sich) */ .studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: 1.2rem; align-items: start; } /* Eine Spalte mit minmax(0, 1fr): sonst dehnt der breite Turnierbaum (3–4 Runden) die ganze Bühne über den Handyrand */ .studio-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; padding: clamp(1rem, 2vw, 1.4rem); border-radius: 20px; border: 1px solid var(--border); background: radial-gradient(120% 80% at 10% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface); } .studio-stage .stream-modes { margin: 0; } .stream-live-panel { padding: .9rem 1rem; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); } .stream-live-panel.is-empty { padding: .6rem 1rem; } .stream-live-panel.is-empty .empty { margin: 0; font-size: .9rem; } .stream-live-panel .stream-tournament { margin-top: 1rem; } .stream-auto { margin: .6rem 0 0; font-weight: 700; color: var(--accent); } .stream-paused { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0; padding: .7rem 1rem; border-radius: 14px; border: 1px dashed #f2c14e; background: color-mix(in srgb, #f2c14e 8%, var(--bg)); font-size: .9rem; } .studio-stage .stream-form-head { align-items: center; } .studio-stage .stream-form-head h2 { margin: 0; } .stream-suggest { margin-left: auto; } .stream-save { font-size: .8rem; font-weight: 700; color: var(--muted); } .stream-save[data-save-state="saved"]::before { content: "✓ "; color: var(--good); } .stream-save[data-save-state="saving"], .stream-save[data-save-state="dirty"] { color: var(--muted); } .stream-save[data-save-state="error"] { color: var(--bad); cursor: pointer; text-decoration: underline; } .studio-stage .stream-slots { margin: 0; } .studio-stage .stream-slots.is-many { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } .studio-stage .stream-slot { background: var(--bg); } .studio-stage .stream-slot.is-empty { min-height: 9rem; border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--bg)); } .studio-stage .stream-slot.is-empty span::before { content: "+"; display: block; font: 800 1.8rem/1 var(--display); color: var(--accent); margin-bottom: .2rem; } .stream-slot.is-new { animation: slot-in .45s cubic-bezier(.2, .8, .2, 1.2); } @keyframes slot-in { from { transform: scale(.85); opacity: .2; box-shadow: 0 0 0 3px var(--accent); } to { transform: none; opacity: 1; } } .studio-stage > .hint { margin: 0; } /* Stufe 2: Plätze umsortieren. Griff mit Platznummer (Reihenfolge der Twitch-Umfrage), am Rechner zieht der ganze Platz */ .studio-stage .stream-slots { counter-reset: slot; } .studio-stage .stream-slot.is-filled { counter-increment: slot; } .stream-slot-grip { position: absolute; top: .9rem; left: .9rem; display: none; align-items: center; gap: .3rem; height: 1.9rem; padding: 0 .65rem; border: 0; border-radius: 999px; background: rgb(16 14 12 / .75); color: #fff; font: 800 .85rem var(--display); cursor: grab; touch-action: none; } .stream-slot-grip::after { content: counter(slot); } .stream-slot-grip:hover, .stream-slot-grip:focus-visible { background: var(--accent); color: var(--accent-ink); outline: none; } .studio.has-js .stream-slot-grip { display: inline-flex; } .studio.has-js .stream-slot.is-filled { cursor: grab; -webkit-user-select: none; user-select: none; } .studio.has-js .stream-slot.is-filled input { -webkit-user-select: text; user-select: text; cursor: text; } .stream-slot img { -webkit-user-drag: none; } .stream-slots.is-sorting, .stream-slots.is-sorting .stream-slot { cursor: grabbing; } .stream-slot.is-dragging { z-index: 5; box-shadow: 0 18px 40px rgb(0 0 0 / .35), 0 0 0 2px var(--accent); } /* Aus der Spielekiste ziehen: alle Plätze zeigen, dass sie etwas annehmen, der unter dem Zeiger leuchtet */ .stream-slots.is-drop-ready .stream-slot { outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } .stream-slots .stream-slot.is-drop { outline: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); } /* Live-Stand im Overlay-Look: dunkle Bühne, Spiele als Karten, Gewinner golden (wie das OBS-Overlay) */ .studio-stage .stream-live-panel:has(.stream-bars) { border-color: #2a221c; } .studio-stage [data-stream-live]:has(.stream-bars) { margin: -.9rem -1rem; padding: 1rem; border-radius: 13px; color: #fff; background: radial-gradient(110% 120% at 0% 0%, rgb(255 90 60 / .22), transparent 55%), linear-gradient(160deg, #221a15, #0f0c0a); } .studio-stage [data-stream-live]:has(.stream-bars) + .stream-tournament { margin-top: 1.9rem; } .studio-stage [data-stream-live] .stream-live-head strong { font: 800 1.25rem/1.15 var(--display); } .studio-stage [data-stream-live] .stream-live-total { color: rgb(255 255 255 / .7); } .studio-stage [data-stream-live] .stream-live-time { color: rgb(255 255 255 / .7); } .studio-stage [data-stream-live] .stream-live-time.is-active { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .65rem; border-radius: 999px; background: #d7262e; color: #fff; } .studio-stage [data-stream-live] .stream-live-time[data-live]::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: onair-pulse 1.2s ease-in-out infinite; } .studio-stage [data-stream-live] .stream-badge { background: #f2c14e; color: #1a1408; } .studio-stage [data-stream-live] .stream-bars { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .6rem; } .studio-stage [data-stream-live] .stream-bars li { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: .25rem .7rem; padding: .6rem; background: rgb(255 255 255 / .07); transition: opacity .4s, transform .4s, box-shadow .4s; } .studio-stage [data-stream-live] .stream-bars li:not(:has(img)) { grid-template-columns: minmax(0, 1fr); } .studio-stage [data-stream-live] .stream-bars img { grid-row: span 2; width: 3.2rem; border-radius: 8px; } .studio-stage [data-stream-live] .stream-bar { background: rgb(255 255 255 / .15); height: .5rem; } .studio-stage [data-stream-live] .stream-bar-num { justify-items: start; display: flex; align-items: baseline; gap: .45rem; font: 800 1.3rem var(--display); } .studio-stage [data-stream-live] .stream-bar-num small { color: rgb(255 255 255 / .6); font-size: .8rem; font-weight: 600; font-family: inherit; } .studio-stage [data-stream-live] .stream-bar-num small::after { content: " ✋"; } .studio-stage [data-stream-live] .stream-bars li.is-winner { background: rgb(242 193 78 / .16); transform: translateY(-3px); box-shadow: inset 0 0 0 2px #f2c14e, 0 10px 30px rgb(242 193 78 / .25); } .studio-stage [data-stream-live] .stream-bars li.is-winner .stream-bar > span { background: #f2c14e; } .studio-stage [data-stream-live]:has(.stream-live-time:not(.is-active)) .stream-bars li:not(.is-winner) { opacity: .5; } /* Gewinner-Leiste: Cover der letzten Sieger zum Wiederaufstellen, waagerecht wischbar */ .studio-winners { display: grid; gap: .5rem; min-width: 0; } .studio-winners-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; } .studio-winners-head h3 { margin: 0; font: 800 1rem var(--display); } .studio-winners-head .hint { margin: 0; font-size: .8rem; } .studio-winners-strip { list-style: none; margin: 0; padding: .3rem .1rem .6rem; display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .studio-winners-strip li { flex: 0 0 6.4rem; scroll-snap-align: start; } .stream-lib-item.stream-winner { position: relative; grid-template-columns: minmax(0, 1fr); align-items: start; gap: .35rem; height: 100%; padding: .35rem; text-align: center; border-color: color-mix(in srgb, #f2c14e 40%, var(--border)); } /* Steht schon in einem Platz: Akzentrahmen wie in der Spielekiste (die Gold-Tönung oben hätte ihn überdeckt) */ .stream-lib-item.stream-winner.is-picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); } .stream-lib-item.stream-winner img, .stream-winner .stream-lib-ph { width: 100%; border-radius: 8px; transition: transform .2s; } .stream-lib-item.stream-winner:hover img { transform: translateY(-2px) scale(1.02); } .stream-winner-name { font-size: .74rem; font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .stream-winner-cup, .stream-winner-n { position: absolute; top: .1rem; display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px; background: #f2c14e; color: #1a1408; font-size: .72rem; font-weight: 800; box-shadow: 0 2px 6px rgb(0 0 0 / .3); } .stream-winner-cup { left: .1rem; } .stream-winner-n { right: .1rem; } @media (max-width: 640px) { /* Turnier (8/16 Plätze): am Handy wie die Umfrage untereinander; zu zweit nebeneinander war die Karte neben dem Cover so schmal, dass Namen zerhackt wurden und „S.T.A.L.K.E.R.“ über den Rand lief (Screenshot 11.11.) */ .studio-stage .stream-slots.is-many { grid-template-columns: minmax(0, 1fr); } .stream-slot-grip { top: .5rem; left: .5rem; height: 1.6rem; padding: 0 .45rem; font-size: .75rem; } .studio-winners-strip li { flex-basis: 5.4rem; } } /* Spielekiste */ .studio-box { position: sticky; top: calc(var(--studio-top) + var(--onair-h) + 1.6rem); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: .7rem; max-height: calc(100vh - var(--studio-top) - var(--onair-h) - 2.6rem); padding: 1rem; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); } .studio-box-title { margin: 0; font: 800 1.1rem var(--display); } .studio-search { width: 100%; box-sizing: border-box; padding: .6rem .9rem; border-radius: 999px; } .studio-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); } .studio-tab { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .4rem .5rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .studio-tab.is-active { background: var(--text); color: var(--bg); } .studio-tab-n { padding: 0 .4rem; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); font-size: .7rem; } .studio-panel { min-height: 0; overflow-y: auto; scrollbar-width: thin; margin-right: -.4rem; padding-right: .4rem; } .studio-panel .stream-lib { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; } .studio-panel .stream-lib-chips { margin-bottom: .5rem; } .studio-panel .stream-lib-stores { margin: 0 0 .6rem; font-size: .78rem; } .studio-panel .stream-lib-sub:first-child { margin-top: 0; } .studio-last { margin: 0 0 .6rem; } .studio-panel .stream-more { margin: 0; } /* Zahnrad-Panel: mit JavaScript eine Schublade von rechts, sonst ein Abschnitt am Seitenende */ .studio-settings { margin-top: 1.4rem; padding: 1.2rem; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); } .studio.has-js .studio-settings { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(28rem, 100vw); margin: 0; overflow-y: auto; border-radius: 20px 0 0 20px; box-shadow: -20px 0 50px rgb(0 0 0 / .35); transform: translateX(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; } .studio.has-js .studio-settings.is-open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .studio-backdrop { position: fixed; inset: 0; z-index: 59; background: rgb(0 0 0 / .45); } .studio-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; } .studio-settings-head h2 { margin: 0; font: 800 1.3rem var(--display); } .studio-settings-close { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; } .studio:not(.has-js) .studio-settings-close { display: none; } .studio-set { display: grid; gap: .6rem; padding: 1rem 0; border-top: 1px solid var(--border); } .studio-set:first-of-type { border-top: 0; } .studio-set h3 { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .studio-set .hint, .studio-set .alert { margin: 0; } .studio-set .stream-copy { margin: 0; } .studio-set.stream-danger { background: none; } /* Chips als Auswahl (Dauer, Größe): echte Radio-Knöpfe, die Bezeichnung als Chip */ .chip-set { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; border: 0; } .chip-set legend { width: 100%; margin-bottom: .35rem; padding: 0; font-size: .85rem; font-weight: 600; color: var(--muted); } .chip-radio { position: relative; } .chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .chip-radio span { display: inline-block; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: .85rem; font-weight: 600; } .chip-radio input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); } .chip-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 1000px) { .studio-grid { grid-template-columns: minmax(0, 1fr); } .studio-box { position: static; max-height: none; grid-template-rows: none; } .studio-panel { overflow: visible; margin: 0; padding: 0; } .studio-panel .stream-lib { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); max-height: 28rem; overflow-y: auto; } } @media (max-width: 760px) { /* Handy: Leiste kompakt in zwei Zeilen (Status und Werkzeuge, darunter der große Knopf), Kanalname entfällt */ .onair { grid-template-columns: 1fr auto; padding: .55rem .6rem; gap: .5rem; border-radius: 14px; } .onair-channel { display: none; } .onair-action { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; } .onair-main { width: 100%; justify-content: center; padding: .6rem 1rem; } .onair-status { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Overlay-Link und Kanalseite stehen auch im Panel: am Handy nur „Einstellungen“, damit es in eine Zeile passt */ .onair-copy, .onair-tools > a.onair-tool:not(.is-labeled) { display: none; } .summary-chip strong { max-width: 9rem; } } /* Handy mit Leiste unten (.bottom-nav, Kopfteil dieser Datei): Was sonst unten am Rand klebt, rückt darüber. Am Dateiende, weil die Grundregeln von Cookie-Hinweis, Begleiter und Auswahl-Leiste weiter oben stehen und sonst gewännen. Feedback steht am Handy im „Mehr“-Blatt statt als schwebender Knopf */ @media (max-width: 760px) { .cookie-note { bottom: calc(var(--bottom-nav) + .6rem); } .buddy { bottom: calc(var(--bottom-nav) + .6rem); } .library-bar { bottom: calc(var(--bottom-nav) + .6rem); } .has-cookie-note .library-bar { bottom: calc(var(--bottom-nav) + 5.6rem); } .feedback-fab { display: none; } /* „Deine Treffer ansehen“ (Startseite) schwebt über der Leiste unten statt im Satz zu stehen: Dort lag der Knopf beim ersten Besuch genau unter dem Cookie-Hinweis, die Treffer beginnen aber gut einen Bildschirm tiefer. Mit Hinweis rückt er darüber (--cookie-note-h setzt app.js). .is-past: Treffer sind im Bild oder schon vorbei */ .jump { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-nav) + .8rem); z-index: 36; margin: 0 auto; } .has-cookie-note .jump { bottom: calc(var(--bottom-nav) + var(--cookie-note-h, 4.4rem) + 1.4rem); } .jump.is-past { display: none; } .toast { bottom: calc(var(--bottom-nav) + .8rem); } } /* Größere Tippflächen am Touchscreen (Paket E5), gemessen 10.11. bei 375 px: Punkte am Karussell waren 8 px hoch, das × an gewählten Spielen 23 px, Pfeile, Ansicht-Umschalter und „Vergessen“ 24–30 px. Unsichtbar vergrößert wie schon bei den Daumen (.vote-btn::after): Das Aussehen bleibt, nur der Finger trifft leichter. Das × bleibt bewusst etwas kleiner, damit ein Tipp ins Eingabefeld daneben nicht das Spiel entfernt */ @media (pointer: coarse) { .fav button, .gotw-dot, .gotw-arrow, .wall-view-btn, .thread-clear { position: relative; } :is(.fav button, .gotw-dot, .gotw-arrow, .wall-view-btn, .thread-clear)::after { content: ""; position: absolute; border-radius: 999px; } .fav button::after { inset: -7px; } .gotw-dot::after { inset: -16px -3px; } .gotw-arrow::after { inset: -6px -3px; } .wall-view-btn::after { inset: -5px -3px; } .thread-clear::after { inset: -8px -2px; } } /* „Weniger Bewegung“ im System (Paket E6): als eine Regel für alles statt einzeln je Bauteil. Animationen und Übergänge enden sofort im Endzustand (Einblenden, Aufklappen funktionieren also weiter, nur ohne Bewegung), Dauerschleifen laufen einmal, weiches Scrollen wird zum Sprung. Am Dateiende, damit es alle Regeln davor überstimmt */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } }