/* ===================================================================== elftipp — Early-Access-Leadpage · Stile --------------------------------------------------------------------- Liest AUSSCHLIESSLICH Design-Tokens (SSOT: web/css/tokens.css, Deploy-Kopie via npm run sync:landing). Kein Hex-Wert in dieser Datei — Reskin = nur tokens.css ändern. Konzept: DESIGN.md §4a · Broadcast-Premium, ruhige Fläche, ein präziser Goldstrich, die Livetabelle spielt im Hero. ===================================================================== */ /* ── Radius-System der Landing (nur hier, nicht in den Tokens) ────────── Auf der Landing sind Flächen kantig; eine weiche Ecke bekommt nur, was man anfasst. Vorher lag auf jedem Container derselbe 12px-Radius, und in Summe sah die Seite nach Baukasten aus statt nach Sportgrafik. Bewusst als lokale Überschreibung und NICHT in web/css/tokens.css: die Tokens sind die gemeinsame Quelle für die PWA, ein Eingriff dort hätte die ganze App mit umgestylt. Regel hier, ausnahmslos: Flächen, Karten, Medien = kantig (--r-card: 0) Controls, Buttons, Felder = 6px echte Pillen (Sprachumschalter, LIVE-Badge) bleiben Pillen */ body { --r-ctl: 6px; --r-card: 0px; --r-modal: 8px; } /* ── Basis ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; color-scheme: dark; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; } /* Netz gegen seitliches Wegziehen (25.07.): overflow-x:hidden NUR am body propagiert zwar zum Viewport, iOS Safari laesst den Rand aber trotzdem wegziehen. `clip` schliesst das und erzeugt — anders als `hidden` — keinen Scroll-Container, sonst braeche die sticky Kopfleiste. `hidden` bleibt als Fallback fuer Safari < 16 stehen (Verhalten dort unveraendert). */ html { overflow-x: clip; } body { background: var(--bg-0); color: var(--text-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: var(--text-1); } h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: -.01em; } p { margin: 0; } button, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } .wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-ctl); font-weight: 600; } .skip:focus { left: var(--sp-3); top: var(--sp-3); } /* ── Hinweis für Alt-Links aus elftipp1 ──────────────────────────────── Standardmäßig weg. Das Kopf-Skript setzt data-alt-link auf , wenn jemand über einen alten QR-Code kommt. Bewusst ein ruhiger Streifen und kein Alarm: Der Besucher hat nichts falsch gemacht. */ .altlink { display: none; } :root[data-alt-link] .altlink { display: block; background: var(--gold); color: var(--gold-ink); padding: var(--sp-3) 0; } .altlink .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .altlink b { font-weight: 700; } .altlink span { font-size: var(--fs-small); opacity: .85; } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch-min); padding: 12px 22px; border-radius: var(--r-ctl); border: 1px solid transparent; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-btn); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .btn:active { transform: scale(.98); } /* Gold = DIE eine primäre Aktion der Seite (E-Mail-Capture). */ .btn-gold { background: var(--gold); color: var(--gold-ink); font-weight: 600; } /* P2: Micro-Interaction NUR bei Hover/Focus — kein Idle-Puls (Casino-Tabu) */ .btn-gold:hover, .btn-gold:focus-visible { background: var(--gold-strong); transform: scale(1.02); } .btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text-1); } .btn-ghost:hover { border-color: var(--text-3); transform: translateY(-1px); } .btn[disabled] { opacity: .6; cursor: default; } /* ── Kopfleiste ────────────────────────────────────────────────────── */ /* R2-17: Kickbase-Muster — initial transparent, ab Scroll > 24px Fläche + Hairline */ .nav { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .nav.scrolled { background: color-mix(in srgb, var(--bg-2) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 64px; } /* P4: Logo-Lockup — 11-Monogramm (SVG) + Wortmarke als HTML-Text (Archivo) */ .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: var(--text-1); text-decoration: none; line-height: 1.1; } .brand img { width: 28px; height: 28px; border-radius: 7px; display: block; } .footer .brand img { width: 22px; height: 22px; border-radius: 5px; } /* Der CTA in der Leiste ist der einzige, der die ganze Seite über erreichbar bleibt — der frühere Wiederholungs-Block am Seitenende ist entfallen. Gleiche Beschriftung wie im Formular, damit es eine Aktion bleibt und nicht zwei aussieht. */ .nav .btn { min-height: 38px; padding: 8px 16px; } .nav-cta { font-weight: 600; } /* ── Hero ──────────────────────────────────────────────────────────── */ .hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); overflow: hidden; } /* P1: Atmosphäre — freigegebenes Flutlicht-Foto als Ebene hinter den Mocks. Textseite bleibt nahezu schwarz (WCAG AA), Bild läuft unten in --bg-0 aus. */ .hero-atmo { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .hero-atmo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 0%; } .hero-atmo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg-0) 96%, transparent) 0%, color-mix(in srgb, var(--bg-0) 84%, transparent) 36%, color-mix(in srgb, var(--bg-0) 36%, transparent) 66%, color-mix(in srgb, var(--bg-0) 52%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 38%, transparent) 0%, color-mix(in srgb, var(--bg-0) 26%, transparent) 42%, var(--bg-0) 97%); } /* Layout, Schlagzeile und Subline stehen im Hero-Block weiter unten. Hier standen sie ein zweites Mal, mit anderen Werten — bei zwei Definitionen gewinnt die letzte, und die erste liest sich beim Debuggen wie die gültige. Zusammengeführt am 26.07.2026. */ /* Formular */ .signup { margin-top: var(--sp-5); } .frow { display: flex; flex-direction: column; gap: var(--sp-3); } .input { width: 100%; min-height: 52px; padding: 0 16px; background: var(--bg-1); color: var(--text-1); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); transition: border-color var(--dur-fast) var(--ease); font-size: 16px; /* P5: verhindert iOS-Fokus-Zoom */ } .input::placeholder { color: var(--text-3); } .input:focus { outline: none; border-color: var(--gold); } .frow .btn { min-height: 52px; } @media (min-width: 560px) { .frow.inline { flex-direction: row; } .frow.inline .input { flex: 1 1 auto; } .frow.inline .btn { flex: 0 0 auto; } } .optrow { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); } @media (min-width: 560px) { .optrow { grid-template-columns: 1.4fr 1fr 110px; } } /* Die drei optionalen Felder (Rundenname, Zielgruppe, PLZ) lagen bis zum 26.07.2026 im zweiten Formular am Seitenende. Das ist mit dem doppelten Schluss-CTA entfallen; eingeklappt hier halten sie die Segmentierung, ohne den Hero zu verlängern. Der B2B-Link klappt sie per JS auf. */ .signup-more { margin-top: var(--sp-3); } .signup-more > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; font-size: var(--fs-caption); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; min-height: var(--touch-min); } .signup-more > summary::-webkit-details-marker { display: none; } .signup-more > summary:hover { color: var(--text-1); } .signup-more > summary::before { content: '+'; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1; color: var(--text-3); } .signup-more[open] > summary::before { content: '−'; } .consent { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--sp-3); padding: 4px 0; /* P5: Tap-Fläche des Labels */ font-size: var(--fs-caption); color: var(--text-3); line-height: 1.5; max-width: 62ch; } .consent input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--gold); cursor: pointer; } .consent a { color: var(--text-2); text-underline-offset: 2px; } .consent a:hover { color: var(--text-1); } /* P3: Kurz-Consent sichtbar, Details/Widerruf hinter Toggle (Substanz unverändert) */ .consent-more { margin: 6px 0 0 28px; font-size: var(--fs-caption); color: var(--text-3); max-width: 60ch; } .consent-more summary { display: inline-flex; align-items: center; min-height: var(--touch-min); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 2px; } .consent-more summary::-webkit-details-marker { display: none; } .consent-more p { margin-top: 6px; line-height: 1.5; } .micro { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--text-3); max-width: 62ch; } .fmsg { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--live); min-height: 1.4em; } .fmsg.ok { color: var(--up); } /* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* P3: Fan-Zeile bewusst leise (Caption, --text-3) */ /* Erfolg / Willkommen (Warteliste) */ .panel { background: var(--bg-1); border: 1px solid var(--line); border-left: var(--edge-gold); border-radius: var(--r-card); padding: var(--sp-5); max-width: 560px; } .panel h3 { font-size: var(--fs-h2); font-weight: 700; } .panel .ptext { margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-small); } .panel .pos { display: flex; align-items: baseline; gap: 12px; margin-top: var(--sp-4); } .panel .pos .num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; } .panel .pos .cap { font-size: var(--fs-caption); color: var(--text-3); max-width: 22ch; } .panel .reftitle { margin-top: var(--sp-5); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); } .panel .linkrow { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; } .panel .linkrow .input { flex: 1 1 200px; min-height: 44px; font-size: 16px; color: var(--text-2); } .panel .linkrow .btn { min-height: 44px; } .demotag { display: inline-block; margin-top: var(--sp-3); padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } /* ── Hero-Bühne: Livetabelle + Handy-Mock ─────────────────────────── */ .stage { position: relative; min-width: 0; } .board { position: relative; } .board-head { display: flex; align-items: center; gap: 10px; padding: 46px 18px 12px; /* oben Platz für die Dynamic Island */ border-bottom: 1px solid var(--line); } .board-head .bar { font-family: var(--font-display); font-weight: 700; font-size: 17px; } .board-head .sub { font-size: var(--fs-caption); color: var(--text-3); } .livebadge { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--live); } .livebadge i { width: 8px; height: 8px; border-radius: 999px; background: var(--live); animation: pulse 1.6s var(--ease) infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .55; } } @media (prefers-reduced-motion: reduce) { .livebadge i { animation: none; } } .matchbar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 55%, transparent); } .tbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 5px 9px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; } .score { font-family: var(--font-display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; min-width: 58px; text-align: center; } .score.flash { animation: scoreflash .7s var(--ease); } @keyframes scoreflash { 0% { transform: scale(1); } 30% { transform: scale(1.18); color: var(--up); } 100% { transform: scale(1); } } .minute { font-size: var(--fs-caption); color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 30px; } .thead, .trow { display: grid; grid-template-columns: 34px 1fr 62px 64px; align-items: center; } .thead { padding: 10px 16px 8px; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); } .thead .r, .trow .pts { text-align: right; } .thead .c, .trow .tip { text-align: center; } .tbody { position: relative; } .trow { position: relative; padding: 12px 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; background: var(--bg-1); transition: background var(--dur-med) var(--ease); will-change: transform; } .trow .rk { font-family: var(--font-display); font-weight: 700; color: var(--text-3); border-left: 2px solid transparent; padding-left: 8px; margin-left: -10px; } .trow .nm { color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; } .trow .tip { color: var(--text-3); } .trow .pts { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-table-pts); color: var(--text-2); } /* Rang 1: Gold-Tint + 2px-Goldkante links — DAS Signaturelement */ .trow.lead { background: linear-gradient(90deg, var(--gold-tint), transparent 70%); } .trow.lead .rk { color: var(--gold); border-left-color: var(--gold); } .trow.lead .pts { color: var(--gold); } /* Punkte-Ereignis-Chip */ .delta { position: absolute; right: 96px; top: 50%; transform: translateY(-50%); padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 1; /* deckend ÜBER der Tipp-Spalte, kein Text-Durchschein */ } .delta.up { background: color-mix(in srgb, var(--up) 24%, var(--bg-1)); color: var(--up); } .delta.down { background: color-mix(in srgb, var(--down) 22%, var(--bg-1)); color: var(--down); } .delta.show { animation: deltapop 2.4s var(--ease) forwards; } @keyframes deltapop { 0% { opacity: 0; transform: translateY(-30%); } 12%, 78% { opacity: 1; transform: translateY(-50%); } 100% { opacity: 0; transform: translateY(-80%); } } .board-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--fs-caption); color: var(--text-3); } .board-foot .tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; } /* P1: CSS-iPhone-Rahmen (kein Bitmap) — Gehäuse, Dynamic Island, Screen-Inset. Beide Hero-Mocks gestaffelt; Parallax via --pj/--pt (JS, reduced-motion-safe). */ .device { position: relative; background: var(--bg-0); border: 1px solid var(--line-strong); border-radius: 46px; padding: 12px; box-shadow: 0 34px 80px rgba(0,0,0,.6), 0 6px 20px rgba(0,0,0,.45); } .device::before { /* Dynamic Island */ content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; border-radius: var(--r-pill); background: var(--bg-0); z-index: 6; } .device-screen { position: relative; background: var(--bg-1); border-radius: 34px; overflow: hidden; } /* Mobil: nur die Livetabelle, mittig UNTER dem E-Mail-Feld (P5), Höhe begrenzt */ .stage { margin-top: var(--sp-6); } /* Inhalte des Tippabgabe-Mocks */ .phone-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 46px 16px 10px; border-bottom: 1px solid var(--line); } .phone-hd .brandtxt { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.02em; } .phone-hd .sub { font-size: 10px; color: var(--text-3); } .phone-foot { padding: 10px 14px 16px; font-size: 9.5px; color: var(--text-3); } /* ── Vertrauens-Streifen ─────────────────────────────────────────────── Ohne Häkchen-Icons: drei kurze Aussagen, durch Hairlines getrennt. Die Icons wiederholten nur, was der Satz schon sagt. */ .proof { border-bottom: 1px solid var(--line); background: var(--bg-1); } .proof-in { display: flex; flex-wrap: wrap; justify-content: center; padding: var(--sp-4) 0; gap: var(--sp-2) 0; } .proof-in span { padding: 0 var(--sp-5); font-size: var(--fs-small); color: var(--text-2); border-left: 1px solid var(--line-strong); } .proof-in span:first-child { border-left: 0; } @media (max-width: 719px) { .proof-in { flex-direction: column; align-items: center; text-align: center; } .proof-in span { border-left: 0; padding: 0; } } /* ── Sektionen ───────────────────────────────────────────────────────── Grundsatz seit dem 26.07.2026: Gruppierung über Abstand und Hairlines, nicht über Kästen. Die Seite hatte vorher sieben verschiedene Kartentypen (card, tile, entry, horizon, side, stat, wmcard) mit demselben Rahmen und demselben Radius — in Summe der Baukasten-Eindruck, den wir loswerden wollten. Übrig bleiben zwei Kopfvarianten, damit nicht jede Sektion gleich anfängt: zentriert (.shead) und schlicht links (.shead-h). */ .section { padding: var(--sp-8) 0; } .section + .section { padding-top: 0; } .shead { max-width: 680px; margin: 0 auto var(--sp-6); text-align: center; } .shead h2 { font-size: clamp(24px, 4.6vw, 34px); font-weight: 700; letter-spacing: -.02em; } .shead .lead { margin-top: var(--sp-3); color: var(--text-2); max-width: 60ch; margin-inline: auto; } .shead-h { font-size: clamp(24px, 4.6vw, 34px); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-5); max-width: 20ch; } /* Einziger verbliebener Eyebrow der Seite steht über der Traum-Elf; die Countdown-Zeile im Hero ist der zweite. Mehr verträgt die Seite nicht, ohne wieder nach Vorlage auszusehen. */ .kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-3); } /* ── Hosten oder mitspielen ──────────────────────────────────────────── Bewusst asymmetrisch: Hosten ist der Weg, der Geld bringt, und bekommt mehr Fläche. Getrennt wird mit einer Hairline statt mit zwei Kästen. */ .entries { display: grid; gap: var(--sp-5); } @media (min-width: 800px) { .entries { grid-template-columns: 1.25fr 1fr; gap: var(--sp-7); } .entry--join { padding-left: var(--sp-7); border-left: 1px solid var(--line); } } .entry h3 { font-size: clamp(19px, 2.4vw, 23px); font-weight: 700; letter-spacing: -.01em; } .entry p { margin-top: var(--sp-3); color: var(--text-2); max-width: 46ch; } .entry .btn { margin-top: var(--sp-4); } .entry--host h3 { color: var(--text-1); } .entry--join h3 { color: var(--text-2); } .entry-b2b { margin-top: var(--sp-7); padding: var(--sp-4) 0 var(--sp-4) var(--sp-4); border-left: var(--edge-gold); font-size: var(--fs-small); color: var(--text-3); max-width: 72ch; } .entry-b2b a { color: var(--gold); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); } .entry-b2b a:hover { border-bottom-color: var(--gold); } .entry-b2b span { display: block; margin-top: 4px; } /* ── Echte Abende: Bilderstreifen ────────────────────────────────────── Ungleiche Spaltenbreiten und 2px Fuge: das liest sich wie ein Kontaktbogen, nicht wie drei gleiche Karten. Kein Radius, kein Rahmen — die Fotos sind der Inhalt, nicht ihr Behälter. Die Höhe kommt aus dem 4:5-Zuschnitt, den build-media.py erzeugt. Früher stand hier aspect-ratio 3/2 über Hochformat-Dateien: der Browser bekam per width/height ein Querformat gemeldet, das er nie ausliefern konnte. */ .abende-strip { display: grid; gap: 2px; } .abende-strip figure { margin: 0; overflow: hidden; background: var(--bg-1); } .abende-strip img, .abende-strip video { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; } @media (min-width: 900px) { .abende-strip { grid-template-columns: 1.15fr .95fr 1fr; } } @media (min-width: 560px) and (max-width: 899px) { .abende-strip { grid-template-columns: 1fr 1fr; } .abende-strip .am--wide { grid-column: 1 / -1; } .abende-strip .am--wide video { aspect-ratio: 16 / 9; } } /* Handy: wischbare Reihe statt drei gestapelter Hochformate. Gestapelt kam der Streifen auf 1260px, also anderthalb Bildschirme nur für drei Fotos. Als Reihe sind es 300px, und dass es weitergeht, sieht man am angeschnittenen dritten Bild. */ @media (max-width: 559px) { .abende-strip { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; } .abende-strip::-webkit-scrollbar { display: none; } .abende-strip figure { scroll-snap-align: start; } } /* Zwei Zahlen, reine Typografie. Die dritte („0 €") ist entfallen: dieselbe Aussage stand schon im Vertrauens-Streifen und in der Modell-Zeile. */ .figures { display: grid; gap: var(--sp-6); margin-top: var(--sp-7); } @media (min-width: 720px) { .figures { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } } .fig { border-top: 1px solid var(--line-strong); padding-top: var(--sp-4); } .fig .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6vw, 54px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .fig .lbl { margin-top: var(--sp-3); color: var(--text-1); font-size: var(--fs-body); max-width: 34ch; } .fig .foot { margin-top: var(--sp-2); color: var(--text-3); font-size: var(--fs-caption); max-width: 48ch; } /* Die Punkte-Zusammensetzung steht an der Stelle, an der bis zum 26.07.2026 eine feste "20" stand. Die Zahl stimmte nur solange, wie Tipp und Bonus allein gewertet wurden; mit der Manager-Wertung gibt es keine Obergrenze mehr, die man ehrlich hinschreiben kann. Die Zeilen übernehmen die Optik der Punktetabelle nebenan (.b4-rows), damit beide als dieselbe Sache lesen. */ .fig--sum .lbl { margin-top: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; } .fig--sum .b4-rows { margin-top: var(--sp-3); } .fig--sum .b4-rows li { padding: 9px 0; } .fig--sum .foot { margin-top: var(--sp-3); } /* Preis-Klarheit als eine Zeile statt als eigene Sektion mit Häkchenliste. */ .model-line { margin-top: var(--sp-7); padding-left: var(--sp-4); border-left: var(--edge-gold); color: var(--text-2); font-size: var(--fs-small); max-width: 72ch; } .cm-note { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-caption); color: var(--text-3); } /* ── FAQ ─────────────────────────────────────────────────────────────── Hairline-Zeilen statt gestapelter Kästen. */ .faq { max-width: 760px; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: 16.5px; min-height: var(--touch-min); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--gold); } .faq summary svg { width: 18px; height: 18px; color: var(--text-3); flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease); } .faq details[open] summary svg { transform: rotate(180deg); } .faq .a { padding: 0 0 var(--sp-4); color: var(--text-2); font-size: var(--fs-small); max-width: 64ch; } /* ── Footer ────────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--line); padding: var(--sp-7) 0 var(--sp-6); } .footer-top { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between; align-items: flex-start; } .footer .tagline { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-small); max-width: 34ch; } .footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .footer nav a { color: var(--text-2); font-size: var(--fs-small); text-underline-offset: 3px; } .footer nav a:hover { color: var(--text-1); } .footer nav a.soc { display: inline-flex; align-items: center; gap: 6px; } .footer nav a.soc svg { flex: 0 0 auto; opacity: .85; } .disclaimer { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-caption); max-width: 760px; line-height: 1.55; } .copyline { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-caption); } /* ── Scroll-Reveals (nur mit JS aktiv; ohne JS ist alles sichtbar) ── */ html.js .reveal { opacity: 0; transform: translateY(8px); } html.js .reveal.in { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); transition-delay: var(--rd, 0ms); /* P2: 60ms-Stagger, von JS gesetzt */ } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } html.js .reveal.in { transition: none; } } /* FLIP-Rangwechsel: Transform wird per JS gesetzt, hier nur die Transition */ .trow.fliping { transition: transform var(--dur-rank) var(--ease); } @media (prefers-reduced-motion: reduce) { .trow.fliping { transition: none; } } /* ===================================================================== Runde 2 (DESIGN_REVIEW 17–21 + Inhaber-Zusätze) ===================================================================== */ /* ── R2-17: Nav-Links, CTA-Pill mit Goldpunkt, Sprach-Pill, Burger ── */ .nav-links { display: flex; gap: var(--sp-5); } .nav-links a { color: var(--text-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500; padding: 8px 2px; transition: color var(--dur-fast) var(--ease); } .nav-links a:hover { color: var(--text-1); } .nav-right { display: flex; align-items: center; gap: var(--sp-3); } .lang-pill { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; font-size: 12.5px; } .lang-pill a { padding: 7px 12px; min-height: 32px; display: inline-flex; align-items: center; color: var(--text-3); text-decoration: none; } .lang-pill a[aria-current="true"] { color: var(--text-1); background: var(--bg-2); } /* Mobil: Ein-Tap-Sprachwechsel in der Kopfleiste — zeigt die andere Sprache */ .lang-toggle { display: none; min-width: 44px; min-height: 40px; padding: 8px 12px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text-2); text-decoration: none; font-size: 13px; font-weight: 600; } /* Drawer: Segmented Control mit vollen Touch-Targets statt Mini-Pille */ .lang-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: var(--sp-3); padding: 4px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg-1); } .lang-seg a { min-height: var(--touch-min); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--r-ctl) - 4px); color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 15px; } .lang-seg a[aria-current="true"] { color: var(--bg-1); background: var(--gold); } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 12px; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); cursor: pointer; } .nav-burger span { display: block; height: 2px; width: 100%; background: var(--text-1); border-radius: 2px; } .nav-drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: var(--sp-4) var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-2); } .nav-drawer[hidden] { display: none; } .nav-drawer a { color: var(--text-1); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: 17px; padding: 12px 2px; min-height: var(--touch-min); display: flex; align-items: center; } .nav-drawer .lang-pill { justify-self: start; margin-top: var(--sp-2); } /* Social ganz unten im Menü: ruhiger als die Sektionslinks, eine Zeile. */ .nav-drawer .drawer-social { display: flex; gap: var(--sp-5); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .nav-drawer .drawer-social a { gap: 8px; font-size: 15px; color: var(--text-2); padding: 8px 2px; } .nav-drawer .drawer-social svg { flex: 0 0 auto; opacity: .85; } @media (max-width: 1079px) { .nav-links { display: none; } .nav-burger { display: inline-flex; } .nav-right .lang-pill { display: none; } .lang-toggle { display: inline-flex; } } @media (max-width: 480px) { .nav-right .btn-pill { padding: 8px 14px; font-size: 14px; } } /* Sehr schmal: Wortmarke weicht, damit Sprach-Toggle + CTA + Burger sauber passen */ @media (max-width: 420px) { .nav .brand > span { display: none; } .nav-right { gap: 8px; } } /* Button-Haptik auf Touch-Geräten: sichtbares Eindrücken beim Antippen; der Vibrations-Tick dazu kommt aus initHaptics() (Android, iOS kennt die API nicht) */ @media (hover: none) and (pointer: coarse) { .btn:active, .btn-pill:active, .lang-toggle:active, .lang-seg a:active, .lang-pill a:active, .nav-burger:active, .dstep:active, summary:active { transform: scale(.96); transition: transform .08s ease; } } /* ── Countdown: rollende Ziffern, tabular-nums ── Seit dem 26.07.2026 eine einzige Zeile statt eines Blocks mit vier großen Ziffernkästen. Er steht jetzt als Augenbraue über der Schlagzeile und ersetzt dort das frühere „Gründungsmitglied"-Pill: eine Zeile, die Saison und Dringlichkeit gleichzeitig trägt, statt zwei Elemente für beides. */ .countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: var(--sp-2); } .cd-kicker { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .cd-units { display: inline-flex; align-items: baseline; gap: 10px; } .cd-unit { display: inline-flex; align-items: baseline; gap: 3px; } .cd-val { display: inline-flex; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-1); } .cd-lbl { font-style: normal; font-size: 11px; color: var(--text-3); font-family: var(--font-body); } .cd-col { display: inline-block; height: 1em; overflow: hidden; } .cd-roll { display: block; transition: transform .45s var(--ease); } .cd-roll span { display: block; height: 1em; line-height: 1; } @media (prefers-reduced-motion: reduce) { .cd-roll { transition: none; } } /* ── R2-19: Flutlichtkegel — CSS statt three.js, sanftes Fade-in ── */ .hero-light { position: absolute; z-index: -1; top: -18%; left: 56%; width: min(46vw, 620px); height: 130%; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, transparent), transparent 68%); filter: blur(46px); transform: rotate(9deg); opacity: 0; pointer-events: none; animation: lightin 1.4s var(--ease) .25s forwards; } @keyframes lightin { to { opacity: .85; } } @media (prefers-reduced-motion: reduce) { .hero-light { animation: none; opacity: .85; } } @media (max-width: 719px) { .hero-light { left: 40%; width: 80vw; } } /* ── R2-20 + iPhone-Realismus: Perspektive, Tilt, Gehäuse-Details ── */ .stage { perspective: 1200px; } .device { padding: 9px; border-radius: 44px; border-color: color-mix(in srgb, var(--text-1) 16%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--text-1) 7%, var(--bg-0)), var(--bg-0) 62%); } .device-screen { border-radius: 35px; } .device::before { width: 78px; height: 21px; top: 16px; } .devbtns { position: absolute; inset: 0; pointer-events: none; } .devbtns::before { /* Lautstärke links (2×) */ content: ''; position: absolute; left: -2px; top: 96px; width: 3px; height: 24px; border-radius: 2px; background: color-mix(in srgb, var(--text-1) 18%, var(--bg-0)); box-shadow: 0 32px 0 color-mix(in srgb, var(--text-1) 18%, var(--bg-0)); } .devbtns::after { /* Power rechts */ content: ''; position: absolute; right: -2px; top: 118px; width: 3px; height: 42px; border-radius: 2px; background: color-mix(in srgb, var(--text-1) 18%, var(--bg-0)); } /* ── „Wie gespielt wird" zweiseitig (von elftipp.com übernommen) ── */ @media (min-width: 860px) { .sides { grid-template-columns: 1fr 1fr; } } /* ── „Beste Vier" — Formation 1-2-1 unter Flutlicht ── */ .b4 { display: grid; gap: var(--sp-5); } @media (min-width: 900px) { .b4 { grid-template-columns: 1.05fr .95fr; align-items: stretch; } } .pitch { position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-6) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat, radial-gradient(140% 90% at 50% -10%, var(--gold-tint), transparent 55%), var(--bg-1); } .pitch::before { content: ''; position: absolute; inset: 14px; pointer-events: none; border: 1px solid var(--line); } .pitch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border: 1px solid var(--line); border-radius: var(--r-pill); transform: translate(-50%, -50%); pointer-events: none; } .p-line { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(28px, 9vw, 100px); } .jersey { position: relative; width: 90px; text-align: center; } .jersey b { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto; border-radius: var(--r-ctl); background: var(--jc, var(--bg-2)); font-family: var(--font-display); font-weight: 700; font-size: 27px; color: var(--text-1); box-shadow: 0 16px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16); } .jersey i { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .jersey .pts { position: absolute; top: -9px; right: 0; padding: 3px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--up) 24%, var(--bg-1)); color: var(--up); } .jersey--top b { outline: 2px solid var(--gold); box-shadow: 0 0 0 7px var(--gold-tint), 0 20px 44px rgba(0,0,0,.55); } .jersey--top .pts { background: var(--gold); color: var(--gold-ink); } .b4-detail { background: var(--bg-1); border: 1px solid var(--line); border-left: var(--edge-gold); border-radius: var(--r-card); padding: var(--sp-5); display: flex; flex-direction: column; } .b4-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-top: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .b4-head b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; } .b4-head small { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-caption); } .b4-head .tot { text-align: right; } .b4-head .tot b { font-size: 34px; color: var(--gold); font-variant-numeric: tabular-nums; } .b4-rows { list-style: none; margin: var(--sp-2) 0 0; padding: 0; } .b4-rows li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 11px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-2); } .b4-rows li:first-child { border-top: 0; } .b4-rows b { font-family: var(--font-display); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; } /* Der ältere Kasten-Entwurf der Einstiege stand hier ein zweites Mal und überschrieb wegen der Reihenfolge die neuen Regeln weiter oben: zwei gerahmte Karten mit Radius und Goldverlauf, dazu eine zentrierte B2B-Zeile, deren Goldkante links neben zentriertem Text ins Leere zeigte. Entfernt am 26.07.2026 — die gültigen Regeln stehen im Sektionsblock. */ select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; } /* ── Mobile-Verdichtung: Capture bleibt bei 360×800 above the fold ── */ @media (max-width: 480px) { .hero-grid { padding-top: var(--sp-5); } .display { margin-top: var(--sp-4); } .countdown { margin-bottom: var(--sp-3); } .signup { margin-top: var(--sp-4); } } /* ===================================================================== Hero (Stand 26.07.2026) Full-Bleed-Bühne, Kopfzeile über die volle Breite, links Copy und Formular, rechts die Gastdemo im Gerät, unten das Wettbewerbs-Laufband. Vorher war alles unter .hero--v2 gescopet, parallel zu einem alten Hero-Block, der nie mehr gerendert wurde. Beides ist jetzt ein Block. Entfallen sind das Gründungsmitglied-Pill, die drei Häkchen-Zeilen, der Vorteils-Chip und die Fan-Zeile: sechs Textelemente im Hero waren zwei zu viel, und der Chip zeigte auf eine Sektion, die es nicht mehr gibt. ===================================================================== */ .wrap--hero { max-width: 1400px; } .hero { display: flex; flex-direction: column; /* Die sticky Nav (64px) steht IM Fluss vor dem Hero — 100dvh minus Nav, sonst rutscht das gepinnte Laufband exakt um die Nav-Höhe unter die Falz. Cap bei 1040px: auf sehr hohen Screens (und in Full-Page-Captures) soll der Hero nicht endlos aufziehen. */ min-height: min(calc(100dvh - 64px), 900px); padding-top: 32px; } /* Das Foto bringt das Flutlicht selbst, der CSS-Kegel wäre doppelt. */ .hero-light { display: none; } /* Desktop lädt seit dem 26.07. einen 16:9-Zuschnitt (build-media.py); das Hochformat war dort ein flacher Streifen aus einem 2400px hohen Bild. Darum hier kein Hochformat-Offset mehr, sondern mittige Ausrichtung. */ .hero-atmo img { object-position: 50% 42%; filter: saturate(1.08) brightness(1.1) contrast(1.03); } @media (max-width: 1279px) { .hero-atmo img { object-position: 50% 26%; } } .hero-atmo::after { background: radial-gradient(135% 88% at 50% 34%, transparent 62%, color-mix(in srgb, var(--bg-0) 64%, transparent) 100%), linear-gradient(90deg, var(--bg-0) 0%, color-mix(in srgb, var(--bg-0) 22%, transparent) 18%, transparent 36% 68%, color-mix(in srgb, var(--bg-0) 20%, transparent) 86%, var(--bg-0) 100%), linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 36%, transparent) 0%, transparent 24% 50%, color-mix(in srgb, var(--bg-0) 46%, transparent) 82%, var(--bg-0) 100%); } /* ── Kopfzeile: Countdown-Augenbraue + Dreierzeile ── */ .hero-head { padding: 0 20px; text-align: left; } .hero-head .display { margin-top: var(--sp-3); } .display { font-size: clamp(38px, 8vw, 58px); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; } .display span { display: block; } .display .dot { display: inline; font-style: normal; color: var(--gold); } /* Ab 1080px läuft die Zeile einzeilig über die Bühnenbreite: eine Zeile liest sich als Aussage, drei gestapelte als Liste. */ @media (min-width: 1080px) { .display { font-size: clamp(42px, 4.1vw, 58px); } .display span { display: inline; } .display span + span { margin-left: .34em; } } /* ── Hauptreihe: Copy links, Demo-Bühne rechts. .hero-grid nullt das seitliche .wrap-Padding — hier explizit zurückgeben. */ .hero-grid { display: grid; gap: var(--sp-5); padding: var(--sp-4) 20px var(--sp-3); flex: 1 1 auto; } .hero-copy { max-width: 620px; position: relative; } /* Lesbarkeits-Scrim unter der Copy-Spalte: das Foto darf sichtbar bleiben, der Text braucht trotzdem AA-Kontrast. */ .hero-copy::before { content: ''; position: absolute; inset: -28px -40px -28px -48px; z-index: -1; background: radial-gradient(85% 85% at 42% 46%, color-mix(in srgb, var(--bg-0) 62%, transparent), transparent 78%); pointer-events: none; } .hero-sub { margin-top: 0; color: var(--text-2); max-width: 50ch; font-size: 17px; } @media (min-width: 1080px) { .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; gap: var(--sp-6); } .hero-copy { max-width: 560px; } .hero .signup { margin-top: var(--sp-4); } } /* ── Demo-Bühne: iPhone + Steps-Rail + Elfi ── */ .stage--demo { margin-top: 0; padding-left: 0; min-height: 0; display: grid; gap: var(--sp-5); justify-items: center; } @media (min-width: 1080px) { .stage--demo { grid-template-columns: auto minmax(200px, 260px); align-items: center; justify-content: center; } } .demo-rig { position: relative; } .device--demo { width: min(284px, 86vw); margin: 0; transform: none; } @media (min-width: 1080px) { .device--demo { width: 272px; transform: rotate(1.25deg); } } .device--demo .device-screen { aspect-ratio: 9 / 16.2; } /* Screens: gestapelt, Crossfade + leichte Hebung */ .dscreen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px) scale(.988); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; } .dscreen.on { opacity: 1; transform: none; pointer-events: auto; } html:not(.js) .dscreen { position: static; opacity: 1; transform: none; } html:not(.js) .dscreen--tipp, html:not(.js) .dscreen--team { display: none; } @media (prefers-reduced-motion: reduce) { .dscreen { transition: none; } } .dscreen .phone-hd { border-bottom: 1px solid var(--line); } .dbody { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; } .dscreen .phone-foot { margin-top: auto; } /* Screen 1: Tippen */ .dmatch { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: color-mix(in srgb, var(--bg-2) 55%, transparent); } .dwhen { font-size: 10.5px; color: var(--text-3); letter-spacing: .06em; } .dscore { display: flex; align-items: center; justify-content: center; gap: 10px; } .dsbox { width: 52px; height: 52px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font-family: var(--font-display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; color: var(--text-1); } .dscore .dsep { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-3); } .dscreen.on .dsbox { border-color: var(--gold); } .dbonus { display: grid; gap: 7px; } .dbrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg-2); } .dblbl { font-size: 10.5px; color: var(--text-3); } .dbval { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; } .dbval i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--text-2); background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 1px 6px; } .djersey { width: 20px; height: 20px; display: inline-grid; place-items: center; background: var(--bg-0); border: 1px solid var(--line-strong); border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--text-1); } .dcta { display: grid; place-items: center; min-height: 40px; padding: 9px 12px; background: var(--gold); color: var(--gold-ink); border-radius: var(--r-ctl); font-size: 13px; font-weight: 600; } /* Eintipp-Momente: Ziffern + Bonuszeilen erscheinen gestaffelt bei Aktivierung */ .dscreen--tipp .dsbox, .dscreen--tipp .dbrow, .dscreen--tipp .dcta { opacity: 0; transform: translateY(6px); } .dscreen--tipp.on .dsbox, .dscreen--tipp.on .dbrow, .dscreen--tipp.on .dcta { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease); } .dscreen--tipp.on .dsbox:first-child { transition-delay: .25s; } .dscreen--tipp.on .dsbox:last-of-type { transition-delay: .45s; } .dscreen--tipp.on .dbrow:nth-child(1) { transition-delay: .8s; } .dscreen--tipp.on .dbrow:nth-child(2) { transition-delay: 1.05s; } .dscreen--tipp.on .dcta { transition-delay: 1.4s; } @media (prefers-reduced-motion: reduce) { .dscreen--tipp .dsbox, .dscreen--tipp .dbrow, .dscreen--tipp .dcta { opacity: 1; transform: none; transition: none; } } /* Screen 2: Aufstellen (1-2-1, wie „Beste Vier", nur kompakt) */ .dteam-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; } .dteam-h .dtag { font-size: 10px; letter-spacing: .08em; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: var(--r-pill); padding: 2px 8px; } .mpitch { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat, radial-gradient(130% 80% at 50% -10%, var(--gold-tint), transparent 55%), var(--bg-2); } .mpitch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--r-pill); transform: translate(-50%, -50%); pointer-events: none; } .mrow { position: relative; z-index: 1; display: flex; justify-content: center; gap: 34px; } .mj { position: relative; width: 58px; text-align: center; } .mj b { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto; border-radius: var(--r-ctl); background: var(--bg-1); border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-1); box-shadow: 0 10px 20px rgba(0,0,0,.4); } .mj i { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); } .mj .mpts { position: absolute; top: -7px; right: 2px; padding: 1px 5px; border-radius: var(--r-pill); font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--up) 24%, var(--bg-1)); color: var(--up); } .mj--top b { border-color: var(--gold); outline: 1px solid var(--gold); box-shadow: 0 0 0 4px var(--gold-tint), 0 12px 24px rgba(0,0,0,.5); } .mj--top .mpts { background: var(--gold); color: var(--gold-ink); } .dscreen--team .mj { opacity: 0; transform: translateY(6px); } .dscreen--team.on .mj { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); } .dscreen--team.on .mrow:nth-child(1) .mj { transition-delay: .25s; } .dscreen--team.on .mrow:nth-child(2) .mj:first-child { transition-delay: .45s; } .dscreen--team.on .mrow:nth-child(2) .mj:last-child { transition-delay: .6s; } .dscreen--team.on .mrow:nth-child(3) .mj { transition-delay: .8s; } @media (prefers-reduced-motion: reduce) { .dscreen--team .mj { opacity: 1; transform: none; transition: none; } } /* Screen 3: Livetabelle nutzt die bestehenden .board-Stile, nur die Spalten sind fürs schmalere Demo-Gerät verdichtet (sonst werden die Namen ellipsiert). */ .dscreen--live .board { display: flex; flex-direction: column; flex: 1 1 auto; } .dscreen--live .board-foot { margin-top: auto; } .device--demo .thead, .device--demo .trow { grid-template-columns: 26px 1fr 44px 48px; } .device--demo .thead { padding: 9px 12px 7px; } .device--demo .trow { padding: 11px 12px; } .device--demo .delta { right: 64px; } .device--demo .board-head { padding: 40px 14px 10px; } .device--demo .matchbar { padding: 10px 12px; } /* Steps-Rail (Kickbase-Anmutung: große Ziffern, aktive Zeile leuchtet) */ /* Die Schritte stehen über dem hellsten Teil des Stadionfotos. Vorher trug nur der aktive Schritt eine Fläche, die beiden anderen standen mit opacity .55 direkt auf den Flutlichtkränzen und waren dort praktisch unlesbar. Jetzt liegt unter der ganzen Leiste ein Scrim, und die Unterscheidung aktiv/inaktiv läuft über Farbe und die Goldkante statt über Transparenz. */ .demo-steps { list-style: none; margin: 0; padding: var(--sp-2); display: grid; gap: 2px; width: 100%; background: color-mix(in srgb, var(--bg-0) 62%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); } .dstep { position: relative; width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 12px; text-align: left; background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .dstep .dtxt b { color: var(--text-3); } .dstep .dtxt small { color: var(--text-3); } .dstep:hover .dtxt b { color: var(--text-2); } .dstep.on { background: color-mix(in srgb, var(--bg-1) 88%, transparent); border-left-color: var(--gold); } .dstep.on .dtxt b { color: var(--text-1); } .dstep.on .dtxt small { color: var(--text-2); } .dtxt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; } .dtxt small { display: block; margin-top: 2px; font-size: var(--fs-caption); line-height: 1.45; } .dprog { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; opacity: 0; } .dstep.on .dprog { opacity: 1; } .dprog i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--gold); } @media (prefers-reduced-motion: reduce) { .dprog { display: none; } } @media (max-width: 1079px) { .demo-steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); max-width: 460px; } .dstep { flex-direction: column; gap: 6px; padding: 10px; } .dtxt b { font-size: 13px; } .dtxt small { display: none; } } /* Elfi: schaut die Demo, wechselt Pose & Platz (JS). Motion-Sprache (Inhaber 17.07.): weich & lebendig — langsames Atmen mit leichtem Pendeln, sanfte Crossfades, Ortswechsel als weicher Bogen. Sprites = Higgsfield-Renders (WebP mit Alpha, verschiedene Seitenverhältnisse je Pose ⇒ object-fit contain, Fußlinie unten). NIE horizontal spiegeln: die Trikotnummer 11 muss lesbar bleiben (Inhaber 17.07.). reduced-motion: statische Anpfiff-Pose. */ .elfi { position: absolute; bottom: -6px; left: -98px; width: 112px; height: 144px; pointer-events: none; /* Ortswechsel als langsamer, weicher Bogen */ transition: transform 1.15s cubic-bezier(.32, .72, 0, 1); } .elfi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; /* Längerer, sanft geführter Crossfade zwischen den Posen (statt hartem Wechsel) */ transition: opacity .7s cubic-bezier(.4, 0, .2, 1); filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); will-change: opacity; } .elfi .elfi-b { opacity: 0; } .elfi.swap .elfi-a { opacity: 0; } .elfi.swap .elfi-b { opacity: 1; } /* Atmen + Pendeln in EINER Keyframe-Bahn: langsam, organisch, mit feinem Skalen-Atmen (Brustkorb) um den Fußpunkt. Keine harten Umkehrpunkte. */ .elfi-bob { width: 100%; height: 100%; position: relative; transform-origin: 50% 96%; animation: elfi-idle 8s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform; } @keyframes elfi-idle { 0% { transform: translateY(0) rotate(-0.7deg) scale(1); } 25% { transform: translateY(-2.4px) rotate(0.4deg) scale(1.006); } 50% { transform: translateY(-3.6px) rotate(0.9deg) scale(1.012); } 75% { transform: translateY(-1.8px) rotate(0.3deg) scale(1.006); } 100% { transform: translateY(0) rotate(-0.7deg) scale(1); } } .elfi.pos-b { transform: translateX(calc(100% + 272px - 50px)); } /* Freudensprung: weicher, federnder Absprung statt hartem Zucken */ .elfi.hop .elfi-bob { animation: elfi-hop .9s cubic-bezier(.34, 1.56, .5, 1); } @keyframes elfi-hop { 0% { transform: translateY(0) scale(1); } 32% { transform: translateY(-15px) scale(1.03, .97); } 62% { transform: translateY(-3px) scale(.99, 1.01); } 100% { transform: translateY(0) scale(1); } } /* „Block rausholen": ruhiger Griff nach unten, dann sanfter Überschwung nach oben — synchron zum Crossfade auf die Tipp-Pose (Block + Stift im Sprite). */ .elfi.pull .elfi-bob { animation: elfi-pull .8s cubic-bezier(.34, 1.4, .5, 1); } @keyframes elfi-pull { 0% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(3px) rotate(1.4deg) scale(.985); } 72% { transform: translateY(-4px) rotate(-.9deg) scale(1.018); } 100% { transform: translateY(0) rotate(0deg); } } @media (max-width: 1079px) { .elfi { width: 88px; height: 112px; left: -60px; bottom: -4px; } .elfi.pos-b { transform: translateX(calc(100% + min(284px, 86vw) - 44px)); } } @media (max-width: 540px) { .elfi { display: none; } } @media (prefers-reduced-motion: reduce) { .elfi, .elfi img { transition: none; } .elfi-bob { animation: none; } .elfi.hop .elfi-bob, .elfi.pull .elfi-bob { animation: none; } } /* ── Wettbewerbs-Marquee: volle Breite, Abschluss des ersten Viewports. Absolut an die Hero-Unterkante gepinnt (min-height 100dvh) — sitzt damit IMMER in der ersten Bildschirmhöhe; das Grid reserviert unten Platz. ── */ .leagues { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-1) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; } .hero-grid { padding-bottom: 72px; } .leagues-in { display: flex; width: max-content; } .leagues-track { list-style: none; margin: 0; padding: 13px 0; display: flex; align-items: center; flex: 0 0 auto; animation: leagues-run 34s linear infinite; } .leagues:hover .leagues-track { animation-play-state: paused; } .leagues-track li { display: inline-flex; align-items: center; padding: 0 clamp(22px, 3.4vw, 46px); font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: .01em; color: var(--text-2); white-space: nowrap; } .leagues-track li::after { /* Neutral, nicht gold: Gold bleibt Rang 1, CTA und Punktgewinn vorbehalten (tokens.css). Als Trenner im Laufband verwässerte es die Marke. */ content: ''; width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--text-3); opacity: .7; margin-left: clamp(44px, 6.8vw, 92px); } @keyframes leagues-run { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .leagues-in { width: 100%; justify-content: center; } .leagues-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 6px; } .leagues-track[aria-hidden="true"] { display: none; } .leagues-track li::after { margin-left: clamp(22px, 3.4vw, 46px); } .leagues-track li:last-child::after { display: none; } } /* Mobile-Feinschliff Hero */ @media (max-width: 1079px) { .hero { padding-top: 48px; min-height: 0; } .hero-grid { gap: var(--sp-6); } .stage--demo { margin-top: var(--sp-2); } } /* ===================================================================== Sektions-Feinschliff Beim Umbau am 26.07.2026 sind hier die Regeln für „Das Prinzip", „Für wen?", „Warum elftipp", „Das Modell", „So geht's" und den Schluss-CTA entfallen, weil die zugehörigen Sektionen von der Seite genommen wurden. Was blieb, sind Größen für Sektionskopf und die Traum-Elf. ===================================================================== */ .section { padding: clamp(56px, 9vh, 84px) 0; } .section + .section { padding-top: 0; } .shead { max-width: 720px; } .shead h2 { font-size: clamp(26px, 4vw, 40px); letter-spacing: -.02em; } .shead-h { font-size: clamp(26px, 4vw, 40px); } /* Traum-Elf mit echten Daten: Punkte groß im Chip, Meta-Zeile darunter */ .b4--real .jersey { width: 196px; } .b4--real .jersey b { width: 80px; height: 58px; font-size: 23px; border-radius: var(--r-ctl); } .b4--real .jersey i { margin-top: 7px; text-transform: none; letter-spacing: .01em; font-size: 12.5px; font-weight: 600; color: var(--text-1); } .b4--real .jm { display: block; margin-top: 3px; font-family: var(--font-body); font-size: 11.5px; color: var(--text-3); line-height: 1.45; } .b4--real .p-line { gap: clamp(18px, 4.5vw, 52px); } /* Schmale Viewports: zwei Mittelfeld-Chips müssen nebeneinander in den Pitch passen, sonst drückt die Grid-Zelle (min-width:auto) die ganze Sektion aus dem Viewport. */ @media (max-width: 599px) { .b4--real .p-line { gap: 10px; } .b4--real .jersey { width: calc(50% - 5px); max-width: 196px; } } /* ── Atmosphäre-Ebenen „Stadion-Echos" (Variante B, Inhaber 21.07.2026) ── Nach dem Hero war die Seite flaches Schwarz. Drei Foto-Tiefenebenen erzählen sie jetzt entlang (Spot-Kegel → Bar-Glut → Stadion-Finale), dazu zwei leise Gold-Glows als Bindegewebe. Alles z-index:-1 hinter dem Inhalt, Masken statt harter Kanten, Drift nur auf dem Compositor (transform), reduced-motion aus. */ #beste-vier, #abende { position: relative; } /* clip statt hidden: clip erzeugt KEINEN Scroll-Container, damit bleibt ein position:sticky im Inneren funktionsfähig (Galerie-Track ab 8 Medien). */ #beste-vier, #abende { overflow: hidden; overflow: clip; } /* ── Der Zahlen-Block auf Papier (Inhaber 26.07.2026, Kickbase-Referenz) ────── Die einzige helle Sektion der Seite. Sie trägt die harten Zahlen: die vier WM-Bestleistungen und die zwei Kennzahlen, die vorher unter den Fotos standen. Auf dem hellen Grund lesen sie als eigener Ort statt als weiterer Absatz im selben Schwarz. Das ist eine bewusste Ausnahme von "Dark-only" in DESIGN.md §2, vom Inhaber so entschieden. Damit sie eine Ausnahme bleibt und die Seite nicht anfängt zu blinken, gilt: GENAU EINMAL pro Seite, nie abwechselnd. Wer hier eine zweite helle Sektion einbaut, macht aus der Betonung ein Muster. Umgesetzt, indem die Token-Werte innerhalb der Sektion umgekehrt werden. Damit greifen alle bestehenden Regeln (.pitch, .b4-detail, .b4-rows, .figures, .kicker …) unverändert weiter, und es gibt keine zweite, parallel zu pflegende Hell-Variante jeder Komponente. Nachgebessert werden unten nur die drei Stellen, an denen die Umkehr falsch wäre. */ .section--paper { /* Papier + Tinte: das warme Weiß ist derselbe Ton, den die Seite sonst als Textfarbe nutzt (--text-1). Kein reines #FFF, das schlägt gegen das Seitenschwarz zu hart auf. */ --bg-0: #F2F2F0; --bg-1: #FFFFFF; --bg-2: #E8E8E4; --text-1: #0A0A0B; --text-2: #45453F; /* 9,0:1 auf Papier */ --text-3: #6A6A63; /* 5,2:1 auf Papier */ --line: rgba(10, 10, 11, .14); --line-strong: rgba(10, 10, 11, .26); /* Auf Weiß trägt der Gold-Tint mit .14 nicht mehr; der Heiligenschein um den besten Spieler wäre unsichtbar. */ --gold-tint: rgba(245, 184, 65, .30); background: var(--bg-0); color: var(--text-1); margin-top: clamp(56px, 9vh, 84px); padding-top: clamp(56px, 9vh, 84px); } /* Goldband an der Oberkante: markiert den Wechsel, ohne dass Gold zur Fläche wird (tokens.css: Gold ist Funke, nicht Fläche). */ .section--paper::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gold); pointer-events: none; } /* Die drei Stellen, an denen die Umkehr nicht stimmt: */ /* 1) Die Trikot-Chips bleiben dunkel und farbig (--jc steht inline im Markup). Ihre Zahl muss hell bleiben, sonst steht Schwarz auf Dunkelblau. */ .section--paper .jersey b { color: #F2F2F0; box-shadow: 0 12px 26px rgba(10, 10, 11, .22), inset 0 1px 0 rgba(255, 255, 255, .18); } .section--paper .jersey--top b { box-shadow: 0 0 0 7px var(--gold-tint), 0 16px 34px rgba(10, 10, 11, .28); } /* 2) Gold als Textfarbe versagt auf Papier (1,6:1). Die Gesamtpunktzahl wird deshalb zur Goldfläche mit dunkler Schrift: 8,9:1 und markentreu. */ .section--paper .b4-head .tot b { display: inline-block; padding: 2px 12px 4px; background: var(--gold); color: var(--gold-ink); border-radius: var(--r-ctl); font-size: 30px; } /* 3) Das Spielfeld soll sich vom Papier abheben, nicht heller werden. */ .section--paper .pitch { background-color: #ECECE8; } /* Auf Schwarz stützten sich die beiden Spalten gegenseitig und wurden gleich hoch gezogen. Auf Papier wird der Leerlauf darunter zur weißen Fläche mitten in einer weißen Karte, also zum Loch. Die Detailspalte umschließt deshalb nur noch ihren Inhalt; der Rest ist einfach Sektionsgrund. */ @media (min-width: 900px) { .section--paper .b4 { align-items: start; } } .section--paper { padding-bottom: clamp(72px, 11vh, 104px); } /* Mittellinie und Anstoßkreis waren auf Papier fast weg: dieselbe Hairline, die auf Schwarz aufhellt, verschwindet auf Weiß. */ .section--paper .pitch::before, .section--paper .pitch::after { border-color: rgba(10, 10, 11, .18); } /* Verhindert Schusterjungen wie ein einzelnes "Tipp" in der zweiten Zeile. */ .fig .lbl { text-wrap: balance; } #abende::before { content: ''; position: absolute; inset: -24px; z-index: -1; pointer-events: none; /* Kleine WebP-Variante, nicht das 137-KB-JPEG: Die Annahme „laedt die Galerie darunter ohnehin" stimmte, seit der Streifen eigene Zuschnitte ausliefert, nicht mehr — das Original kam als reiner Deko-Download obendrauf. Bei 16 % Deckkraft und 9px Weichzeichner reichen 23 KB. */ background: url('../assets/media/abend-2-440.webp') center 30% / cover no-repeat; opacity: .16; filter: blur(9px) saturate(.85); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } /* Die Gold-Glows ueber #so-gehts und #content sind entfallen: beide Sektionen gibt es seit dem 26.07.2026 nicht mehr. */ @keyframes atmo-drift { from { transform: scale(1.02); } to { transform: scale(1.065) translateY(-10px); } } #beste-vier::before, #abende::before { animation: atmo-drift 55s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { #beste-vier::before, #abende::before { animation: none; transform: none; } } /* ── Turnstile-Slot: nimmt nur Platz ein, wenn Cloudflare wirklich ein sichtbares Widget einblendet (interaction-only bleibt sonst leer). ── */ .ts-slot iframe { margin: 10px 0 2px; }