/**
* Typografie Schlauerland.IT
*
* Schriften selbst gehostet. Kein Google, kein CDN, kein Fremd-Request.
* Die @font-face-Deklarationen stehen hier und nicht in der Fontsource-CSS,
* damit Preload-URL und src exakt uebereinstimmen.
*/
/* ------------------------------------------------------------------ *
* Schriften
* ------------------------------------------------------------------ */
/**
* Bricolage Grotesque, variabel in ZWEI Achsen.
*
* font-stretch ist hier nicht optional: H1 laeuft auf 90%, H2 auf 95%,
* die Wortmarke auf 92%. Ohne die Breitenachse stimmt die Typografie nicht,
* und deshalb die 131-KB-Standarddatei statt der 41-KB-Variante nur mit wght.
*/
@font-face {
font-family: 'Bricolage Grotesque Variable';
font-style: normal;
font-display: swap;
font-weight: 200 800;
font-stretch: 75% 100%;
src: url('../fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ------------------------------------------------------------------ *
* Skala
* ------------------------------------------------------------------ */
:root {
--font-display: 'Bricolage Grotesque Variable', system-ui, sans-serif;
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
--step--2: 0.75rem; /* 12px Mono-Labels */
--step--1: 0.875rem; /* 14px Captions */
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16-18px Body */
--step-1: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); /* 20-24px Lead */
--step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2rem); /* 24-32px H3 */
--step-3: clamp(2rem, 1.64rem + 1.8vw, 3rem); /* 32-48px H2 klein */
--step-4: clamp(2.5rem, 1.86rem + 3.2vw, 4.5rem); /* 40-72px H2 */
--step-5: clamp(2.75rem, 1.55rem + 6vw, 6.5rem); /* 44-104px H1 */
}
/* ------------------------------------------------------------------ *
* Grundsatz
* ------------------------------------------------------------------ */
html {
background-color: var(--surface);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background-color: var(--surface);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: var(--accent);
color: var(--accent-on);
}
/* ------------------------------------------------------------------ *
* Rollen
*
* WICHTIG fuer Elementor: _css_classes landet am WIDGET-WRAPPER, nicht am
* oder
darin. Das Markup sieht so aus:
*
*
*
Text
*
*
* Farbe und Familie wuerden vererbt, font-size nicht: Ueberschriften und
* Absaetze bringen eigene Browser-Defaults mit. Jede Rolle greift deshalb
* auf dem Element SELBST und auf den Textnachfahren. Ohne den zweiten Teil
* steht die H1 in 40px statt in 104px, und das faellt erst im Browser auf.
* ------------------------------------------------------------------ */
.sl-h1,
.sl-h1 :is(h1, h2, h3, h4, h5, h6, p) {
font-family: var(--font-display);
font-size: var(--step-5);
font-weight: 600;
font-stretch: 90%;
font-optical-sizing: auto;
letter-spacing: -0.03em;
line-height: 0.95;
text-wrap: balance;
margin: 0;
}
.sl-h2,
.sl-h2 :is(h1, h2, h3, h4, h5, h6, p) {
font-family: var(--font-display);
font-size: var(--step-4);
font-weight: 550;
font-stretch: 95%;
font-optical-sizing: auto;
letter-spacing: -0.02em;
line-height: 1.02;
text-wrap: balance;
margin: 0;
}
.sl-h2-klein,
.sl-h2-klein :is(h1, h2, h3, h4, h5, h6, p) {
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 550;
font-stretch: 95%;
font-optical-sizing: auto;
letter-spacing: -0.015em;
line-height: 1.08;
text-wrap: balance;
margin: 0;
}
.sl-h3,
.sl-h3 :is(h1, h2, h3, h4, h5, h6, p) {
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 600;
font-stretch: 95%;
font-optical-sizing: auto;
letter-spacing: -0.01em;
line-height: 1.15;
text-wrap: balance;
margin: 0;
}
/* Kachel-Ueberschrift: Display-Schnitt, aber Body-Groesse. */
.sl-h4,
.sl-h4 :is(h1, h2, h3, h4, h5, h6, p) {
font-family: var(--font-display);
font-size: var(--step-0);
font-weight: 600;
font-stretch: 95%;
line-height: 1.3;
margin: 0;
}
.sl-lead,
.sl-lead :is(p, li) {
font-size: var(--step-1);
line-height: 1.45;
color: var(--text-muted);
margin: 0;
}
.sl-body,
.sl-body :is(p, li) {
font-size: var(--step-0);
line-height: 1.65;
margin: 0;
}
.sl-body :is(p) + :is(p) {
margin-top: 1rem;
}
.sl-caption,
.sl-caption :is(p, li) {
font-size: var(--step--1);
line-height: 1.45;
color: var(--text-muted);
margin: 0;
}
/* Eyebrow. Rationiert: hoechstens einer je drei Sektionen, nie zwei benachbart. */
.sl-mono-label,
.sl-mono-label :is(p) {
font-family: var(--font-mono);
font-size: var(--step--2);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
/* Zeilenlaenge. Ohne die laufen Absaetze im 1400er-Container aus dem Ruder. */
.sl-measure {
max-width: var(--measure);
text-wrap: pretty;
}
.sl-tabular,
.sl-tabular :is(p) {
font-variant-numeric: tabular-nums;
}