:root { /* ========================================================= Core tokens (Light default) --------------------------------------------------------- Change these to rebrand the entire project. ========================================================= */ --bg: #f6f4ee; --bg-muted: #ece7dc; --text: #111827; --muted: #516070; --border: rgba(17, 24, 39, 0.10); --primary: #0ea5a6; --on-primary: #ffffff; /* Brand accents (used for subtle decoration) */ --brand-green: #2e7d32; --brand-gold: #d6b24d; --brand-blue: #0891b2; /* Decorative tints */ --brand-tint-1: rgba(46, 125, 50, 0.10); --brand-tint-2: rgba(214, 178, 77, 0.12); --brand-tint-3: rgba(8, 145, 178, 0.10); /* Links */ --link: var(--primary); --link-hover: #0b8a8c; /* Focus ring */ --focus: rgba(14, 165, 166, 0.45); --focus-offset: 3px; /* Layout */ /* Layout width - 1100px can feel overly narrow on large monitors. - 1360px keeps panels cohesive on desktop while long-form text remains readable via --prose-max-width. */ --max: clamp(960px, 80vw, 1800px); --pad: clamp(14px, 2.5vw, 24px); /* Prose (content pages) */ --prose-max-width: 70ch; /* ========================================================= Surface tokens --------------------------------------------------------- Large UI surfaces (header, main, cards, footer). Keep surfaces token-driven so themes are predictable. ========================================================= */ --surface-header: #f2efe7; --surface-main: var(--bg); --surface-card: #fbfaf6; --surface-footer: #efe9dd; /* Header foreground (text/icons/links on header surface) */ --on-header: var(--text); --on-header-muted: var(--muted); /* ========================================================= Dropdown / overlay surfaces --------------------------------------------------------- Used for dropdowns and the mobile nav panel. ========================================================= */ --surface-dropdown: var(--surface-card); --on-dropdown: var(--text); --dropdown-border: var(--border); --dropdown-shadow: 0 10px 28px rgba(17, 24, 39, 0.10); --dropdown-hover-bg: var(--bg-muted); /* ========================================================= Compatibility aliases --------------------------------------------------------- Some components use these names. Keep them as aliases so you can gradually migrate without regressions. ========================================================= */ --accent: var(--primary); --accent-soft: rgba(37, 99, 235, 0.14); --accent-hover: var(--link-hover); --accent-border: var(--border); --bg-soft: var(--bg-muted); } /* Slightly larger page gutters on wide screens so the layout feels intentional rather than "floating" in the middle of a big monitor. */ @media (min-width: 1200px){ :root{ --pad: clamp(14px, 2.5vw, 24px); } } /* Sticky Footer Base */ html, body { height: 100%; } body{ margin: 0; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.5; background: var(--bg); color: var(--text); } *{ box-sizing: border-box; } /* Media defaults */ img, svg, video, canvas{ max-width: 100%; height: auto; } /* Default Links (Content) */ a{ color: var(--link); text-decoration: none; } a:hover{ color: var(--link-hover); text-decoration: underline; } /* Global focus visibility */ :focus-visible{ outline: 2px solid var(--focus); outline-offset: var(--focus-offset); } /* ========================================================= Theme: Light / Dark (token overrides) --------------------------------------------------------- This project switches themes by overriding tokens on :root. JS toggles data-theme="dark" on . Add more themes later: :root[data-theme="brand-x"] { ... } ========================================================= */ /* Dark theme */ :root[data-theme="dark"] { /* Core */ --bg: #070f1c; --bg-muted: #0b162b; --text: #e7ecf3; --muted: #a8b4c6; --border: rgba(231, 236, 243, 0.14); --primary: #22c3c5; --on-primary: #06111a; /* Brand accents (used for subtle decoration) */ --brand-green: #4ade80; --brand-gold: #facc15; --brand-blue: #22d3ee; /* Decorative tints */ --brand-tint-1: rgba(74, 222, 128, 0.10); --brand-tint-2: rgba(250, 204, 21, 0.10); --brand-tint-3: rgba(34, 211, 238, 0.10); /* Links */ --link: var(--primary); --link-hover: #6fe7e8; /* Focus */ --focus: rgba(96, 165, 250, 0.55); /* Surfaces */ --surface-header: #061529; --surface-main: var(--bg); --surface-card: #0e223d; --surface-footer: #0b1b33; /* Header foreground */ --on-header: #ffffff; --on-header-muted: #cbd5e1; /* Dropdown / overlays */ --surface-dropdown: var(--surface-card); --on-dropdown: var(--text); --dropdown-border: rgba(231, 236, 243, 0.10); --dropdown-shadow: 0 14px 34px rgba(0,0,0,.55); --dropdown-hover-bg: rgba(255,255,255,0.08); /* Aliases */ --accent: var(--primary); --accent-soft: rgba(34, 195, 197, 0.18); --accent-hover: var(--link-hover); --accent-border: var(--border); --bg-soft: var(--bg-muted); } .text-muted{color: var(--muted);} /* ========================================================= Home: Vereins-News (Overrides für DB-Schema + saubere Liste) --------------------------------------------------------- - entfernt Bulletpoints - macht die 2./3. News als "mini items" sauber - entfernt Pfeile (falls noch vorhanden) ========================================================= */ .club-news__all span[aria-hidden="true"], .club-news__featured-cta span[aria-hidden="true"], .club-news__row-arrow { display: none !important; } .club-news__list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .club-news__row { margin: 0; padding: 10px 0 0; border-top: 1px solid rgba(0, 0, 0, 0.10); } .club-news__row-link { display: block; text-decoration: none; } .club-news__row-title { display: block; margin-top: 6px; font-weight: 700; line-height: 1.25; } .club-news__row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* === HOME: News Mini-Liste (V4) === */ .club-news__row { padding: 14px 0 0; } .club-news__row-link { padding: 6px 0 0; } .club-news__row-title { font-size: 1.02rem; } /* Pfeile auf Startseite entfernen (falls noch irgendwo per CSS/HTML) */ .home a span[aria-hidden="true"] { display: none !important; }