109 lines
2.3 KiB
CSS
109 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); }
|
|
|
|
p {
|
|
max-width: 70ch;
|
|
}
|
|
|
|
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;
|
|
}
|