/* Oeffentliche Spiel-Landingpages (/games/) und die uebrigen SEO-Marketingseiten. Ergaenzt style_home.css um Fakten-Raster, Tabelle, FAQ-Akkordeon und Link-Kacheln - die uebrigen Bausteine (feature-card, usp-row, benefits-list, cta-box) kommen aus style_home.css. Alles hier ist auf .gl-page (das der beiden Rahmen-Views) gescoped, damit die Anpassungen die bestehenden Marketingseiten nicht veraendern. */ /* --- Hero ----------------------------------------------------------------- Die Basisregel .banner-content h1 (style.css) ist 70px gross und war fuer das kurze Wort "gSports" gemacht. Diese Seiten tragen dort eine ganze Headline. */ .gl-page .banner-content h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; max-width: 20ch; margin: 0 auto 14px; } .gl-page .banner-content p { max-width: 62ch; margin: 0 auto 26px; font-size: 16px; line-height: 1.7; } .gl-page .banner--plain .banner-content { padding: 48px 16px 32px; } /* --- Fliesstext ---------------------------------------------------------- */ .gl-page .home-section { padding: 56px 0; } .gl-page .home-section .section-title { font-size: clamp(24px, 2.6vw, 34px); } /* Zwei aufeinanderfolgende Absaetze sollen atmen, ohne dass jede View mt-3 setzt. */ .gl-page .section-text + .section-text { margin-top: 1rem; } /* --- Aufzaehlungen -------------------------------------------------------- .benefits-list ist zweispaltig und vertikal zentriert - gedacht fuer Einzeiler. Hier stehen mehrzeilige Erklaerungen drin: eine Spalte, Icon oben. */ .gl-page .benefits-list { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; } .gl-page .benefits-list li { align-items: flex-start; font-size: 16px; font-weight: 400; line-height: 1.65; padding: 14px 20px; } .gl-page .benefits-list li i { margin-top: .3rem; flex: 0 0 auto; } .gl-page .benefits-list li a { color: #45f4f8; } /* --- Gegenueberstellungen (zwei Textspalten ohne Bild) -------------------- .usp-content ist in den bestehenden Seiten die Textspalte NEBEN einem Bild und hat deshalb keinen eigenen Rahmen. Hier stehen zwei davon nebeneinander - ohne Kasten klebt der Text sonst an der Spaltenkante. */ /* Gleich hohe Karten: .usp-row zentriert die Spalten vertikal (gedacht fuer Text neben Bild), nebeneinanderliegende Karten sollen stattdessen buendig sein. */ .gl-page .usp-row { align-items: stretch; } .gl-page .usp-row .usp-content { background: linear-gradient(to bottom, #0e334d, #010f1d); border: 2px solid rgba(69, 244, 248, .28); border-radius: 14px; padding: 26px 26px 24px; } .gl-page .usp-row .usp-content h3 { font-size: 22px; } .gl-page .usp-row .usp-content p:last-of-type { margin-bottom: 14px; } /* --- Karten --------------------------------------------------------------- */ .gl-page .feature-card p a, .gl-page .section-text a { color: #45f4f8; } /* --- Fakten auf einen Blick --- Abgesetzter Hintergrund wie .intro-section, damit der Faktenblock sich vom Fliesstext darunter abhebt. */ .gl-page .gl-facts-section { background: linear-gradient(to bottom, rgba(14, 51, 77, .4), rgba(2, 15, 29, .4)); } .gl-page .gl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .gl-page .gl-fact { background: rgba(8, 26, 41, .72); border: 1px solid rgba(69, 244, 248, .18); border-radius: 14px; padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .35rem; } .gl-page .gl-fact-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #45f4f8; } .gl-page .gl-fact-value { color: #d7e9f5; font-size: .98rem; line-height: 1.5; } .gl-page .gl-fact-value a { color: #45f4f8; text-decoration: none; } .gl-page .gl-fact-value a:hover { text-decoration: underline; } /* --- Modi-Tabelle --- */ .gl-page .gl-table-wrap { overflow-x: auto; margin-top: 1.5rem; } .gl-page .gl-table { width: 100%; border-collapse: collapse; min-width: 480px; color: #d7e9f5; } .gl-page .gl-table th, .gl-page .gl-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid rgba(69, 244, 248, .14); } .gl-page .gl-table th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #45f4f8; } .gl-page .gl-table tbody tr:hover { background: rgba(69, 244, 248, .06); } /* --- FAQ --- */ .gl-page .gl-faq-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; } .gl-page .gl-faq { background: rgba(8, 26, 41, .72); border: 1px solid rgba(69, 244, 248, .18); border-radius: 14px; padding: .9rem 1.15rem; } .gl-page .gl-faq > summary { cursor: pointer; color: #e6f3fa; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .gl-page .gl-faq > summary::-webkit-details-marker { display: none; } .gl-page .gl-faq > summary::after { content: "+"; color: #45f4f8; font-size: 1.3rem; line-height: 1; } .gl-page .gl-faq[open] > summary::after { content: "\2013"; } .gl-page .gl-faq-body { margin-top: .75rem; color: #b9d2e2; line-height: 1.65; } .gl-page .gl-faq-body a { color: #45f4f8; } /* --- Weiterfuehrende Links --- */ .gl-page .gl-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .gl-page .gl-link { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: rgba(8, 26, 41, .72); border: 1px solid rgba(69, 244, 248, .18); text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .gl-page .gl-link:hover { border-color: rgba(69, 244, 248, .55); transform: translateY(-3px); } .gl-page .gl-link-title { color: #45f4f8; font-weight: 700; } .gl-page .gl-link-text { color: #b9d2e2; font-size: .92rem; line-height: 1.5; } /* --- Inhaltsverzeichnis (How-to-Play-Unterseiten) --- */ .gl-page .gl-toc { background: rgba(8, 26, 41, .72); border: 1px solid rgba(69, 244, 248, .18); border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 2.5rem; } .gl-page .gl-toc h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #45f4f8; margin: 0 0 1.1rem; } /* Eigener Zaehler statt der ol-Marker: die haengen ausserhalb des Listenkastens und kleben dadurch am Rand der Box. */ .gl-page .gl-toc ol { list-style: none; counter-reset: gl-toc; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem 2rem; margin: 0; padding: 0; } .gl-page .gl-toc li { counter-increment: gl-toc; margin: 0; } .gl-page .gl-toc a { display: flex; align-items: baseline; gap: .7rem; padding: .5rem .25rem; color: #d7e9f5; text-decoration: none; line-height: 1.45; border-radius: 8px; } .gl-page .gl-toc a::before { content: counter(gl-toc, decimal-leading-zero); color: #45f4f8; font-size: .78rem; font-weight: 700; letter-spacing: .05em; flex: 0 0 auto; } .gl-page .gl-toc a:hover { color: #45f4f8; background: rgba(69, 244, 248, .07); } /* --- Mobil ---------------------------------------------------------------- */ @media (max-width: 767px) { .gl-page .home-section { padding: 40px 0; } .gl-page .banner--plain .banner-content { padding: 32px 16px 24px; } .gl-page .cta-box { padding: 36px 22px; } .gl-page .usp-row .usp-content { padding: 22px 20px; } .gl-page .gl-toc { padding: 1.25rem 1.25rem; } .gl-page .gl-fact, .gl-page .gl-link, .gl-page .gl-faq { padding: .9rem 1rem; } }