/* ═══════════════════════════════════════════════════════════════════════════ DONUTHUGOBET — DESIGN-EBENE „Voxel-Salon“ (v3.44, Farbskala v3.45) ─────────────────────────────────────────────────────────────────────────── Liegt NACH dem eingebetteten Stylesheet in index.html und ueberschreibt dort gezielt. Warum eine eigene Datei statt Aenderungen im 5.800-Zeilen- Block: jede Regel hier ist eine bewusste Entscheidung ueber dem Grund- system („Nachtsalon“) und laesst sich als Ganzes an- und abschalten — bei einem Fehler nimmt man diese eine Zeile im heraus und die Seite steht wieder wie vorher. Drei Entscheidungen, die alles Weitere tragen: 1 Eine Stimme, wenige Rollen (v3.69 Typo-System). Inter ueberall — auch Titel. Was frueher zwei Familien trennten, trennen jetzt Rollen: Seitentitel und Kachelnamen in Versalien 800, Abschnitte in Versalien 800 klein, Etiketten in Versalien 700 winzig, Knoepfe in Versalien 700, Zahlen mit Tabellenziffern. Die Rollen stehen als --t-*-Tokens in :root (Abschnitt „SCHRIFTROLLEN“) und werden ueberall per `font: var(--t-…)` benutzt — 188 verschiedene Groesse/Gewicht-Kombinationen waren vorher kein System, sondern Zufall. Eine breite Display-Schrift (Unbounded) kommt nicht wieder. 2 Die Startseite ist eine Buehne, keine Karte. Muenze, Donut und Erzbloecke schweben ueber der Truhe und weichen der Maus aus. Die Zahlen daneben sind echt (Spieler online, heute gesetzt, groesster Gewinn) — Bewegung UND Inhalt sagen: hier passiert gerade etwas. 3 Bewegung nur auf transform und opacity. 300 Spieler mit je einem offenen Tab: jede Animation, die Layout oder Farbe aendert, kostet auf schwachen Geraeten Bilder pro Sekunde. Alles hier laeuft auf der Grafikkarte; wer „Bewegung reduzieren“ eingestellt hat, bekommt gar nichts davon (ganz unten). ═══════════════════════════════════════════════════════════════════════════ */ /* Schrift: nur Inter (index.html laedt sie selbst gehostet). Die Unbounded- @font-face-Bloecke und ihre woff2-Dateien sind weg (v3.69) — seit v3.56 zeigte kein Selektor mehr darauf, die Dateien lagen nur noch herum. */ :root { /* v3.56: Unbounded war Kian zu breit — normale Laufweite wie beim Vorbild (Rubik), bei uns Inter (variabel, selbst gehostet). */ --font-disp: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Etiketten bleiben bei Inter — Unbounded ist in 11 px Versalien zu breit und frisst die Zeile. */ --font-label: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* ── SCHRIFTROLLEN (v3.69) ──────────────────────────────────────────────── Eine Skala statt 188 Kombinationen. Jede Rolle ist ein font-Kurzwert (Gewicht Groesse/Zeilenhoehe Familie), die Laufweite der Versalien- Rollen steht daneben als --ls-*. Benutzung: `font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase`. Der font-Kurzwert setzt Zeilenhoehe und Laufweite NICHT zurueck auf Tabellenziffern — Zahl-Rollen brauchen deshalb zusaetzlich `font-variant-numeric: tabular-nums` (steht in den .t-zahl-Klassen). titel Seitentitel (Jackpot, Wallet, DonutHugoBet Crash, Our community's favourite games) — Versalien, .04em abschnitt Abschnittstitel in Karten (Transactions, Selected case, Your recent rounds) — Versalien, .06em karte Kartentitel in gemischter Schreibung (Daily Bonus, Your Rank) kachel Spielname auf der Kachel — Versalien wie der Titel, kleiner etikett Etiketten, Tabellenkoepfe, Pillen, Augenbrauen — Versalien, .08em knopf jeder Knopf — Versalien, .04em; -klein fuer Reiter/Chips text Fliesstext, zeile Zeilentitel in Listen (600), klein gedaempft zahl Betraege/Werte (tabular), -gross fuer Kennzahlen, -klein in Zeilen Bewusste Ausnahmen bleiben eigene Werte: Banner-Schlagzeile, grosse Multiplikatoren (Crash 1.10×), Jackpot-Topf, Marke, Chat-Kleinkram. */ --t-titel: 800 1.25rem/1.15 var(--font-disp); --t-abschnitt: 800 .8rem/1.2 var(--font-disp); --t-karte: 700 .95rem/1.25 var(--font-disp); --t-kachel: 800 .9rem/1.05 var(--font-disp); --t-etikett: 700 .64rem/1 var(--font-label); --t-etikett-klein: 700 .56rem/1 var(--font-label); --t-knopf: 700 .8rem/1 var(--font-ui); --t-knopf-klein: 700 .7rem/1 var(--font-ui); --t-text: 500 .86rem/1.5 var(--font-ui); --t-zeile: 600 .86rem/1.3 var(--font-ui); --t-klein: 500 .76rem/1.4 var(--font-ui); --t-zahl-gross: 800 1.5rem/1.05 var(--font-num); --t-zahl: 700 1rem/1.1 var(--font-num); --t-zahl-klein: 700 .78rem/1.2 var(--font-num); --ls-titel: .04em; --ls-abschnitt: .06em; --ls-etikett: .08em; --ls-knopf: .04em; /* ── Farbskala (v3.45): kuehles Graphit statt Fast-Schwarz ───────────── Ein Hauch Blau in sehr geringer Saettigung — das liest sich sauber und technisch, nicht bunt. Die Stufen liegen enger als vorher, damit Karten sich ueber Helligkeit trennen und keinen Rahmen-und-Schatten-Aufwand brauchen. Alles, was Farbe hat (Violett, Gold, Gruen, Rot), steht damit allein auf der Flaeche und wirkt doppelt. */ --ink-950: #0f1216; --ink-900: #14181d; --ink-850: #181c22; --ink-800: #1c2128; --ink-750: #21272f; --ink-700: #282e37; --ink-650: #303743; --ink-600: #3a424f; --line: rgba(255,255,255,.075); --line-2: rgba(255,255,255,.13); --line-top: rgba(255,255,255,.06); --text-2: #b9bcc9; --muted: #8b90a0; --faint: #5c6170; /* v4.23: nur Punkte, Rahmen, Zier-Zeichen — Text laeuft ueber --muted (2,6:1 statt 4,5:1) */ --gold: #f3c15f; --gold-2: #ffd77e; } /* Verlaufstext ist weg: Gold als eine Farbe ist klarer als ein Verlauf von Violett nach Gold, der zwei Bedeutungen mischt (Bedienung und Geld). */ .topbar-logo span, .login-logo span, .promo__title em, .splash__wort span { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: var(--gold); } .promo__title em { color: var(--gold) } /* Weniger Flaechen mit eigener Farbe: Karten ohne Verlauf, nur Helligkeit. */ .card, .stat-box, .promo, .panel, .spiel-buehne { background: var(--ink-800); } #topbar { background: rgba(15,18,22,.82) } #sidebar { background: var(--ink-900) } .tile { background: radial-gradient(120% 90% at 50% 18%, #232931 0%, #1a1f26 58%, #161a20 100%) } /* Marke: die einzige Stelle mit enger Laufweite — ein Wortzeichen, kein Text. */ .topbar-logo, .login-logo { font-weight: 700; letter-spacing: -.02em } .topbar-logo { font-size: 1.08rem } .promo__title { letter-spacing: -.02em; line-height: 1.06; font-weight: 800 } .cf-wert { font-family: var(--font-disp); font-weight: 700 } /* Alles Kleine auf Inter. Dieselben Selektoren wie im Grundsystem, nur die Familie wechselt — Groesse und Laufweite kommen aus den Rollen. */ .card-title, .nav-section, .label, .tbl th, .stat-lbl, .badge, .chip, .crash-unter, .crash-spieler__kopf, .cf-opt__mark, .avatar-initials, .cf-status, .etikett, .lb-tab, .admin-tab, .live-item, .rank-chip, .wallet-pill, .konto-knopf, .toast, .glocke-kopf, .glocke-liste, .limbo-zahl, .crash-zahl { font-family: var(--font-label) } /* Die grossen Zahlen von Limbo und Crash: eine der bewussten Ausnahmen — das sind die Momente, in denen man hinschaut. */ .limbo-zahl, .crash-zahl { font-family: var(--font-disp); font-weight: 800; letter-spacing: -.02em } /* ═══ GRUND: langsam wanderndes Licht ═══════════════════════════════════════ Die zwei Farbpfuetzen des Grundsystems bewegen sich jetzt — so langsam, dass man es nicht sieht, aber merkt, wenn es fehlt. Ueber `transform`, damit es nichts kostet; ruht, sobald der Tab im Hintergrund ist. */ body::before { inset: -22%; background: radial-gradient(900px 640px at 22% 12%, rgba(124,92,255,.07), transparent 62%), radial-gradient(760px 560px at 82% 92%, rgba(124,92,255,.035), transparent 64%); animation: aurora 46s var(--ease-in-out) infinite alternate; will-change: transform; } @keyframes aurora { from { transform: translate3d(-3%, -2%, 0) rotate(0deg) } to { transform: translate3d(3%, 2.5%, 0) rotate(2deg) } } html.ruht body::before { animation-play-state: paused } /* ═══ STARTBILDSCHIRM ═══════════════════════════════════════════════════════ Erscheint sofort aus dem CSS heraus (vor jedem Skript) und verschwindet auch OHNE Skript wieder: die Animation endet mit opacity 0 + visibility hidden. Das Skript darf ihn nur frueher schliessen, nie offen halten. Wer ihn in dieser Sitzung schon gesehen hat (html.splash-gesehen, gesetzt im ), bekommt ihn nicht noch einmal — ein Auftakt, kein Vorspann. */ #splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ink-950); animation: splash-weg .5s var(--ease-out) 2.1s both; pointer-events: none; } #splash.splash--aus { animation: splash-weg .42s var(--ease-out) both } html.splash-gesehen #splash { display: none } @keyframes splash-weg { to { opacity: 0; visibility: hidden } } .splash__marke { display: flex; flex-direction: column; align-items: center; gap: 22px } .splash__donut { width: 132px; height: 132px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); animation: splash-donut 1.1s var(--ease-spring) both; } @keyframes splash-donut { 0% { opacity: 0; transform: scale(.3) rotate(-28deg) translateY(30px) } 60% { opacity: 1 } 100% { opacity: 1; transform: none } } .splash__wort { font: 700 clamp(1.6rem, 5vw, 2.3rem)/1 var(--font-disp); letter-spacing: -.02em; color: var(--text); clip-path: inset(0 100% 0 0); animation: splash-wort .7s var(--ease-out) .45s both; } .splash__wort span { background: linear-gradient(135deg, var(--accent-2), var(--gold-2) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @keyframes splash-wort { to { clip-path: inset(0 -4% 0 0) } } .splash__balken { width: 160px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; } .splash__balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--gold)); transform-origin: left; animation: splash-balken 1.9s var(--ease-in-out) .2s both; } @keyframes splash-balken { from { transform: scaleX(0) } to { transform: scaleX(1) } } /* Muenzen, die beim Auftakt hochsteigen — vier reichen, mehr wird Konfetti. */ .splash__funke { position: absolute; width: 14px; height: 14px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 14px rgba(245,196,106,.7); opacity: 0; animation: splash-funke 1.5s var(--ease-out) both; } .splash__funke:nth-child(1) { left: 38%; top: 60%; animation-delay: .25s } .splash__funke:nth-child(2) { left: 60%; top: 62%; animation-delay: .4s; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-glow) } .splash__funke:nth-child(3) { left: 46%; top: 66%; animation-delay: .55s; width: 9px; height: 9px } .splash__funke:nth-child(4) { left: 55%; top: 58%; animation-delay: .7s; width: 10px; height: 10px; background: #ff8dbf; box-shadow: 0 0 14px rgba(255,141,191,.6) } @keyframes splash-funke { 0% { opacity: 0; transform: translateY(0) rotate(0) } 25% { opacity: 1 } 100% { opacity: 0; transform: translateY(-140px) rotate(200deg) } } /* Nach dem Auftakt baut sich die Seite gestaffelt auf: Leiste, Navigation, Inhalt. Nur beim ersten Mal (html.auftakt), danach steht alles sofort. */ html.auftakt #topbar { animation: rise .6s var(--ease-out) .05s both } html.auftakt #sidebar { animation: auftakt-links .6s var(--ease-out) .12s both } html.auftakt #content { animation: rise .7s var(--ease-out) .2s both } html.auftakt #live-rail { animation: auftakt-rechts .6s var(--ease-out) .26s both } @keyframes auftakt-links { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } } @keyframes auftakt-rechts { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } } /* ═══ KOPFLEISTE ════════════════════════════════════════════════════════════ */ #topbar { background: rgba(11,12,16,.78) } .logo-mark .ico { color: var(--gold); filter: drop-shadow(0 0 6px rgba(245,196,106,.45)) } /* Guthaben: beim Gewinn leuchtet die Pille golden auf und setzt sich kurz. */ #balance-display.bal-up { color: var(--gold-2); transform: scale(1.07); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 1px rgba(245,196,106,.35), 0 8px 30px -6px rgba(245,196,106,.7); } .btn-primary { background: linear-gradient(180deg, #9d82ff, var(--accent) 58%, #6747ea); box-shadow: 0 1px 0 rgba(255,255,255,.26) inset, 0 2px 8px -2px rgba(124,92,255,.5); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 20px -4px rgba(124,92,255,.65), 0 0 0 1px rgba(155,125,255,.35); } .btn-primary:active:not(:disabled) { transform: translateY(0) scale(.985) } /* ═══ SEITENLEISTE ══════════════════════════════════════════════════════════ */ .nav-btn { transition: color .18s var(--ease-out), background .18s var(--ease-out), transform .22s var(--ease-out) } .nav-btn:hover { transform: translateX(2px) } .nav-btn.active { transform: none } /* ═══ SEITENWECHSEL ═════════════════════════════════════════════════════════ Eine Spur Unschaerfe beim Hereinkommen — das liest sich wie Tiefe, nicht wie ein Schnitt. */ .page.active { animation: seite-rein .44s var(--ease-out) both } @keyframes seite-rein { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } #modal-box { animation: dialog-rein .38s var(--ease-spring) both } @keyframes dialog-rein { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(4px) } to { opacity: 1; transform: none; filter: blur(0) } } /* ═══ STARTBUEHNE ═══════════════════════════════════════════════════════════ */ .hero { --px: 0; --py: 0; /* Mausversatz, setzt das Skript (-1…1) */ min-height: 250px; padding: var(--s6) var(--s7) var(--s5); background: radial-gradient(110% 130% at 6% 0%, rgba(124,92,255,.12), transparent 58%), var(--ink-800); } /* Buehne allein in der ersten Reihe, die drei Aktionskacheln in der dritten (nach den Spielen) — je eine Zeile, drei gleiche Spalten. */ .promo-row--buehne { grid-template-columns: minmax(0, 1fr) } .promo-row--aktionen { grid-template-columns: repeat(3, minmax(0, 1fr)) } .promo-row--buehne .hero { min-height: 270px } .hero__body { max-width: 46ch } @media (max-width: 880px) { .promo-row--aktionen { grid-template-columns: 1fr 1fr } /* Drei Kacheln in zwei Spalten: die dritte bekommt die ganze Breite. */ .promo-row--aktionen > .promo--tile:last-child:nth-child(odd) { grid-column: 1 / -1 } } @media (max-width: 560px) { .promo-row--aktionen { grid-template-columns: 1fr } } /* Der Verlauf hinter dem Text ist schmaler, damit die Buehne mehr Raum hat. */ .hero.promo--main::after { inset: 0 48% 0 0; background: linear-gradient(90deg, rgba(25,27,32,.94) 24%, rgba(25,27,32,0)) } .hero__body { max-width: 40ch; gap: var(--s3) } .hero__title { font-size: clamp(1.7rem, 2.7vw, 2.45rem) } .hero__title em { display: inline-block } .hero__live { gap: 7px } .hero__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--green-ink); position: relative; } /* v3.65: Der Ring war ein wachsender box-shadow – das zwingt den Browser, den Punkt jedes Bild neu zu malen. Jetzt waechst ein fertiger Kreis (::after) per transform und blendet per opacity aus: laeuft auf dem Compositor, die Optik (7 px Ring, der verblasst) bleibt gleich. */ .hero__punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(74,222,128,.55); pointer-events: none; animation: puls-punkt 2.2s var(--ease-out) infinite; } @keyframes puls-punkt { 0% { transform: scale(1); opacity: 1 } 70% { transform: scale(3); opacity: 0 } 100% { transform: scale(1); opacity: 0 } } .hero__live b { font-weight: 800; color: var(--text) } /* Drei echte Zahlen unter dem Text. Ueberschrift klein in Inter, Zahl in Unbounded — Gold nur, wo Geld steht. */ .hero__puls { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s2) 0 0; padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.07); } .hero__puls > div { display: flex; flex-direction: column; gap: 2px; min-width: 0 } .hero__puls dt { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); } .hero__puls dd { margin: 0; font: var(--t-zahl); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .hero__puls dd.geld { color: var(--gold) } .hero__puls dd small { font: var(--t-klein); color: var(--muted) } /* Die Buehne rechts: Truhe hinten, davor schwebende Stuecke in drei Tiefen. Aeusseres Element traegt den Mausversatz (transform aus Variablen), das Bild darin die Schwebe-Animation — zwei Transformationen auf einem Element wuerden sich gegenseitig ueberschreiben. */ .hero__szene { position: absolute; inset: 0 0 0 auto; width: 58%; z-index: 0; pointer-events: none; user-select: none; } .hero__truhe { right: -14px; height: 126%; max-width: none; width: auto; transform: translateY(-50%) translate(calc(var(--px) * -6px), calc(var(--py) * -4px)); transition: transform .5s var(--ease-out); } .hero__stueck { position: absolute; width: var(--g, 84px); aspect-ratio: 1; transform: translate(calc(var(--px) * var(--t, 14) * 1px), calc(var(--py) * var(--t, 14) * .7px)); transition: transform .5s var(--ease-out); filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); } .hero__stueck img { display: block; width: 100%; height: 100%; animation: schweben var(--d, 6s) var(--ease-in-out) var(--v, 0s) infinite alternate; } .hero__stueck--muenze { --g: 104px; --t: 26; --d: 5.6s; --v: -1s; left: 6%; top: 30% } .hero__stueck--donut { --g: 124px; --t: 18; --d: 7s; --v: -3s; right: 10%; top: -4%; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,126,182,.18)) } .hero__stueck--gold { --g: 62px; --t: 34; --d: 6.4s; --v: -2s; left: 24%; bottom: 4% } .hero__stueck--smaragd{ --g: 54px; --t: 30; --d: 5.2s; --v: -.5s; right: 3%; bottom: 14% } @keyframes schweben { from { transform: translateY(-7px) rotate(-2deg) } to { transform: translateY(9px) rotate(2.5deg) } } html.ruht .hero__stueck img { animation-play-state: paused } /* Schmale grosse Karte: die Stuecke ruecken zusammen, bei ganz schmal weg. */ @container (max-width: 560px) { .hero__szene { width: 50% } .hero__stueck--donut { --g: 92px; left: 30%; top: 0 } .hero__stueck--muenze { --g: 72px } .hero__stueck--gold, .hero__stueck--smaragd { display: none } } @container (max-width: 400px) { .hero__szene { opacity: .3 } .hero__body { max-width: 100% } } @media (max-width: 560px) { .hero { padding: var(--s5) var(--s4) } .hero__puls { gap: var(--s2) var(--s4) } .hero__puls dd { font-size: .9rem } } /* ═══ SPIELKACHELN: Neigung und Streiflicht ═════════════════════════════════ Das Skript setzt --tx/--ty (Neigung in Grad) und --mx/--my (Mausposition in Prozent) auf der Kachel. Ohne Skript bleibt der Hover des Grundsystems. Mit perspective auf der Kachel selbst, damit jede fuer sich kippt. */ .tile { transform-style: preserve-3d; will-change: transform } .tile::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 60%); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .tile:hover { transform: perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-5px) scale(1.025); border-color: rgba(var(--tone-rgb), .5); box-shadow: 0 22px 44px -18px rgba(var(--tone-rgb), .6), 0 0 0 1px rgba(var(--tone-rgb), .18); transition: transform .12s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); } .tile:hover::before { opacity: 1 } .tile:hover .tile__bild { transform: scale(1.09) translateY(-6px); filter: brightness(1.12) saturate(1.1) } .tile:hover .tile__mult { background: rgba(var(--tone-rgb), .22); color: #fff } } .tile__foot { z-index: 2 } /* Case Battles (v3.46): eigene Kachelfarbe wie die anderen Spiele. */ .tile[data-g="battles"] { --tone: #f5c46a; --tone-rgb: 245,196,106 } .tile[data-g="cases"] { --tone: #ffd77e; --tone-rgb: 255,215,126 } .tile[data-g="cases"] .tile__mult { background: var(--accent); color: #fff } .tile[data-g="battles"] .tile__mult { background: var(--accent); color: #fff } .tile__mult { transition: background .3s var(--ease-out), color .3s var(--ease-out) } /* Kleine Kacheln der Promo-Reihe bekommen dasselbe Streiflicht. */ .promo--tile:hover .promo__bild { transform: translateY(-5px) rotate(-2deg) scale(1.05) } /* ═══ ERSCHEINEN BEIM SCROLLEN ══════════════════════════════════════════════ Nur wenn das Skript da ist (html.js) — sonst waere ohne Skript alles unsichtbar. Einmalig, nicht bei jedem Scroll. */ html.js .erscheint { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out) } html.js .erscheint.ist-da { opacity: 1; transform: none } html.js .erscheint--2 { transition-delay: .08s } html.js .erscheint--3 { transition-delay: .16s } /* ═══ SPIELBUEHNE UND GEWINN ════════════════════════════════════════════════ */ .spiel-buehne { position: relative; isolation: isolate } .game-result { animation: ergebnis-rein .5s var(--ease-spring) both } @keyframes ergebnis-rein { from { opacity: 0; transform: translateY(10px) scale(.94) } to { opacity: 1; transform: none } } .result-win .result-amount { color: var(--gold); font-variant-numeric: tabular-nums } .result-win { background: linear-gradient(180deg, rgba(245,196,106,.12), rgba(52,211,153,.05)); border-color: rgba(245,196,106,.3); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(245,196,106,.1), 0 10px 30px -14px rgba(245,196,106,.5); } /* Gewinn-Einblendung ab 3×: Betrag gross in Unbounded, Strahlen dahinter, einmal — dann weg. Liegt ueber der Buehne, faengt keine Klicks. */ .gewinn-burst { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; animation: burst-weg .5s var(--ease-out) 1.55s both; } @keyframes burst-weg { to { opacity: 0 } } .gewinn-burst__strahlen { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(245,196,106,.16) 0 7deg, transparent 7deg 20deg); -webkit-mask: radial-gradient(circle, #000 0, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 0, #000 30%, transparent 70%); animation: strahlen-dreh 3s linear infinite, strahlen-auf .5s var(--ease-out) both; } @keyframes strahlen-dreh { to { transform: rotate(360deg) } } @keyframes strahlen-auf { from { opacity: 0; scale: .4 } to { opacity: 1; scale: 1 } } .gewinn-burst__karte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 26px; border-radius: var(--r-lg); background: rgba(13,14,17,.82); border: 1px solid rgba(245,196,106,.4); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 20px 60px -14px rgba(245,196,106,.55); backdrop-filter: blur(8px); animation: burst-karte .55s var(--ease-spring) both; } @keyframes burst-karte { from { opacity: 0; transform: scale(.6) translateY(16px) } to { opacity: 1; transform: none } } .gewinn-burst__mult { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) } .gewinn-burst__betrag { font: 800 clamp(1.5rem, 4vw, 2.3rem)/1.1 var(--font-disp); letter-spacing: -.02em; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(245,196,106,.45); } .gewinn-burst__einheit { font: var(--t-klein); color: var(--muted) } .gewinn-burst--gross .gewinn-burst__strahlen { width: 620px; height: 620px } .gewinn-burst--gross .gewinn-burst__betrag { font-size: clamp(1.9rem, 5vw, 3rem) } /* ═══ SPIELE ════════════════════════════════════════════════════════════════ */ /* Coinflip: die Muenze steigt und faellt, waehrend sie sich dreht. Die Drehung liegt als transform auf der Muenze — deshalb hier `translate` und `scale` als eigene Eigenschaften auf dem Rahmen darum. Darunter ein Schatten, der sich zusammenzieht, wenn die Muenze oben ist. */ .cf-buehne { position: relative } .cf-buehne::after { content: ''; position: absolute; left: 50%; bottom: -14px; width: 110px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); transform: translateX(-50%); pointer-events: none; } .cf-buehne.cf-flug { animation: cf-flug 1.75s cubic-bezier(.2,.7,.2,1) both } .cf-buehne.cf-flug::after { animation: cf-flug-schatten 1.75s cubic-bezier(.2,.7,.2,1) both } @keyframes cf-flug { 0% { translate: 0 0; scale: 1 } 38% { translate: 0 -52px; scale: 1.1 } 100% { translate: 0 0; scale: 1 } } @keyframes cf-flug-schatten { 0% { transform: translateX(-50%) scale(1); opacity: 1 } 38% { transform: translateX(-50%) scale(.55); opacity: .5 } 100% { transform: translateX(-50%) scale(1); opacity: 1 } } /* Wuerfel: taumelt in drei Achsen statt nur zu wackeln, die Augen verschwimmen dabei. Der Wuerfel bleibt ein Quadrat — echte 3D waere ein Umbau des Markups; das Taumeln ueber rotate3d gibt den Eindruck trotzdem. */ .die.rolling { animation: wuerfel-taumeln .55s cubic-bezier(.4,.1,.6,.9) infinite } .die.rolling .die-face { filter: blur(1.2px); color: var(--faint) } @keyframes wuerfel-taumeln { 0% { transform: translateY(0) rotate3d(1, 1, 0, 0deg) } 25% { transform: translateY(-16px) rotate3d(1, .4, .2, 95deg) } 50% { transform: translateY(-6px) rotate3d(.3, 1, .1, 190deg) } 75% { transform: translateY(-14px) rotate3d(1, .8, .3, 275deg) } 100% { transform: translateY(0) rotate3d(1, 1, 0, 360deg) } } .die.settling { animation: wuerfel-landen .5s var(--ease-spring) both } @keyframes wuerfel-landen { 0% { transform: translateY(-22px) rotate(-10deg) scale(1.08) } 55% { transform: translateY(2px) rotate(2deg) scale(.97) } 100% { transform: none } } /* Slots: Walzen verschwimmen beim Drehen, das Anhalten federt staerker. */ .reel.spinning .reel-symbol { animation: walze-dreh .13s linear infinite; filter: blur(2.2px) } @keyframes walze-dreh { 0% { transform: translateY(-110%); opacity: .3 } 50% { opacity: 1 } 100% { transform: translateY(110%); opacity: .3 } } .reel.stopping .reel-symbol { animation: walze-stopp .55s var(--ease-spring) both; animation-delay: var(--stop-delay, 0ms); filter: none } @keyframes walze-stopp { 0% { transform: translateY(-80%); opacity: .2; filter: blur(2px) } 60% { transform: translateY(9%); opacity: 1; filter: blur(0) } 80% { transform: translateY(-4%) } 100% { transform: translateY(0) } } /* Crash: die Zahl atmet, solange die Runde laeuft, und zuckt beim Absturz. */ .crash-zahl:not(.crash-zahl--warten):not(.crash-zahl--crash) { animation: crash-atmen 1.1s var(--ease-in-out) infinite alternate } @keyframes crash-atmen { from { scale: 1 } to { scale: 1.035 } } .crash-zahl--crash { animation: crash-zucken .45s var(--ease-out) both } @keyframes crash-zucken { 0% { transform: translate(0,0) scale(1.12) } 20% { transform: translate(-5px, 2px) } 40% { transform: translate(5px, -2px) } 60% { transform: translate(-3px, 1px) } 80% { transform: translate(2px, -1px) } 100% { transform: none; scale: 1 } } /* Limbo: die Zahl springt beim Gewinn einmal an. */ .limbo-zahl--sieg { animation: zahl-pop .5s var(--ease-spring) both } @keyframes zahl-pop { 0% { scale: 1 } 45% { scale: 1.14 } 100% { scale: 1 } } /* Mines/Tower: aufgedeckte Edelsteine leuchten kurz nach. */ .mine-cell.gem, .tower-cell.revealed.safe { animation: cell-flip .38s var(--ease-spring) both, feld-leuchten 1.2s var(--ease-out) .3s both } @keyframes feld-leuchten { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5), 0 0 18px rgba(52,211,153,.4) } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0), 0 0 0 rgba(52,211,153,0) } } /* Roulette: das Rad bekommt einen Schein, waehrend es sich dreht. */ .rl-rad { filter: drop-shadow(0 12px 28px rgba(0,0,0,.6)) } /* ═══ ANMELDUNG ═════════════════════════════════════════════════════════════ Ein wandernder Lichtsaum um die Karte — ein Element, ein Verlauf. */ .anmelde-karte::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: conic-gradient(from 0deg, transparent 0 60%, rgba(124,92,255,.7) 75%, rgba(245,196,106,.7) 85%, transparent 100%); animation: saum 7s linear infinite; opacity: .8; } /* v3.65: Frueher drehte sich der Winkel des Verlaufs ueber eine animierte Custom Property (--saum) – das erzwingt jedes Bild eine Stil-Neuberechnung und ein Neumalen. Jetzt dreht sich eine grosse Flaeche mit festem Verlauf per transform (Compositor). Sie ist dreimal so gross wie die Karte, damit beim Drehen keine Ecke frei wird; die Karte (overflow: hidden) schneidet sie wie vorher auf ihre Form zu. Ein Kegelverlauf misst echte Winkel, das Bild ist also dasselbe wie beim gedrehten Startwinkel. */ .anmelde-karte::before { inset: -100%; border-radius: 0 } @keyframes saum { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .anmelde-karte { isolation: auto } /* ═══ LIVE-SPALTE ═══════════════════════════════════════════════════════════ */ .live-item--neu { animation: live-neu .6s var(--ease-spring) both } @keyframes live-neu { from { opacity: 0; transform: translateX(16px) scale(.97); background: rgba(245,196,106,.12) } to { opacity: 1; transform: none } } /* ═══ FOKUS ═════════════════════════════════════════════════════════════════ */ .tile:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(var(--tone-rgb), .18) } /* ═══ WER KEINE BEWEGUNG WILL ═══════════════════════════════════════════════ Alles Neue steht still: kein Schweben, kein Auftakt, kein Kippen. Der globale Schalter des Grundsystems (animation-duration .01ms) gilt ausserdem weiter. */ @media (prefers-reduced-motion: reduce) { body::before, .hero__stueck img, .hero__punkt, .hero__punkt::after, .anmelde-karte::before, .gewinn-burst__strahlen, .crash-zahl { animation: none !important } #splash { display: none } html.auftakt #topbar, html.auftakt #sidebar, html.auftakt #content, html.auftakt #live-rail { animation: none } html.js .erscheint { opacity: 1; transform: none; transition: none } .tile:hover { transform: translateY(-3px) } .hero__stueck, .hero__truhe { transition: none } } /* ═══════════════════════════════════════════════════════════════════════════ v3.50 „Arcade“ — Rahmen wie DonutFlip/DonutDrop ─────────────────────────────────────────────────────────────────────────── Chat und Rain links, Inhalt rechts, Navigation als „Games“-Menue in der Kopfleiste. Das Markup bleibt: #sidebar wird zum Aufklappmenue, #live-rail wandert per Grid-Platzierung nach links. motion.js setzt die Knoepfe in die Leiste und schaltet das Menue. Unter 881 px gilt weiter die Handy-Leiste unten (Grundsystem), darum alles hier ab 881 px. ═══════════════════════════════════════════════════════════════════════════ */ :root { --play: #2fcc6f; /* Handlung: Play, Deposit, Sign in — wie DonutFlip */ --play-2: #4ee08a; --play-ink: #7cf2ac; /* als Text: 10:1 auf dem Grund */ --play-dim: rgba(47,204,111,.14); --play-glow: rgba(47,204,111,.35); } .btn-play, .btn-success, .topbar-anmelden.btn-primary, .wallet-pill__add { color: #05210f; background: linear-gradient(180deg, var(--play-2), var(--play) 62%, #22a85a); border-color: rgba(255,255,255,.2); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 8px -2px var(--play-glow); } .btn-play:hover:not(:disabled), .topbar-anmelden.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 20px -4px var(--play-glow), 0 0 0 1px rgba(78,224,138,.35); filter: brightness(1.04); } .btn-play { min-height: 48px } .btn-play:disabled { filter: grayscale(.5); opacity: .5 } /* Hintergrund: Voxel-Landschaft, fixiert, unten in den Grund verlaufend. */ body { background: linear-gradient(180deg, rgba(15,18,22,.55) 0%, rgba(15,18,22,.78) 45%, var(--ink-950) 100%), url('/img/motive/landschaft.svg') center top / cover no-repeat fixed, var(--ink-950); /* v3.65: Dieselbe Landschaft als fertiges Rasterbild (WebP, 2560×1440, 45 KB). Das SVG hat tausende Pfade und wurde bei jedem Laden und jeder Groessenaenderung neu gerastert. Wer image-set mit type() nicht kennt, verwirft diese Zeile und behaelt die obere mit dem SVG. */ background: linear-gradient(180deg, rgba(15,18,22,.55) 0%, rgba(15,18,22,.78) 45%, var(--ink-950) 100%), image-set(url('/img/motive/landschaft.webp') type('image/webp'), url('/img/motive/landschaft.svg') type('image/svg+xml')) center top / cover no-repeat fixed, var(--ink-950); } #app { position: relative } #topbar { background: rgba(15,18,22,.86) } #content { background: transparent } @media (min-width: 881px) { /* Zwei Spalten: links Chat/Rain, rechts Inhalt. */ #app { grid-template-columns: 300px minmax(0, 1fr) } #live-rail { grid-column: 1; grid-row: 2; border-left: 0; border-right: 1px solid var(--line); background: rgba(15,18,22,.72) } #content { grid-column: 2; grid-row: 2 } #sidebar { position: absolute; top: 64px; left: 96px; z-index: 30; width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(20,24,29,.98); box-shadow: var(--sh-4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s; overflow: visible; } #sidebar.open { opacity: 1; visibility: visible; transform: none } /* Der Auftakt (html.auftakt) fuellt die Leiste mit `both` auf opacity 1 — das wuerde das zugeklappte Menue sichtbar machen. */ html.auftakt #sidebar { animation: none } #sidebar .nav-section { grid-column: 1 / -1; padding-top: var(--s3) } #sidebar > .nav-section:first-child { padding-top: var(--s1) } /* Ohne !important: das Inline-`display:none` fuer Nicht-Admins muss gewinnen. */ #sidebar #admin-nav { grid-column: 1 / -1 } .nav-btn { min-height: 38px } .nav-btn.active::before { display: none } } @media (min-width: 881px) and (max-width: 1360px) { /* Schmal: die Spalte faehrt von links herein (Grundsystem: von rechts). */ #app { grid-template-columns: minmax(0, 1fr) } #content { grid-column: 1 } #live-rail { left: 0; right: auto; border-right: 1px solid var(--line-2); border-left: 0; transform: translateX(-100%); box-shadow: 12px 0 48px -18px rgba(0,0,0,.9) } #live-rail.open { transform: none } } /* Kopfleiste: Navigation zwischen Marke und rechter Seite. */ .top-nav { display: flex; align-items: center; gap: 4px; margin-left: var(--s3) } .top-nav__knopf { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 600 .84rem/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background .18s, color .18s, border-color .18s; } .top-nav__knopf:hover, .top-nav__knopf[aria-expanded="true"] { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--line) } .top-nav__knopf .ico { width: 16px; height: 16px; color: var(--accent-ink) } .top-nav__knopf img { width: 22px; height: 22px } .top-nav__pfeil { width: 12px; height: 12px; transition: transform .18s } .top-nav__knopf[aria-expanded="true"] .top-nav__pfeil { transform: rotate(180deg) } .top-nav__race { border-color: rgba(245,196,106,.3); background: rgba(245,196,106,.08); color: var(--gold) } .top-nav__race b { font-family: var(--font-num); font-variant-numeric: tabular-nums } #topbar .btn-deposit { min-height: 36px } body.gast #topbar .btn-deposit { display: none } @media (max-width: 880px) { .top-nav { display: none } } @media (max-width: 1100px) { .top-nav__knopf span.text { display: none } } /* Chat-Spalte: Reiter „Chat“ zuerst, wie bei beiden Vorbildern. */ .rail-tab[data-rt="chat"] { order: -1 } .rail-tabs { padding: var(--s2) var(--s3) 0 } .rail-tab { font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } /* Startseite: Karten wie DonutFlip (Play & Win + drei hohe Kacheln). */ .promo-row--buehne { grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, .55fr)) } .hero { min-height: 250px } .hero__karten { display: contents } .promo--hoch { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 250px; padding: var(--s4); overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .25s var(--ease-out), border-color .25s; } .promo--hoch:hover { transform: translateY(-3px); border-color: rgba(var(--tone-rgb, 124,92,255), .5) } .promo--hoch .chip { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(var(--tone-rgb, 124,92,255), .18); border-color: rgba(var(--tone-rgb, 124,92,255), .4); color: var(--text) } .promo--hoch img { position: absolute; right: -10%; top: 6%; width: 78%; height: auto; z-index: 0; transition: transform .4s var(--ease-out) } .promo--hoch:hover img { transform: translateY(-6px) scale(1.04) rotate(-2deg) } .promo--hoch::after { content: ''; position: absolute; inset: 40% 0 0; z-index: 0; background: linear-gradient(0deg, rgba(20,24,29,.95), rgba(20,24,29,0)) } .promo--hoch b { position: relative; z-index: 1; font: var(--t-kachel); letter-spacing: var(--ls-titel); text-transform: uppercase } .promo--hoch small { position: relative; z-index: 1; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) } .promo--hoch[data-tone="gold"] { --tone-rgb: 245,196,106 } .promo--hoch[data-tone="green"] { --tone-rgb: 47,204,111 } .promo--hoch[data-tone="blue"] { --tone-rgb: 88,101,242 } @media (max-width: 1100px) { .promo-row--buehne { grid-template-columns: 1fr 1fr 1fr } .hero { grid-column: 1 / -1 } } @media (max-width: 560px) { .promo-row--buehne { grid-template-columns: 1fr } } /* Gast/Konto-Umschaltung fuer die Startkarte (v3.50) */ body:not(.gast) .nur-gast, body.gast .nur-konto { display: none !important } /* Ab 1200 px steht die Startkarte neben den drei Kacheln — das Grundsystem zieht sie zwischen 1361 und 1760 px auf die ganze Breite (Chat-Spalte). */ @media (min-width: 1200px) { .promo-row--buehne .hero.promo--main { grid-column: auto; min-height: 250px } } /* Deposit in der Leiste: spiele.css macht .btn-play seitenbreit — hier nicht. */ #topbar .btn-deposit { width: auto; flex: 0 0 auto; min-height: 36px; padding: 8px 14px } /* Kacheln neben der Startkarte: feste Hoehe, oben ausgerichtet — die Karte darf hoeher sein, die Kacheln bleiben Kacheln. */ @media (min-width: 1200px) { .promo-row--buehne { align-items: start } .promo--hoch { height: 250px; min-height: 0 } } @media (max-width: 880px) { #topbar .btn-deposit { display: none } } /* Schmale Handys: die Leiste war 23 px zu breit (Pille + Kassenwahl + Konto). */ @media (max-width: 480px) { #topbar { gap: 6px; padding: 0 10px } .topbar-logo { font-size: .92rem } .rank-chip { display: none } #username-display { display: none } } /* ═══ v3.52 — Rewards, Promo codes, „Play for free“, Highlights ═══════════ */ .rw-kopf { margin-bottom: var(--s4) } .rw-unter { margin: -6px 0 0; font: var(--t-text); color: var(--muted); max-width: 70ch } .panels--rewards { grid-template-columns: 1fr 1fr } .rw-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3) } .rw-karte { position: relative; overflow: hidden; padding-right: 120px; min-height: 170px } .rw-karte__bild { position: absolute; right: -6px; top: 10px; width: 118px; height: 118px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)) } .rw-karte__text { font: var(--t-text); color: var(--muted); margin: 0 0 10px } .rw-karte .promo-form { max-width: 360px } @media (max-width: 560px) { .rw-karte { padding-right: var(--s4) } .rw-karte__bild { display: none } .panels--rewards { grid-template-columns: 1fr } } .pc-buehne { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(110% 130% at 6% 0%, rgba(47,204,111,.14), transparent 58%), var(--ink-800) } .pc-bild { width: 200px; height: 200px; filter: drop-shadow(0 16px 28px rgba(0,0,0,.55)); animation: schweben 6s var(--ease-in-out) infinite alternate } .pc-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 6px } .pc-feld { min-height: 52px; font: var(--t-zahl); letter-spacing: .1em; font-variant-numeric: tabular-nums } .pc-form .btn-play { min-height: 52px; padding: 0 26px } @media (max-width: 720px) { .pc-buehne { grid-template-columns: 1fr; text-align: center } .pc-bild { margin: 0 auto; width: 140px; height: 140px } } .frei { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s5) } .frei__karte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .2s var(--ease-out), border-color .2s } .frei__karte:hover { transform: translateY(-2px); border-color: rgba(var(--tone-rgb, 124,92,255), .5) } .frei__karte img { width: 56px; height: 56px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) } .frei__karte b { display: block; font: var(--t-karte) } .frei__karte small { display: block; font: var(--t-klein); color: var(--muted); margin-top: 2px } .frei__karte[data-tone="green"] { --tone-rgb: 47,204,111 } .frei__karte[data-tone="gold"] { --tone-rgb: 245,196,106 } .frei__karte[data-tone="violet"] { --tone-rgb: 124,92,255 } .frei__karte[data-tone="blue"] { --tone-rgb: 88,101,242 } @media (max-width: 1100px) { .frei { grid-template-columns: 1fr 1fr } } @media (max-width: 560px) { .frei { grid-template-columns: 1fr } } .highlights { margin-bottom: var(--s5) } /* v3.52 Handy: auf der Rewards-Seite hat der Tagesbonus jetzt die volle Breite — die sieben Tage passen auf 375 px nicht nebeneinander, also zwei Reihen (4 + 3) und das Bild weicht in die Ecke statt Platz zu fressen. */ @media (max-width: 600px) { .panels--rewards .panel--daily .panel__body, .panels--rewards .panel--rank .panel__body { padding-right: 0 } .panels--rewards .panel--daily .streak-kopf { padding-right: 0 } .panels--rewards .streak { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px } .panels--rewards .streak-tag { min-height: 46px } .panels--rewards .panel__bild { width: 84px; height: 84px; top: 10px; right: 10px; opacity: .55 } .panels--rewards .panel__title { padding-right: 90px } } /* ═══ DISCORD-SEITE (v3.75) ═════════════════════════════════════════════════ „Discord Rewards" wie beim Vorbild DonutFlip: Kopf mit Einladung, gruen getoente Buehne mit dem Belohnungsfeld rechts, zwei Schritt-Karten, eine Leiste fuer Schritt 3 und ein Aufklapper fuer Weiteres. Gruen heisst wie ueberall „Handlung / Geld"; Discord-Blau nur dort, wo es um Discord selbst geht (Verknuepfen-Knopf, gezeichnetes Profil). Bewegung nur auf transform und opacity (Leistungsregel oben). */ :root { --discord: #5865f2; --discord-2: #7983f5; --discord-dim: rgba(88,101,242,.16); } .dc-kopf { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4) } .dc-kopf .page-title { flex: 1; min-width: 0; margin-bottom: 0 } .dc-kopf__link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 0; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; color: var(--play-ink); text-decoration: none; transition: color .16s; } .dc-kopf__link:hover { color: var(--text) } .dc-kopf__link .ico { width: 14px; height: 14px } /* v3.76: „Copy link" ist ein Knopf im Look der Kopf-Links – leiser als „Join our Discord", damit der Beitritt die Hauptsache bleibt. */ .dc-kopf__teilen { margin: 0; border: 0; background: none; color: var(--muted); cursor: pointer } .dc-kopf__teilen:hover { color: var(--text) } .dc-kopf__teilen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px } /* Buehne: links die Einladung, rechts das Feld mit dem einen Knopf. */ .dc-held { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .9fr); gap: var(--s7); align-items: center; padding: var(--s7); margin-bottom: var(--s4); border: 1px solid rgba(47,204,111,.28); border-radius: var(--r-xl); background: radial-gradient(90% 140% at 0% 0%, rgba(47,204,111,.13), transparent 60%), linear-gradient(180deg, rgba(47,204,111,.05), rgba(47,204,111,.015)), var(--ink-850); box-shadow: var(--sh-3); } .dc-held__text { min-width: 0 } .dc-pille { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(47,204,111,.3); border-radius: var(--r-sm); background: var(--play-dim); color: var(--play-ink); font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; font-variant-numeric: tabular-nums; } .dc-pille .ico { width: 13px; height: 13px } /* Schlagzeile: eine der bewussten Ausnahmen in der Groesse (wie die Banner), Gewicht, Versalien und Laufweite aus der Titel-Rolle. */ .dc-held__titel { margin: var(--s4) 0 var(--s3); font: var(--t-titel); font-size: clamp(1.3rem, .9rem + 1vw, 1.75rem); letter-spacing: var(--ls-titel); text-transform: uppercase; color: var(--text); text-wrap: balance; } .dc-held__titel em { font-style: normal; color: var(--play-ink); font-variant-numeric: tabular-nums } .dc-held__unter { margin: 0 0 var(--s4); max-width: 58ch; font: var(--t-text); color: var(--muted) } .dc-held__haken { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: var(--t-klein); color: var(--text-2) } .dc-held__haken .ico { width: 14px; height: 14px; color: var(--play-ink) } .dc-belohnung { position: relative; display: grid; gap: var(--s3); min-width: 0; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(15,18,22,.78); } /* Ring um das Feld: „Get my reward" zeigt hierher, nach dem Abholen blitzt er einmal auf. Ein eigenes Element mit opacity – kein Layout, kein Umfaerben. */ .dc-belohnung::after { content: ''; position: absolute; inset: -1px; border: 2px solid var(--play); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out); } .dc-belohnung--zeigen::after { opacity: 1 } .dc-belohnung--geholt::after { animation: dc-geholt 1.2s var(--ease-out) } @keyframes dc-geholt { 0% { opacity: 0 } 25% { opacity: 1 } 100% { opacity: 0 } } .dc-belohnung__etikett { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--play-ink) } .dc-belohnung__betrag { display: flex; align-items: baseline; gap: 8px } .dc-belohnung__betrag b { font: var(--t-zahl-gross); font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--text) } .dc-belohnung__betrag span { font: var(--t-klein); color: var(--muted) } .dc-belohnung__status { margin: 0; min-height: 3em; font: var(--t-text); color: var(--text-2) } .dc-belohnung__status[data-art="gut"] { color: var(--play-ink) } .dc-belohnung__status[data-art="warten"] { color: var(--gold) } .dc-belohnung__hinweis { margin: 0; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgba(255,255,255,.03); font: var(--t-klein); color: var(--text-2) } .dc-aktion { min-height: 48px } .dc-aktion span { min-width: 0; overflow: hidden; text-overflow: ellipsis } /* Abgeholt (Uhr) und pausiert: kein ausgegrauter Knopf, der kaputt wirkt, sondern eine ruhige gruene Flaeche – hier ist nichts falsch, nur Warten. Mit #page-discord davor, weil spiele.css spaeter laedt und gesperrte Play-Knoepfe halb durchsichtig macht und endlos pulsen laesst (::before) – 24 Stunden Puls fuer eine Uhr waeren nur Last. */ #page-discord .dc-aktion[data-zustand="abgeholt"]:disabled::before, #page-discord .dc-aktion[data-zustand="aus"]:disabled::before { content: none } #page-discord .dc-aktion[data-zustand="abgeholt"]:disabled, #page-discord .dc-aktion[data-zustand="aus"]:disabled { opacity: 1; filter: none; cursor: default; color: var(--play-ink); background: var(--play-dim); border-color: rgba(47,204,111,.3); box-shadow: none; font-variant-numeric: tabular-nums; } /* Zwei Schritt-Karten nebeneinander, gleich hoch; der Fuss sitzt unten. */ .dc-schritte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4) } .dc-schritt { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; padding: var(--s6); border-radius: var(--r-lg); container-type: inline-size } .dc-schritt__kopf { display: flex; align-items: center; gap: 12px } .dc-schritt__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(47,204,111,.22); border-radius: 10px; background: var(--play-dim); color: var(--play-ink); } .dc-schritt__ico .ico { width: 18px; height: 18px } .dc-schritt__kopftext { flex: 1; min-width: 0 } .dc-schritt__nr { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--play-ink) } .dc-schritt__titel { margin: 5px 0 0; font: var(--t-karte); color: var(--text) } .dc-schritt__stand { flex-shrink: 0; padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--muted); font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; } .dc-schritt__stand[data-art="gut"] { border-color: rgba(47,204,111,.35); background: var(--play-dim); color: var(--play-ink) } .dc-schritt__stand[data-art="warten"] { border-color: rgba(243,193,95,.35); background: rgba(243,193,95,.1); color: var(--gold) } .dc-schritt__text { margin: 0; font: var(--t-text); color: var(--muted) } .dc-schritt__klein { margin: 0; font: var(--t-klein); color: var(--muted) } .dc-knopf-discord { min-height: 46px; padding: 0 32px; color: #fff; background: linear-gradient(180deg, var(--discord-2), var(--discord) 60%, #4752c4); border-color: rgba(255,255,255,.18); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 4px 14px -6px rgba(88,101,242,.7); } .dc-knopf-discord:hover { transform: translateY(-1px); filter: brightness(1.06) } .dc-knopf-discord .ico { width: 18px; height: 18px } .dc-verknuepft { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 11px 16px; border: 1px solid rgba(47,204,111,.35); border-radius: var(--r-sm); background: var(--play-dim); color: var(--play-ink); font: var(--t-zeile); } /* Gekuerzt wird der Span (das Flex-Kind), nicht das darin: ein Inline-Element kuerzt nichts, und ein Flex-Kind mit min-width:auto schrumpft nicht unter die Breite des Namens – ein 32-Zeichen-Name schob sonst Haken und Namen auf dem Handy aus dem Bild. */ .dc-verknuepft > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .dc-verknuepft b { color: var(--text) } /* Platzhalter, solange die Seite nicht weiss, wer hier ist (kein Ziel). */ .dc-knopf-discord[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none } .dc-verknuepft .ico { width: 16px; height: 16px; flex-shrink: 0 } /* Schritt 2: gezeichnetes Discord-Profil mit dem Tag, daneben drei Schritte. */ .dc-anleitung { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(15,18,22,.55); } .dc-mock { position: relative; min-width: 0; padding-bottom: 4px } .dc-mock__profil { overflow: hidden; border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-750) } .dc-mock__banner { height: 52px; background: linear-gradient(120deg, var(--discord) 0%, #7c5cff 55%, var(--play) 135%) } .dc-mock__avatar { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 14px; border: 5px solid var(--ink-750); border-radius: 50%; background: linear-gradient(135deg, var(--gold), #e0873a); color: #1b1305; font: 800 1.15rem/1 var(--font-disp); } .dc-mock__avatar i { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border: 3px solid var(--ink-750); border-radius: 50%; background: var(--play) } .dc-mock__karte { padding: 8px 14px 30px } .dc-mock__name { display: flex; align-items: center; gap: 8px; min-width: 0 } .dc-mock__nametext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-karte); color: var(--text) } .dc-mock__user { margin-top: 4px; font: var(--t-klein); color: var(--muted) } .dc-mock__zeilen { display: grid; gap: 6px; margin-top: 12px } .dc-mock__zeilen i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.06) } .dc-mock__zeilen i:first-child { width: 82% } .dc-mock__zeilen i:last-child { width: 56% } /* Der Tag wie bei Discord: kleines Abzeichen plus bis zu vier Zeichen. */ .dc-tagchip { position: relative; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(255,255,255,.08); color: var(--text); font: 700 .7rem/1.1 var(--font-ui); letter-spacing: .03em; white-space: nowrap; } .dc-tagchip img, .dc-tagchip__ico { width: 14px; height: 14px; flex-shrink: 0 } .dc-tagchip__ico { color: var(--play-ink) } .dc-tagchip [hidden] { display: none } /* Der Tag im Profil pulsiert leise – ein Ring auf opacity und transform. */ .dc-tagchip--leuchtet::after { content: ''; position: absolute; inset: -4px; border: 2px solid var(--play); border-radius: 9px; opacity: 0; pointer-events: none; animation: dc-ring 2.6s var(--ease-out) infinite; } @keyframes dc-ring { 0% { opacity: .75; transform: scale(.94) } 70%, 100% { opacity: 0; transform: scale(1.12) } } .dc-mock__pop { position: relative; width: max-content; max-width: 94%; margin: -24px 8px 0 auto; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-800); box-shadow: var(--sh-4); } .dc-mock__pop-etikett { margin-bottom: 7px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .dc-mock__pop-zeile { display: flex; align-items: center; gap: 8px } /* „Apply to profile" gehoert zur Zeichnung, ist kein Knopf: in Knopf-Typo und sattem Blau las er sich als staerkster Knopf von Schritt 2, tat aber nichts. Satzschreibung und gedaempftes Blau; sattes Discord-Blau hat nur der echte Verknuepfen-Knopf. */ .dc-mock__pop-knopf { padding: 5px 9px; border: 1px solid rgba(88,101,242,.4); border-radius: 5px; background: var(--discord-dim); color: var(--discord-2); white-space: nowrap; font: var(--t-klein); font-weight: 600; line-height: 1; cursor: default; pointer-events: none; user-select: none; } .dc-liste { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; min-width: 0 } .dc-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start } .dc-liste__nr { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(47,204,111,.3); border-radius: 50%; background: var(--play-dim); color: var(--play-ink); font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; } .dc-liste b { display: block; font: var(--t-zeile); color: var(--text) } .dc-liste small { display: block; margin-top: 2px; font: var(--t-klein); color: var(--muted) } .dc-schritt__fuss { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); margin-top: auto } .dc-pruefen .ico { width: 14px; height: 14px } .dc-pruefen--laeuft .ico { animation: dc-dreh .8s linear infinite } @keyframes dc-dreh { to { transform: rotate(360deg) } } .dc-textlink { display: inline-flex; align-items: center; gap: 5px; color: var(--play-ink); text-decoration: none; transition: color .16s; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; } .dc-textlink:hover { color: var(--text) } .dc-textlink .ico { width: 13px; height: 13px } /* Schritt 3 als Leiste, wie beim Vorbild. */ .dc-schritt3 { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) var(--s6); margin-bottom: var(--s4); border-radius: var(--r-lg) } .dc-schritt3__text { display: grid; gap: 3px; flex: 1; min-width: 0 } .dc-schritt3__text b { font: var(--t-karte); color: var(--text) } .dc-schritt3__text span { font: var(--t-klein); color: var(--muted) } .dc-schritt3__knopf { flex-shrink: 0 } .dc-schritt3__knopf .ico { width: 14px; height: 14px } /* Aufklapper „Optional bonuses & account settings". */ .dc-mehr { padding: 0; border-radius: var(--r-lg) } .dc-mehr__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s6); cursor: pointer; list-style: none; color: var(--text-2); font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; } .dc-mehr__kopf::-webkit-details-marker { display: none } .dc-mehr__kopf:hover { color: var(--text) } .dc-mehr__pfeil { color: var(--muted); transform: rotate(90deg); transition: transform .2s var(--ease-out) } .dc-mehr[open] .dc-mehr__pfeil { transform: rotate(-90deg) } .dc-mehr__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: 0 var(--s6) var(--s6) } .dc-mehr__punkt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.025); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s, background .18s; } .dc-mehr__punkt:hover { border-color: rgba(47,204,111,.35); background: rgba(47,204,111,.05) } .dc-mehr__punkt--info, .dc-mehr__punkt--info:hover { cursor: default; border-color: var(--line); background: rgba(255,255,255,.025) } .dc-mehr__ico { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--play-ink) } .dc-mehr__text { flex: 1; min-width: 0 } .dc-mehr__text b { display: block; font: var(--t-zeile); color: var(--text) } .dc-mehr__text small { display: block; margin-top: 2px; font: var(--t-klein); color: var(--muted) } .dc-mehr__weiter { flex-shrink: 0; color: var(--faint) } /* Admin → Bots → Discord-Karte: Block fuer die Tag-Belohnung. */ .dc-admin { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) } .dc-admin__titel { font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; color: var(--text-2) } .dc-admin__text { margin: 0; font: var(--t-klein); color: var(--muted) } .dc-admin__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end } .dc-admin__stand { font: var(--t-klein); color: var(--muted) } .dc-admin .btn { justify-self: start } /* v3.76: Link-Nachricht und Einladung. Kanalauswahl und Knopf in einer Zeile – die Auswahl nimmt den Platz, der Knopf behaelt seine Breite. Zustandszeilen in den Farben der Discord-Seite (gut/warten), Fehler rot. */ .dc-admin__zeile { display: flex; align-items: center; gap: 8px; min-width: 0 } .dc-admin__zeile .input { flex: 1 1 auto; min-width: 0 } .dc-admin__zeile .btn { flex: 0 0 auto; justify-self: auto } .dc-admin__stand[data-art="gut"] { color: var(--play-ink) } .dc-admin__stand[data-art="warten"] { color: var(--gold) } .dc-admin__stand[data-art="fehler"] { color: var(--red-ink) } .dc-admin__rechte { margin: -4px 0 10px } .dc-admin__link { color: var(--accent-ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere } .dc-admin__link:hover { text-decoration: underline } /* v3.77: Discord companion (Admin → Bots). Links die Schalter, rechts die Vorschau: Discord-Karten aus Beispielen, die der Server mit denselben Bausteinen baut wie die echten Nachrichten – gepostet wird dabei nichts. Die Discord-Farben stehen als eigene Tokens an .dcb-discord (nur dort soll es wie Discord aussehen); die Schrift bleibt Inter mit den --t-*-Rollen. Das Raster bricht ohne Media-Query um (auto-fit), sobald die Karte schmal wird. */ .dcb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px } .dcb-kopf .card-title { margin: 0 } .dcb-pille { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; white-space: nowrap } .dcb-pille::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor } .dcb-pille[data-art="gut"] { color: var(--play-ink); border-color: rgba(47,204,111,.35) } .dcb-pille[data-art="warten"] { color: var(--gold); border-color: rgba(243,193,95,.35) } .dcb-stand { display: grid; gap: 5px; margin: 10px 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.025) } .dcb-stand__zeile { display: flex; align-items: baseline; gap: 10px; min-width: 0; font: var(--t-klein); color: var(--text-2) } .dcb-stand__zeile b { flex: 0 0 76px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .dcb-stand__zeile span { min-width: 0; overflow-wrap: anywhere } .dcb-stand__zeile[data-art="gut"] span { color: var(--play-ink) } .dcb-stand__zeile[data-art="warten"] span { color: var(--gold) } .dcb-stand__zeile[data-art="fehler"] span { color: var(--red-ink) } .dcb-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px 28px; align-items: start } .dcb-spalte { display: grid; gap: 12px; min-width: 0 } .dcb-spalte > .btn { justify-self: start } .dcb-block { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line) } .dcb-block .dc-admin__zeile .btn { flex: 0 0 auto } .dcb-befehle { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none } .dcb-befehle li { padding: 4px 9px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); color: var(--text-2); font: var(--t-zahl-klein); cursor: help } .dcb-befehle[data-aus="1"] li { opacity: .5 } .dcb-ereignisse { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px } .dcb-ereignis { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .15s, background .15s, opacity .15s } .dcb-ereignis:hover { border-color: var(--line-2) } .dcb-ereignis:has(input:checked) { border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.07) } .dcb-ereignis input { margin: 2px 0 0; accent-color: var(--accent) } .dcb-ereignis span { display: grid; gap: 2px; min-width: 0 } .dcb-ereignis b { font: var(--t-zeile); color: var(--text) } .dcb-ereignis small { font: var(--t-klein); color: var(--muted) } .dcb-ereignisse[data-aus="1"] .dcb-ereignis { opacity: .55 } .dcb-reiter { display: flex; flex-wrap: wrap; gap: 6px } .dcb-reiter button { min-height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s, border-color .15s } .dcb-reiter button:hover { color: var(--text); border-color: var(--line-2) } .dcb-reiter button[aria-selected="true"] { background: var(--accent-dim); border-color: transparent; color: var(--accent-ink) } .dcb-reiter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } .dcb-discord { --dcb-grund: #313338; --dcb-karte: #2b2d31; --dcb-text: #dbdee1; --dcb-hell: #f2f3f5; --dcb-leise: #949ba4; --dcb-link: #00a8fc; --dcb-code: #1e1f22; --dcb-knopf: #4e5058; --dcb-app: #5865f2; --dcb-rand: #7c5cff; min-height: 240px; padding: 16px 16px 18px; border-radius: var(--r-md); background: var(--dcb-grund); color: var(--dcb-text); overflow: hidden; } .dcb-aufruf { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 6px 52px; font: var(--t-klein); color: var(--dcb-leise) } .dcb-aufruf b { color: var(--dcb-hell); font-weight: 600 } .dcb-aufruf .dcb-befehl { color: var(--dcb-link) } .dcb-zeile { display: flex; gap: 12px; min-width: 0 } .dcb-bild { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--gold)); color: #14100a } .dcb-bild .ico { width: 22px; height: 22px } .dcb-inhalt { display: grid; gap: 6px; flex: 1; min-width: 0 } .dcb-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px } .dcb-name b { font: var(--t-zeile); color: var(--dcb-hell) } .dcb-app { padding: 2px 5px; border-radius: 4px; background: var(--dcb-app); color: #fff; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase } .dcb-name time { font: var(--t-klein); color: var(--dcb-leise) } .dcb-text { font: var(--t-text); color: var(--dcb-text) } .dcb-embed { display: grid; gap: 8px; max-width: 520px; padding: 10px 16px 12px 12px; border-left: 4px solid var(--dcb-rand); border-radius: 4px; background: var(--dcb-karte) } .dcb-embed__autor { font: var(--t-zeile); color: var(--dcb-hell) } .dcb-embed__titel { font: var(--t-karte); color: var(--dcb-hell); text-decoration: none } .dcb-discord a.dcb-embed__titel { color: var(--dcb-link) } .dcb-discord a.dcb-embed__titel:hover { text-decoration: underline } .dcb-embed__text, .dcb-feld__wert { font: var(--t-text); color: var(--dcb-text); overflow-wrap: anywhere } .dcb-embed__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px } .dcb-feld { grid-column: 1 / -1; min-width: 0 } .dcb-feld--neben { grid-column: auto } .dcb-feld__name { margin-bottom: 2px; font: var(--t-zeile); color: var(--dcb-hell) } /* v3.88: das Motiv des Embeds – bei Discord ueber die volle Breite der Karte. */ .dcb-embed__bild { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 4px; background: var(--dcb-code); object-fit: cover } .dcb-embed__bild--leer { display: grid; place-items: center; color: var(--dcb-leise); font: var(--t-klein) } .dcb-embed__fuss { font: var(--t-klein); color: var(--dcb-leise) } .dcb-discord code { padding: 1px 4px; border-radius: 4px; background: var(--dcb-code); color: var(--dcb-text); font: var(--t-zahl-klein) } .dcb-discord strong { color: var(--dcb-hell); font-weight: 700 } .dcb-discord a { color: var(--dcb-link); text-decoration: none } .dcb-zeit { padding: 0 3px; border-radius: 3px; background: rgba(255,255,255,.07) } .dcb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px } .dcb-discord a.dcb-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 4px; background: var(--dcb-knopf); color: var(--dcb-hell); font: var(--t-zeile) } .dcb-discord a.dcb-knopf:hover { filter: brightness(1.12) } .dcb-knopf .ico { width: 14px; height: 14px; opacity: .8 } .dcb-nurdu { font: var(--t-klein); color: var(--dcb-leise) } .dcb-nurdu span { color: var(--dcb-link) } /* Nur fuer Screenreader (Topf in Jackpot- und Rain-Kasten: sichtbar „1M Donut", vorgelesen „1,000,000 Donut"). Ein aria-label auf einem schlichten lassen Screenreader liegen – ein versteckter Text wird immer gelesen. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Schmale Schritt-Karte (Groesse der Karte, nicht des Fensters – mit der Chat-Spalte ist der Inhalt bei 1400 px schmaler als ohne bei 1300 px): Profil und Liste untereinander. */ @container (max-width: 560px) { .dc-anleitung { grid-template-columns: minmax(0, 1fr) } } @media (max-width: 1100px) { .dc-held { grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr); gap: var(--s5); padding: var(--s6) } } @media (max-width: 900px) { .dc-held, .dc-schritte { grid-template-columns: minmax(0, 1fr) } } @media (prefers-reduced-motion: reduce) { .dc-tagchip--leuchtet::after, .dc-pruefen--laeuft .ico, .dc-belohnung--geholt::after { animation: none } } /* ═══════════════════════════════════════════════════════════════════════════ v3.53 — Startseite, Footer und Chat nach dem Vorbild DonutDrop ─────────────────────────────────────────────────────────────────────────── Banner-Slider oben, „Our community's favourite games“ als Raster mit der Spielfigur daneben, „Play for free“ als eine Karte, Footer mit Stadt- Banner und About-Akkordeon, Level-Kaestchen im Chat. Alles haengt hinten an: die aelteren Regeln (Hero, .frei-Kacheln) bleiben stehen, ihre Elemente gibt es nur nicht mehr — so laesst sich der Block als Ganzes zurueckdrehen. ═══════════════════════════════════════════════════════════════════════════ */ /* Grosse Abschnittstitel: Versalien in Unbounded, wie beim Vorbild. */ .titel-gross { font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase; } .link-mehr { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--accent-ink); cursor: pointer; transition: color .16s; } .link-mehr:hover { color: var(--text) } .link-mehr .ico { width: 14px; height: 14px } /* ═══ BANNER-SLIDER ═════════════════════════════════════════════════════════ Eine Spur mit allen Slides nebeneinander; das Skript verschiebt sie per transform um -index·100 %. Ein Gast-Slide steht per .nur-gast nur fuer Gaeste im Fluss — display:none nimmt ihn aus der Spur, das Skript zaehlt nur sichtbare Slides. */ .slider { position: relative; margin-bottom: var(--s4); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--ink-800); overflow: hidden; isolation: isolate; outline: none; } .slider:focus-visible { box-shadow: 0 0 0 2px var(--accent-ink) } .slider__spur { display: flex; height: 160px; transition: transform .5s cubic-bezier(.2,.8,.2,1); will-change: transform; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .slide { position: relative; flex: 0 0 100%; min-width: 0; display: flex; align-items: center; padding: 0 var(--s7); overflow: hidden; cursor: pointer; background: linear-gradient(100deg, var(--sl-a) 0%, var(--sl-b) 58%, var(--sl-c) 100%); } /* Dunkles Overlay von links: der Text bleibt lesbar, das Motiv rechts leuchtet. */ .slide::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,12,16,.74) 0%, rgba(10,12,16,.42) 52%, rgba(10,12,16,.12) 100%); pointer-events: none; } .slide::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,.3), transparent 60%); opacity: .6; pointer-events: none; } .slide[data-ton="violet"] { --sl-a: #2d1f7a; --sl-b: #5236d1; --sl-c: #8f6bff } .slide[data-ton="gold"] { --sl-a: #6b3208; --sl-b: #b8661a; --sl-c: #f0a640 } .slide[data-ton="cyan"] { --sl-a: #083d4f; --sl-b: #0e7590; --sl-c: #2cc4d9 } .slide[data-ton="green"] { --sl-a: #0c3f26; --sl-b: #17804a; --sl-c: #3ddc84 } .slide__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 58%; } .slide__titel { margin: 0; font: 800 clamp(1.05rem, 1.9vw, 1.5rem)/1.08 var(--font-disp); text-transform: uppercase; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); } .slide__sub { margin: 0; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: rgba(255,255,255,.8); } .slide__sub b { color: var(--gold-2); font-weight: 800 } .slide__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px } .slide .btn.slide__knopf { width: auto; flex: 0 0 auto; min-height: 38px; padding: 0 18px; font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; } .slide .btn.btn-play.slide__knopf { width: auto } /* Der helle Knopf („PLAY NOW“): weiss auf dem Verlauf, wie beim Vorbild. */ .slide .btn.slide__knopf--hell { background: #fff; color: #14181d; border-color: rgba(255,255,255,.6); box-shadow: 0 6px 18px -8px rgba(0,0,0,.7); } .slide .btn.slide__knopf--hell:hover:not(:disabled) { background: #f2f2f6; transform: translateY(-1px) } .slide .btn.btn-secondary.slide__knopf { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3) } .slide__motiv { position: absolute; right: -1%; top: 50%; z-index: 1; height: 132%; width: auto; transform: translateY(-50%); pointer-events: none; filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); transition: transform .6s var(--ease-out); } .slide__motiv--truhe { height: 118%; right: 3% } .slide--aktiv .slide__motiv { transform: translateY(-50%) } .slide:not(.slide--aktiv) .slide__motiv { transform: translateY(-50%) translateX(24px) } .slider__punkte { position: absolute; top: 12px; right: 14px; z-index: 3; display: flex; gap: 6px; } .slider__punkt { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.42); cursor: pointer; transition: width .3s var(--ease-out), background .3s; } .slider__punkt[aria-current="true"] { width: 24px; background: #fff } .slider__punkt:hover { background: rgba(255,255,255,.8) } .slider__pfeil { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(10,12,16,.55); color: #fff; cursor: pointer; transform: translateY(-50%); opacity: 0; transition: opacity .2s, background .2s; } .slider__pfeil--l { left: 10px } .slider__pfeil--r { right: 10px } .slider:hover .slider__pfeil, .slider:focus-within .slider__pfeil { opacity: 1 } .slider__pfeil:hover { background: rgba(10,12,16,.85) } @media (hover: none) { .slider__pfeil { opacity: .75 } } /* Handy: hoeher, Text ueber dem Motiv, Motiv gedaempft. */ @media (max-width: 640px) { .slider__spur { height: 200px } .slide { padding: var(--s5) } .slide::before { background: linear-gradient(90deg, rgba(10,12,16,.8), rgba(10,12,16,.55)) } .slide__text { max-width: 100% } .slide__motiv { height: 96%; right: -12%; opacity: .6 } .slider__punkte { top: 10px; right: 10px } /* v3.91: Die Pfeile sassen mittig links und rechts — auf dem Handy lagen sie damit ueber der Bannerschrift („‹" auf „UNBOX"). Unten rechts nebeneinander stoeren sie keinen Text. */ .slider__pfeil { top: auto; bottom: 10px; width: 32px; height: 32px; transform: none } .slider__pfeil--l { left: auto; right: 50px } .slider__pfeil--r { right: 10px } } @media (prefers-reduced-motion: reduce) { .slider__spur { transition: none } .slide__motiv { transition: none } .slide:not(.slide--aktiv) .slide__motiv { transform: translateY(-50%) } } /* Puls-Leiste: drei echte Zahlen unter dem Slider. Gold nur, wo Geld steht. */ .puls-leiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s6); } .puls-leiste > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); } .puls-leiste dt { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); white-space: nowrap } .puls-leiste dd { margin: 0; font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .puls-leiste dd.geld { color: var(--gold) } .puls-leiste dd small { font: var(--t-klein); color: var(--muted) } @media (max-width: 640px) { .puls-leiste { grid-template-columns: 1fr } .puls-leiste > div { padding: 7px 12px } } /* ═══ FAVOURITE GAMES: Raster mit Spielfigur ════════════════════════════════ */ .fav { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start } .fav__spiele { min-width: 0 } .fav__kopf { margin-bottom: var(--s4) } .fav__held { display: none } @media (min-width: 1100px) { .fav { grid-template-columns: minmax(0, 1fr) 220px } .fav__held { display: block; position: relative; padding-top: 54px; margin-top: 40px; text-align: center; } .fav__held img { width: 220px; height: auto; filter: drop-shadow(0 22px 30px rgba(0,0,0,.6)); animation: schweben 7s var(--ease-in-out) infinite alternate } } /* Das Schild ueber dem Kopf: Kaestchen mit Pfeil nach unten, schwebt leicht. */ .fav__schild { position: absolute; top: 0; left: 50%; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--ink-750); box-shadow: var(--sh-4); font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2); white-space: nowrap; transform: translateX(-50%); animation: schild-schweben 3.2s var(--ease-in-out) infinite alternate; } .fav__schild b { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text) } .fav__schild::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: var(--ink-750); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: translateX(-50%) rotate(45deg); } @keyframes schild-schweben { from { transform: translateX(-50%) translateY(-3px) } to { transform: translateX(-50%) translateY(4px) } } html.ruht .fav__schild, html.ruht .fav__held img { animation-play-state: paused } /* Raster statt Karussell: quadratische Kacheln, Bild oben (70 %), Name gross und Tagline unten, Farbton der Kachel im unteren Verlauf. */ #game-rail.rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); /* v4.25: kompakter, mehr je Reihe */ gap: 10px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; } #game-rail .tile { flex: none; aspect-ratio: 5 / 4; /* v4.25: flacher als quadratisch — der untere Teil der Seite rueckt hoch */ border-radius: 10px; background: linear-gradient(180deg, var(--ink-750) 0%, var(--ink-800) 55%, rgba(var(--tone-rgb), .2) 100%); } #game-rail .tile::after { inset: 58% 0 0; background: linear-gradient(0deg, rgba(var(--tone-rgb), .26), rgba(var(--tone-rgb), 0)); } #game-rail .tile__bild { inset: 4% 10% auto; width: 80%; height: 62%; object-fit: contain; transition: transform .45s var(--ease-out), filter .45s var(--ease-out); } #game-rail .tile__foot { left: 10px; right: 10px; bottom: 9px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; } #game-rail .tile__name { gap: 0; font: 800 .78rem/1.05 var(--font-disp); /* v4.25: kleinere Kachel, kleinere Schrift — bleibt lesbar */ letter-spacing: var(--ls-titel); text-transform: uppercase; color: #fff; white-space: normal; } #game-rail .tile__name .ico { display: none } .tile__tag { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: rgba(255,255,255,.62) } #game-rail .tile[data-g="jackpot"] { --tone: #f5c46a; --tone-rgb: 245,196,106 } /* Hover: leicht anheben, Bild 1.05 — ruhiger als die Neigung des Karussells. */ @media (hover: hover) and (pointer: fine) { #game-rail .tile:hover { transform: translateY(-4px); border-color: rgba(var(--tone-rgb), .5); box-shadow: 0 18px 36px -18px rgba(var(--tone-rgb), .55), 0 0 0 1px rgba(var(--tone-rgb), .16); } #game-rail .tile:hover .tile__bild { transform: scale(1.05); filter: brightness(1.08) saturate(1.08) } } @media (max-width: 560px) { #game-rail.rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px } #game-rail .tile__name { font: 800 .7rem/1.05 var(--font-disp) } } /* v4.25: drei je Reihe auch am Handy */ /* ═══ PLAY FOR FREE: eine Karte ═════════════════════════════════════════════ */ .frei { position: relative; display: grid; grid-template-columns: 190px minmax(0, .9fr) minmax(0, 1.25fr); gap: var(--s6); align-items: center; margin: var(--s8) 0 var(--s5); padding: var(--s5) var(--s6); border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(70% 140% at 0% 100%, rgba(124,92,255,.2), transparent 60%), radial-gradient(50% 120% at 100% 0%, rgba(47,204,111,.1), transparent 60%), var(--ink-800); } .frei__held { align-self: end; width: 190px; height: auto; margin: -72px 0 -8px; filter: drop-shadow(0 18px 28px rgba(0,0,0,.6)); } .frei__mitte { display: flex; flex-direction: column; align-items: flex-start } .frei__titel { margin: 0; font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase } .frei__sub { margin: 6px 0 14px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2) } .frei .btn.frei__knopf { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 22px; font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; } .frei__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px } .frei__liste button { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: var(--r-lg); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .2s, border-color .2s; } .frei__liste button:hover { background: rgba(255,255,255,.04); border-color: var(--line) } .frei__liste img { width: 34px; height: 34px; flex-shrink: 0; filter: drop-shadow(0 5px 8px rgba(0,0,0,.45)) } .frei__liste b { display: block; font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase } .frei__liste small { display: block; margin-top: 2px; font: var(--t-klein); color: var(--muted) } @media (max-width: 1100px) { .frei { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s5) } /* Zwischen 560 und 1100 px ist Platz fuer eine groessere Figur; klein wird sie erst am Handy. */ .frei__held { position: absolute; top: -40px; left: 14px; width: 150px; margin: 0 } .frei__mitte { padding-left: 172px; min-height: 110px; justify-content: center } } @media (max-width: 560px) { .frei__liste { grid-template-columns: 1fr } .frei__mitte { padding-left: 110px } .frei__held { width: 92px; top: -28px } } /* Highlights: derselbe Kopf wie die Spiele. */ .highlights .rail-head { margin-bottom: var(--s4) } /* ═══ ABOUT + FOOTER ════════════════════════════════════════════════════════ */ .ueber { margin: var(--s8) 0 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); } .ueber summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 18px; font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase; color: var(--text-2); transition: color .16s; } .ueber summary::-webkit-details-marker { display: none } .ueber summary:hover { color: var(--text) } .ueber summary .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s var(--ease-out) } .ueber[open] summary .ico { transform: rotate(-90deg) } .ueber__text { padding: 0 18px 14px; max-width: 92ch; font: var(--t-klein); color: var(--muted) } .ueber__text p { margin: 0 0 10px } .ueber__text p:last-child { margin-bottom: 0 } .site-foot { margin-top: var(--s5) } .foot-top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s7) } .foot-logo span { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: var(--gold); } .foot-col h4 { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2); margin-bottom: var(--s2) } .foot-col button, .foot-col a { font: var(--t-klein) } /* Sprachwahl: ein echtes Select mit einer Option — die Wahl merkt motion.js. */ .foot-sprache { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4); padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-850); cursor: pointer; } .foot-sprache svg { width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0 } .foot-sprache select { border: 0; background: transparent; color: var(--text); font: var(--t-zeile); cursor: pointer; outline: none; } .foot-sprache select option { background: var(--ink-800); color: var(--text) } /* Stadt-Banner: volle Breite, unten in den Grund auslaufend. Die feste Hoehe von 140 px war bei 1246 px Breite nur noch ein Streifen Fenster: object-fit:cover schnitt bei diesem Verhaeltnis oben die Daecher ab. Die Hoehe kommt jetzt aus dem Seitenverhaeltnis des Bildes (1536 x 286) — so bleibt die Skyline ganz zu sehen; erst ab etwa 1290 px Breite begrenzt max-height, und der Schnitt liegt dann bei 60 % (Himmel oben faellt zuerst weg, nicht die Daecher). */ .foot-stadt { position: relative; aspect-ratio: 1536 / 286; height: auto; max-height: 240px; margin: var(--s3) 0 var(--s5); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--ink-900); } .foot-stadt img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60% } .foot-stadt::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(0deg, var(--ink-950), rgba(15,18,22,0)) } .foot-bottom { font: var(--t-klein) } @media (max-width: 880px) { .foot-top { grid-template-columns: 1fr 1fr } .foot-brand { grid-column: 1 / -1 } /* Feste Hoehe schlaegt hier das Seitenverhaeltnis — sonst wuerde der Browser aus Hoehe und Verhaeltnis die Breite rechnen (~480 px) und das Banner waere breiter als der Footer. */ .foot-stadt { aspect-ratio: auto } .foot-stadt { height: 100px } } @media (max-width: 560px) { .foot-top { grid-template-columns: 1fr } } /* ═══ CHAT: Level-Kaestchen vor dem Namen ══════════════════════════════════ Die Nummer ist die Stufe auf der Leiter (0 Copper I … 18 Grandchamp), die Farbe kommt vom Material (data-lvl 0–6): grau, teal, gruen, violett, orange, rot, Verlauf. */ /* v3.96: Rang als Textabzeichen wie bei DonutFlip („BRONZE II") in der Farbe des Materials, leicht getoenter Grund. Die Nummer sagte niemandem etwas; den Rangnamen kennt jeder von der Rangliste. */ .chat-lvl { flex-shrink: 0; display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 3px; font: 700 .58rem/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--lvl-fg, #b7c0cc); background: color-mix(in srgb, var(--lvl-fg, #b7c0cc) 16%, transparent); } .chat-lvl[data-lvl="0"] { --lvl-fg: #cd7f32 } .chat-lvl[data-lvl="1"] { --lvl-fg: #b7c0cc } .chat-lvl[data-lvl="2"] { --lvl-fg: #f3c15f } .chat-lvl[data-lvl="3"] { --lvl-fg: #5ed3f0 } .chat-lvl[data-lvl="4"] { --lvl-fg: #3fd07f } .chat-lvl[data-lvl="5"] { --lvl-fg: #a78bfa } .chat-lvl[data-lvl="6"] { --lvl-fg: #f3c15f; background: linear-gradient(135deg, rgba(243,193,95,.22), rgba(124,92,255,.22)) } /* ═══ RECHTS- UND HILFESEITEN (v3.55) ══════════════════════════════════════ Terms, Privacy, Responsible Play, Help, About. Lesetext, nicht Spielflaeche: schmale Spalte (760px), ruhige Zeilenhoehe, Ueberschriften in Unbounded, Inhaltsverzeichnis oben. Die Links sind Buttons, weil goPage() sie oeffnet — gestaltet wie Text-Links, damit sie im Fliesstext nicht herausfallen. */ .recht { max-width: 760px; font-size: 15.5px; line-height: 1.65; color: var(--text-2); } .recht .page-title { margin-bottom: var(--s2) } .recht-datum { margin: 0 0 var(--s4); font: var(--t-klein); color: var(--muted) } .recht-datum time { font-variant-numeric: tabular-nums } .recht-lead { margin: 0 0 var(--s5); font-size: 1.05rem; line-height: 1.55; color: var(--text) } .recht h2 { margin: var(--s6) 0 var(--s3); font: 800 1.05rem/1.25 var(--font-disp); letter-spacing: -.02em; color: var(--text); scroll-margin-top: 80px; } .recht h2:first-of-type { margin-top: var(--s5) } .recht p, .recht ul, .recht ol { margin: 0 0 var(--s3) } .recht ul, .recht ol { padding-left: 1.3em } .recht li { margin-bottom: 6px } .recht li::marker { color: var(--accent-ink) } .recht strong { color: var(--text) } .recht code { padding: 1px 6px; border-radius: 5px; background: var(--ink-850); border: 1px solid var(--line); font-size: .88em; } .recht a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px } .recht a:hover { color: var(--text) } .recht .btn { margin-top: var(--s1) } /* Inhaltsverzeichnis: leicht abgesetzte Karte mit nummerierten Sprunglinks. */ .recht-toc { margin: 0 0 var(--s5); padding: 14px 18px; background: var(--ink-800); border: 1px solid var(--line); border-radius: 10px; } .recht-toc strong { display: block; margin-bottom: 8px; font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); } .recht-toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: var(--s5) } .recht-toc li { margin: 0; padding: 2px 0; break-inside: avoid; font-size: .88rem } .recht-toc a { text-decoration: none; color: var(--text-2) } .recht-toc a:hover { color: var(--accent-ink); text-decoration: underline } /* Tabelle (Privacy: was wird gespeichert). */ .recht-tabelle { width: 100%; margin: 0 0 var(--s4); border-collapse: collapse; font-size: .9rem; } .recht-tabelle th, .recht-tabelle td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .recht-tabelle th { color: var(--text); font-weight: 700; background: var(--ink-850) } .recht-tabelle td:first-child { color: var(--text); font-weight: 600 } /* Textlink als Knopf. */ .recht-link { display: inline; padding: 0; margin: 0; background: none; border: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .recht-link:hover { color: var(--text) } .recht-fuss { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); } /* Hilfe-Akkordeon: eine Frage je
, Antwort eingerueckt. */ .hilfe { margin: 0 0 8px; background: var(--ink-800); border: 1px solid var(--line); border-radius: 10px; } .hilfe summary { list-style: none; cursor: pointer; padding: 12px 16px; padding-right: 40px; position: relative; font-weight: 600; color: var(--text); transition: color .15s; } .hilfe summary::-webkit-details-marker { display: none } .hilfe summary::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease-out); } .hilfe[open] summary::after { transform: translateY(-30%) rotate(-135deg) } .hilfe[open] summary { color: var(--accent-ink) } .hilfe > div { padding: 0 16px 14px; font-size: .93rem } .hilfe > div p:last-child { margin-bottom: 0 } /* Footer mit vier Spalten (Games, Account, Help, Legal). */ .foot-top { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)) } .foot-recht button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .foot-recht button:hover { color: var(--accent-ink) } @media (max-width: 1100px) { .foot-top { grid-template-columns: repeat(4, minmax(0, 1fr)) } .foot-brand { grid-column: 1 / -1 } } @media (max-width: 880px) { .foot-top { grid-template-columns: 1fr 1fr } } @media (max-width: 560px) { .foot-top { grid-template-columns: 1fr } } /* Skip-Link: unsichtbar, bis er per Tab den Fokus bekommt. */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform .15s; } .skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px } @media (max-width: 640px) { .recht { font-size: 15px } .recht-toc ol { columns: 1 } } /* ── Settings (v3.56) ───────────────────────────────────────────────────── Konto-Einstellungen im Stil der Rewards-Seite: Karten-Raster, Schalter wie die .bt-schalter der Battles (eigene Klasse, weil battles.css nur auf der Battles-Seite verlaesslich geladen ist), Balken fuer Tageslimits, rote Knoepfe fuer alles, was sperrt oder loescht. Handy: eine Spalte. */ .st-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start } .st-karte { display: flex; flex-direction: column; gap: var(--s3); min-width: 0 } .st-karte--breit { grid-column: 1 / -1 } .st-karte--gefahr { border-color: rgba(239,68,68,.32); background: linear-gradient(180deg, rgba(239,68,68,.06), transparent 60%) } .st-karte--gefahr .card-title { color: var(--red-ink) } .st-text { margin: 0; font: var(--t-text); color: var(--muted); max-width: 72ch } .st-hinweis { margin: 0; font: var(--t-klein); color: var(--muted) } .st-untertitel { font-family: var(--font-disp); font-size: .92rem; font-weight: 700; letter-spacing: -.01em; margin-top: var(--s2) } .st-block { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line) } .st-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2) } .st-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center } .st-form .input { flex: 1 1 160px; min-width: 0 } /* Profil: Bild links, Liste rechts. */ .st-profil { display: flex; gap: var(--s4); align-items: flex-start } .st-profil__avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ink-700); border: 1px solid var(--line-2); font-family: var(--font-disp); font-weight: 700; font-size: 1.4rem; color: var(--text-2); } .st-profil__avatar img { width: 100%; height: 100%; object-fit: cover; display: block } .st-liste { margin: 0; display: grid; gap: 6px; min-width: 0; flex: 1 } .st-liste > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s2); font: var(--t-text) } .st-liste dt { color: var(--muted) } .st-liste dd { margin: 0; color: var(--text-2); font-weight: 600; overflow-wrap: anywhere } /* Schalter: Text links, Kippschalter rechts. */ .st-schalter { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255,255,255,.03); cursor: pointer; user-select: none; font: var(--t-text); color: var(--text-2); } .st-schalter > span { display: grid; gap: 2px; min-width: 0 } .st-schalter small { font: var(--t-klein); color: var(--muted) } .st-schalter input[type=checkbox] { appearance: none; width: 38px; height: 20px; margin: 0; border-radius: 999px; flex-shrink: 0; background: var(--ink-650); position: relative; cursor: pointer; transition: background .2s; } .st-schalter input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-out); } .st-schalter input[type=checkbox]:checked { background: var(--play) } .st-schalter input[type=checkbox]:checked::after { transform: translateX(18px) } .st-schalter input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } /* Limits je Kasse: zwei Bloecke mit Balken „heute / Limit". */ .st-kassen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) } .st-kasse { display: grid; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-850) } .st-kasse__name { font-family: var(--font-disp); font-weight: 700; font-size: .9rem; color: var(--wton, var(--gold)) } .st-limit { display: grid; gap: 6px } .st-limit__kopf { display: flex; justify-content: space-between; gap: var(--s2); font: var(--t-text); color: var(--text-2) } .st-limit__kopf b { font-family: var(--font-disp); color: var(--gold) } .st-limit__stand { font: var(--t-klein); color: var(--muted) } .st-balken { height: 8px; border-radius: 999px; background: var(--ink-650); overflow: hidden } .st-balken i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--play); transition: width .4s var(--ease-out) } .st-balken--voll i { background: var(--red) } .st-wartend { font: var(--t-klein); color: var(--gold) } .st-pausenstand { padding: 10px 12px; border-radius: var(--r-sm); font: var(--t-zeile); color: var(--red-ink); background: var(--red-dim); border: 1px solid rgba(255,118,118,.22); } /* Sitzungen. */ .st-tabelle { overflow-x: auto } .st-sitzung--aktuell td { background: rgba(61,220,132,.05) } @media (max-width: 880px) { .st-raster, .st-kassen { grid-template-columns: 1fr } .st-liste > div { grid-template-columns: 1fr } } /* „Reduce motion" aus den Einstellungen: dieselbe Wirkung wie die Systemeinstellung, nur ueber eine Klasse am . Die Regeln des Grundsystems fragen prefers-reduced-motion — diese eine Regel kuerzt stattdessen alles auf praktisch null. */ html.reduziert *, html.reduziert *::before, html.reduziert *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* ═══ v3.56 CLEAN: Inter als Titelschrift, scharfe Kanten ══════════════════ Keine Blur-Filter mehr auf Textbloecken, keine skalierten Textcontainer — das macht Schrift unscharf. (Die Laufweiten-Korrekturen, die hier standen, sind seit v3.69 in den Rollen-Tokens — sonst haetten sie die Rollen wieder ueberschrieben.) */ .topbar-logo, .login-logo { letter-spacing: -.01em } .promo__title { letter-spacing: -.01em } /* Banner-Schlagzeile: bewusste Ausnahme in der Groesse, Laufweite wie die Titel. */ .slide__titel { letter-spacing: var(--ls-titel); font-weight: 800 } .limbo-zahl, .crash-zahl, .cf-wert { font-feature-settings: 'tnum' 1, 'cv11' 1 } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .tile:hover, .fav__spiele .tile:hover { transform: translateY(-4px) } .tile:hover .tile__name, .tile:hover .tile__tag { transform: none } /* Chat clean: klare Groessen, ruhige Namen, weniger Hover-Unruhe. */ .chat-text { font-size: .82rem; line-height: 1.5; color: var(--text) } .chat-name { font-size: .78rem; font-weight: 600; color: var(--text-2); max-width: 14ch } .chat-msg { padding: 5px 8px; gap: 8px } .chat-msg:hover { background: rgba(255,255,255,.025) } .chat-av { width: 24px; height: 24px; box-shadow: none } .chat-lvl { font-weight: 700; font-size: .62rem; min-width: 18px; text-align: center; border-radius: 4px } /* ── v3.80: Invite-Knopf, Kopfgeld-Seite, Spielmenue, Abzeichen ─────────── Steht VOR dem Weekly-Race-Block, damit der in den letzten 30 % bleibt. */ /* Kopfleiste: „Invite · 10M" (gruen getoent, wie Free cases) und, solange es geht, „Claim free 1M" (gruen gefuellt – die eine Handlung, die ein neues Konto zuerst sehen soll). motion.js baut die Knoepfe, index.html fuellt sie (werbungKopfZeichnen). `hidden` muss gegen display:inline-flex gewinnen. */ .top-nav__knopf[hidden] { display: none } .top-nav__invite { border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.08); color: var(--play-ink) } .top-nav__invite .ico { color: var(--play-ink) } .top-nav__invite b, .top-nav__frei b { font-family: var(--font-num); font-variant-numeric: tabular-nums } .top-nav__invite b:empty, .top-nav__frei b:empty { display: none } .top-nav__invite b::before { content: '· '; opacity: .6 } .top-nav__frei { border-color: transparent; background: linear-gradient(180deg, var(--play-2), var(--play) 62%, #22a85a); color: #06301a; box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 8px -2px var(--play-glow); } .top-nav__frei:hover { background: linear-gradient(180deg, var(--play-2), var(--play) 62%, #22a85a); color: #06301a; border-color: transparent; filter: brightness(1.06) } .top-nav__frei .ico { color: #06301a } .top-nav__frei .text-kurz { display: none } /* Bis 1759 px reicht der Platz nicht fuer fuenf beschriftete Knoepfe (nachgerechnet in kopfleiste.test.js): Rewards zeigt dort nur sein Bild, Race nur Pokal und Topf, Invite nur Symbol und Betrag, Claim die kurze Fassung „Free 1M". Gemessen mit 13-stelligem Guthaben (6,026,026,954): ohne das lief die Leiste bei 1380 und 1500 px um rund 12 px ueber, und bei 1600–1700 px (dort kommt der Rang-Chip dazu) blieben keine 20 px. */ @media (max-width: 1759px) { .top-nav__rewards span.text, .top-nav__race span.text { display: none } } /* Der gruene Knopf behaelt seine Beschriftung bis 1600 px herunter – er ist der neue, den man lesen koennen soll; Rewards und Race erkennt man am Bild. */ @media (max-width: 1599px) { .top-nav__invite span.text { display: none } .top-nav__invite b::before { content: none } .top-nav__frei .text-lang, .top-nav__frei .ico { display: none } .top-nav__frei .text-kurz { display: inline } } /* Unter 1280 px blendet die Leiste alle Beschriftungen aus – „Free" bleibt, ein gruener Knopf nur mit „1M" sagte nichts. */ @media (max-width: 1279px) { .top-nav__knopf.top-nav__frei span.text-kurz { display: inline } } /* Handy: die Kopfleiste ist voll (Free cases, Glocke, Guthaben, Kasse, Konto). „Claim free" nimmt dort den Platz von „Free cases" ein, solange es den Bonus gibt – ein neues Konto hat ohnehin noch keine Gratis-Cases freigespielt. „Invite" steht auf dem Handy in der unteren Leiste. */ @media (max-width: 880px) { .top-nav.hat-frei > .top-nav__gratis { display: none } /* 6 px Rand: damit ist der Knopf (68 px) nicht breiter als „Free cases" (69 px), den er ersetzt. */ .top-nav.hat-frei > .top-nav__frei:not([hidden]) { display: inline-flex; min-height: 40px; padding: 4px 6px; gap: 4px } } /* Dialog „Claim free 1M" */ .wf-dialog__satz { margin: 0 0 12px; font: var(--t-text); color: var(--text-2) } .wf-dialog__feld { font-family: var(--font-num); letter-spacing: .12em; text-transform: uppercase } .wf-dialog__fehler { min-height: 1.2em; margin: 8px 0 0; font: var(--t-klein); color: var(--red-ink) } .wf-dialog__knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px } /* Invite-Seite: die zwei grossen Zahlen */ .wb-held { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px } .wb-held__teil { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid rgba(74,222,128,.28); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(47,204,111,.16), rgba(47,204,111,.03) 60%), var(--ink-800); } .wb-held__teil--freund { border-color: rgba(245,196,106,.28); background: linear-gradient(135deg, rgba(245,196,106,.14), rgba(245,196,106,.03) 60%), var(--ink-800) } .wb-held__teil[hidden] { display: none } .wb-held__etikett { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .wb-held__zahl { font: var(--t-zahl-gross); font-size: 2.4rem; font-variant-numeric: tabular-nums; color: var(--play-ink) } .wb-held__teil--freund .wb-held__zahl { color: var(--gold) } .wb-held__satz { font: var(--t-klein); color: var(--text-2) } /* Fortschritt der Geworbenen bis zur Umsatz-Schwelle */ .wb-offen { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(120px, 2fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font: var(--t-klein); color: var(--muted) } .wb-offen:last-child { border-bottom: 0 } .wb-offen__name { font: var(--t-zeile); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .wb-offen__balken { height: 8px; border-radius: 999px; background: var(--ink-700, rgba(255,255,255,.06)); overflow: hidden } .wb-offen__balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--play), var(--play-2)) } .wb-offen__zahl { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap } .wb-offen__hinweis { grid-column: 1 / -1; margin-top: -4px; color: var(--muted) } .wb-top td:first-child, .wb-top th:first-child { width: 44px } .wb-top .wb-top__ich td { background: var(--accent-dim); color: var(--text) } .wb-top__leer { padding: 18px 8px; text-align: center; color: var(--muted) } /* Grenzen-Zeile unter dem Spieltitel als kleine Pillen (Min bet · Max bet · Max payout) – dieselbe Zeile auf jeder Spielseite, auch Jackpot und Duels. */ .spiel-titel__werte > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025) } .spiel-titel__werte { gap: 6px } .seiten-grenzen { margin: -8px 0 16px } .seiten-grenzen:empty { display: none } /* HOT / NEW auf den Startkacheln: kleine Verlaufspille oben links. */ .tile__abz { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 7px; border-radius: 999px; font: var(--t-etikett-klein); font-size: 9.5px; letter-spacing: var(--ls-etikett); text-transform: uppercase; color: #fff; box-shadow: 0 2px 8px -2px rgba(0,0,0,.6); pointer-events: none; } .tile__abz[data-abz="hot"] { background: linear-gradient(90deg, #ff5d3b, #ff9f1a) } .tile__abz[data-abz="new"] { background: linear-gradient(90deg, #22c55e, #14b8a6); color: #04241a } /* Rang-Kaestchen neben dem Namen in Live-Tabelle und Spiel-Feed (wie im Chat). */ .wetten-spieler .chat-lvl, .sf-name .chat-lvl, .live-name .chat-lvl { margin-right: 5px; vertical-align: 1px } .wetten-spieler .chat-lvl { flex-shrink: 0; margin-right: 0 } /* Games-Menue (ab 881 px ein Aufklappmenue): drei Spalten, je Spiel eine Zeile Beschreibung. Hoechstens so hoch wie das Fenster. */ .nav-btn__text { display: flex; flex-direction: column; gap: 1px; min-width: 0 } .nav-btn__text b { font: inherit; font-weight: 600; color: inherit } .nav-btn__text small { font: var(--t-klein); font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } @media (min-width: 881px) { /* Deckend: mit 98 % schimmerten die Kacheln der Startseite durch die jetzt groessere Flaeche. */ #sidebar { width: min(760px, calc(100vw - 120px)); grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: calc(100vh - 84px); overflow-y: auto; scrollbar-width: thin; background: #14181d } #sidebar .nav-btn--spiel { min-height: 44px; align-items: center } /* v4.19 (Kian): im Aufklappmenue stehen nur die Spiele. Seiten (Deposit, Wallet, Statistics, Admin …) erreicht man ueber Kopfleiste und Kontomenue; auf dem Handy (untere Leiste, < 881 px) bleiben sie, dort ist das Menue die Leiste. */ #sidebar .nav-section:not(.nav-section--spiele), #sidebar .nav-btn:not(.nav-btn--spiel), #sidebar #admin-nav { display: none } #sidebar .nav-btn--spiel b { color: var(--text-2) } #sidebar .nav-btn--spiel:hover b { color: var(--text) } } @media (max-width: 880px) { /* Untere Leiste: nur Seiten. „Games" vorn, wie bisher. */ #sidebar .nav-btn--nur-menue { display: none } #sidebar .nav-btn[data-page="games"] { order: -1 } .nav-btn__text small { display: none } .nav-btn__text b { font-weight: inherit } } /* Footer: Klarstellung unter der Fusszeile */ .foot-hinweis { margin: 10px 0 0; font: var(--t-klein); color: var(--muted); text-align: center; max-width: none } /* ── Weekly Race (v3.58) ────────────────────────────────────────────────── Tabs oben auf der Race-Seite, der grosse Wochen-Topf („1.00B") und der „Last week"-Aufklapper. Alles andere teilt sich die Wochen-Ansicht mit dem Daily Race (race-kopf, podest, race-tabelle in index.html). */ .race-tabs { display: flex; gap: 6px; margin-bottom: var(--s4); padding: 4px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255,255,255,.03); width: max-content; max-width: 100% } .race-tab { padding: 8px 16px; border: 0; border-radius: calc(var(--r-lg) - 4px); cursor: pointer; background: transparent; color: var(--text-2); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; transition: background .15s ease, color .15s ease; } .race-tab:hover { color: var(--text) } .race-tab.active { background: var(--accent-dim); color: var(--accent-ink) } .race-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } .race-kopf--woche { background: radial-gradient(120% 150% at 0% 0%, rgba(245,196,106,.16), transparent 55%), linear-gradient(180deg, var(--ink-750), var(--ink-800)) } .race-zahl--gross b, #race-w-pool { color: var(--gold); font-size: 1.7rem; line-height: 1.1 } .race-anteil { color: var(--muted); font: var(--t-klein) } .race-letzte { padding: 0 } .race-letzte > summary { cursor: pointer; list-style: none; padding: var(--s4); margin: 0; display: flex; align-items: center; gap: 8px } .race-letzte > summary::-webkit-details-marker { display: none } .race-letzte > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease } .race-letzte[open] > summary::after { transform: rotate(-135deg) } .race-letzte > .race-vergangen { padding: 0 var(--s4) var(--s4) } @media (max-width: 640px) { .race-tabs { width: 100% } .race-tab { flex: 1; text-align: center; padding: 8px 10px } .race-zahl--gross b, #race-w-pool { font-size: 1.35rem } } /* ═══ KOPFLEISTE: passt ab 881 px wieder in eine Zeile ═════════════════════ Bei 1600 px ragte das Kontomenue 50 px nach rechts heraus und die Marke wurde zu „DonutHugoB…" abgeschnitten. Gemessen: Navigation 552 px, rechte Seite 844 px. Wie bei DonutDrop gibt die Marke jetzt nie nach — stattdessen fallen Doppelungen und Beiwerk stufenweise weg, in dieser Reihenfolge: unter 1700 px Rang-Chip (steht auch im Kontomenue und auf der Rank-Seite) unter 1500 px Kontoname (Bild bleibt), Gratis-Knopf nur „3× Free" unter 1380 px Deposit-Knopf (das Plus in der Guthaben-Pille tut dasselbe) unter 1280 px Navigation nur als Symbole (vorher erst ab 1100 px) bis 1100 px Ton-Knopf (steht auch in den Settings), Kassen nur als Punkt, engere Abstaende Unter 881 px gilt weiter die Handy-Kopfleiste weiter unten — dort darf die Marke nachgeben, weil es sonst gar nicht aufgeht. */ @media (min-width: 881px) { /* Kein „…" mehr an der Marke: eine angeschnittene Marke sieht nach Fehler aus. Sie ist das Kuerzeste in der Leiste, also gibt sie zuletzt nach. */ .topbar-logo { flex-shrink: 0; overflow: visible; text-overflow: clip } } @media (max-width: 1699px) { .rank-chip { display: none } } @media (max-width: 1499px) { /* Nur noch das Bild — der Name steht im aufgeklappten Kontomenue. */ #username-display { display: none } .top-nav__gratis .text-lang { display: none } } @media (min-width: 1500px) { .top-nav__gratis .text-kurz { display: none } } @media (min-width: 881px) and (max-width: 1379px) { #topbar .btn-deposit { display: none } } @media (max-width: 1279px) { .top-nav__knopf span.text { display: none } } @media (min-width: 881px) and (max-width: 1100px) { #topbar { padding-inline: var(--s4) } .top-nav__knopf { padding-inline: 9px } .ton-knopf, .konto-pfeil { display: none } /* Wie auf dem Handy: die Kasse zeigt nur ihren Farbpunkt. Der Name bleibt in aria-label und Titel des Knopfes, geht also nicht verloren. */ .wpick__name { display: none } } /* ═══ LEISTUNG (v3.64) ══════════════════════════════════════════════════════ Kian: „die Seite laggt sehr“. Gemessen: nicht das Laden (0,2 s), sondern Dauerarbeit fuer die Grafikkarte, auch im Stillstand: 1. Rausch-Ebene body::after mit mix-blend-mode ueber der ganzen Seite — jede Bewegung irgendwo zwingt den Browser, alles neu zu mischen. Bei 2 % Deckkraft unsichtbar, also weg. 2. Aurora (body::before) wanderte 46 s endlos; darueber lag der Weichzeichner der Kopfleiste (backdrop-filter 20 px), der dadurch 60-mal pro Sekunde neu rechnen musste. Licht steht jetzt still, Kopfleiste/Menues sind deckend statt geblurrt (wie beim Vorbild). 3. Landschaft war `background-attachment: fixed` am body — erzwingt Neuzeichnen beim Scrollen. Jetzt eine feste, eigene Ebene, die der Browser einmal rastert und dann nur noch verschiebt. 4. Schwebende Bilder mit CSS-drop-shadow: der Filter wurde in jedem Bild neu gerechnet. Die Voxel-SVGs haben den Schatten schon eingebaut, der CSS-Filter entfaellt bei allem, was sich bewegt. */ body::after { content: none; display: none } body::before { inset: 0; animation: none; will-change: auto; background: linear-gradient(180deg, rgba(15,18,22,.55) 0%, rgba(15,18,22,.78) 45%, var(--ink-950) 100%), radial-gradient(1000px 700px at 15% -10%, rgba(124,92,255,.085), transparent 62%), url('/img/motive/landschaft.svg') center top / cover no-repeat; background: linear-gradient(180deg, rgba(15,18,22,.55) 0%, rgba(15,18,22,.78) 45%, var(--ink-950) 100%), radial-gradient(1000px 700px at 15% -10%, rgba(124,92,255,.085), transparent 62%), image-set(url('/img/motive/landschaft.webp') type('image/webp'), url('/img/motive/landschaft.svg') type('image/svg+xml')) center top / cover no-repeat; transform: translateZ(0); } body { background: var(--ink-950) } #topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15,18,22,.97) } .konto-menue, .chat-sprung { -webkit-backdrop-filter: none; backdrop-filter: none } .konto-menue { background: var(--ink-850, #171b22) } /* Bewegte Bilder: kein CSS-Schatten-Filter (Schatten steckt im SVG). */ .slide__motiv, .fav__held img, .frei__held, .pc-bild, .hero img { filter: none } /* (Buehnen-Bilder: gleiche Regel in buehnen.css, Abschnitt LEISTUNG.) */ /* Endlos-Animationen nur, solange man sie sieht und der Tab vorn ist (motion.js setzt html.ruht im Hintergrund). */ html.ruht *, html.ruht *::before, html.ruht *::after { animation-play-state: paused !important } /* v3.70: Beim Scrollen keine Hover-Treffer im Inhalt (motion.js setzt .scrollt an #content). Nur die direkten Kinder – pointer-events erbt sich billig nach unten, und #content selbst bekommt das Mausrad weiter und scrollt. */ #content.scrollt > * { pointer-events: none } /* ═══ v3.65 FLUESSIG: Eindaemmung fuer Leiste und Kopfleiste ═══════════════ Chat, Rain-Uhr, Online-Zaehler, Race-Topf und Kontostand aendern ihren Text laufend. Mit contain: layout style bleibt jede Aenderung darin fuer den Browser eine Sache dieses Kastens – er muss nicht pruefen, ob sich dadurch etwas im Spielbereich verschiebt. Beide Kaesten sind ohnehin eigene Ebenen (Kopfleiste: position + z-index + backdrop-filter; Leiste rechts: eigene Spalte bzw. auf schmalen Schirmen fixiert), die Eindaemmung aendert an ihrer Darstellung nichts. */ #topbar, #live-rail { contain: layout style } /* Grosse Voxel-Hintergruende (Buehnen, Stadt im Footer) kommen als WebP mit dem SVG als Rueckfall (). Der Rahmen selbst soll keine Box sein – Groesse und Lage bestimmt weiter das darin. */ picture.webp-bild { display: contents } /* Abschnitte unterhalb des ersten Bildschirms: solange sie weit weg sind, ueberspringt der Browser Stil, Layout und Malen (content-visibility). Die Live-Bets-Tabelle bekommt bis zu 20 Zeilen pro Sekunde – ausser Sicht kostet das so fast nichts. Die Platzhalterhoehe merkt sich der Browser nach dem ersten Zeichnen (auto), der Wert ist nur der Startwert. */ #wetten-sec { content-visibility: auto; contain-intrinsic-size: auto 480px } #highlights { content-visibility: auto; contain-intrinsic-size: auto 400px } .site-foot { content-visibility: auto; contain-intrinsic-size: auto 820px } /* ═══ KONTOMENUE + KASSE (v3.68) ═════════════════════════════════════════════ Schlank wie beim Vorbild: Kopf mit Avatar, Kassen-Kachelreihe, wenige grosse Punkte mit Symbol-Kaestchen, Rest als kleine Links. */ .konto-menue { width: 300px; padding: 12px } .konto-kopf--gross { display: flex; align-items: center; gap: 12px; margin-bottom: 12px } .konto-kopf__bild { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--ink-700) } .konto-kopf__bild--text { display: grid; place-items: center; font: 800 1rem/1 var(--font-disp); color: #fff; background: linear-gradient(135deg, var(--accent), #d97bd0) } .konto-kopf__text { min-width: 0 } .konto-kopf--gross .konto-kopf__name { font: var(--t-karte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .konto-kopf__unter { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: var(--t-klein); color: var(--muted) } .konto-kasse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 10px } .konto-kasse__knopf { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--text-2); cursor: pointer; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, color .15s; } .konto-kasse__knopf .ico { width: 18px; height: 18px; color: var(--muted) } .konto-kasse__knopf:first-child { border-color: rgba(47,204,111,.35); color: var(--green-ink, #4ade80) } .konto-kasse__knopf:first-child .ico { color: var(--green-ink, #4ade80) } .konto-kasse__knopf:hover { background: rgba(255,255,255,.07); color: var(--text) } .konto-menue .konto-liste { gap: 2px; padding-top: 8px } .konto-menue .konto-punkt { display: flex; align-items: center; gap: 12px; padding: 7px 6px; font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } .konto-punkt__box { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: rgba(255,255,255,.05) } .konto-punkt__box .ico { width: 16px; height: 16px } .konto-punkt--hinweis .konto-punkt__box { background: rgba(245,196,106,.14) } .konto-punkt--hinweis .konto-punkt__box .ico { color: var(--gold) } .konto-menue .konto-punkt--weg { margin-top: 2px } .konto-mehr { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line) } .konto-mehr__link { padding: 3px 0; border: 0; background: none; color: var(--muted); font: var(--t-klein); cursor: pointer; text-decoration: none } .konto-mehr__link:hover { color: var(--text) } /* Kassen-Reiter oben auf Deposit / Withdraw / Promo / History */ .kasse-reiter { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03) } .kasse-reiter__knopf { padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer } .kasse-reiter__knopf:hover { color: var(--text) } .kasse-reiter__knopf.ist-an { background: var(--accent); color: #fff } /* ═══ TYPO-SYSTEM (v3.69): Rollen als Klassen ═══════════════════════════════ Die Tokens stehen oben in :root. Hier dieselben Rollen als Klassen fuer Markup, das keinen eigenen Selektor braucht (und fuer battles.css, das in einem eigenen Durchgang umgestellt wird). Sie stehen VOR dem Handy-Block, weil design.css @media nur dahinter erlaubt; als spaete Regeln schlagen sie die Groessen aus index.html bei gleicher Spezifitaet. */ .t-titel { font: var(--t-titel); letter-spacing: var(--ls-titel); text-transform: uppercase } .t-abschnitt { font: var(--t-abschnitt); letter-spacing: var(--ls-abschnitt); text-transform: uppercase } .t-karte { font: var(--t-karte) } .t-kachel { font: var(--t-kachel); letter-spacing: var(--ls-titel); text-transform: uppercase } .t-etikett { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase } .t-etikett-klein { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase } .t-knopf { font: var(--t-knopf); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } .t-knopf-klein { font: var(--t-knopf-klein); letter-spacing: var(--ls-knopf); text-transform: uppercase; font-variant-numeric: tabular-nums } .t-text { font: var(--t-text) } .t-zeile { font: var(--t-zeile) } .t-klein { font: var(--t-klein) } .t-zahl { font: var(--t-zahl); font-variant-numeric: tabular-nums } .t-zahl-gross{ font: var(--t-zahl-gross); font-variant-numeric: tabular-nums } .t-zahl-klein{ font: var(--t-zahl-klein); font-variant-numeric: tabular-nums } /* Das Markenwort im Seitentitel („DonutHugoBet CRASH“) darf Farbe tragen, sonst aendert sich am Titel nichts: gleiche Groesse, gleiche Versalien. */ .page-title em, .game-head em, .game-head span, .t-titel em, .t-titel span, .spiel-titel__name span { color: var(--play-ink); font: inherit; letter-spacing: inherit } /* Das Symbol vor dem Seitentitel haengt an der Schriftgroesse — bei 1.25rem Versalien passt 1.2em, sonst wirkt das Zeichen groesser als der Titel. */ .page-title .ico--lg { width: 1.2em; height: 1.2em } /* Zahlen laufen immer auf Tabellenziffern — auch dort, wo eine Rolle ohne Zahl-Token benutzt wird (Guthaben, Betraege in Zeilen, Pot). */ .money, .stat-val, #balance-display, .tx-amount, .je-amount, .wr-val, .payout-tag, .jackpot-amount, .result-amount, .quick-bet, .kasse-schnell__knopf { font-variant-numeric: tabular-nums } /* ═══ RAKEBACK UND CREATORS-PROGRAMM (v3.83) ════════════════════════════════ Seite `rakeback`: links Rang und Satz (die eine Zahl, um die es geht, gross und gruen wie jede Handlung), rechts drei ruhige Kennzahlen; darunter die drei Toepfe als gleich breite Karten — eine abholbare traegt den gruenen Rand der Invite-Seite, eine gesperrte bleibt grau. Die Leiter ist eine normale Tabelle (.tbl), die eigene Zeile hervorgehoben wie in der Referrer-Rangliste. Seite `media` nimmt den Helden der Invite-Seite (.wb-held) — zwei Seiten mit demselben Zweck sollen gleich aussehen. Nur Rollen aus dem Typo-System (Tokens --t-… und --ls-…), keine eigene Schrift. */ .rb-held { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px } .rb-held__rang { display: flex; align-items: center; gap: 18px; padding: 18px 20px; min-height: 132px; border: 1px solid rgba(74,222,128,.28); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(47,204,111,.16), rgba(47,204,111,.03) 60%), var(--ink-800); } .rb-held__bild { width: 96px; height: 96px; flex: 0 0 auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)) } .rb-held__text { display: flex; flex-direction: column; gap: 5px; min-width: 0 } .rb-held__name { font: var(--t-karte); color: var(--rton, var(--text)) } .rb-held__satz { font: var(--t-text); color: var(--text-2) } .rb-held__satz b { display: block; font: var(--t-zahl-gross); font-size: 2.1rem; font-variant-numeric: tabular-nums; color: var(--play-ink); margin-bottom: 2px } .rb-held__aus { font: var(--t-klein); color: var(--gold) } .rb-held__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px } .rb-zahl { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800); min-width: 0 } .rb-zahl b { font: var(--t-zahl-gross); font-variant-numeric: tabular-nums; color: var(--text) } .rb-zahl small { font: var(--t-klein); color: var(--muted) } .rb-etikett { font: var(--t-etikett); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) } .rb-klein { margin: 0; font: var(--t-klein); color: var(--muted) } .rb-klein b { color: var(--text-2) } #rb-andere { margin: 0 0 12px } .rb-toepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px } .rb-topf { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-800) } .rb-topf--bereit { border-color: rgba(74,222,128,.34); background: linear-gradient(160deg, rgba(47,204,111,.12), rgba(47,204,111,0) 55%), var(--ink-800) } .rb-topf--gast { grid-column: 1 / -1; align-items: flex-start } .rb-topf__kopf { display: flex; align-items: center; gap: 8px; font: var(--t-karte); color: var(--text) } .rb-topf__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--text-2) } .rb-topf--bereit .rb-topf__ico { background: var(--play-dim); color: var(--play-ink) } .rb-topf__anteil { margin-left: auto; font: var(--t-etikett); letter-spacing: var(--ls-etikett); color: var(--muted) } .rb-topf__betrag { font: var(--t-zahl-gross); font-size: 1.7rem; font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere } .rb-topf--bereit .rb-topf__betrag { color: var(--play-ink) } .rb-topf__betrag small { margin-left: 6px; font: var(--t-klein); color: var(--muted) } .rb-topf__unter { flex: 1 1 auto; min-height: 2.8em } .rb-topf .btn { align-self: stretch } .rb-karte { margin-bottom: 12px } .rb-karte .rb-klein { margin-top: 10px } .rb-leiter td, .rb-leiter th { white-space: nowrap } .rb-leiter td { font-variant-numeric: tabular-nums } .rb-leiter__punkt { display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 3px; background: var(--rton, var(--muted)); vertical-align: 1px } .rb-leiter .rb-leiter__ich td { background: var(--play-dim); color: var(--text) } .rb-leiter .rb-leiter__naechster td { color: var(--text) } .rb-leiter__marke { margin-left: 8px; padding: 2px 6px; border-radius: 999px; background: var(--play); color: #07210f; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase } /* Admin: die Rechnung je Spiel — eine Zeile unter der Schranke ist rot. */ .rb-admin__tbl td, .rb-admin__tbl th { white-space: nowrap; font-variant-numeric: tabular-nums } .rb-admin__bruch td { color: var(--red-ink) } /* Creators-Programm */ .md-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start } .md-held--aus .wb-held__zahl { color: var(--muted) } .md-schritte { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none } .md-schritte li { display: flex; gap: 12px; align-items: flex-start } .md-schritte__nr { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: var(--play-dim); color: var(--play-ink); font: var(--t-zahl-klein) } .md-schritte b { display: block; font: var(--t-zeile); color: var(--text) } .md-schritte small { display: block; margin-top: 2px; font: var(--t-klein); color: var(--muted) } .md-regeln { margin: 0; padding-left: 18px; font: var(--t-text); color: var(--text-2) } .md-regeln li { margin-bottom: 7px } .md-bewerben, .md-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap } .md-bewerben .btn[aria-disabled="true"] { opacity: .5; pointer-events: none } /* ═══════════════════════════════════════════════════════════════════════════ HANDY-FEINSCHLIFF (v3.61) — Rahmen, Kopfleiste, Tabellen, Footer, Touch ─────────────────────────────────────────────────────────────────────────── Alles hier gilt nur unter 600 px (bzw. fuer grobe Zeiger) und aendert am Desktop nichts. Der Massstab ist ein 375 px breites Handy. Die Hoehe der unteren Navigationsleiste (#sidebar: 6 + 56 + 6 px plus Geraeterand) steht einmal als --handy-leiste, damit Schwebe-Knopf, klebender Play-Knopf und Toasts denselben Bezug haben. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { :root { --handy-leiste: calc(68px + env(safe-area-inset-bottom, 0px)) } /* ── 1 Schwebe-Knopf (Chat/Live) ──────────────────────────────────────── Er lag mit 46 px ueber Eingabefeldern („Play amount") und ueber dem Spannungsbalken beim Angeln. Jetzt 44 px, weiter am Rand, und bei offener Tastatur (Feld im Fokus) faehrt er aus dem Bild — man tippt gerade, da braucht man keinen Chat. */ #rail-toggle { width: 44px; height: 44px; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--handy-leiste, 68px) + 12px); transition: transform .2s var(--ease-out), opacity .2s, filter .2s; } #rail-toggle .ico { width: 20px; height: 20px } /* Auf Spielseiten klebt der Play-Knopf unten (spiele.css): der Schwebe- Knopf rueckt darueber, sonst laege er auf dessen rechtem Ende. */ body:has(.page.active .spiel-steuer) #rail-toggle { bottom: calc(var(--handy-leiste, 68px) + 72px) } body:has(input:focus, textarea:focus, select:focus) #rail-toggle { opacity: 0; transform: translateX(28px); pointer-events: none } /* ── 4 Kopfleiste: Marke gekuerzt, Gratis-Zaehler, Glocke, Guthaben, Plus ─ Der Ton-Knopf faellt weg — derselbe Schalter steht in den Settings („Sound"). Die Kassenwahl zeigt nur noch den Punkt, nicht den Betrag. Das Guthaben darf nie umbrechen oder schrumpfen; die Marke gibt nach. */ #topbar { gap: 6px; padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); } .topbar-logo { flex: 1 1 auto; min-width: 40px; font-size: .9rem } .top-nav { margin-left: 0; flex-shrink: 0 } .top-nav__gratis { min-height: 40px; padding: 4px 6px; gap: 3px } .topbar-right { gap: 6px; flex-shrink: 0; margin-left: 0 } .ton-knopf { display: none } .glocke-knopf { width: 44px; height: 44px } .wallet-pill { min-height: 44px; flex-shrink: 0; padding-left: 10px; gap: 5px } .wallet-pill #balance-display { padding: 6px 8px 6px 0; font-size: .86rem; white-space: nowrap } .wallet-pill__add { width: 42px } .waehrung-wahl .wpick__wert { display: none } .wpick { min-height: 32px; padding: 3px 7px } .konto-knopf { min-height: 44px; min-width: 44px; justify-content: center } .topbar-anmelden.btn-sm { min-height: 40px; padding-inline: 10px } /* ── 11 Untere Leiste und Safe-Area (iPhone) ──────────────────────────── */ #sidebar { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px)); } #content { padding-bottom: calc(var(--handy-leiste, 68px) + 16px) } #toast-container { bottom: calc(var(--handy-leiste, 68px) + 16px) } /* ── 8 Tabellen: waagrecht scrollen, erste Spalte bleibt stehen ──────── Race, Leaderboard, Sessions und Admin-Listen sind .tbl in einer Karte oder Huelle. Nichts wird mehr umgebrochen — eine Zahl in zwei Zeilen liest sich falsch. */ .card:has(> .tbl), .race-tabelle-huelle, .st-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tbl th, .tbl td { white-space: nowrap; padding-inline: 8px } .tbl td { font-variant-numeric: tabular-nums } .tbl th:first-child, .tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--ink-800); box-shadow: 1px 0 0 var(--line); } /* Wallet-Verlauf ist eine Flex-Zeile: enger, Betrag bleibt einzeilig. */ .tx-row { gap: 8px; padding: 10px 4px } .tx-type { width: 30px; height: 30px } .tx-title { font-size: .84rem; overflow-wrap: anywhere } .tx-date { font-size: .7rem } .tx-amount { font-size: .86rem; white-space: nowrap } .race-podest { gap: 6px } /* ── 9 Footer: 2 x 2 Spalten, Stadt 90 px, Sprachwahl volle Breite ────── */ .site-foot .foot-top { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4) } .site-foot .foot-brand { grid-column: 1 / -1 } /* wie oben: feste Hoehe statt Seitenverhaeltnis, sonst wird es zu breit */ .foot-stadt { aspect-ratio: auto } .foot-stadt { height: 90px } .foot-sprache { display: flex; width: 100%; box-sizing: border-box; min-height: 44px } .foot-sprache select { flex: 1; min-height: 32px } .foot-col button, .foot-col a { min-height: 40px } /* ── Rewards und Settings: eine Spalte, breite Knoepfe ────────────────── */ .rw-raster { grid-template-columns: 1fr } .rw-karte { min-height: 0 } .st-knoepfe .btn { flex: 1 1 calc(50% - 6px) } .st-form .input { flex: 1 1 100% } .st-form .btn { flex: 1 1 auto } .st-schalter { min-height: 52px } .st-profil { flex-wrap: wrap } /* ── 10 Touch: 44 px fuer alles, was man drueckt ────────────────────────── 16 px im Eingabefeld, sonst zoomt iOS beim Fokus in die Seite. */ .btn, .btn-sm, .lb-tab, .admin-tab, .race-tab, .rail-tab, .quick-bet { min-height: 44px } .input { font-size: 16px } /* v4.24 (D84): was die Liste oben nicht traf, war 8-25 px hoch. Wo 44 px die Zeile sprengen wuerden (Feed-Reiter, Slider-Punkte, Textlinks, „All ranks"), waechst nur die unsichtbare Trefferflaeche (::before bzw. Polster ohne Platzbedarf) — das Aussehen bleibt kompakt. Die Battle- Segmente und ⓘ-Knoepfe stehen in battles.css. */ .anhang-tab { position: relative; min-height: 32px } .anhang-tab::before { content: ""; position: absolute; inset: -6px 0 } .slider__punkte { gap: 12px } .slider__punkt { position: relative } .slider__punkt::before { content: ""; position: absolute; inset: -14px -6px } .rank-lohn__alle { position: relative } .rank-lohn__alle::before { content: ""; position: absolute; inset: -14px -8px } /* Inline-Links: senkrechtes Polster vergroessert die Trefferflaeche, ohne die Zeile zu verschieben; der negative Rand gleicht es aus, wo ein Link als Block steht. */ .recht-link { padding-block: 9px; margin-block: -9px } /* v4.24 (D79): auch die Sprachwahl im Fuss hatte 13.76 px — iOS zoomte beim Antippen hinein. */ .foot-sprache select { font-size: 16px } } /* Grobe Zeiger (Finger): kein 300-ms-Doppeltipp-Warten, kein Zoom durch Doppeltipp auf Knoepfe. */ @media (pointer: coarse) { button, a, input, select, textarea, label, .btn, .quick-bet, .nav-btn, .tile, .lb-tab, .rail-tab, .race-tab { touch-action: manipulation } } /* Ohne Maus gibt es kein Hover — ein Knopf, der nach dem Tipp „schwebend" haengen bleibt, sieht kaputt aus. */ @media (hover: none) { .btn-play:hover:not(:disabled), .btn.btn-play:hover:not(:disabled), .topbar-anmelden.btn-primary:hover:not(:disabled) { transform: none; filter: none } .lb-tab:hover, .admin-tab:hover { transform: none } .quick-bet:hover { transform: none } .tile:hover { transform: none } } /* v3.63: Auf dem Handy wurde das Logo zu "Do..." gekuerzt. Dort nur das Donut-Zeichen zeigen, der Name steht ohnehin im Seitentitel. */ @media (max-width: 600px) { .topbar-logo { font-size: 0; flex: 0 0 auto; min-width: 0 } .topbar-logo .logo-mark { font-size: 1rem; margin: 0 } .topbar-logo .logo-mark .ico { width: 26px; height: 26px } } /* ── v3.86 Kopfleiste: alles passt von 320 bis 430 px ──────────────────── Gemessen (v3.85, angemeldet): .topbar-right war 271 px breit und endete bei x = 367 — bei 320 px lagen 47 px des Kontoknopfes ausserhalb des Bildes, und gescrollt werden konnte dort nichts (scrollWidth blieb 320). Das Kontomenue war damit auf kleinen Geraeten NICHT erreichbar. Zwei Handgriffe statt Schrumpfen: · Der Kassen-Umschalter (50 px) verlaesst die Leiste. Er steht jetzt oben im Kontomenue, wo die beiden Guthaben ohnehin nebeneinander stehen — dort sind die Zeilen Knoepfe geworden (index.html). Die Gruppe selbst bleibt im Markup und behaelt ihren Zuhoerer, sie wird nur nicht gezeigt. · Unter 360 px faellt zusaetzlich der Gratis-Zaehler weg; sein Inhalt steht auf der Cases-Seite. Damit bleibt auch bei einem langen Guthaben Luft. Die Gruppe haengt wieder am rechten Rand (margin-left: auto) — sonst stand bei 430 px eine 63 px breite Luecke rechts neben dem Kontoknopf. */ @media (max-width: 600px) { .topbar-right { margin-left: auto } .waehrung-wahl { display: none } /* Und der Kontoknopf bekommt wieder etwas zu SEHEN. Unter 560 px waren Bild, Name und Pfeil alle ausgeblendet — uebrig blieb ein leeres 44-px-Kaestchen, dem niemand ansieht, dass dahinter das Konto steckt. Das Bild (oder der Anfangsbuchstabe) ist das kleinste, was den Knopf erkennbar macht. */ #avatar-wrap { display: block } #avatar-wrap .avatar-img, #avatar-wrap .avatar-initials { width: 30px; height: 30px; font-size: .8rem } } @media (max-width: 360px) { /* Mit #topbar davor: battles.css stellt .top-nav unter 880 px wieder auf flex und wird nach design.css geladen — eine Klasse allein verloere. */ #topbar .top-nav { display: none } } /* v3.68: Kontomenue und Kassen-Reiter auf dem Handy */ @media (max-width: 600px) { .konto-menue { width: min(300px, calc(100vw - 24px)) } /* v4.24 (D27): das Menue ist ~700 px hoch und haengt in der festen Kopfleiste — Seitenscrollen holt es nicht ins Bild. Auf 740-/667-px- Handys lagen „Sign out" und zehn Eintraege unter der unteren Leiste. Jetzt endet es ueber der Leiste und scrollt in sich; contain, damit ein Wisch am Listenende nicht die Seite dahinter mitzieht. 100vh zuerst fuer Browser ohne dvh. */ .konto-menue { max-height: calc(100vh - 72px - var(--handy-leiste, 68px) - 12px); max-height: calc(100dvh - 72px - var(--handy-leiste, 68px) - 12px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .kasse-reiter { display: flex; width: 100%; overflow-x: auto } .kasse-reiter__knopf { flex: 1 0 auto; padding: 10px 12px } } /* v3.75: Discord-Seite auf dem Handy – alles untereinander, Knoepfe volle Breite, der Titel bekommt die ganze Zeile (die Einladung rutscht darunter). */ @media (max-width: 600px) { .dc-kopf { flex-wrap: wrap; gap: var(--s1) var(--s3) } .dc-kopf .page-title { flex-basis: 100% } .dc-held { gap: var(--s5); padding: var(--s5); border-radius: var(--r-lg) } .dc-held__titel { font-size: 1.3rem } .dc-belohnung { padding: var(--s5) } .dc-belohnung__status { min-height: 0 } .dc-schritt { padding: var(--s5) } .dc-anleitung { padding: var(--s3) } .dc-knopf-discord, .dc-verknuepft, .dc-schritt3__knopf { width: 100% } .dc-verknuepft { justify-content: center } .dc-schritt__fuss { flex-direction: column; align-items: stretch; gap: var(--s3); text-align: center } .dc-schritt__fuss .btn { width: 100% } .dc-textlink { justify-content: center; padding: 6px 0 } .dc-schritt3 { flex-wrap: wrap; padding: var(--s5) } .dc-schritt3__text { flex-basis: calc(100% - 56px) } .dc-mehr__kopf { padding: var(--s4) var(--s5) } .dc-mehr__liste { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s4) var(--s4) } .dc-admin__felder { grid-template-columns: minmax(0, 1fr) } /* v3.76: Kanalauswahl ueber dem Knopf, beide volle Breite. */ .dc-admin__zeile { flex-direction: column; align-items: stretch } .dc-admin__zeile .btn { width: 100% } } /* v3.77: Discord companion auf dem Handy – Pille unter dem Titel, Speichern volle Breite, Felder der Vorschau zu zweit (drei sind bei 375 px zu eng). */ @media (max-width: 600px) { .dcb-kopf { flex-wrap: wrap } .dcb-spalte > .btn { justify-self: stretch; width: 100% } .dcb-stand__zeile { flex-direction: column; gap: 1px } /* Untereinander waere die feste Breite des Etiketts eine Hoehe – 76 px Luecke. */ .dcb-stand__zeile b { flex: 0 0 auto } .dcb-discord { padding: 12px 10px 14px } .dcb-aufruf { margin-left: 44px } .dcb-bild { width: 34px; height: 34px } .dcb-embed__felder { grid-template-columns: repeat(2, minmax(0, 1fr)) } } /* v3.83 Rakeback und Creators-Programm auf dem Handy: alles untereinander. Der Held verliert das grosse Rangbild nicht, es wird nur kleiner; die drei Kennzahlen bleiben nebeneinander (kurze Zahlen), die Toepfe stapeln sich — drei Knoepfe nebeneinander waeren bei 375 px unter der Tippgroesse. Die Leiter verzichtet auf die Spalte „Share of the edge": sie steht im Helden, und vier Spalten passen nicht ohne Querscrollen. */ @media (max-width: 600px) { .rb-held { grid-template-columns: 1fr } .rb-held__rang { padding: 14px; gap: 12px; min-height: 0 } .rb-held__bild { width: 68px; height: 68px } .rb-held__satz b { font-size: 1.7rem } .rb-held__zahlen { gap: 8px } .rb-zahl { padding: 10px } .rb-zahl b { font-size: 1.1rem } .rb-toepfe { grid-template-columns: 1fr } .rb-topf__unter { min-height: 0 } .rb-leiter th:nth-child(3), .rb-leiter td:nth-child(3) { display: none } .rb-leiter td, .rb-leiter th { padding-left: 8px; padding-right: 8px } .md-raster { grid-template-columns: 1fr } .md-bewerben .btn, .md-hinweis .btn { width: 100% } }