/* ========================================================================== Kreislaufkraft · Typografie-Grundlage -------------------------------------------------------------------------- DIE QUELLE DER WAHRHEIT SIND DIE GLOBALEN SCHRIFTSTILE IN ELEMENTOR. Zu finden unter Website-Einstellungen → Typografie, benannt von "01 Display XL" bis "19 Knopf Versalien". Wer dort eine Groesse, eine Schriftart oder eine Zeilenhoehe aendert, aendert sie ueberall. Diese Datei enthaelt bewusst KEINE eigenen Zahlenwerte. Sie reicht Elementors Variablen nur weiter: --e-global-typography-kk_body-font-size (von Elementor gesetzt) ↓ --kk-fs-body (kurzer Name zum Benutzen) Damit haengt auch alles daran, was NICHT an einem Elementor-Regler sitzt: die Ausgabe von WooCommerce, Rechtstexte, der Fliesstext der Magazin-Beitraege und die Inline-Stile in den Texten einzelner Bausteine. Die Werte in den var()-Klammern sind reine Rueckfallwerte. Sie greifen nur, wenn Elementors Kit-CSS einmal nicht geladen ist, und muessen deshalb nicht gepflegt werden. Elementor definiert seine Variablen je Breakpoint neu. Diese Datei braucht deshalb keine eigenen Media Queries fuer Groessen - Tablet und Telefon folgen automatisch dem, was in den globalen Schriftstilen steht. Drei Schriften, jede mit einer klaren Aufgabe: Fraunces Ueberschriften, Display, Preise, Zitate Red Hat Mono Fliesstext, Meta-Angaben, Ueberzeilen, Kennzahlen Red Hat Display Navigation, Knoepfe, Formulare, Fusszeile Laeuft als letztes Stylesheet des Kindthemes (Prioritaet 45), damit die Grundwerte die des Elterntemas ueberschreiben. Die Regeln haben bewusst niedrige Spezifitaet - alles, was in Elementor je Element gesetzt ist, wiegt schwerer und bleibt unangetastet. ========================================================================== */ /* Elementor haengt die Kit-Klasse an den Body und definiert seine Variablen dort. Weiter oben, an :root, sind sie nicht sichtbar - die Bruecke muss deshalb ebenfalls am Body sitzen. */ body, .elementor-kit-11 { /* --- Schriftfamilien -------------------------------------------------- Elementor gibt nur den Familiennamen aus ("Fraunces"), ohne Ersatzkette. Die Kette steht deshalb an der Stelle der Verwendung. */ --kk-font-display: var(--e-global-typography-kk_h1-font-family, "Fraunces"); --kk-font-ui: var(--e-global-typography-kk_ui-font-family, "Red Hat Display"); --kk-font-body: var(--e-global-typography-kk_body-font-family, "Red Hat Mono"); /* --- Schriftgroessen --------------------------------------------------- */ --kk-fs-display-xl: var(--e-global-typography-kk_display_xl-font-size, 80px); --kk-fs-display-l: var(--e-global-typography-kk_display_l-font-size, 56px); --kk-fs-h1: var(--e-global-typography-kk_h1-font-size, 42px); --kk-fs-h2: var(--e-global-typography-kk_h2-font-size, 32px); --kk-fs-h3: var(--e-global-typography-kk_h3-font-size, 24px); --kk-fs-h4: var(--e-global-typography-kk_h4-font-size, 18px); --kk-fs-price: var(--e-global-typography-kk_price-font-size, 24px); --kk-fs-quote: var(--e-global-typography-kk_quote-font-size, 22px); --kk-fs-stat: var(--e-global-typography-kk_stat-font-size, 40px); --kk-fs-lead: var(--e-global-typography-kk_lead-font-size, 18px); --kk-fs-body: var(--e-global-typography-kk_body-font-size, 15px); --kk-fs-body-s: var(--e-global-typography-kk_body_s-font-size, 13px); --kk-fs-meta: var(--e-global-typography-kk_meta-font-size, 12px); --kk-fs-overline: var(--e-global-typography-kk_overline-font-size, 11px); --kk-fs-ui: var(--e-global-typography-kk_ui-font-size, 15px); --kk-fs-ui-s: var(--e-global-typography-kk_ui_s-font-size, 13px); --kk-fs-button: var(--e-global-typography-kk_button-font-size, 13px); --kk-fs-label: var(--e-global-typography-kk_label-font-size, 12px); /* --- Zeilenhoehen ------------------------------------------------------ */ --kk-lh-display: var(--e-global-typography-kk_display_xl-line-height, 1.02em); --kk-lh-h1: var(--e-global-typography-kk_h1-line-height, 1.12em); --kk-lh-h2: var(--e-global-typography-kk_h2-line-height, 1.18em); --kk-lh-h3: var(--e-global-typography-kk_h3-line-height, 1.25em); --kk-lh-h4: var(--e-global-typography-kk_h4-line-height, 1.35em); --kk-lh-body: var(--e-global-typography-kk_body-line-height, 1.7em); --kk-lh-ui: var(--e-global-typography-kk_ui-line-height, 1.3em); /* --- Laufweiten und Staerken ------------------------------------------- */ --kk-ls-heading: var(--e-global-typography-kk_h2-letter-spacing, -0.015em); --kk-ls-body: var(--e-global-typography-kk_body-letter-spacing, -0.01em); --kk-fw-heading: var(--e-global-typography-kk_h1-font-weight, 400); --kk-fw-ui: var(--e-global-typography-kk_ui-font-weight, 500); } /* ========================================================================== Grundwerte fuer alles ausserhalb der Elementor-Regler ========================================================================== */ body { font-family: var(--kk-font-body), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--kk-fs-body); line-height: var(--kk-lh-body); letter-spacing: var(--kk-ls-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--kk-font-display), Georgia, "Times New Roman", serif; font-weight: var(--kk-fw-heading); letter-spacing: var(--kk-ls-heading); } h1 { font-size: var(--kk-fs-h1); line-height: var(--kk-lh-h1); } h2 { font-size: var(--kk-fs-h2); line-height: var(--kk-lh-h2); } h3 { font-size: var(--kk-fs-h3); line-height: var(--kk-lh-h3); } h4 { font-size: var(--kk-fs-h4); line-height: var(--kk-lh-h4); } h5 { font-size: var(--kk-fs-ui); line-height: var(--kk-lh-h4); } h6 { font-size: var(--kk-fs-ui-s); line-height: var(--kk-lh-h4); } /* Bedienelemente laufen in der schmalen Sans. */ button, input, select, textarea, .button, .woocommerce a.button, .woocommerce button.button { font-family: var(--kk-font-ui), system-ui, -apple-system, "Segoe UI", sans-serif; } /* 15 Pixel sind hier kein Geschmack, sondern Technik: unter 16 Pixel zoomt iOS Safari beim Antippen eines Eingabefeldes in die Seite hinein. 15 in der etwas grosszuegigeren Sans liegt optisch bei 16 und loest das Zoomen in der Praxis nicht aus. Wer den Wert aendern will, aendert den globalen Stil "15 UI / Navigation". */ input, select, textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { font-size: var(--kk-fs-ui); line-height: var(--kk-lh-ui); } label, .woocommerce form .form-row label { font-family: var(--kk-font-ui), system-ui, sans-serif; font-size: var(--kk-fs-label); letter-spacing: var(--e-global-typography-kk_label-letter-spacing, 0.06em); text-transform: var(--e-global-typography-kk_label-text-transform, uppercase); } small, figcaption, .wp-caption-text { font-size: var(--kk-fs-meta); line-height: 1.5; } /* Preise durchgehend in der Serifenschrift - sie sind auf dieser Seite ein gestalterisches Element, keine Laufzahl. */ .woocommerce .price, .woocommerce span.amount, .woocommerce-Price-amount { font-family: var(--kk-font-display), Georgia, serif; letter-spacing: -0.01em; } /* ========================================================================== Versalien als Modifikator -------------------------------------------------------------------------- Ein globaler Schriftstil ersetzt in Elementor die komplette Typografie eines Bausteins, einschliesslich text-transform. Bausteine, die ihre Grossschreibung behalten sollen, tragen deshalb die Klasse "kk-caps" - so braucht es nicht von jedem Stil eine zweite Variante in Versalien. "13 Overline / Kicker", "18 Label / Formular" und "19 Knopf Versalien" bringen die Grossschreibung selbst mit und brauchen die Klasse nicht. ========================================================================== */ .kk-caps, .kk-caps .elementor-heading-title, .kk-caps .elementor-widget-container > *, .kk-caps .elementor-button-text { text-transform: uppercase; } /* Zusammengesetzte Bausteine - Warenkorb, Kasse, Bestellbestaetigung, Reiter, Filterleisten - bestehen aus vielen Teilen mit eigenen Reglern. Ein pauschales "kk-caps" wuerde dort auch Fliesstext und Summen in Versalien setzen. Diese Klasse fasst nur die Abschnittstitel an, die Elementor als Ueberschrift ausgibt. */ .kk-caps-titles h1, .kk-caps-titles h2, .kk-caps-titles h3, .kk-caps-titles h4, .kk-caps-titles h5, .kk-caps-titles h6 { text-transform: uppercase; } /* ========================================================================== Untergrenze am Telefon -------------------------------------------------------------------------- Faengt Reste ab, die weder in Elementor noch hier stehen - etwa Ausgabe von Plugins mit eigenen Inline-Stilen. ========================================================================== */ @media (max-width: 767px) { [style*="font-size: 9px"], [style*="font-size:9px"], [style*="font-size: 10px"], [style*="font-size:10px"], [style*="font-size: 11px"], [style*="font-size:11px"] { font-size: 12px !important; } }