/* =========================================================== Primora Boxing — First-Screen-Direction-Lock Richtung B "PRIME EDITORIAL" + C-Hero. Arbeitswerte (CI final später). =========================================================== */ /* Fonts lokal gehostet (20.06.2026, DSGVO) — kein Google-Fonts-CDN mehr. Anton: statische Latin-Datei (Gewicht 400, einziges Gewicht der Schrift). Archivo: eine Variable-Font-Datei deckt alle 4 genutzten Gewichte (400/500/600/700) ab — das ist exakt dieselbe Datei, die Google selbst pro Gewicht ausliefert (kein Qualitätsverlust). Nur Latin-Subset (deckt deutsche Umlaute/ß über U+00DF/U+00E4/U+00F6/U+00FC ab) — kein Vietnamese/Latin-Extended nötig, da die Seite ausschließlich Deutsch ist. font-display: optional statt swap (30.06.2026, Kundenfeedback „Headline springt beim Reload"): `swap` rendert sofort in der Fallback-Schrift (Arial Narrow/system-ui) und tauscht sie nach dem Laden gegen Anton/Archivo aus — bei Anton vs. Arial Narrow ist der Breiten-/Stilunterschied groß genug, um als sichtbarer Sprung wahrgenommen zu werden. `optional` gibt dem Browser nur ein sehr kurzes Zeitfenster (~100ms) zum Laden; läuft die Datei in dieser Zeit durch (beide Dateien sind lokal, winzig: Anton 18,6 KB, Archivo 34,9 KB, kein Netzwerk-Overhead durch ein CDN), wird sie sofort final gerendert — läuft sie NICHT rechtzeitig durch, bleibt für diesen Seitenaufruf die Fallback-Schrift stehen, OHNE späteren Tausch/Sprung. Kombiniert mit `` im `` jeder Seite (lädt die Font-Dateien parallel zum CSS, nicht erst nach CSS-Parse) liegt die Font in der Praxis so gut wie immer rechtzeitig vor. */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: optional; src: url('assets/fonts/anton-v27-latin-400.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('assets/fonts/archivo-v25-latin-variable.woff2') format('woff2'); } :root { --black: #0A0A0B; --red: #E2231A; /* Arbeitswert aus Logo, vor Bau aus Vektor verifizieren */ --white: #FFFFFF; --body: #C9C9CC; --paper: #F3F2EF; /* heller Editorial-Anschnitt */ --ink: #131316; --maxw: 1680px; --pad: clamp(20px, 4vw, 72px); --font-head: 'Anton', 'Arial Narrow', sans-serif; --font-body: 'Archivo', system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--white); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Sticky-Header (Marke bleibt präsent + dezente Onepage-Nav) ---------- */ .masthead-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 12px var(--pad); background: rgba(10,10,11,0.86); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08); opacity: 0; transition: opacity .35s ease; pointer-events: none; /* JS schaltet auf auto, sobald der Header sichtbar ist */ } .masthead-sticky__home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .hex-mini { height: 26px; width: auto; } /* Echte Wortmarke im Sticky-Header (Desktop) — mehr Marke, weniger App-Icon */ .brand-mark { height: 27px; width: auto; display: block; } .brand-mini { font-family: var(--font-head); letter-spacing: .06em; font-size: 15px; } /* Dezente Onepage-Navigation — Editorial, klein, rechtsbündig. Kein Standard-Menü-Look. */ .sticky-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); } .sticky-nav a { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .sticky-nav a:hover { color: #fff; border-bottom-color: var(--red); } /* Mobile-Navigation (27.06.2026, Kundenfeedback) — kompakte horizontale Scroll-Pill-Nav statt Burger-Menü oder Tab-Leiste. Nur auf Mobile sichtbar (s. @media unten), erscheint mit demselben Scroll-Trigger wie .sticky-nav (siehe onScroll() in index.html/en.html) — dadurch deckt sie nie Hero/Video/Buttons ab, da sie erst nach dem Hero sichtbar wird. Zweite Zeile im selben fixed Header (.masthead-sticky), kein neues UI-Element/keine neue Ebene. */ .mobile-nav { display: none; } /* Sprachumschalter im Sticky-Header (Desktop/Tablet) — letzter Eintrag mit dezentem Trenner. Erbt Typo von .sticky-nav a, bekommt nur eine linke Trennlinie + etwas mehr Präsenz. */ .sticky-nav__lang { padding-left: clamp(14px, 2vw, 28px) !important; border-left: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85) !important; } /* Sprachumschalter auf dem First Screen (oben rechts, Desktop + Mobile sichtbar, da Sticky-Nav erst beim Scrollen erscheint und auf Mobile ausgeblendet ist). */ .cover__lang { flex: 0 0 auto; margin-top: 6px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.82); text-decoration: none; padding: 6px 13px; border: 1px solid rgba(255,255,255,0.30); border-radius: 6px; background: rgba(10,10,11,0.28); transition: color .2s ease, border-color .2s ease, background .2s ease; } .cover__lang:hover { color: #fff; border-color: var(--red); background: rgba(10,10,11,0.5); } /* ===================== COVER / FIRST SCREEN ===================== */ .cover { position: relative; min-height: 100vh; display: grid; overflow: hidden; } /* Bild-Panel */ .cover__media { position: absolute; inset: 0; z-index: 0; transform-origin: center 30%; will-change: transform, filter; } .cover__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; } /* Grade: dunkler links/unten (Lesbarkeit + C-Stimmung), Mitte/oben Licht durchlassen */ .cover__grade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.36) 40%, rgba(10,10,11,0.06) 72%, rgba(10,10,11,0.30) 100%), linear-gradient(90deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.10) 45%, rgba(10,10,11,0) 70%), radial-gradient(58% 55% at 64% 26%, rgba(226,35,26,0.16) 0%, rgba(226,35,26,0) 72%); } /* Editorial-Inhalt */ .cover__content { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(18px, 3vh, 34px) var(--pad); min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; will-change: opacity, transform; } /* Masthead — echtes Logo-Lockup (PB-Logo-04, transparent) statt Schrift-Fake */ .masthead { display: flex; align-items: center; gap: 14px; } .brand-lockup { height: clamp(80px, 8.5vw, 112px); width: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55)); } .hex { width: 40px; height: 40px; } .brand { font-family: var(--font-head); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .07em; line-height: 1; display: inline-flex; gap: .5ch; } .brand__b { color: var(--red); } /* Outline-Pill / Magazin-UI-System (gerundete Rahmen-Container für Datum/Labels) */ .pill { display: inline-block; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 5px 12px; font-family: var(--font-head); letter-spacing: .04em; line-height: 1; } .folio { margin-left: auto; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--body); padding-top: 4px; } /* Obere Editorial-Struktur (bewusster Negativraum) */ .cover__top { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } /* Editorial-Spine (feine vertikale Linie am linken Rand) — auf Kundenwunsch entfernt (27.06.2026): wirkte am First Screen als sichtbarer Rand-Strich. Element bleibt im HTML, wird hier deaktiviert. */ .cover__spine { display: none; } /* Dezentes Diagonal-Motiv (Echo der Logo-Linie), sehr subtil im oberen Raum */ .cover__diagonal { position: absolute; left: -4%; top: 8%; width: 64%; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 45%, rgba(226,35,26,0.22) 100%); transform: rotate(-19deg); transform-origin: left center; z-index: 1; pointer-events: none; } /* Headline-Block (unteres Drittel, links) */ .cover__headline { align-self: end; } .kicker { font-size: clamp(11px, 1vw, 13px); letter-spacing: .3em; text-transform: uppercase; color: var(--white); display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(26px, 3.2vh, 42px); } .kicker__line { flex: 0 0 auto; width: 34px; height: 2px; background: var(--red); transform: translateY(-4px); } .kicker__txt { display: block; } /* umbricht sauber, linksbündig nach der Linie */ .kicker--dark { color: var(--ink); } .headline { font-family: var(--font-head); font-weight: 400; font-size: clamp(46px, 7vw, 110px); line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; text-shadow: 0 2px 40px rgba(0,0,0,0.55); } .sub { margin-top: 22px; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.5; color: var(--body); max-width: 46ch; } /* Fußzone: Eventstreifen + Partner */ .cover__foot { align-self: end; margin-top: clamp(20px, 4vh, 48px); } .eventstrip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 0 12px; border-top: 1px solid rgba(255,255,255,0.16); } .eventstrip__label { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--body); } .eventstrip__data { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); letter-spacing: .04em; font-size: clamp(15px, 1.5vw, 20px); } .eventstrip__data .pill { font-size: clamp(13px, 1.3vw, 16px); } .eventstrip__cta { margin-left: auto; display: flex; gap: 10px; } /* Button-System: Outline-Rounded-Rect (Magazin-UI), kein Netflix-Vollflächenblock. Rot bleibt Signal über Rahmen + Hover-Füllung, nicht als roter Block. */ .btn { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 12px 24px; border-radius: 6px; border: 1.5px solid transparent; background: transparent; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; display: inline-flex; align-items: center; white-space: nowrap; } .btn--primary { border-color: var(--red); color: #fff; font-weight: 600; } .btn--primary:hover { background: var(--red); border-color: var(--red); transform: translateY(-1px); } .btn--ghost { border-color: rgba(255,255,255,0.32); color: #fff; } .btn--ghost:hover { border-color: #fff; transform: translateY(-1px); } .partners { margin-top: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(201,201,204,0.6); } /* Tag-Signatur + Scroll-Cue */ .tags { position: absolute; top: 50%; right: var(--pad); transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,0.55); z-index: 3; } .scrollcue { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,0.5); z-index: 3; } .scrollcue__hex { width: 16px; height: 16px; animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } } /* ===================== EDITORIAL-ANSCHNITT ===================== */ .editorial { position: relative; z-index: 4; background: var(--paper); color: var(--ink); min-height: 64vh; display: flex; align-items: flex-start; /* Gemeinsamer Section-Rhythmus (27.06.2026): oben/unten gleich, kein übergroßes Bottom-Padding mehr — beseitigt die zu große Luft im Übergang S2→S3. */ padding: clamp(52px, 8.5vh, 100px) var(--pad); box-shadow: 0 -40px 80px rgba(0,0,0,0.5); } .editorial__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; border-top: 1px solid rgba(19,19,22,0.16); padding-top: clamp(28px, 5vh, 56px); } .editorial__h { font-family: var(--font-head); font-weight: 400; font-size: clamp(38px, 6vw, 92px); line-height: 1.08; text-transform: uppercase; margin-bottom: 36px; letter-spacing: .01em; } .editorial__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; max-width: 1100px; } .editorial__cols p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #34343a; } /* Proof-/Fakten-Zeile */ .editorial__proof { margin-top: clamp(36px, 5vh, 60px); padding-top: clamp(14px, 2vh, 22px); border-top: 1px solid rgba(19,19,22,0.10); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(19,19,22,0.38); } .proof__item { white-space: nowrap; } /* Separator als ::after am vorherigen Item — verhindert führendes · beim Zeilenumbruch */ .proof__item:not(:last-child)::after { content: '\00a0\00B7\00a0'; color: var(--red); opacity: .55; } /* Scroll-Reveal */ .js-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; } .js-reveal.is-visible { opacity: 1; transform: translateY(0); } .js-reveal[data-delay="1"] { transition-delay: .12s; } .js-reveal[data-delay="2"] { transition-delay: .26s; } .js-reveal[data-delay="3"] { transition-delay: .44s; } @media (prefers-reduced-motion: reduce) { .js-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===================== SEKTION 3: DIE FIGHT NIGHT ===================== */ /* Dunkle Editorial-Sektion. Rhythmus: S1 dunkel → S2 Paper → S3 dunkel. Eigene Klasse, erbt NICHT .editorial (Paper). Event = Beweis, nicht die Marke. */ .fightnight { position: relative; z-index: 4; overflow: hidden; background: var(--black); color: var(--white); min-height: 64vh; display: flex; align-items: flex-start; /* Gemeinsamer Section-Rhythmus (27.06.2026) */ padding: clamp(52px, 8.5vh, 100px) var(--pad); } /* Diagonale Geste im Logo-Winkel (Primora-Slash) — Kompositionsachse, kein Flyer */ .fightnight__diagonal { position: absolute; left: -2%; bottom: -10%; width: 56%; height: 2px; z-index: 1; background: linear-gradient(90deg, rgba(226,35,26,0.72) 0%, rgba(226,35,26,0.30) 40%, rgba(255,255,255,0) 100%); transform: rotate(-56deg); transform-origin: left center; pointer-events: none; } /* Rechte Brand-Struktur: Hexagon-Outline + Slash (Linework/Winkel, keine Logo-Fläche). Gibt der rechten Seite Spannung, bleibt editorial-ruhig. */ .fightnight__geo { position: absolute; right: -7%; top: 50%; transform: translateY(-50%); width: clamp(340px, 38vw, 560px); height: auto; z-index: 0; pointer-events: none; } .fightnight__geo .geo__hex { fill: rgba(226,35,26,0.03); stroke: rgba(255,255,255,0.13); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .fightnight__geo .geo__slash { stroke: rgba(226,35,26,0.55); stroke-width: 2; vector-effect: non-scaling-stroke; } .fightnight__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; border-top: 1px solid rgba(255,255,255,0.16); padding-top: clamp(28px, 5vh, 56px); } .fightnight__h { font-family: var(--font-head); font-weight: 400; font-size: clamp(38px, 6vw, 92px); line-height: 1.08; text-transform: uppercase; letter-spacing: .01em; margin-bottom: clamp(22px, 3.2vh, 40px); } /* Dateline: Datum als Beweis (Anton) in Magazin-Outline-Plate, der H2 untergeordnet. */ .fightnight__date { font-family: var(--font-head); font-weight: 400; font-size: clamp(28px, 3.6vw, 56px); line-height: 1; letter-spacing: .02em; color: var(--white); margin-bottom: clamp(24px, 3.6vh, 44px); } .pill--date { border-color: rgba(226,35,26,0.55); border-width: 1.5px; padding: 12px 20px; } .fightnight__lead { max-width: 54ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--body); margin-bottom: clamp(28px, 4vh, 48px); } /* CTA-Zeile: Tickets inaktiv (Eventim-Link fehlt) + DAZN als ruhiger Hinweis. */ .fightnight__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .btn--pending { background: transparent; border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.42); cursor: default; } /* Live-Sender-Zeile (27.06.2026, Kundenfeedback: DAZN war zu dominant) — ersetzt die vorherige Einzel-Erwähnung "Live auf DAZN" durch eine ruhige, vollständige Senderzeile. Macht die Übertragung sichtbarer, ohne einen einzelnen Sender hervorzuheben. Typografische Labels statt Logos — keine echten Logo-Assets für DAZN/PRIME FIGHT HD/FIGHT+ HD/VIASPO vorhanden (nur Dreamboxing existiert als Datei, s. partner-dreamboxing.png). Sobald echte Logos vorliegen, können sie hier dezent (gleiche Höhe/Dämpfung wie Dreamboxing in S5) ergänzt werden. */ .fightnight__live { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin-top: clamp(18px, 2.6vh, 28px); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .fightnight__live-label { color: var(--red); font-weight: 700; margin-right: 14px; } .fightnight__live-name { color: rgba(201,201,204,0.65); font-weight: 600; } .fightnight__live-name:not(:last-child)::after { content: '\00a0\00B7\00a0'; color: rgba(226,35,26,0.5); opacity: .8; } /* Dateline kommt einen Tick markanter herein (ruhig, kein Effekt, kein Zähler). */ .js-reveal--strong { transform: translateY(28px); } .js-reveal--strong.is-visible { transform: translateY(0); } /* ===================== S3 VIDEO PANEL (Arbeitsstand — Interim bis eigenes Primora-Footage) ===================== */ .fightnight__videopanel { display: none; position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 1; overflow: hidden; pointer-events: none; } .fightnight__video { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .fightnight__videograde { position: absolute; inset: 0; background: linear-gradient( to right, var(--black) 0%, rgba(10,10,11,0.85) 20%, rgba(10,10,11,0.40) 50%, rgba(10,10,11,0.00) 75% ); } /* ===================== RESPONSIVE ===================== */ /* Desktop "Cover-Spread": Bild als rechtes Panel, links Schwarz/Editorial */ @media (min-width: 1024px) { /* Bild als integriertes Vollbild-Cover (keine rechte Spalte mehr) */ .cover__media { inset: 0; } .cover__img { object-position: 52% 12%; } /* A (Fallback) */ [data-hero="arena"] .cover__img { object-position: 43% 50%; } /* C: Arena links, Robe/Boxer rechts der Headline */ [data-hero="robe"] .cover__img { object-position: 50% 38%; } /* Robe: Logo zentriert, Ring/Publikum unten sichtbar */ .headline { max-width: 660px; } .cover__headline { max-width: 720px; } /* Kein schwarzer Deckel: oben nur Scrim fürs Logo, Arena in der oberen Mitte offen, Dunkel fokussiert auf die untere linke Headline-Zone. */ .cover__grade { background: radial-gradient(135% 105% at -8% 108%, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.86) 26%, rgba(10,10,11,0.42) 48%, rgba(10,10,11,0.10) 66%, rgba(10,10,11,0.00) 80%), linear-gradient(0deg, rgba(10,10,11,0.82) 0%, rgba(10,10,11,0.0) 30%), linear-gradient(180deg, rgba(10,10,11,0.58) 0%, rgba(10,10,11,0.0) 15%), radial-gradient(62% 60% at 66% 24%, rgba(226,35,26,0.18) 0%, rgba(226,35,26,0) 72%); } /* Breiter als zuvor (760px): "Tickets in Kürze" ist länger als das frühere "Tickets" und beide CTAs sind jetzt gleich breite Pending-Buttons — Eventstrip braucht mehr Raum, um als eine Zeile zu bleiben (Bugfix 17.06.2026). */ .cover__foot { max-width: 900px; } } /* Tablet / Zwischenbreite: Bild vollflächig hinter Inhalt */ @media (min-width: 768px) and (max-width: 1023px) { .cover__img { object-position: 60% 20%; } /* A (Fallback) */ [data-hero="arena"] .cover__img { object-position: 50% 40%; } /* C auf Tablet: Boxer zentriert */ [data-hero="robe"] .cover__img { object-position: 50% 42%; } /* Robe auf Tablet */ .scrollcue { display: none; } /* sonst Kollision mit Partner-Zeile */ .cover__foot { margin-top: clamp(16px, 3vh, 32px); } } /* Mobile: vollflächiges Cover-Foto, Inhalt gestapelt */ @media (max-width: 767px) { .folio { display: none; } .tags { display: none; } .kicker { font-size: 10px; letter-spacing: .12em; gap: 10px; max-width: 42ch; } .kicker__line { width: 24px; } .cover__img { object-position: 50% 18%; } .cover__grade { background: linear-gradient(0deg, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.55) 38%, rgba(10,10,11,0.05) 66%, rgba(10,10,11,0.45) 100%), radial-gradient(70% 40% at 60% 26%, rgba(226,35,26,0.14) 0%, rgba(226,35,26,0) 70%); } /* Fix Safari-Browserleiste: dynamische Viewport-Höhe + Safe-Area, damit Eventstreifen/CTA nicht hinter der unteren Browser-UI verschwinden. */ .cover { min-height: 100svh; min-height: 100dvh; } .cover__content { min-height: 100svh; min-height: 100dvh; padding-top: 20px; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); } .headline { font-size: clamp(42px, 13.5vw, 72px); } .sub { font-size: 15px; margin-top: 16px; max-width: 34ch; } .eventstrip { gap: 8px 14px; } .eventstrip__cta { margin-left: 0; width: 100%; } .btn { flex: 1; justify-content: center; text-align: center; padding: 14px 16px; } .brand-lockup { height: 72px; } .partners { font-size: 10px; letter-spacing: .1em; } .scrollcue { display: none; } .editorial__cols { grid-template-columns: 1fr; gap: 22px; } /* S3: CTA gestapelt, Pending-Button nicht über volle Breite zwingen */ .fightnight__cta { flex-direction: column; align-items: flex-start; gap: 14px; } .fightnight__cta .btn { flex: 0 0 auto; width: auto; } /* S3: Datums-Plate auf Mobile schlanker/feiner */ .fightnight__date { font-size: clamp(23px, 7vw, 28px); } .pill--date { padding: 7px 13px; border-width: 1px; } /* S3: Brand-Struktur als dezenter Eck-Akzent unten rechts (einspaltig, kein Textfeld-Overlap) */ .fightnight__geo { width: clamp(190px, 54vw, 250px); right: -22%; top: auto; bottom: -7%; transform: none; opacity: 0.75; } /* Sticky-Header kompakt: nur Hexagon (Wortmarke nur Desktop) */ .brand-mark { display: none; } } /* S3 Desktop: Video-Panel aktiv ≥ 1024px, kein reduced-motion */ @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .fightnight__videopanel { display: block; } .fightnight__geo { display: none; } .fightnight__inner { max-width: 580px; margin-left: 0; } } /* Accessibility: reduzierte Bewegung */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scrollcue__hex { animation: none; } .cover__media { transform: none !important; filter: none !important; } .cover__content { transform: none !important; opacity: 1 !important; } .fightnight__videopanel { display: none !important; } } /* ===================== SEKTION 4: DIE ATHLETEN — CSS v15 ===================== */ /* Roster-Sektion — 4 gleichwertige Panels. Kein Event-Bezug. Kein Ticket-CTA. ARBEITSSTAND-FOTOS: roster-omar.jpg = produktionstauglich; Rechte-Check vor Go-live nötig roster-jasurbek.jpg = Arbeitsbild (Amateur-Kulisse / BELAZ-Backdrop); Ersatz-Shooting nötig Ibo Diallo = kein eigenes Foto; Placeholder-Panel; Shooting nötig Shae Green = kein eigenes Foto; Placeholder-Panel; Shooting nötig */ .roster { position: relative; background: var(--black); color: var(--white); /* Gemeinsamer Section-Rhythmus (27.06.2026); Panels laufen unten bündig in S5 */ padding-top: clamp(52px, 8.5vh, 100px); padding-bottom: 0; overflow: hidden; } /* Primora-Diagonale — Markenanschluss an S1/S3, dezenter Akzent */ .roster__diagonal { position: absolute; right: -2%; bottom: -10%; width: 56%; height: 2px; z-index: 1; background: linear-gradient(270deg, rgba(226,35,26,0.62) 0%, rgba(226,35,26,0.26) 42%, rgba(255,255,255,0) 100%); transform: rotate(-56deg); transform-origin: right center; pointer-events: none; } .roster__header { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 0 var(--pad); border-top: 1px solid rgba(255,255,255,0.16); padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(32px, 5vh, 56px); } .roster__h { font-family: var(--font-head); font-size: clamp(36px, 5vw, 78px); text-transform: uppercase; /* mehr Tracking — Versal-Anton braucht Luft, sonst klumpig (harmonisiert mit S5/S6) */ letter-spacing: 0.03em; line-height: 1.06; color: var(--white); margin-top: 16px; } /* 3 gleichbreite vertikale Panels, 1px-Linie als Trenner (Ibo entfernt, 20.06.2026) */ .roster__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.10); max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; } /* Panel weniger extrem hochformatig (Politur 2, 20.06.2026) — gibt der Nameplate mehr Gewicht relativ zur Bildfläche, ohne neuen Crop/neues Bild zu brauchen. */ .athlete { position: relative; aspect-ratio: 3/4; background: var(--black); overflow: hidden; } .athlete__media { position: absolute; inset: 0; } /* Einheitliche Grade — alle vier Panels im gleichen entsättigten Register */ .athlete__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(0.78) contrast(1.10) saturate(0.60); transition: transform 0.7s ease; display: block; } /* Desktop-Hover: leichter Zoom — via @media (hover) damit Mobile nicht betroffen */ @media (hover: hover) { .athlete:hover .athlete__img { transform: scale(1.04); } } /* Jasurbek (Arbeitsbild, BELAZ-Backdrop) — DEPRECATED (30.06.2026): nicht mehr im Markup referenziert (s. .athlete__img--jasurbek-clean unten), Regel bleibt nur stehen, falls das alte Asset/Bild je wieder gebraucht wird. Kein Asset gelöscht. */ .athlete__img--jasurbek { object-position: center 12%; filter: brightness(0.46) contrast(1.22) saturate(0.32); } /* Jasurbek-Bildwechsel (30.06.2026, Kundenfeedback): neues, von Primora geliefertes Studiofoto (athlete-jasurbek-clean.jpg) ersetzt das bisherige BELAZ-/Fremdkulissen-Arbeitsbild — reduziert das Fremdmarken-/Sponsor-Risiko, das im Audit markiert war. Heller Studio-Weißhintergrund statt dunklem Ring-Kontext wie bei Omar/Shae — deshalb eigene Abdunklung. Filterwert per Canvas-Helligkeitsmessung kalibriert (nicht nach Augenmaß): Ausgangsfilter brightness(0.64) ergab eine mittlere Panel-Helligkeit von 107.6 (0–255-Skala) — deutlich heller als Omar (10.7) und Shae (43.6) und damit ein sichtbarer Ausreißer. Nachjustierung (30.06.2026, Kundenfeedback „wirkt zu dunkel/zugedrückt"): die erste Korrektur auf brightness(0.32) (→ Ø 40.3) saß optisch zu nah an Shae und wirkte zugedrückt/unnatürlich. Erneut per Canvas-Messung kalibriert auf brightness(0.40) contrast(1.16) saturate(0.44) → Ø 59.9 — spürbar heller/natürlicher als die erste Korrektur, bleibt aber klar unterhalb des ursprünglichen Ausreißers (107.6) und im dunklen Editorial-Register der Sektion. object-position schiebt den minimalen Vertikal-Crop (das Panel zeigt durch das nahe 3:4-Seitenverhältnis ohnehin fast das komplette Originalbild) leicht nach oben, um unnötigen Weißraum über dem Kopf zu kappen, Gesicht/Fäuste bleiben vollständig im Bild. */ .athlete__img--jasurbek-clean { object-position: center 78%; filter: brightness(0.40) contrast(1.16) saturate(0.44); } /* Scrim Politur 2 (20.06.2026): die Nameplate-Zone soll als FLÄCHE tragen, nicht als langsam ausfadende Vignette — deshalb unten ein nahezu solider Block (0–32%), erst darüber Übergang ins Foto. Macht die Info-Zone als bewusst gestaltete „Plate" sichtbar statt als Caption. */ .athlete__grade { position: absolute; inset: 0; background: linear-gradient( to top, rgba(10,10,11,1) 0%, rgba(10,10,11,1) 32%, rgba(10,10,11,0.88) 44%, rgba(10,10,11,0.46) 60%, rgba(10,10,11,0.10) 78%, rgba(10,10,11,0) 90% ); pointer-events: none; } /* Jasurbek: stärkerer Overlay zur Backdrop-Unterdrückung */ .athlete--jasurbek .athlete__grade { background: linear-gradient( to top, rgba(10,10,11,1) 0%, rgba(10,10,11,1) 36%, rgba(10,10,11,0.94) 48%, rgba(10,10,11,0.74) 64%, rgba(10,10,11,0.52) 80%, rgba(10,10,11,0.36) 100% ); } /* Index 01–04 — Editorial-Marke oben im Panel */ .athlete__index { position: absolute; top: clamp(12px, 1.5vw, 20px); left: clamp(12px, 1.5vw, 20px); font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: rgba(255,255,255,0.32); z-index: 3; line-height: 1; } /* Athlet-Info: Nameplate-Zone (Politur 2, 20.06.2026), Inhalt von oben verankert (justify-content: flex-start). min-height ist exakt auf den längsten realen Inhalt (Jasurbek mit 2-zeiligen Honors) bemessen, damit alle 3 Panels dieselbe Zonenhöhe und damit denselben Name-Y bekommen — KEIN Caption-Wrap, sondern eine feste, gleich hohe Fläche pro Panel. Bei ~639px Panelhöhe (1440px-Viewport) entspricht das ~40% — etwas mehr als der grobe 28–35%-Richtwert, weil Jasurbeks zusätzliche Honors-Zeile sonst gequetscht wirken würde. */ .athlete__info { position: absolute; bottom: 0; left: 0; right: 0; height: clamp(220px, 41%, 268px); min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2.2vw, 26px) clamp(20px, 2.6vw, 30px); z-index: 2; } /* Roter Brand-Marker statt generischer Hairline — kurze Tab-Linie oben in der Nameplate, gleiche Sprache wie die Kicker-Linie im Rest der Seite, macht den Bereich erkennbar als gestaltete Fläche statt als ausfadende Bildunterschrift. */ .athlete__info::before { content: ''; position: absolute; top: 0; left: clamp(16px, 2.2vw, 26px); width: 34px; height: 3px; background: var(--red); } /* Name: Hauptsignal — deutlich präsenter (Politur 2, 20.06.2026) */ .athlete__name { display: block; font-family: var(--font-head); font-size: clamp(28px, 3vw, 50px); text-transform: uppercase; letter-spacing: 0.012em; line-height: 1.02; color: var(--white); margin-top: 12px; } /* Rote Linie unter dem Namen — jetzt immer leicht sichtbar (Brand-Präsenz), zieht bei Hover weiter */ .athlete__name::after { content: ''; display: block; height: 2px; width: 15%; background: var(--red); margin-top: 9px; transition: width 0.38s ease; } @media (hover: hover) { .athlete:hover .athlete__name::after { width: 42%; } } /* Gewichtsklasse / Credential: rotes Caps-Label — größer, lesbarer */ .athlete__class { display: block; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--red); margin-top: 12px; } /* Key-Fact: ein starker Fakt pro Athlet, bold, deutlich lesbar */ .athlete__fact { display: block; font-family: var(--font-body); font-size: clamp(13px, 1.2vw, 15px); font-weight: 700; color: var(--white); margin-top: 7px; line-height: 1.25; } /* Honors: zusätzliche Erfolge-Zeile (Jasurbek) — als zwei klare, kompakte Zeilen statt Textwurst-Wrap, bleibt damit lesbar statt gequetscht/winzig zu wirken */ .athlete__honors { display: block; margin-top: 3px; } .athlete__honors-line { display: block; font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.01em; color: rgba(201,201,204,0.78); line-height: 1.05; } .athlete__honors-line + .athlete__honors-line { margin-top: 0; } /* Pro-Record-Label (27.06.2026, Kundenfeedback): kleines, einheitliches Label direkt vor der Bilanz, macht bei allen Athleten klar, dass es sich um Profi-Bilanzen handelt — keine neue Hierarchie, nur ein dezenter Zusatzhinweis (gleiche Logik wie .athlete__class, aber bewusst leiser: kein Rot, kleinere Schrift). DE+EN identisch ("Pro Record" ist im Boxsport Fachbegriff, keine Übersetzung nötig). Abstand verschlankt (27.06.2026, Nameplate-Korrektur, s. POLISH-LISTE #44): margin-top von 10px auf 6px reduziert — Jasurbeks zusätzliche Honors-Zeile ließ seine .athlete__info-Box den gemeinsamen Höhen-Floor (262px) überschreiten, wodurch sein Name höher saß als bei Omar/Shae (Box ist bottom:0-verankert). Diese + die Honors-Verschlankung oben bringen seine Gesamthöhe zurück auf den gemeinsamen Floor, ohne Omar/Shae anzufassen (deren Box bleibt ohnehin auf dem Floor geklammert, unabhängig vom internen Spacing). */ .athlete__record-label { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 6px; } .athlete__record-label + .athlete__record { margin-top: 2px; } /* Bilanz: eigene Stat-Zeile, klar getrennt von Fact/Honors, deutlich lesbar */ .athlete__record { display: block; font-family: var(--font-body); font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; letter-spacing: 0.015em; color: rgba(255,255,255,0.88); margin-top: 10px; } /* Social-Link: sekundär, aber klarer sichtbar als zuvor — eigene Zeile, klar abgesetzt */ .athlete__social { display: block; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.62); text-decoration: none; margin-top: 12px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } @media (hover: hover) { .athlete__social:hover { color: var(--white); border-bottom-color: var(--red); } } /* Mobile: 1 Spalte, sauber gestapelt — 3 Panels (Ibo entfernt, 20.06.2026), always-on, kein Hover-Requirement. Gleiche Nameplate-Logik wie Desktop, etwas kompaktere Maße. */ @media (max-width: 767px) { .roster__grid { grid-template-columns: 1fr; } .athlete__info { height: 240px; min-height: 0; padding: 20px 20px 22px; } .athlete__name { font-size: clamp(24px, 7.2vw, 32px); margin-top: 12px; } .athlete__name::after { width: 22%; } .athlete__class { font-size: 11.5px; margin-top: 12px; } .athlete__fact { font-size: 13px; margin-top: 7px; } .athlete__honors-line { font-size: 11px; } .athlete__record-label { font-size: 9.5px; margin-top: 11px; } .athlete__record { font-size: 13px; margin-top: 11px; } .athlete__record-label + .athlete__record { margin-top: 2px; } .athlete__social { font-size: 11px; margin-top: 13px; } .athlete__index { font-size: 10px; } } /* ===================== SEKTION 5: SICHTBARKEIT — CSS v16 ===================== */ /* Media / Partner / Business. Paper-Hintergrund (Rhythmuswechsel nach S3+S4 dunkel). Freigegebene Sender: DAZN, VIASPO, PRIME FIGHT HD, FIGHT+ HD. Keine Reichweiten-Zahlen, keine weiteren Partnerlogos ohne Freigabe. CTA „Partneranfrage" = Arbeitsstand, Link/Formular vor Go-live setzen. */ .sichtbarkeit { position: relative; background: var(--paper); color: var(--black); overflow: hidden; border-top: 1px solid rgba(10,10,11,0.08); } /* Primora-Diagonale auf hellem Hintergrund — stark reduzierte Deckkraft */ .sichtbarkeit__diagonal { position: absolute; right: -2%; bottom: -8%; width: 52%; height: 2px; z-index: 1; background: linear-gradient(270deg, rgba(226,35,26,0.16) 0%, rgba(226,35,26,0.06) 42%, transparent 100%); transform: rotate(-56deg); transform-origin: right center; pointer-events: none; } .sichtbarkeit__inner { max-width: var(--maxw); margin: 0 auto; /* Gemeinsamer Section-Rhythmus (27.06.2026) */ padding: clamp(52px,8.5vh,100px) var(--pad); } /* Kicker erbt .kicker + .kicker--dark — keine eigene Regel nötig */ /* Zwei-Spalten-Split-Editorial */ .sichtbarkeit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,96px); margin-top: clamp(32px,5vh,52px); } /* Linke Spalte: Medien / Sichtbarkeit */ .sichtbarkeit__h { font-family: var(--font-head); font-size: clamp(30px,3.7vw,60px); text-transform: uppercase; /* Anton ist kondensiert/schwer — mehr Tracking + offenere Zeile entlastet die Section-Headline, damit sie nicht gequetscht/klumpig wirkt (Feinjustierung 27.06.2026). */ letter-spacing: 0.04em; line-height: 1.08; color: var(--black); margin-bottom: clamp(18px,2.5vh,28px); } .sichtbarkeit__lead { font-family: var(--font-body); font-size: clamp(15px,1.1vw,17px); line-height: 1.68; color: var(--black); } /* Sender-/Partner-Quellenzeile: typografisch, dezent, kein Logo-Spotlight */ .sichtbarkeit__logos { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: clamp(22px,3vh,32px); padding-top: clamp(16px,2vh,22px); border-top: 1px solid rgba(10,10,11,0.13); } .sichtbarkeit__logo-name { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(10,10,11,0.38); } /* Rechte Spalte: Partner / Business */ .sichtbarkeit__col--partner { padding-left: clamp(0px,1.5vw,24px); border-left: 1px solid rgba(10,10,11,0.10); display: flex; flex-direction: column; align-items: flex-start; } .sichtbarkeit__partner-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red); margin-bottom: clamp(14px,2vh,22px); } .sichtbarkeit__partner-copy { font-family: var(--font-body); font-size: clamp(15px,1.1vw,17px); line-height: 1.68; color: var(--black); } /* Partner-/Reichweiten-Zeile: gleiche ruhige Quellenzeilen-Optik wie .sichtbarkeit__logos links. Dreamboxing-Logo gedämpft (Graustufen + Opacity) — kein Farbakzent, kein Logo-Spotlight. Reichweite = Arbeitsclaim (Kunde 17.06.2026), vor Go-live final verifizieren. */ .sichtbarkeit__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: clamp(20px,3vh,30px); padding-top: clamp(16px,2vh,22px); border-top: 1px solid rgba(10,10,11,0.13); } .sichtbarkeit__partner-logo { height: 14px; width: auto; display: block; filter: grayscale(1); opacity: 0.45; } .sichtbarkeit__proof-item { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(10,10,11,0.38); } /* CTA-Zeile (27.06.2026, vereinfacht s. POLISH-LISTE #40): nur noch EIN Button (zur Partner-Seite). Wrapper bleibt für konsistenten margin-top, auch mit nur einem Kind-Element. */ .sichtbarkeit__cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(24px,3.5vh,36px); } /* CTA auf hellem Hintergrund: rote Outline (Pendant zu .btn--ghost auf dunkel). Aktiv (17.06.2026): echter mailto-Link, kein Arbeitsstand mehr. */ .btn--partner { border-color: rgba(226,35,26,0.55); color: var(--red); font-weight: 600; } .btn--partner:hover { background: var(--red); color: var(--white); border-color: var(--red); transform: translateY(-1px); } /* Sichtbarkeit Mobile: Spalten stapeln */ @media (max-width: 767px) { .sichtbarkeit__cols { grid-template-columns: 1fr; gap: 0; } .sichtbarkeit__col--partner { border-left: none; padding-left: 0; margin-top: clamp(28px,5vh,44px); padding-top: clamp(24px,4vh,36px); border-top: 1px solid rgba(10,10,11,0.10); } .sichtbarkeit__h { font-size: clamp(26px,7.5vw,38px); } .sichtbarkeit__lead, .sichtbarkeit__partner-copy { font-size: 15px; } } /* ===================== SEKTION 6: KONTAKT — CSS v17 ===================== */ /* Abschluss-/Kontaktbereich. Dunkel — Bookend zu S1, Rhythmuswechsel nach S5 Paper. Mail = einzige Conversion. Keine Formular-Attrappe, keine Fake-Links. */ .kontakt { position: relative; z-index: 4; overflow: hidden; background: var(--black); color: var(--white); /* Gemeinsamer Section-Rhythmus (27.06.2026) */ padding: clamp(52px,8.5vh,100px) var(--pad) 0; } .kontakt__diagonal { position: absolute; left: -2%; top: 8%; width: 56%; height: 2px; z-index: 1; background: linear-gradient(90deg, rgba(226,35,26,0.55) 0%, rgba(226,35,26,0.20) 40%, rgba(255,255,255,0) 100%); transform: rotate(-56deg); transform-origin: left center; pointer-events: none; } .kontakt__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; } .kontakt__h { font-family: var(--font-head); font-size: clamp(34px,4.6vw,74px); text-transform: uppercase; /* mehr Tracking + offenere Zeile — konsistent mit S4/S5, entlastet das schwere Anton-Versal */ letter-spacing: 0.03em; line-height: 1.08; margin: clamp(18px,2.5vh,26px) 0 clamp(16px,2vh,22px); } .kontakt__lead { font-size: clamp(15px,1.2vw,18px); line-height: 1.65; color: var(--body); max-width: 56ch; } .kontakt__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: clamp(32px,4.5vh,48px); } .kontakt__note { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(201,201,204,0.55); } .kontakt__socials { display: flex; gap: 22px; margin-top: clamp(28px,4vh,40px); padding-top: clamp(20px,3vh,28px); border-top: 1px solid rgba(255,255,255,0.12); } .kontakt__social { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.72); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 3px; transition: color .2s ease, border-color .2s ease; } .kontakt__social:hover { color: var(--white); border-color: var(--red); } .kontakt__footer { margin-top: clamp(56px,9vh,96px); max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: clamp(20px,3vh,28px) 0 clamp(28px,4vh,36px); border-top: 1px solid rgba(255,255,255,0.10); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(201,201,204,0.45); } .kontakt__footer-brand { color: rgba(201,201,204,0.65); } .kontakt__footer-meta { display: inline-flex; align-items: center; gap: clamp(14px,2vw,28px); flex-wrap: wrap; } .kontakt__footer-legal { font-style: italic; letter-spacing: .05em; text-transform: none; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .kontakt__footer-legal:hover { color: var(--white); border-bottom-color: var(--red); } .kontakt__footer-copy { letter-spacing: .14em; } @media (max-width: 767px) { .kontakt__h { font-size: clamp(28px,8.5vw,40px); } .kontakt__lead { font-size: 15px; } .kontakt__actions { flex-direction: column; align-items: flex-start; gap: 14px; } .kontakt__footer { flex-direction: column; align-items: flex-start; gap: 8px; } .kontakt__footer-meta { flex-direction: column; align-items: flex-start; gap: 6px; } /* Sticky-Nav (Desktop-Variante) auf Mobile ausblenden — ersetzt durch .mobile-nav (s.u.). */ .sticky-nav { display: none; } /* Mobile-Navigation (27.06.2026, korrigiert in der Finalisierungsrunde): EINE Zeile statt zwei. Logo bleibt fix links (flex-shrink:0), .mobile-nav füllt die restliche Breite und beginnt direkt neben dem Logo, scrollt horizontal weiter nach rechts. Kompakter Header, keine Überlappung. */ .masthead-sticky { flex-wrap: nowrap; gap: 12px; padding: 10px var(--pad); } .masthead-sticky__home { flex: 0 0 auto; } .mobile-nav { display: flex; flex: 1 1 auto; min-width: 0; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-nav::-webkit-scrollbar { display: none; } .mobile-nav a { flex: 0 0 auto; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); text-decoration: none; white-space: nowrap; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .mobile-nav a:active, .mobile-nav a:focus-visible { color: #fff; border-color: var(--red); background-color: rgba(226,35,26,0.14); } } /* Anchor-Sprünge dürfen nicht unter dem fixed Sticky-Header verschwinden (27.06.2026, Höhe in der Finalisierungsrunde neu vermessen): Desktop-Header ~54px, Mobile-Header jetzt einzeilig ~58px (vorher zweizeilig ~96px). */ section[id] { scroll-margin-top: 64px; } @media (max-width: 767px) { section[id] { scroll-margin-top: 72px; } } /* ===================== LEGAL-SEITEN (Impressum / Datenschutz) — 20.06.2026 ===================== Eigene, einfache Unterseiten (impressum.html, datenschutz.html). Kein Onepage-Scroll-System, keine Sticky-Nav-JS nötig — nur ein statischer Kopf mit Zurück-Link + bestehendes Brand-System. Inhalt ist explizit als Arbeitsfassung markiert (.legal__notice), keine finale Rechtsberatung. */ .legal-header { max-width: var(--maxw); margin: 0 auto; padding: clamp(20px,3vh,28px) var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,0.10); } .legal-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .legal-header__brand img { height: 28px; width: auto; display: block; } .legal-header__back { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .legal-header__back:hover { color: var(--white); border-bottom-color: var(--red); } /* Rechte Gruppe im Legal-Header: Zurück-Link + Sprachumschalter */ .legal-header__nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); } .legal-header__lang { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.62); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .legal-header__lang:hover { color: var(--white); border-bottom-color: var(--red); } .legal { max-width: 920px; margin: 0 auto; padding: clamp(48px,8vh,88px) var(--pad) clamp(80px,10vh,120px); } .legal__kicker { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); } .legal__h { font-family: var(--font-head); font-size: clamp(34px,5vw,56px); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.06; color: var(--white); margin-top: 14px; } .legal__notice { margin-top: 28px; padding: 16px 20px; border: 1px solid rgba(226,35,26,0.35); background: rgba(226,35,26,0.06); border-radius: 2px; font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.85); } .legal__notice strong { color: var(--white); } .legal__section { margin-top: clamp(36px,5vh,52px); } /* Legal-Zwischenüberschriften bewusst weniger dominant als die Section-Heads der Startseite: kleiner, mehr Tracking, leicht gedämpfte Farbe — Anton-Versal wirkt sonst klumpig (27.06.2026). */ .legal__section h2 { font-family: var(--font-head); font-size: clamp(16px,1.7vw,20px); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.9); margin-bottom: 14px; } .legal__section p, .legal__section li { font-family: var(--font-body); font-size: 14.5px; line-height: 1.7; color: var(--body); } .legal__section p + p { margin-top: 10px; } .legal dl { font-family: var(--font-body); font-size: 14.5px; line-height: 1.7; color: var(--body); } .legal dt { color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 14px; } .legal dt:first-child { margin-top: 0; } .legal dd { color: var(--white); } .legal a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.3); text-decoration: none; } .legal a:hover { border-bottom-color: var(--red); } .legal__open-list { margin-top: 10px; padding-left: 18px; } .legal__open-list li { margin-top: 6px; } .legal__hint { font-size: 13px; color: rgba(201,201,204,0.6); margin-top: 12px; } .legal dd .legal__hint { display: inline; margin-top: 0; } .legal__footer { max-width: 920px; } /* ===================== PARTNER-SEITE (partner.html / partner-en.html) — 27.06.2026 ===================== Eigene Unterseite, kein neues Layout-System: nutzt denselben .legal-Rahmen (Header/Footer/Spaltenbreite) wie Impressum/Datenschutz, plus .btn/.btn--primary für die CTA. */ /* Button-Rahmen-Fix (27.06.2026, Finalisierungsrunde): .legal a setzt global einen hellgrauen border-bottom (Unterstrich-Optik für Textlinks) — das überlagerte bei .btn--primary den roten Button-Rahmen unten mit Grau. Fix muss Breite+Stil exakt wie die anderen 3 Seiten setzen (nicht nur "none", sonst kollabiert die Unterkante auf 0px statt rot zu werden). */ .legal a.btn { border-bottom-width: 1.5px; border-bottom-style: solid; border-bottom-color: var(--red); } .legal a.btn:hover { border-bottom-color: var(--red); } .partner-cta { margin-top: clamp(18px,2.5vh,26px); } /* Partner-/Medienpartner-Logos (27.06.2026, Logo-Update-Runde, s. POLISH-LISTE #42): echte Logo-Dateien (web/assets/partners/) ersetzen die bisherigen Textmarken-Platzhalter. Einheitliches Tile-System statt zwei getrennter Bereiche ("Aktuelle Partner"/"Medienumfeld") — alle 6 bestätigten Logos in einem Bereich, alphabetisch sortiert. Jedes Logo bekommt eine fix große, abgerundete Karte (object-fit:contain, Seitenverhältnis bleibt erhalten) statt direkt auf dem dunklen Hintergrund zu sitzen — das gleicht unterschiedliche native Formate/Weißräume der Logo-Dateien aus, ohne die Dateien selbst inhaltlich zu verändern. Karten sind jetzt ALLE hell (Logo-Caption-Fix, 27.06.2026, s. POLISH-LISTE #44) — DAZN sitzt nicht mehr auf einer dunklen Sonderkarte, sondern wird per `.partner-mark__img--mono` (filter:brightness(0)) zur schwarzen Zeichnung auf derselben hellen Karte wie alle anderen Logos. Bewusst nur 6 kleine Karten in ruhigem Abstand — kein Logo-Wand- Effekt. */ .partner-marks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.35vw, 16px); margin-top: clamp(18px, 2.6vh, 26px); } /* Jede Logo-Kachel führt Button + Caption als eigene Spalte. Wichtig: Die Caption darf die Kachelbreite nicht mehr verbreitern, sonst rutscht VIASPO am rechten Rand aus dem Viewport. */ .partner-mark-wrap { display: flex; min-width: 0; flex-direction: column; align-items: stretch; } /* Logo-Karten sind Links: permanente Klarname-Captions, kein Hover-/Tap-Ratespiel. */ .partner-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(52px, 6vh, 64px); min-width: 0; padding: 10px clamp(10px, 1.2vw, 16px); border-radius: 6px; border: 0; background: rgba(255,255,255,0.96); cursor: pointer; transition: background-color .18s ease, transform .18s ease; font: inherit; text-decoration: none; border-bottom: 0; -webkit-appearance: none; appearance: none; } .legal a.partner-mark { border-bottom: 0; } .partner-mark:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .partner-mark__img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; transition: transform .18s ease; } /* DAZN-Vereinheitlichung (27.06.2026, Logo-Caption-Fix, s. POLISH-LISTE #44): die Quelldatei ist eine rein weiße Zeichnung auf Transparenz (keine Graustufen/Details, die verloren gehen könnten) — `brightness(0)` setzt jedes undurchsichtige Pixel auf reines Schwarz und behält den Alpha-Kanal (Form) exakt bei. Keine inhaltliche Veränderung der Datei, nur eine Darstellungsregel. */ .partner-mark__img--mono { filter: brightness(0); } @media (hover: hover) { .partner-mark:hover { background: #fff; transform: translateY(-1px); } .partner-mark:hover .partner-mark__img { transform: scale(1.08); } } /* Caption pro Kachel (29.06.2026, Logo-Caption-Fix): Der Name gehört zur jeweiligen Logo-Kachel, bleibt innerhalb dieser Kachel und vergrößert das Grid nicht. Dadurch kann VIASPO rechts nicht mehr abgeschnitten werden; Mittel-Logos sind zentriert, Randspalten kantenbündig. */ .partner-mark__caption { align-self: stretch; width: 100%; min-height: 3.4em; margin-top: 6px; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; line-height: 1.18; letter-spacing: 0.025em; color: rgba(255,255,255,0.82); text-align: left; white-space: normal; overflow-wrap: normal; word-break: normal; opacity: 1; pointer-events: none; z-index: 3; } @media (max-width: 767px) { .partner-marks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; } .partner-mark { height: 58px; padding: 9px 10px; } .partner-mark__caption { min-height: 3.2em; font-size: 10px; } } /* Brand-Geometrie (27.06.2026, Finalisierungsrunde, s. POLISH-LISTE #41): dezenter Hexagon-Outline + Slash, gleiche visuelle Sprache wie .fightnight__geo in S3 (Linework/Winkel, keine Logo-Fläche, keine neue Bildwelt). Eigene Stacking-Lösung scoped auf .partner-page (kein Eingriff in ): SVG position:absolute z-index:0, Header/Main/Footer darüber via position:relative z-index:1. Nur ≥1100px sichtbar — darunter ist kein Platz neben der Textspalte, würde sonst überlappen. */ .partner-page { position: relative; overflow: hidden; } .partner-page > header, .partner-page > main, .partner-page > footer { position: relative; z-index: 1; } .partner-geo { position: absolute; right: -4%; top: 14%; width: clamp(300px, 28vw, 460px); height: auto; z-index: 0; pointer-events: none; } .partner-geo .geo__hex { fill: rgba(226,35,26,0.03); stroke: rgba(255,255,255,0.10); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .partner-geo .geo__slash { stroke: rgba(226,35,26,0.4); stroke-width: 2; vector-effect: non-scaling-stroke; } @media (max-width: 1099px) { .partner-geo { display: none; } } /* Vertikaler Rhythmus verdichtet (27.06.2026, weiter verdichtet in der Finalisierungsrunde): .legal--partner überschreibt nur auf der Partner-Seite die generischen .legal-Abstände — Impressum/Datenschutz bleiben unangetastet. */ .legal--partner { padding-top: clamp(32px,5vh,56px); padding-bottom: clamp(40px,6vh,68px); } .legal--partner .legal__section { margin-top: clamp(24px,3.4vh,36px); }