/* =========================================================== JFV Hünstetten 09 — Refined 3 Stilmodi: classic | stadium | minimal Palette-Tokens via data-bg auf =========================================================== */ /* ── 0. Tokens ────────────────────────────────────────────── */ :root { /* Brand */ --gold: #F5B800; --gold-2: #E8A523; --red: #C1121F; --blue: #4682A9; /* Surface (dark default — softer navy, taken from brand --dark-blue #1a3d52) */ --c-bg: #1a3d52; --c-bg-2: #143046; --c-surface: #234e69; --c-surface-2: #2c5a76; --c-line: rgba(255,255,255,0.12); --c-line-2: rgba(255,255,255,0.06); --c-text: #ffffff; --c-muted: rgba(255,255,255,0.62); --c-muted-2: rgba(255,255,255,0.35); /* Accent active (resolved per data-accent) */ --c-accent: var(--gold); --c-accent-on: #0a0a0a; --c-accent-soft: rgba(245,184,0,0.12); --c-accent-line: rgba(245,184,0,0.32); /* Type */ --font: 'Titillium Web', system-ui, sans-serif; --type-scale: 1; /* Layout */ --nav-h: 76px; --max: 1440px; --gutter: 2rem; } /* Palette modes */ [data-bg="deep"] { --c-bg: #061320; --c-bg-2: #03080f; --c-surface: #0c1f30; --c-surface-2: #102739; } [data-bg="light"] { --c-bg: #FBF6E8; --c-bg-2: #F2EBD2; --c-surface: #FFFFFF; --c-surface-2: #F8F3E2; --c-line: rgba(0,0,0,0.10); --c-line-2: rgba(0,0,0,0.05); --c-text: #0a0a0a; --c-muted: rgba(0,0,0,0.55); --c-muted-2: rgba(0,0,0,0.30); } /* Mix mode — Navy-Hero/Scoreboard/Footer, Cream-Content-Inseln. Best of both: drama oben + unten, ruhige Lesbarkeit in der Mitte. */ [data-bg="mix"] { --c-bg: #1a3d52; --c-bg-2: #143046; --c-surface: #234e69; --c-surface-2: #2c5a76; --c-line: rgba(255,255,255,0.12); --c-line-2: rgba(255,255,255,0.06); --c-text: #ffffff; --c-muted: rgba(255,255,255,0.62); --c-muted-2: rgba(255,255,255,0.35); } /* Light "islands" in mix mode: Scoreboard, News, Teams, Training Sponsors stays NAVY for the Trikot-Rücken look */ [data-bg="mix"] .scoreboard, [data-bg="mix"] .news, [data-bg="mix"] .teams, [data-bg="mix"] .training-strip { --c-bg: #F2EBD2; --c-bg-2: #E8DEC0; --c-surface: #FFFFFF; --c-surface-2: #F8F3E2; --c-line: rgba(0,0,0,0.10); --c-line-2: rgba(0,0,0,0.05); --c-text: #0a0a0a; --c-muted: rgba(0,0,0,0.55); --c-muted-2: rgba(0,0,0,0.30); background-color: var(--c-bg); color: var(--c-text); } /* News section gets pure white background (lifts above cream sections) */ [data-bg="mix"] .news { background-color: #ffffff; } /* Scoreboard — einheitlicher Creme-Ton wie alle anderen hellen Sektionen */ [data-bg="mix"] .scoreboard { background-color: var(--c-bg); } [data-bg="mix"] .scoreboard::before { /* faint pitch-mark center circle for character */ display: block; background-image: radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(0,0,0,0.05) 118px 120px, transparent 121px), radial-gradient(ellipse 40% 55% at 50% 50%, rgba(245,184,0,0.08), transparent 70%); } [data-bg="mix"] .sb-team-crest img { filter: none; opacity: 1; } /* ── Mix mode — Trikot-Streifen-Übergänge ── Tricolor strip an den zwei echten Dark↔Light-Grenzen: 1. Ticker (navy) → Mannschaften (creme) — strip oben an .teams 2. News (weiß) → Sponsoren (navy) — strip oben an .sponsors */ [data-bg="mix"] .teams, [data-bg="mix"] .sponsors { position: relative; } [data-bg="mix"] .teams::after, [data-bg="mix"] .sponsors::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red) 0 33.33%, var(--gold) 33.33% 66.66%, var(--blue) 66.66% 100%); z-index: 2; } /* Mix mode — team-card letter needs more presence on cream */ [data-bg="mix"] .team-letter { opacity: 0.08; } [data-bg="mix"] .team-card:hover .team-letter { opacity: 0.20; } /* Mix mode — Karten und Sektion gleicher Creme-Ton, nur Grid-Linien als Trenner */ [data-bg="mix"] .teams { background-color: var(--c-bg); } [data-bg="mix"] .team-card { background-color: var(--c-bg); } [data-bg="mix"] .team-card:hover { background-color: var(--c-surface); } /* Mix mode — match-card on hero (navy section) gets a visible tricolor frame strip ABOVE. overflow:visible lets the strip sit outside the card; gold badge below remains crisp. */ [data-bg="mix"] .match-card { overflow: visible; box-shadow: 0 1px 0 0 rgba(255,255,255,0.04), 0 24px 50px -30px rgba(0,0,0,0.6); } [data-bg="mix"] .match-card::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px; background: linear-gradient(90deg, var(--red) 0 33.33%, var(--gold) 33.33% 66.66%, var(--blue) 66.66% 100%); z-index: 2; } [data-bg="mix"][data-accent="gold"] .match-card::before { background: var(--gold); } [data-bg="mix"][data-accent="gold-red"] .match-card::before { background: linear-gradient(90deg, var(--red) 0 50%, var(--gold) 50% 100%); } /* News thumbs in mix mode — light palette versions */ [data-bg="mix"] .news-thumb { background: linear-gradient(135deg, #fbeec3 0%, #f3d97a 100%); } [data-bg="mix"] .news-thumb.red { background: linear-gradient(135deg, #fde4e7 0%, #efb8be 100%); } [data-bg="mix"] .news-thumb.blue { background: linear-gradient(135deg, #dce8f1 0%, #a6c4dc 100%); } [data-bg="mix"] .news-thumb.gold { background: linear-gradient(135deg, #fbeec3 0%, #efd070 100%); } [data-bg="mix"] .news-thumb-mark { color: #0a0a0a; opacity: 0.12; } [data-bg="mix"] .news-tag:not(.red) { color: #0a0a0a; } /* Accent variants — visible differences in section eyebrows, dots, tags, footer strip */ /* Default = gold-red (current) */ [data-accent="gold-red"] .footer-accent { background: linear-gradient(90deg, var(--red) 0 50%, var(--gold) 50% 100%); } /* Gold only — strip red highlights, everything one accent */ [data-accent="gold"] .footer-accent { background: var(--gold); } [data-accent="gold"] .news-tag.red { background: var(--gold); color: #0a0a0a; } [data-accent="gold"] .match-card-badge .dot, [data-accent="gold"] .ticker-tag .dot { background: #0a0a0a; } [data-accent="gold"] .news-thumb.red { background: linear-gradient(135deg, #6c5210 0%, #382a07 100%); } /* ── Tricolor accent system ─────────────────────────────────── Three colors with specific semantic roles: GOLD → Vereins-Identität, Heimspiel, live/aktuell, Brand ROT → Ergebnisse, vergangene Spiele, Wettkampf-Jugend (A/B/C) BLAU → Kommende Spiele, Auswärts, jüngste Jugend (F/G) This rotates SPARINGLY so each color earns its meaning. */ [data-accent="tricolor"] .footer-accent { background: linear-gradient(90deg, var(--red) 0 33.33%, var(--gold) 33.33% 66.66%, var(--blue) 66.66% 100%); } /* Section eyebrows: only the SPIEL-section flips to blue (it shows upcoming). News + teams + training stay GOLD as brand identity. */ [data-accent="tricolor"] #spiele .sec-eyebrow { color: var(--blue); } /* Scoreboard: Heim = Gold (unchanged), Auswärts = Blue (kommt zu uns) */ [data-accent="tricolor"] .sb-team.away .sb-team-crest { background: var(--blue); color: #fff; border-color: var(--blue); } [data-accent="tricolor"] .sb-team.away .sb-team-name { color: var(--blue); } /* Team cards: age cohort → color (refined: thinner inset, only visible on hover for calm grid) */ [data-accent="tricolor"] .team-card:nth-child(-n+3) .team-tag { color: var(--red); } [data-accent="tricolor"] .team-card:nth-child(-n+3) .team-letter, [data-accent="tricolor"] .team-card:nth-child(-n+3):hover .team-letter { color: var(--red); } [data-accent="tricolor"] .team-card:nth-child(-n+3) { box-shadow: inset 2px 0 0 var(--red); } [data-accent="tricolor"] .team-card:nth-child(n+4):nth-child(-n+7) .team-tag { color: var(--gold-2); } [data-accent="tricolor"] .team-card:nth-child(n+4):nth-child(-n+7) .team-letter, [data-accent="tricolor"] .team-card:nth-child(n+4):nth-child(-n+7):hover .team-letter { color: var(--gold); } [data-accent="tricolor"] .team-card:nth-child(n+4):nth-child(-n+7) { box-shadow: inset 2px 0 0 var(--gold); } [data-accent="tricolor"] .team-card:nth-child(n+8) .team-tag { color: var(--blue); } [data-accent="tricolor"] .team-card:nth-child(n+8) .team-letter, [data-accent="tricolor"] .team-card:nth-child(n+8):hover .team-letter { color: var(--blue); } [data-accent="tricolor"] .team-card:nth-child(n+8) { box-shadow: inset 2px 0 0 var(--blue); } /* News cards: top-border by content type (refined: 2px) */ [data-accent="tricolor"] #news .news-card:nth-child(1) { border-top: 2px solid var(--gold); } [data-accent="tricolor"] #news .news-card:nth-child(2) { border-top: 2px solid var(--red); } [data-accent="tricolor"] #news .news-card:nth-child(3) { border-top: 2px solid var(--blue); } /* ── 1. Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--c-bg); color: var(--c-text); font-family: var(--font); font-weight: 400; line-height: 1.55; font-size: calc(16px * var(--type-scale)); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } img, svg { max-width: 100%; height: auto; display: block; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; } /* ── 2. Layout ────────────────────────────────────────────── */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } section { padding: 6rem 0; position: relative; } @media (max-width: 800px) { section { padding: 4rem 0; } } /* ── 3. Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.8rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; border: 1.5px solid transparent; transition: transform .2s, background-color .2s, color .2s, border-color .2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn .arr { transition: transform .2s; } .btn:hover .arr { transform: translateX(3px); } .btn-primary { background: var(--c-accent); color: var(--c-accent-on); border-color: var(--c-accent); } .btn-primary:hover { background: transparent; color: var(--c-accent); } .btn-outline { background: transparent; color: var(--c-text); border-color: var(--c-line); } .btn-outline:hover { border-color: var(--c-text); background: rgba(255,255,255,0.04); } [data-bg="light"] .btn-outline { border-color: rgba(0,0,0,0.15); } [data-bg="light"] .btn-outline:hover { border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); } /* ── 4. Nav ───────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 80; height: var(--nav-h); background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-line); } .nav-row { height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: flex; align-items: center; gap: 0.85rem; } .brand-wappen { width: 42px; height: 42px; flex-shrink: 0; } .brand-wappen img { width: 100%; height: 100%; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-title { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .brand-sub { font-size: 0.58rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-accent); margin-top: 2px; } .nav-links { display: flex; align-items: center; gap: 0.4rem; } .nav-link { padding: 0.55rem 0.9rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); transition: color .15s; } .nav-link:hover, .nav-link.is-active { color: var(--c-text); } .nav-cta { margin-left: 0.4rem; padding: 0.55rem 1rem; background: var(--c-accent); color: var(--c-accent-on); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } /* ── Nav Burger ───────────────────────────────────────────── */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; flex-shrink: 0; z-index: 90; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile Drawer ────────────────────────────────────────── */ .nav-mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--c-bg-2); z-index: 79; overflow-y: auto; border-top: 1px solid var(--c-line); -webkit-overflow-scrolling: touch; } .nav-mobile.is-open { display: block; } .nav-mobile-inner { padding: 1rem var(--gutter) 4rem; } .nav-mobile-link { display: block; padding: 1rem 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); border-bottom: 1px solid var(--c-line); transition: color .15s; } .nav-mobile-link:hover { color: var(--c-text); } .nav-mobile-acc { border-bottom: 1px solid var(--c-line); } .nav-mobile-acc-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); cursor: pointer; transition: color .15s; } .nav-mobile-acc-btn:hover { color: var(--c-text); } .nav-mobile-acc-arrow { font-size: 0.65rem; opacity: 0.55; transition: transform .2s ease; display: inline-block; } .nav-mobile-acc.is-open .nav-mobile-acc-arrow { transform: rotate(180deg); } .nav-mobile-acc-body { display: none; padding: 0.2rem 0 1rem 0.8rem; } .nav-mobile-acc.is-open .nav-mobile-acc-body { display: block; } .nav-mobile-acc-body a { display: block; padding: 0.6rem 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted-2); border-bottom: 1px solid var(--c-line-2); transition: color .15s, padding-left .15s; } .nav-mobile-acc-body a:last-child { border-bottom: none; } .nav-mobile-acc-body a:hover { color: var(--c-accent); padding-left: 0.5rem; } .nav-mobile-cta { display: block; margin-top: 1.5rem; padding: 1rem; background: var(--c-accent); color: var(--c-accent-on); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; transition: opacity .15s; } .nav-mobile-cta:hover { opacity: 0.85; } @media (max-width: 1024px) { .nav-links { display: none; } .nav-burger { display: flex; } } /* ── Nav Dropdown ─────────────────────────────────────────── */ .nav-dropdown { position: relative; } .nav-dropdown > .nav-link::after { content: '▾'; margin-left: 0.35rem; font-size: 0.6rem; opacity: 0.6; display: inline-block; transition: transform .2s; } .nav-dropdown:hover > .nav-link::after { transform: rotate(180deg); opacity: 1; } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background-color: var(--c-bg); border: 1px solid var(--c-line); border-top: 2px solid var(--c-accent); z-index: 100; box-shadow: 0 12px 32px rgba(0,0,0,0.35); } .nav-dropdown:hover .nav-dropdown-menu { display: block; } .nav-dropdown-item { display: block; padding: 0.7rem 1.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); border-bottom: 1px solid var(--c-line); transition: color .15s, padding-left .15s, background-color .15s; } .nav-dropdown-item:last-child { border-bottom: none; } .nav-dropdown-item:hover { color: var(--c-accent); background-color: rgba(245,184,0,0.07); padding-left: 1.6rem; } .nav-dropdown-label { display: block; padding: 0.55rem 1.2rem 0.3rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.35); border-top: 1px solid var(--c-line); margin-top: 2px; pointer-events: none; } .nav-mobile-acc-label { display: block; padding: 0.55rem 1rem 0.2rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.35); border-top: 1px solid rgba(255,255,255,0.08); margin-top: 2px; pointer-events: none; } /* ── 5. Hero — base ───────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 5rem 0 7rem; } .hero-row { display: grid; gap: 4rem; align-items: center; } /* Hero decorations + mode-specific elements: hidden by default, each style mode opts in below. */ .hero-09, .hero-stripes, .hero-wappen-bg, .hero-mark, .hero-photo { display: none; } .hero-side { display: block; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 2rem; } .hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--c-accent); } .hero-title { font-size: clamp(3rem, 9vw, 7.2rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; } .hero-title .ac { color: var(--c-accent); } .hero-lead { margin-top: 2rem; max-width: 540px; font-size: 1.05rem; font-weight: 300; color: var(--c-muted); line-height: 1.65; } .hero-actions { margin-top: 2.6rem; display: flex; gap: 0.85rem; flex-wrap: wrap; } .hero-meta-row { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .hero-meta-item .num { display: block; font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--c-text); } .hero-meta-item .lbl { display: block; margin-top: 0.5rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted-2); } /* ── Hero — Classic (default) ─────────────────────────────── */ [data-style="classic"] .hero-row { grid-template-columns: 1.4fr 0.9fr; } [data-style="classic"] .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(ellipse 50% 50% at 70% 35%, rgba(245,184,0,0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, rgba(70,130,169,0.10), transparent 60%); z-index: 0; } [data-style="classic"] .hero > * { position: relative; z-index: 1; } [data-style="classic"] .hero-wappen-bg { display: block; position: absolute; right: -6%; bottom: -18%; width: 50%; max-width: 620px; z-index: 0; pointer-events: none; } [data-style="classic"] .hero-wappen-bg img { width: 100%; height: auto; opacity: 0.08; /* on dark BGs, the ball stays light; on light BG it should darken to navy */ } [data-bg="light"][data-style="classic"] .hero-wappen-bg img { opacity: 0.10; filter: brightness(0) saturate(100%) invert(20%) sepia(20%) saturate(800%) hue-rotate(170deg); } [data-style="classic"] .hero-wappen-bg img { width: 100%; filter: invert(1); } [data-bg="light"][data-style="classic"] .hero-wappen-bg img { filter: none; opacity: 0.06; } /* ── Hero — Stadium ───────────────────────────────────────── */ [data-style="stadium"] .hero { padding: 4rem 0 8rem; } [data-style="stadium"] .hero-row { grid-template-columns: 1fr; text-align: left; } [data-style="stadium"] .hero-stripes { display: block; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient( 115deg, var(--c-bg) 0 60px, var(--c-bg-2) 60px 120px ); opacity: 0.65; } [data-style="stadium"] .hero-stripes::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--c-bg) 95%); } [data-style="stadium"] .hero-09 { display: block; position: absolute; right: -2%; top: 50%; transform: translateY(-50%); font-size: clamp(18rem, 36vw, 36rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.06em; color: var(--c-accent); opacity: 0.12; z-index: 0; pointer-events: none; font-style: italic; } [data-style="stadium"] .hero > .wrap { position: relative; z-index: 1; } [data-style="stadium"] .hero-title { font-style: italic; } [data-style="stadium"] .hero-title .ac { -webkit-text-stroke: 2px var(--c-accent); color: transparent; } [data-bg="light"][data-style="stadium"] .hero-stripes { opacity: 0.4; } /* ── Hero — Minimal ──────────────────────────────────────── */ [data-style="minimal"] .hero { padding: 4rem 0 6rem; } [data-style="minimal"] .hero-row { grid-template-columns: 1fr; text-align: left; } [data-style="minimal"] .hero-title { font-size: clamp(4rem, 14vw, 13rem); letter-spacing: -0.045em; line-height: 0.86; } [data-style="minimal"] .hero-side { display: none; } [data-style="minimal"] .hero-mark { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 2rem; padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--c-line); } [data-style="minimal"] .hero-mark-meta { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-muted-2); line-height: 1.5; } [data-style="minimal"] .hero-mark-id { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-accent); } [data-style="minimal"] .hero-photo { display: block; margin-top: 3rem; aspect-ratio: 21/9; background: var(--c-surface); position: relative; overflow: hidden; border: 1px solid var(--c-line); } [data-style="minimal"] .hero-photo::after { content: 'Foto: Mannschaftsbild · Saison 25/26'; position: absolute; bottom: 1rem; left: 1rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted-2); } [data-style="minimal"] .hero-photo-grid { position: absolute; inset: 0; background-image: linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-2) 100%); display: flex; align-items: center; justify-content: center; } [data-style="minimal"] .hero-photo-grid::before { content: ''; width: 50%; height: 70%; background: url('../img/wappen.svg') center/contain no-repeat; filter: invert(1); opacity: 0.06; } [data-bg="light"][data-style="minimal"] .hero-photo-grid::before { filter: none; opacity: 0.08; } /* ── 6. Match-Karte (Hero rechts, Classic) ─────────────────── */ .match-card { background: var(--c-surface); border: 1px solid var(--c-line); position: relative; overflow: hidden; } .match-card-badge { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.2rem; background: var(--c-accent); color: var(--c-accent-on); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .match-card-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } } .match-card-body { padding: 1.6rem 1.4rem; } .mc-league { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 1.2rem; } .mc-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 1.4rem; } .mc-team { display: flex; flex-direction: column; gap: 0.4rem; } .mc-team.away { text-align: right; align-items: flex-end; } .mc-team-crest { width: 36px; height: 36px; background: var(--c-surface-2); border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } .mc-team.home .mc-team-crest { background: var(--c-accent); color: var(--c-accent-on); border-color: var(--c-accent); } .mc-team-name { font-size: 0.92rem; font-weight: 700; line-height: 1.2; } .mc-team.home .mc-team-name { color: var(--c-accent); } .mc-vs { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted-2); } .mc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); } .mc-meta-l { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 0.25rem; } .mc-meta-v { font-size: 0.84rem; font-weight: 600; color: var(--c-text); } .match-card-foot { padding: 0.9rem 1.4rem; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .match-card-foot a { color: var(--c-muted); transition: color .15s; } .match-card-foot a:hover { color: var(--c-accent); } /* ── 7. Marquee Ticker ────────────────────────────────────── */ .ticker { background: var(--c-bg-2); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); height: 48px; display: flex; align-items: stretch; overflow: hidden; } .ticker-tag { background: var(--c-accent); color: var(--c-accent-on); display: flex; align-items: center; gap: 0.6rem; padding: 0 1.4rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; position: relative; } /* Right-edge chevron removed — it pointed against the scroll direction. The pulsing red dot now carries the \u201cAktuell/Live\u201d signal alone. */ .ticker-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.8s ease-in-out infinite; } .ticker-track-wrap { flex: 1; overflow: hidden; display: flex; align-items: center; padding-left: 1.8rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 80px), transparent 100%); } .ticker-track { display: flex; gap: 3rem; white-space: nowrap; animation: tickerScroll 50s linear infinite; } .ticker-track:hover { animation-play-state: paused; } .ticker-item { font-size: 0.78rem; font-weight: 400; color: var(--c-muted); flex-shrink: 0; display: flex; align-items: center; gap: 3rem; } .ticker-item::after { content: '◆'; color: var(--c-muted-2); opacity: 0.5; font-size: 0.6rem; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── 8. Section Heading ───────────────────────────────────── */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; } .sec-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.8rem; } .sec-eyebrow .idx { color: var(--c-muted-2); font-weight: 600; } .sec-title { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; } .sec-link { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); display: inline-flex; align-items: center; gap: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1.5px solid var(--c-line); transition: color .15s, gap .2s, border-color .15s; } .sec-link:hover { color: var(--c-accent); gap: 0.8rem; border-color: var(--c-accent); } /* ── 9. Scoreboard (next match feature) ───────────────────── */ .scoreboard { background: var(--c-bg-2); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 5rem 0; position: relative; overflow: hidden; } .scoreboard::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 40% 60% at 50% 50%, rgba(245,184,0,0.06), transparent 70%); } .sb-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: center; position: relative; } .sb-team { text-align: center; } .sb-team-crest { width: 96px; height: 96px; margin: 0 auto 1.4rem; background: var(--c-surface); border: 1.5px solid var(--c-line); display: flex; align-items: center; justify-content: center; } .sb-team.home .sb-team-crest { background: var(--c-accent); border-color: var(--c-accent); } .sb-team-crest img { width: 60%; filter: invert(1); opacity: 0.9; } .sb-team.home .sb-team-crest img { filter: none; opacity: 1; } [data-bg="light"] .sb-team-crest img { filter: none; } .sb-team-mono { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 0.4rem; } .sb-team-name { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; } .sb-team.home .sb-team-name { color: var(--c-accent); } .sb-vs { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; font-style: italic; color: var(--c-muted-2); line-height: 1; } .sb-info { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .sb-info-block .lbl { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 0.5rem; } .sb-info-block .val { font-size: 1.05rem; font-weight: 700; } /* Stadium mode scoreboard tweak */ [data-style="stadium"] .scoreboard { background: var(--c-bg); background-image: repeating-linear-gradient( -115deg, transparent 0 80px, rgba(245,184,0,0.025) 80px 160px ); } [data-style="stadium"] .sb-team-crest { border-radius: 0; } /* Minimal: scoreboard becomes editorial */ [data-style="minimal"] .scoreboard { padding: 7rem 0; } [data-style="minimal"] .sb-row { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; } [data-style="minimal"] .sb-vs { display: none; } [data-style="minimal"] .sb-team { text-align: left; } [data-style="minimal"] .sb-team.away { text-align: right; } [data-style="minimal"] .sb-team-crest { margin: 0 0 1.4rem; } [data-style="minimal"] .sb-team.away .sb-team-crest { margin-left: auto; } /* ── 10. News ─────────────────────────────────────────────── */ /* News section: subtle separator so it doesn't blend into the cream body */ .news { background: var(--c-bg); border-top: 1px solid var(--c-line-2); } [data-bg="light"] .news { background: #ffffff; } .news-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1.5rem; } .news-card { background: var(--c-surface); border: 1px solid var(--c-line); display: flex; flex-direction: column; transition: transform .25s, border-color .25s; cursor: pointer; overflow: hidden; } .news-card:hover { transform: translateY(-4px); border-color: var(--c-accent); } .news-card.feat { grid-row: span 1; } .news-thumb { aspect-ratio: 4/3; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-bg-2) 100%); display: flex; align-items: flex-end; padding: 1.4rem; } .news-card.feat .news-thumb { aspect-ratio: 16/10; } .news-thumb-mark { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; color: var(--c-text); opacity: 0.06; text-transform: uppercase; } .news-thumb.red { background: linear-gradient(135deg, #6e0c14 0%, #3a0509 100%); } .news-thumb.blue { background: linear-gradient(135deg, #1c4664 0%, #0c2233 100%); } .news-thumb.gold { background: linear-gradient(135deg, #6c5210 0%, #382a07 100%); } .news-tag { position: absolute; top: 1rem; left: 1rem; padding: 0.3rem 0.7rem; background: var(--c-accent); color: var(--c-accent-on); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .news-tag.red { background: var(--red); color: #fff; } .news-body { padding: 1.4rem 1.4rem 1.8rem; flex: 1; display: flex; flex-direction: column; } .news-meta { display: flex; align-items: center; gap: 0.8rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 0.9rem; } .news-meta time::after { content: '·'; margin-left: 0.8rem; color: var(--c-muted-2); } .news-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.7rem; transition: color .2s; } .news-card.feat .news-title { font-size: 1.45rem; line-height: 1.2; } .news-card:hover .news-title { color: var(--c-accent); } .news-excerpt { font-size: 0.85rem; line-height: 1.65; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .news-more { margin-top: 1.2rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap .2s; } .news-card:hover .news-more { gap: 0.7rem; } /* Minimal: news becomes editorial — numbered, no thumbs */ [data-style="minimal"] .news-grid { grid-template-columns: 1fr; border-top: 1px solid var(--c-line); } [data-style="minimal"] .news-card { flex-direction: row; align-items: start; background: transparent; border: 0; border-bottom: 1px solid var(--c-line); padding: 2rem 0; gap: 3rem; } [data-style="minimal"] .news-card:hover { transform: none; border-color: var(--c-line); } [data-style="minimal"] .news-thumb { display: none; } [data-style="minimal"] .news-card .news-num { display: block; font-size: 3rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--c-accent); flex-shrink: 0; min-width: 100px; font-feature-settings: 'tnum'; } .news-num { display: none; } [data-style="minimal"] .news-body { padding: 0; flex: 1; } [data-style="minimal"] .news-card.feat .news-title { font-size: 1.6rem; } /* Stadium news: aggressive numbered cards */ [data-style="stadium"] .news-card { border-radius: 0; } [data-style="stadium"] .news-thumb-mark { font-style: italic; } /* ── 11. Teams grid ──────────────────────────────────────── */ .teams { background: var(--c-bg-2); } .teams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); } @media (max-width: 900px) { .teams-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .teams-grid { grid-template-columns: 1fr; } } .team-card { background: var(--c-bg-2); padding: 2rem 1.8rem; position: relative; overflow: hidden; transition: background .2s; cursor: pointer; display: flex; flex-direction: column; gap: 0.6rem; min-height: 220px; } .team-card:hover { background: var(--c-surface); } .team-letter { position: absolute; right: 1rem; top: 0.6rem; font-size: 7rem; font-weight: 900; line-height: 1; color: var(--c-text); opacity: 0.045; letter-spacing: -0.05em; pointer-events: none; font-feature-settings: 'tnum'; } .team-card:hover .team-letter { opacity: 0.12; color: var(--c-accent); } .team-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted-2); } .team-name { font-size: 1.4rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; margin-top: auto; } .team-meta { display: flex; gap: 1.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted-2); } .team-meta span strong { display: block; color: var(--c-text); font-size: 1.4rem; line-height: 1; margin-bottom: 0.25rem; font-weight: 900; } .team-link { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; transition: color .2s, gap .2s; } .team-card:hover .team-link { color: var(--c-accent); gap: 0.7rem; } /* Stadium teams: italic numbers */ [data-style="stadium"] .team-letter { font-style: italic; } [data-style="stadium"] .team-name { font-style: italic; } /* Minimal teams: cleaner */ [data-style="minimal"] .teams-grid { border-color: transparent; background: transparent; gap: 1px; } [data-style="minimal"] .team-card { background: var(--c-surface); } [data-style="minimal"] .team-card:hover { background: var(--c-surface-2); } /* ── 12. Training strip ───────────────────────────────────── */ .training-strip { background: var(--c-bg); padding: 5rem 0; border-top: 1px solid var(--c-line); } .tr-row { display: grid; grid-template-columns: 0.9fr 2.1fr; gap: 4rem; align-items: start; } @media (max-width: 900px) { .tr-row { grid-template-columns: 1fr; } } .tr-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); } @media (max-width: 700px) { .tr-list { grid-template-columns: repeat(2, 1fr); } } .tr-item { background: var(--c-bg); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; } .tr-team { font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.005em; color: var(--c-text); } .tr-day { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted-2); margin-top: 0.5rem; } .tr-time { font-size: 0.95rem; font-weight: 700; color: var(--c-text); margin-top: 0.1rem; } .tr-loc { font-size: 0.72rem; color: var(--c-muted); margin-top: 0.2rem; } .tr-trainer { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: var(--c-accent); margin-top: 0.5rem; text-transform: uppercase; } /* ── 13. Sponsors ─────────────────────────────────────────── */ .sponsors { background: var(--c-bg-2); padding: 4rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .sp-eyebrow { text-align: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-muted-2); margin-bottom: 2.4rem; } .sp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } @media (max-width: 800px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } } .sp-card { height: 88px; background: var(--c-surface); border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted-2); transition: border-color .2s, color .2s; } .sp-card:hover { border-color: var(--c-accent); color: var(--c-accent); } /* ── 14. CTA mitmachen ────────────────────────────────────── */ .cta { background: var(--c-accent); color: var(--c-accent-on); padding: 6rem 0; position: relative; overflow: hidden; } .cta::before { display: none; } .cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 3rem; } @media (max-width: 800px) { .cta-inner { grid-template-columns: 1fr; } } .cta-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(0,0,0,0.55); margin-bottom: 1rem; } .cta-title { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; } .cta-sub { margin-top: 1.4rem; max-width: 540px; font-size: 1rem; color: rgba(0,0,0,0.65); line-height: 1.6; } .cta-actions { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; } .btn-dark { background: #0a0a0a; color: #fff; border-color: #0a0a0a; } .btn-dark:hover { background: transparent; color: #0a0a0a; } .btn-on-cta { background: transparent; color: rgba(0,0,0,0.8); border-color: rgba(0,0,0,0.25); } .btn-on-cta:hover { border-color: #0a0a0a; color: #0a0a0a; } /* ── 15. Footer ───────────────────────────────────────────── */ .footer { background: var(--c-bg-2); padding: 5rem 0 0; position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; inset: 0; background-image: url('../img/pitch-lines.svg'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; opacity: 0.06; pointer-events: none; z-index: 0; } .footer > * { position: relative; z-index: 1; } [data-bg="light"] .footer { background: #0d1820; color: #fff; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-brand { display: flex; flex-direction: column; } .footer-brand .brand { margin-bottom: 1.4rem; } [data-bg="light"] .footer .brand-title { color: #fff; } .footer-desc { font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 380px; } .footer-socials { display: flex; gap: 0.6rem; margin-top: 1.4rem; } .fs-btn { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); transition: all .2s; } .fs-btn:hover { border-color: var(--c-accent); color: var(--c-accent); } .footer-col-title { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1.3rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-links { display: flex; flex-direction: column; gap: 0.55rem; } .footer-link { font-size: 0.85rem; color: rgba(255,255,255,0.55); transition: color .15s, padding-left .15s; } .footer-link:hover { color: #fff; padding-left: 0.3rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.5rem 0; } .footer-bottom .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.75rem; color: rgba(255,255,255,0.4); } .footer-bottom a { transition: color .15s; } .footer-bottom a:hover { color: #fff; } .footer-bottom-legal { display: flex; gap: 1.5rem; } .footer-morse { font-family: monospace; letter-spacing: 0.2em; color: rgba(255,255,255,0.18); font-size: 0.68rem; pointer-events: none; user-select: none; } .footer-accent { height: 4px; background: linear-gradient(90deg, var(--red) 0 33%, var(--gold) 33% 66%, var(--blue) 66% 100%); } /* News thumb backgrounds — make light mode versions readable */ [data-bg="light"] .news-thumb { background: linear-gradient(135deg, #fbeec3 0%, #f3d97a 100%); } [data-bg="light"] .news-thumb.red { background: linear-gradient(135deg, #fde4e7 0%, #efb8be 100%); } [data-bg="light"] .news-thumb.blue { background: linear-gradient(135deg, #dce8f1 0%, #a6c4dc 100%); } [data-bg="light"] .news-thumb.gold { background: linear-gradient(135deg, #fbeec3 0%, #efd070 100%); } [data-bg="light"] .news-thumb-mark { color: #0a0a0a; opacity: 0.12; } [data-bg="light"] .news-tag:not(.red) { color: #0a0a0a; } /* Footer transition in light mode — softer dark + thicker accent strip */ [data-bg="light"] .footer { background: #112a3e; } [data-bg="light"] .footer-accent { height: 6px; } [data-bg="light"] .footer-brand .brand-title { color: #fff; } [data-bg="light"] .footer-brand .brand-sub { color: var(--gold); } /* Light mode small contrast fixes */ [data-bg="light"] .sp-card { background: #fff; border-color: rgba(0,0,0,0.08); } [data-bg="light"] .ticker { background: #F2EBD2; } [data-bg="light"] .ticker-item { color: rgba(0,0,0,0.55); } /* Tricolor: rotate team-letter color through red/gold/blue on hover */ [data-accent="tricolor"] .team-card:nth-child(3n+1):hover .team-letter { color: var(--red); } [data-accent="tricolor"] .team-card:nth-child(3n+2):hover .team-letter { color: var(--gold); } [data-accent="tricolor"] .team-card:nth-child(3n):hover .team-letter { color: var(--blue); } /* ── 16. Responsive base ──────────────────────────────────── */ @media (max-width: 1024px) { .hero-row { grid-template-columns: 1fr !important; gap: 2.5rem !important; } [data-style="classic"] .hero-wappen-bg { display: none; } .news-grid { grid-template-columns: 1fr 1fr; } [data-style="minimal"] .news-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { :root { --gutter: 1.25rem; } .news-grid { grid-template-columns: 1fr; } .sb-row { grid-template-columns: 1fr !important; gap: 1.5rem; } [data-style="minimal"] .sb-row { grid-template-columns: 1fr; } .sb-info { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero-meta-row { grid-template-columns: 1fr 1fr; } } /* Fade-up on scroll */ .fade-up { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* =========================================================== POLISH PASS — Mix variant refinements (v2) =========================================================== */ /* Hero lead: a touch more weight on navy bg */ [data-bg="mix"] .hero-lead { font-size: 1.1rem; line-height: 1.7; } /* Hero eyebrow indicator: tricolor mini-stripe instead of single line */ [data-bg="mix"][data-accent="tricolor"] .hero-eyebrow::before { width: 36px; height: 2px; background: linear-gradient(90deg, var(--red) 0 33.33%, var(--gold) 33.33% 66.66%, var(--blue) 66.66% 100%); } /* Section eyebrow .idx — turns into a small numbered chip on cream sections */ [data-bg="mix"] .news .sec-eyebrow .idx, [data-bg="mix"] .teams .sec-eyebrow .idx, [data-bg="mix"] .training-strip .sec-eyebrow .idx, [data-bg="mix"] .scoreboard .sec-eyebrow .idx { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--c-text); color: var(--c-bg-2); font-feature-settings: 'tnum'; font-size: 0.62rem; letter-spacing: 0; } /* Match-card type polish */ .match-card-body { padding: 1.8rem 1.5rem; } .mc-league { display: inline-flex; align-items: center; gap: 0.6rem; } .mc-league::before { content: ''; width: 18px; height: 1.5px; background: var(--c-accent); } /* Scoreboard team crests — stronger frame in mix mode */ [data-bg="mix"] .scoreboard .sb-team-crest { width: 108px; height: 108px; border-width: 2px; } [data-bg="mix"] .sb-team.away .sb-team-crest { background: #fff; } [data-bg="mix"][data-accent="tricolor"] .sb-team.away .sb-team-crest { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } /* Scoreboard info row — visually grouped on cream */ [data-bg="mix"] .sb-info { margin-top: 4rem; padding: 1.8rem; background: rgba(0,0,0,0.025); border: 1px solid rgba(0,0,0,0.06); border-top: 1px solid rgba(0,0,0,0.06); } [data-bg="mix"] .sb-info-block { padding: 0 0.4rem; } /* News thumb — mix mode: add a small decorative grid pattern for character */ [data-bg="mix"] .news-thumb { position: relative; } [data-bg="mix"] .news-thumb::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 11px, rgba(0,0,0,0.04) 11px 12px), repeating-linear-gradient(90deg, transparent 0 11px, rgba(0,0,0,0.04) 11px 12px); pointer-events: none; mix-blend-mode: multiply; opacity: 0.6; } [data-bg="mix"] .news-thumb .news-tag, [data-bg="mix"] .news-thumb .news-thumb-mark { position: relative; z-index: 1; } /* News-card stronger feature treatment in mix mode */ [data-bg="mix"] .news-card.feat .news-title { font-size: 1.55rem; } [data-bg="mix"] .news-card:hover { box-shadow: 0 18px 40px -28px rgba(0,0,0,0.25); } .cta { background: radial-gradient(ellipse 60% 80% at 110% 50%, rgba(0,0,0,0.10), transparent 60%), var(--c-accent); } .cta::before { display: block !important; content: '09'; position: absolute; right: -2rem; bottom: -3rem; font-size: 22rem; font-weight: 900; line-height: 0.8; color: rgba(0,0,0,0.06); letter-spacing: -0.05em; pointer-events: none; z-index: 0; } [data-style="stadium"] .cta::before { font-style: italic; } /* CTA — secondary "Mehr über uns" button slightly stronger */ .btn-on-cta { border-color: rgba(0,0,0,0.45); color: rgba(0,0,0,0.92); } /* Footer accent strip — slightly thicker in mix for finish */ [data-bg="mix"] .footer-accent { height: 5px; } /* Sponsors in mix — solid white tiles on navy, with tier-colored top stripe. This replaces the faint navy-on-navy border that was hard to see. */ [data-bg="mix"] .sponsors { background-color: var(--c-bg); } [data-bg="mix"] .sp-grid { gap: 1.25rem; } [data-bg="mix"] .sp-card { position: relative; height: 140px; background: #ffffff; border: none; border-radius: 2px; padding: 1.1rem 1rem 1rem; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; letter-spacing: 0; text-transform: none; color: #0a0a0a; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,0.04); transition: transform .2s ease, box-shadow .2s ease; } [data-bg="mix"] .sp-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--c-muted-2); } [data-bg="mix"] .sp-card .sp-tier { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.55); margin-bottom: auto; } [data-bg="mix"] .sp-card .sp-logo { align-self: stretch; flex: 1; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(0,0,0,0.035) 0 8px, rgba(0,0,0,0) 8px 16px); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,0,0,0.32); margin-top: 0.6rem; } [data-bg="mix"] .sp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); } /* Tier-color top stripes */ [data-bg="mix"] .sp-card--haupt::before { background: var(--red); } [data-bg="mix"] .sp-card--gold::before { background: var(--gold); } [data-bg="mix"] .sp-card--silber::before { background: #C8CCD1; } [data-bg="mix"] .sp-card--lokal::before { background: var(--blue); } [data-bg="mix"] .sp-card--foerderer::before { background: rgba(10,10,10,0.35); } /* Hauptsponsor reads as primary: thicker stripe + darker tier label */ [data-bg="mix"] .sp-card--haupt::before { height: 10px; } [data-bg="mix"] .sp-card--haupt .sp-tier { color: #0a0a0a; } [data-bg="mix"] .sp-grid { align-items: stretch; } /* Ticker tightening */ .ticker { height: 52px; } .ticker-tag .dot { box-shadow: 0 0 0 3px rgba(193,18,31,0.25); } [data-accent="tricolor"] .ticker-tag .dot { background: var(--red); } /* Section padding rhythm: cream interior sections breathe a touch more */ [data-bg="mix"] .news { padding: 7rem 0; } [data-bg="mix"] .teams { padding: 7rem 0; } [data-bg="mix"] .training-strip { padding: 6rem 0; } @media (max-width: 800px) { [data-bg="mix"] .news, [data-bg="mix"] .teams, [data-bg="mix"] .training-strip { padding: 4rem 0; } } /* Team card title spacing: a touch more breath above stats row in mix */ [data-bg="mix"] .team-name { margin-top: 1.4rem; } /* Tighter, more legible body line-length on hero in mix */ [data-bg="mix"] .hero-lead { max-width: 520px; } /* Tr-item polish on cream (mix) */ [data-bg="mix"] .tr-item { background: #fff; } [data-bg="mix"] .tr-list { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.08); } [data-bg="mix"] .tr-team { color: #0a0a0a; } [data-bg="mix"] .tr-time { color: #0a0a0a; } /* ── fussball.de Widget ───────────────────────────────────── */ .widget-wrap { /* Widget bündig im Cream-Bereich der Scoreboard-Sektion */ width: 100%; overflow: hidden; } /* Spielplan-Widget auf der Startseite nicht zu breit werden lassen */ .scoreboard .widget-wrap { max-width: 860px; margin: 0 auto; } /* Widget-iframe bekommt keine eigene Box-Shadow auf Cream */ .fussballde_widget { display: block; } /* Nav-cta visible on dark bg, hover state */ .nav-cta:hover { filter: brightness(1.06); } /* =========================================================== FINETUNE v3 — Eingefrorener Standard (Stand: Mai 2026) Hier liegen: 1) Polish-Defaults (Accessibility, Smoothness, Logo-Placeholder, Nav-Active-State-Fix etc.) — gilt auf JEDER Seite. 2) Eingefrorene Tweak-Werte: Section-Rhythmus "cozy" + Eyebrow "minimal". Diese ersetzen die alten Defaults. Tweaks-Panel auf index-v2.html kann sie via data-* auf jederzeit überschreiben. 3) fussball.de-Widget-Loader + Fallback-Permalink-Styles. =========================================================== */ /* --- 1. Polish-Defaults ---------------------------------- */ .fade-up { transition: opacity .65s cubic-bezier(.2,.6,.2,1), transform .65s cubic-bezier(.2,.6,.2,1); } /* Hero-Stats — bessere Lesbarkeit auf Navy */ [data-bg="mix"] .hero-meta-item .lbl { color: rgba(255,255,255,0.55); } [data-bg="mix"] .hero-meta-item .num { letter-spacing: -0.025em; } [data-bg="mix"] .hero-meta-row { border-top-color: rgba(255,255,255,0.10); } /* Hero-Title — leicht tighteres Tracking */ .hero-title { letter-spacing: -0.022em; } /* Hero-Side Match-Card — ruhigere Surface auf Navy */ [data-bg="mix"] .hero-side .match-card { background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.10); } [data-bg="mix"] .hero-side .match-card .match-card-body h3 { font-size: 1.08rem; line-height: 1.32; } /* Active nav-link — Gold-Strich via box-shadow. WICHTIG: NICHT ::after benutzen — kollidiert mit dem Dropdown-Chevron ▾ (content wird überschrieben → Layout-Sprung). */ .nav-link.is-active { color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-accent); } /* Konsistente Keyboard-Focus-Ringe (Accessibility) */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .team-card:focus-visible, .news-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* News-Card-Hover-Kurve */ .news-card { transition: transform .3s cubic-bezier(.2,.6,.2,1), border-color .25s, box-shadow .3s; } /* Sponsoren-Placeholder typographisch ruhiger */ [data-bg="mix"] .sp-card .sp-logo::after { content: " ⌗"; margin-left: 0.35em; opacity: 0.5; font-weight: 400; } /* Btn-Arrow minimal sichtbarer */ .btn .arr { opacity: 0.92; } /* CTA-Eyebrow Spacing */ .cta-eyebrow { margin-bottom: 1.2rem; } /* Footer-Links Gap */ .footer-links { gap: 0.65rem; } /* --- 2. Eingefrorene Tweak-Werte (neue Defaults) --------- */ /* Section-Rhythmus: COZY als Standard. Vorher 6rem / 7rem / 6rem. */ section { padding: 4rem 0; } .hero { padding: 4rem 0 5rem; } .sec-head { margin-bottom: 2.2rem; } [data-bg="mix"] .news, [data-bg="mix"] .teams { padding: 5rem 0; } [data-bg="mix"] .training-strip { padding: 4.5rem 0; } @media (max-width: 800px) { section { padding: 3rem 0; } .hero { padding: 3rem 0 4rem; } [data-bg="mix"] .news, [data-bg="mix"] .teams { padding: 3.5rem 0; } [data-bg="mix"] .training-strip { padding: 3rem 0; } } /* Eyebrow-Stil: MINIMAL als Standard. .idx (Nummerierungs-Chip) wird ausgeblendet, Spacing etwas weiter. Die alten Chip-Styles in [data-bg="mix"] bleiben im CSS, greifen aber nicht mehr, weil .idx default display: none !important ist. ("!important" nötig, weil die Chip-Regel höhere Selektor-Specificity hat.) */ .sec-eyebrow { font-size: 0.6rem; letter-spacing: 0.36em; gap: 0.9rem; } .sec-eyebrow .idx { display: none !important; } /* --- 3. fussball.de Widget — Loader + Permalink-Fallback - */ .widget-wrap { position: relative; } .widget-loader { padding: 2.4rem 1.5rem; text-align: center; border: 1px dashed rgba(0,0,0,0.14); background: rgba(255,255,255,0.55); max-width: 580px; margin: 0 auto; } .widget-loader.is-hidden { display: none; } .widget-loader-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(0,0,0,0.65); margin-bottom: 0.6rem; display: inline-flex; align-items: center; gap: 0.6rem; } .widget-loader-title::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.8s ease-in-out infinite; } .widget-loader-sub { font-size: 0.82rem; color: rgba(0,0,0,0.55); line-height: 1.55; margin: 0 auto 1.3rem; max-width: 420px; } .widget-loader-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #0a0a0a; background: var(--gold); transition: background .15s, transform .15s; } .widget-loader-link:hover { background: var(--gold-2); transform: translateY(-1px); } .widget-foot-link { margin-top: 1.8rem; text-align: center; font-size: 0.78rem; color: rgba(0,0,0,0.55); } .widget-foot-link a { color: rgba(0,0,0,0.85); border-bottom: 1px solid var(--gold-2); padding-bottom: 1px; transition: border-color .15s, color .15s; font-weight: 700; } .widget-foot-link a:hover { color: #0a0a0a; border-bottom-color: #0a0a0a; } /* =========================================================== A11Y v1 — Barrierefreiheit Phase 1 (Stand: Juni 2026) Skip-Link + main-Landmark. Siehe BARRIEREFREIHEIT-PLAN.md. =========================================================== */ /* Skip-Link: unsichtbar bis Tastatur-Fokus, dann oben links über allem */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.85rem 1.4rem; background: var(--gold); color: #0a0a0a; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .skip-link:focus { left: 0; outline: 2px solid #0a0a0a; outline-offset: -4px; } main { display: block; } /* =========================================================== A11Y v2 — Barrierefreiheit Phase 2: Tastaturbedienung =========================================================== */ /* Desktop-Dropdowns öffnen auch bei Tastatur-Fokus (Tab in den Trigger oder in ein Menü-Item hält das Menü offen). */ .nav-dropdown:focus-within .nav-dropdown-menu { display: block; } /* Escape-Zustand: nav.js setzt .menu-closed, damit das Menü trotz focus-within geschlossen werden kann. Wird bei mouseleave/focusout automatisch wieder entfernt. */ .nav-dropdown.menu-closed .nav-dropdown-menu { display: none !important; } /* =========================================================== A11Y v3 — Barrierefreiheit Phase 3: Kontraste & Schriftgrößen Alle Werte gemessen (WCAG-Kontrast ≥ 4.5:1 für Fließtext). Messwerte siehe BARRIEREFREIHEIT-PLAN.md. =========================================================== */ /* --- 1. Muted-Töne anheben --------------------------------- Vorher: weiß 62% (4.0:1 auf Surface) / weiß 35% (2.3:1). Nachher: 72% (4.8:1 auch auf Surface-2) / 62% (5.5:1 auf Navy). */ :root { --c-muted: rgba(255,255,255,0.72); --c-muted-2: rgba(255,255,255,0.62); /* Akzentfarben für Text auf hellen Flächen (Gold/Blau bestehen auf Cream/Weiß den Kontrast-Check nicht: 1.5:1 bzw. 3.5:1) */ --gold-on-light: #846300; /* 4.7:1 auf Cream, 5.6:1 auf Weiß */ --blue-on-light: #38678A; /* 5.1:1 auf Cream, 6.0:1 auf Weiß */ } [data-bg="mix"] { --c-muted: rgba(255,255,255,0.72); --c-muted-2: rgba(255,255,255,0.62); } [data-bg="light"] { --c-muted: rgba(0,0,0,0.62); --c-muted-2: rgba(0,0,0,0.56); } /* Helle Inseln im Mix-Mode: schwarz 30% (2.1:1) → 56% (4.5:1) */ [data-bg="mix"] .scoreboard, [data-bg="mix"] .news, [data-bg="mix"] .teams, [data-bg="mix"] .training-strip { --c-muted: rgba(0,0,0,0.62); --c-muted-2: rgba(0,0,0,0.56); } /* --- 2. Footer (Navy-2): feste rgba-Werte anheben ---------- */ .footer-desc { color: rgba(255,255,255,0.68); } .footer-link { color: rgba(255,255,255,0.72); } .fs-btn { color: rgba(255,255,255,0.72); } .footer-bottom .wrap { color: rgba(255,255,255,0.62); } /* --- 3. Gold/Blau-Text auf hellen Flächen ------------------ */ [data-bg="mix"] .teams .sec-eyebrow, [data-bg="mix"] .news .sec-eyebrow, [data-bg="mix"] .scoreboard .sec-eyebrow, [data-bg="mix"] .training-strip .sec-eyebrow { color: var(--gold-on-light); } [data-bg="mix"][data-accent="tricolor"] #spiele .sec-eyebrow { color: var(--blue-on-light); } [data-bg="mix"] .news .news-more, [data-bg="mix"] .news .news-card:hover .news-title, [data-bg="mix"] .teams .team-card:hover .team-link, [data-bg="mix"] .training-strip .tr-trainer, [data-bg="mix"] .teams .sec-link:hover, [data-bg="mix"] .news .sec-link:hover, [data-bg="mix"] .scoreboard .sec-link:hover, [data-bg="mix"] .training-strip .sec-link:hover { color: var(--gold-on-light); } /* Tricolor-Team-Tags: Gold/Blau auf Cream → dunkle Varianten. Rot (#C1121F, 5.2:1) besteht und bleibt. */ [data-bg="mix"][data-accent="tricolor"] .team-card:nth-child(n+4):nth-child(-n+7) .team-tag { color: var(--gold-on-light); } [data-bg="mix"][data-accent="tricolor"] .team-card:nth-child(n+8) .team-tag { color: var(--blue-on-light); } /* --- 4. Mindest-Schriftgrößen ------------------------------ Eyebrows: 0.6–0.7rem → 0.75rem (12px). Micro-Labels: ≤0.62rem → 0.66–0.68rem (~11px). */ .sec-eyebrow { font-size: 0.75rem; } .hero-eyebrow { font-size: 0.75rem; } .sp-eyebrow { font-size: 0.75rem; } .cta-eyebrow { font-size: 0.75rem; } .team-tag { font-size: 0.68rem; } .hero-meta-item .lbl { font-size: 0.68rem; } .footer-col-title { font-size: 0.68rem; } .tr-day { font-size: 0.68rem; } .tr-trainer { font-size: 0.7rem; } .news-meta { font-size: 0.7rem; } .news-tag { font-size: 0.66rem; } .news-more { font-size: 0.7rem; } .team-link { font-size: 0.7rem; } .mc-meta-l { font-size: 0.66rem; } .mc-league { font-size: 0.66rem; } .match-card-badge { font-size: 0.66rem; } .brand-sub { font-size: 0.62rem; } /* =========================================================== NAV-KONSISTENZ — Vereinheitlichung (Juni 2026) 1) Aktuelle Seite in Dropdown/Drawer/Footer: aria-current statt Inline-Styles (war gold/blau gemischt). 2) Top-Level-Items: einheitliche Box-Höhe. Plain-Links wurden als Flex-Children blockified (Padding zählt), Dropdown- Trigger blieben inline (Padding zählt nicht) → Active- Unterstrich + Hover-Fläche saßen unterschiedlich hoch. =========================================================== */ .nav-dropdown-item[aria-current="page"] { color: var(--gold); } .nav-mobile-acc-body a[aria-current="page"] { color: var(--gold); } .footer-bottom-legal a[aria-current="page"] { color: var(--gold); } .nav-link { display: inline-block; } .nav-dropdown { display: flex; align-items: center; } /* =========================================================== A11Y v4 — Barrierefreiheit Phase 4: Bewegung & Animation =========================================================== */ /* --- 1. prefers-reduced-motion ------------------------------ Nutzer mit Bewegungsempfindlichkeit (OS-Einstellung) bekommen: kein Smooth-Scroll, keine Marquee-/Pulse-/Morse-Animationen, Fade-up-Inhalte sofort sichtbar, keine Hover-Transforms. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .fade-up { opacity: 1 !important; transform: none !important; } .ticker-track { animation: none !important; } .btn:hover, .news-card:hover, .sp-card:hover { transform: none !important; } } /* --- 2. Ticker-Pause-Button (WCAG 2.2.2) ------------------- Bewegung > 5 s muss per Bedienelement stoppbar sein — Hover-Pause allein reicht nicht (Touch, Tastatur). */ .ticker-pause { display: flex; align-items: center; justify-content: center; width: 48px; flex-shrink: 0; border-left: 1px solid var(--c-line); color: var(--c-muted); font-size: 0.85rem; line-height: 1; transition: color .15s, background-color .15s; } .ticker-pause:hover { color: var(--c-text); background: rgba(255,255,255,0.05); } .ticker-track.is-paused { animation-play-state: paused; } /* Hover-Brücke für Dropdowns: Das Menü sitzt 8px unter dem Trigger (top: calc(100% + 8px)). Seit die Trigger-Box ihre echte Höhe hat (inline-block), ist diese Lücke eine tote Zone — beim Überqueren mit der Maus ging der :hover verloren und das Menü schloss sich. Unsichtbarer Steg überbrückt die Lücke. */ .nav-dropdown-menu::before { content: ''; position: absolute; top: -9px; left: 0; right: 0; height: 9px; } /* =========================================================== VEREIN-KURZINFO — Sektion auf der Startseite (Juni 2026) Cream-Insel zwischen News und Sponsoren. Ziel des Nav-Links "Verein" (#verein) — vorher zeigte der Anker auf den Footer. Kontraste: gold-on-light / muted-Töne gemäß A11Y v3. =========================================================== */ [data-bg="mix"] .verein { --c-bg: #F2EBD2; --c-bg-2: #E8DEC0; --c-surface: #FFFFFF; --c-surface-2: #F8F3E2; --c-line: rgba(0,0,0,0.10); --c-line-2: rgba(0,0,0,0.05); --c-text: #0a0a0a; --c-muted: rgba(0,0,0,0.62); --c-muted-2: rgba(0,0,0,0.56); background-color: var(--c-bg); color: var(--c-text); padding: 5rem 0; border-top: 1px solid rgba(0,0,0,0.06); } @media (max-width: 800px) { [data-bg="mix"] .verein { padding: 3.5rem 0; } } [data-bg="mix"] .verein .sec-eyebrow { color: var(--gold-on-light); } [data-bg="mix"] .verein .sec-link:hover { color: var(--gold-on-light); } .verein-lead { max-width: 620px; font-size: 1.02rem; font-weight: 300; line-height: 1.7; color: var(--c-muted); margin-bottom: 2.4rem; } .verein-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); } @media (max-width: 900px) { .verein-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .verein-grid { grid-template-columns: 1fr; } } .verein-card { background: var(--c-bg); padding: 1.7rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; transition: background .2s; } .verein-card:hover { background: var(--c-surface); } .verein-card-title { font-size: 1.02rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } .verein-card-desc { font-size: 0.85rem; color: var(--c-muted); line-height: 1.6; flex: 1; } .verein-card-more { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; transition: color .2s, gap .2s; } .verein-card:hover .verein-card-more { color: var(--gold-on-light); gap: 0.7rem; } /* Trainings-Grid: Füller-Karte schließt die letzte Zeile (10 Einträge in 3 Spalten ließen 2 Zellen leer). */ .tr-item--note { grid-column: span 2; justify-content: center; gap: 0.45rem; } [data-bg="mix"] .tr-item--note { background: var(--c-bg); } .tr-note-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted-2); } .tr-note-text { font-size: 0.8rem; color: var(--c-muted); line-height: 1.6; max-width: 460px; } .tr-note-text a { color: var(--gold-on-light); text-decoration: underline; font-weight: 600; } /* ============================================================ PAGE-HERO BALL — vereinheitlicht (Juni 2026) Ersetzt die früheren Inline-Styles der Ball-Deko auf allen Unterseiten-Heros. Fester Pixel-Offset statt %-Wert, damit der Ball unabhängig von der Hero-Höhe immer gleich angeschnitten ist. ============================================================ */ .page-hero-ball { position: absolute; right: -5%; bottom: -60px; width: 45%; max-width: 550px; pointer-events: none; z-index: 0; } .page-hero-ball img { width: 100%; opacity: 0.07; filter: invert(1); } /* ============================================================ NEWS-ARTIKEL (Juni 2026) Layout der Artikel-Detailseiten news-artikel-1…6.html. Hero auf Navy, Artikel-Body auf Weiß (wie News-Sektion), Tricolor-Streifen an der Dark-Light-Grenze. ============================================================ */ .article-hero { position: relative; overflow: hidden; background-color: var(--c-bg); background-image: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(245,184,0,0.09), transparent 60%), radial-gradient(ellipse 50% 50% at 10% 80%, rgba(70,130,169,0.08), transparent 55%); padding: calc(var(--nav-h) + 3.5rem) 0 3.5rem; } .article-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #C1121F 0 33.33%, #F5B800 33.33% 66.66%, #4682A9 66.66% 100%); } .article-hero .wrap { position: relative; z-index: 1; } .article-kicker { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; } .article-kicker::before { content: ''; width: 28px; height: 2px; background: linear-gradient(90deg, var(--red) 0 33%, var(--gold) 33% 66%, var(--blue) 66% 100%); } .article-kicker--red { color: #F08E96; } .article-kicker--blue { color: #6FA8CC; } .article-title { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; max-width: 920px; margin: 0 0 1.2rem; } .article-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); } .article-section { background: #fff; padding: 4rem 0 5rem; } .article-prose { max-width: 720px; } .article-lead { font-size: 1.15rem; font-weight: 300; line-height: 1.7; color: #0a0a0a; margin: 0 0 1.8rem; } .article-prose p { font-size: 1rem; line-height: 1.75; color: rgba(0,0,0,0.75); margin: 0 0 1.2rem; } .article-prose h2 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; color: #0a0a0a; margin: 2.2rem 0 0.8rem; } .article-prose ul { margin: 0 0 1.2rem; padding-left: 1.2rem; } .article-prose li { font-size: 1rem; line-height: 1.7; color: rgba(0,0,0,0.75); margin-bottom: 0.4rem; } .article-prose a { color: var(--blue-on-light); text-decoration: underline; font-weight: 600; } .article-back { margin-top: 3rem; } .article-back a { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0a0a0a; text-decoration: none; border: 1px solid rgba(0,0,0,0.3); padding: 0.75rem 1.3rem; transition: background .15s, border-color .15s; } .article-back a:hover, .article-back a:focus-visible { background: var(--gold); border-color: var(--gold); } /* ============================================================ NEWS-TABS (Juni 2026) Dreiteilung der News-Seite: Vereinsnews · Großfeld · Kleinfeld. Gleiche Optik wie die Tab-Bar der Leitfäden/FAQ, eigene Klassen, Kontraste direkt a11y-konform (#636363 statt rgba 0.4). ============================================================ */ .news-tabbar { background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); position: sticky; top: var(--nav-h); z-index: 40; } .news-tabbar-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 0; } .news-tab-btn { background: none; border: none; cursor: pointer; padding: 1.1rem 1.8rem; font-family: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #636363; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .18s, border-color .18s; } .news-tab-btn:hover { color: rgba(0,0,0,0.75); } .news-tab-btn.is-active { color: var(--c-bg); border-bottom-color: var(--gold); } .news-panel { display: none; } .news-panel.is-active { display: block; } /* ============================================================ WAPPEN-GLOW (Juni 2026) Goldener Schimmer beim Hovern über das Header-Wappen. Bewusst nur auf die Nav — das Footer-Wappen behält seine TAU-Morse-Animation unberührt (siehe CLAUDE.md §11). Unter prefers-reduced-motion greift der globale Transition- Stopp aus A11Y v4 → der Glow erscheint dann ohne Fade. ============================================================ */ .nav .brand-wappen img { transition: filter .28s ease, transform .28s ease; } .nav .brand:hover .brand-wappen img, .nav .brand:focus-visible .brand-wappen img { filter: drop-shadow(0 0 5px rgba(245, 184, 0, 0.85)) drop-shadow(0 0 13px rgba(245, 184, 0, 0.5)); transform: scale(1.04); }