/* DrainMaster Typografie - typografie.css
 *
 * Ausgangslage: Der Shoptimizer-Customizer hatte alle Schriften auf
 * "sans-serif" stehen, also die Systemschrift. Das Elementor-Kit meinte
 * Roboto, kam aber nicht durch. Ergebnis war eine beliebig wirkende Seite.
 *
 * Jetzt zwei Variable Fonts, lokal als WOFF2 (kein Google-Abruf zur
 * Laufzeit, DSGVO-konform, je unter 50 KB fuer alle Gewichte):
 *   Archivo  fuer Ueberschriften und Buttons: breit, technisch, kraeftig.
 *   Inter    fuer Fliesstext: auf Bildschirmlesbarkeit optimiert.
 *
 * Groessen fluid ueber clamp(), damit zwischen Handy und Desktop nichts
 * springt und keine Breakpoints noetig sind.
 *
 * Sprachen: Die Dateien decken Latin und Latin-Extended ab, also alle
 * WPML-Sprachen mit lateinischer Schrift. Russisch, Ukrainisch und Arabisch
 * fallen automatisch auf den Systemstack zurueck, weil die Zeichen nicht in
 * der Datei liegen. Das ist gewollt und braucht keine Sonderregel.
 */

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-var.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InterVar';
    src: url('../fonts/inter-var.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* Metrisch angepasste Ersatzschriften.
   Bis die WOFF2-Datei da ist, zeichnet der Browser mit Arial. Arial baut
   breiter als Archivo (gemessen 96,0 %) und schmaler als Inter (101,5 %).
   Ohne Ausgleich brechen Zeilen im Ersatz anders um als danach: die
   Merkmals-Chips im Hero standen erst untereinander und sprangen beim
   Nachladen nebeneinander. size-adjust zieht die Ersatzschrift auf die
   Breite der echten, damit steht der Umbruch von der ersten Zeichnung an. */

@font-face {
    font-family: 'Archivo Ersatz';
    src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
    size-adjust: 96%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter Ersatz';
    src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
    size-adjust: 101.5%;
    ascent-override: 90%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

:root {
    --dm-font-display: 'Archivo', 'Archivo Ersatz', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --dm-font-text: 'InterVar', 'Inter Ersatz', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

    /* Fluid-Typoskala, Verhaeltnis rund 1.25 */
    --dm-text-s:  clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
    --dm-text-m:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
    --dm-text-l:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --dm-h3:      clamp(1.35rem, 1.2rem + 0.8vw, 1.85rem);
    --dm-h2:      clamp(1.75rem, 1.4rem + 1.7vw, 2.85rem);
    --dm-h1:      clamp(2.1rem, 1.5rem + 2.8vw, 3.9rem);
}

/* ---------- Grundschrift ---------- */

body,
p, li, dd, dt, td, th, blockquote, figcaption, small,
input, select, textarea, option {
    font-family: var(--dm-font-text) !important;
}

body {
    font-size: var(--dm-text-m);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p { line-height: 1.65; }

/* Fliesstext nicht ueber 75 Zeichen laufen lassen */
.entry-content p,
.dm-hero__text,
.dm-staffel__sub {
    max-width: 68ch;
    text-wrap: pretty;
}

/* ---------- Ueberschriften und Bedienelemente ---------- */

h1, h2, h3, h4, h5, h6,
.dm-hero__title, .dm-hero__kicker, .dm-hero__usps li,
.dm-staffel__titel, .dm-staffel__kicker, .dm-staffel__menge,
.dm-staffel__preis, .dm-staffel__link, .dm-staffel__cta,
.dm-hero__cta, .dm-hero__sterne-wert,
button, .button, input[type="submit"], input[type="button"],
.elementor-button, .elementor-button-text, .elementor-heading-title,
.elementor-nav-menu a, .main-navigation a, .menu-item a,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce-loop-product__title, .product_title, .price, .amount,
.woocommerce-Price-amount, .site-title, .page-title, .entry-title,
.widget-title, .widgettitle, .wc-tabs li a {
    font-family: var(--dm-font-display) !important;
}

/* Elementor haengt .elementor-heading-title an jedes Ueberschriften-Widget,
   auch wenn dort als HTML-Tag span oder p gewaehlt wurde. Genau so sind die
   Vorspaenne unter den Sektionstiteln gebaut. In der Displayschrift wirken
   die zu schwer, deshalb bekommen nur echte Ueberschriftentags Archivo. */
:where(span, p, div).elementor-heading-title {
    font-family: var(--dm-font-text) !important;
}

/* Variable Fonts liefern eine eigene Zeichnung je Schriftgrad. Ohne diese
   Zeile rendern Browser alle Grade nach der Standard-Optik, grosse
   Ueberschriften wirken dann zu fett und Kleintext zu duenn. */
:root {
    font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6,
.dm-hero__title, .dm-staffel__titel {
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 { font-size: var(--dm-h1); font-weight: 800; }
h2 { font-size: var(--dm-h2); font-weight: 700; }
h3 { font-size: var(--dm-h3); font-weight: 700; }

/* Optische Randausgleichung fuer grosse Displaytypo */
.dm-hero__title,
.dm-staffel__titel {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Zahlen in Preisen tabellarisch, damit Spalten sauber stehen */
.dm-staffel__preis,
.dm-staffel__pro,
.dm-staffel__menge,
.woocommerce-Price-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}