fs
adf142b18e
Querschnitt-Verbesserungen ohne eigenes Feature: - Navigation: Untermenü-Trenner (separator) + Mitmachen-Link, rote Akzent-Leiste - Startseiten-Hero zentriert (align center, ohne Hero-CTAs); .hero--center-Styles - person-card/person-grid: Kontakt-Layout, 3-Spalten-Raster (Startseite) - jsonld: geo aus club.json; cta unterstützt #hash-Anker - verein: hartcodierten Maps-Link/Inline-CTA entfernt, .facility zentriert - tokens: Sepia-Farben für Timeline; base: globale p-max-width entfernt - historie: Timeline um 2024/2025 ergänzt - Icons link-45deg (Footer) und robot (meta) nachgereicht Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
106 lines
2.3 KiB
CSS
106 lines
2.3 KiB
CSS
/* ============================================================
|
|
BASE — Fonts, Typografie, Links, Fokus, Skip-Link
|
|
============================================================ */
|
|
@font-face {
|
|
font-family: 'Coolvetica';
|
|
src: url('../fonts/coolvetica.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Abel';
|
|
src: url('../fonts/abel.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--ff-body);
|
|
font-size: var(--fs-600);
|
|
font-weight: var(--fw-regular);
|
|
line-height: var(--lh-body);
|
|
color: var(--clr-text);
|
|
background-color: var(--clr-bg);
|
|
/* WebP primär (deutlich sauberere Textur), JPEG-Fallback für Alt-Browser */
|
|
background-image: url('../img/background.jpg');
|
|
background-image: image-set(url('../img/background.webp') type('image/webp'));
|
|
background-size: 100% auto;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
/* fixed-Attachment ruckelt auf Mobile */
|
|
background-attachment: scroll;
|
|
background-size: auto;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--ff-heading);
|
|
font-weight: var(--fw-regular);
|
|
line-height: var(--lh-heading);
|
|
text-transform: uppercase;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
h1 { font-size: var(--fs-900); }
|
|
h2 { font-size: var(--fs-800); }
|
|
h3 { font-size: var(--fs-700); }
|
|
h4 { font-size: 1.625rem; }
|
|
h5,
|
|
h6 { font-size: var(--fs-600); }
|
|
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 0.2em;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--clr-text-muted);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--clr-text);
|
|
outline-offset: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--clr-accent);
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 1rem;
|
|
z-index: 100;
|
|
padding: 0.75em 1.25em;
|
|
background: var(--clr-accent);
|
|
color: var(--clr-text);
|
|
text-decoration: none;
|
|
border-radius: 0 0 var(--radius-btn) var(--radius-btn);
|
|
}
|
|
|
|
.skip-link:focus-visible {
|
|
top: 0;
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
/* Scrollbar dezent dunkel */
|
|
html {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--clr-bg-corporate) transparent;
|
|
}
|