fs
82cf21085d
Letzter Teil. base.css hatte längst eine globale :focus-visible-Regel, trotzdem existierten 15 Fokus-Regeln — die meisten davon Ballast. Fünf Overrides wiederholten die Basisregel praktisch wortgleich (.back-to-top, .ad-banner__dot, .faq__q, .table-scroll, .btn) und sind ersatzlos entfallen; sie unterschieden sich höchstens um 1px Offset. Die Basisregel selbst läuft jetzt über --focus-ring/--focus-offset, .position-card__head wechselt von Akzentrot auf Weiß. Übrig bleiben zehn Regeln, davon deklarieren nur noch vier überhaupt eine outline — jede mit Grund (inset-Offset bei .tab und .position-card__head, geschichteter Ring beim Formularfeld). Die anderen sechs sind reine Zusatz- effekte (transform, Farbe, Fläche) und lassen den Basis-Ring durch. Der eigentliche Fund steckte im Formularfeld: es setzte outline: none und ersetzte den Ring durch einen roten Rahmen mit 30%-Glow. Akzentrot erreicht auf der Feldfläche aber nur 2,8:1 und verfehlt damit WCAG 1.4.11 (>=3:1) für Fokus-Indikatoren — Tastaturnutzer hatten dort also den schwächsten Fokus der ganzen Seite. Roter Rahmen und Glow bleiben als Marken-Signal, der weiße Standard-Ring kommt zurück; outline-offset entspricht der Glow-Breite, beide Ringe liegen bündig nebeneinander statt übereinander. CLAUDE.md dokumentiert die neuen Regeln: Token-Disziplin mit Tabelle (Spacing, Typo, Icons, Sperrung, Fokus, Trefferfläche) samt der bewussten em-Ausnahme, das Button- und Tab-System inklusive der (0,2,0)-Falle durch die CSS-Ladereihenfolge, und die Fokus-Regel. Dazu ein Punkt in der Checkliste. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
126 lines
3.0 KiB
CSS
126 lines
3.0 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-weight: var(--fw-regular);
|
||
line-height: var(--lh-heading);
|
||
text-transform: uppercase;
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* h1–h3 tragen Coolvetica: alle liegen über der 28px-Grenze (--fs-650). */
|
||
h1,
|
||
h2,
|
||
h3 {
|
||
font-family: var(--ff-heading);
|
||
}
|
||
|
||
h1 { font-size: var(--fs-900); }
|
||
h2 { font-size: var(--fs-800); }
|
||
h3 { font-size: var(--fs-700); }
|
||
|
||
/* h4–h6 laufen über Abel statt Coolvetica. Coolvetica ist Condensed mit nur
|
||
einem Schnitt und wird in Uppercase unter --fs-650 (28px) unleserlich — diese
|
||
Ebenen liegen aber naturgemäß darunter. Abel + Sperrung hält sie lesbar und
|
||
trotzdem als Auszeichnung erkennbar; die Regel aus CLAUDE.md kann hier damit
|
||
gar nicht mehr verletzt werden. Zeilenhöhe zurück auf Fließtext-Maß, weil
|
||
--lh-heading (0.9) nur für die extremen Coolvetica-Größen gedacht ist. */
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: var(--ff-body);
|
||
line-height: 1.2;
|
||
letter-spacing: var(--ls-caps);
|
||
}
|
||
|
||
h4 { font-size: var(--fs-650); }
|
||
h5 { font-size: var(--fs-600); }
|
||
h6 { font-size: var(--fs-500); }
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 0.2em;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--clr-text-muted);
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: var(--focus-ring);
|
||
outline-offset: var(--focus-offset);
|
||
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;
|
||
}
|