/* Landingpages der Spiele. Übernimmt die Design-Tokens der Hauptseite (public/css/style.css) – gleiche Schrift, Farben und Akzente –, damit die Seiten wie die App wirken. Bleibt eigenständig, lädt ohne JavaScript. */ :root { --bg: #0f0f11; --surface: #161618; --surface-2: #1c1c1f; --surface-3: #252529; --line: #2e2e33; --line-soft: #232326; --text: #e9e9eb; --muted: #9a9aa2; --muted-2: #6d6d75; --logo-pink: #de7298; --logo-cream: #efe3c3; --radius: 10px; --radius-sm: 6px; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --game: var(--logo-pink); /* je Seite über gesetzt */ } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--logo-pink); } .wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; } main { max-width: 760px; } h1, h2, h3 { line-height: 1.2; font-weight: 650; letter-spacing: -.011em; color: var(--text); } p { margin: 0 0 14px; color: var(--text); } strong { color: var(--text); } /* Kopfzeile mit Logo und Navigation */ .lp-top { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); } .lp-top img { height: 40px; width: auto; display: block; } .lp-top .brand { font-weight: 650; font-size: 19px; color: var(--text); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; } .lp-top .brand span { color: var(--logo-pink); } /* Navigation bleibt in einer Zeile; wird sie zu breit, kann man sie horizontal wischen (Scrollbalken ausgeblendet) statt sie umbrechen zu lassen. */ .lp-top nav { margin-left: auto; min-width: 0; display: flex; gap: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .lp-top nav::-webkit-scrollbar { display: none; } .lp-top nav a { color: var(--muted); text-decoration: none; font-size: 15px; white-space: nowrap; } .lp-top nav a:hover { color: var(--text); } .lp-top nav a.active { color: var(--text); font-weight: 650; cursor: default; } .lp-top nav a.active:hover { color: var(--text); } @media (max-width: 720px) { .lp-top { flex-wrap: wrap; } .lp-top nav { margin-left: 0; width: 100%; padding-bottom: 2px; } } /* Hero */ .hero { padding: 46px 0 6px; } /* Symbol-Kachel wie die Spielkacheln der Startseite (.gc-icon), nur größer. */ .game-symbol { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--game); margin-bottom: 6px; } .game-symbol svg { width: 32px; height: 32px; display: block; } .cta svg { width: 20px; height: 20px; } .more a .mi { display: inline-flex; } .more a .mi svg { width: 18px; height: 18px; display: block; } .hero h1 { font-size: clamp(2rem, 5.6vw, 2.9rem); letter-spacing: -.03em; font-weight: 600; margin: 14px 0 8px; } .hero .players { color: var(--muted-2); font-size: .8rem; font-weight: 600; letter-spacing: .02em; margin: 0 0 18px; } .hero .lead { font-size: 1.08rem; color: var(--muted); max-width: 54ch; } /* Aufruf zum Spielen – wie .btn-primary der Hauptseite: gefüllt in der Spielfarbe, dunkle Schrift, ohne Leuchten. */ .cta { display: inline-flex; align-items: center; gap: .5em; margin: 22px 0 8px; padding: .8em 1.6em; background: var(--game); color: #101012; font-weight: 600; font-size: 1.05rem; text-decoration: none; border-radius: var(--radius-sm); transition: filter .15s ease, transform .12s ease; } .cta:hover { filter: brightness(1.12); } .cta:active { transform: translateY(1px); } .cta-note { color: var(--muted-2); font-size: .82rem; margin: 8px 0 0; } /* Inhaltsabschnitte */ section.block { padding: 28px 0; border-top: 1px solid var(--line-soft); margin-top: 30px; } section.block:first-of-type { border-top: none; margin-top: 8px; } h2 { font-size: 1.5rem; margin: 0 0 12px; } h3 { font-size: 1.15rem; margin: 20px 0 6px; } ul, ol { padding-left: 22px; margin: 0 0 14px; } li { margin: 6px 0; } table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: .95rem; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } th { color: var(--text); font-weight: 650; } td:first-child { color: var(--text); white-space: nowrap; } /* Weitere Spiele */ .more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .more a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; } .more a:hover { border-color: var(--muted-2); } /* Fuß */ footer.lp-foot { border-top: 1px solid var(--line-soft); margin-top: 40px; padding: 24px 0 50px; color: var(--muted-2); font-size: .85rem; } footer.lp-foot a { color: var(--muted-2); } footer.lp-foot a:hover { color: var(--text); } footer.lp-foot .fine { margin-top: 10px; } /* Tastaturbedienung sichtbar machen - die Anwendung hat das laengst, die Landingpages hatten es nie. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--game, #f5a524); outline-offset: 3px; border-radius: 4px; }