/* ========================================================================== monkeyz – Schriftsystem Eine Datei, in der die gesamte Typografie steht. Wer eine Größe, eine Schrift oder einen Grauton ändern will, ändert ihn hier – und zwar an genau einer Stelle. AUSGANGSLAGE ------------ Auf der Startseite lagen vier Schriftarten, elf Schriftgrößen und sieben Textfarben, zusammen 25 verschiedene Textformen. Zwei der vier Schriften (Poppins, Roboto) stammen aus der globalen Elementor-Vorgabe und greifen überall dort, wo im Theme keine Schrift ausdrücklich gesetzt ist – deshalb wirkte die Seite zufällig zusammengesetzt. DAS SYSTEM ---------- Zwei Schriften, je zwei Größen: Stufe 1 · Hero Impact 41 px mobil → 88 px Desktop Stufe 2 · Titel Impact 34 px mobil → 52 px Desktop Stufe 3 · Lesen Century Gothic 16 px mobil → 17 px Desktop Stufe 4 · Klein Century Gothic 12 px, überall gleich Sieben Rollen teilen sich diese vier Stufen. Wo zwei Rollen dieselbe Größe haben, trennen sie sich über Strichstärke, Farbe und Zeilenbreite – nicht über zwei Pixel Unterschied, den ohnehin niemand als Absicht liest. Hero Stufe 1 Abschnittstitel Stufe 2 Blocktitel Stufe 3, fett, weiß Lead Stufe 3, normal, hellgrau, kurze Zeile Fließtext Stufe 3, normal, hellgrau Label Stufe 4, fett, VERSALIEN, gesperrt, grün Kleingedrucktes Stufe 4, normal, grau WIE ES GREIFT ------------- Die vorhandenen Größen-Variablen (--fs-sm, --fs-md, …) werden auf die vier Stufen umgelegt. Dadurch zieht das System durch das ganze Theme, ohne dass hundert einzelne Regeln angefasst werden müssen – auch die Anpassungen an den Formularen des Plugins, die dieselben Variablen benutzen. Alles ist auf .mnkz-page begrenzt, die Kennzeichnung am body, die nur überarbeitete Seiten tragen. Die noch alten Seiten (/location/, /payment/*, /services/ …) bleiben unberührt. Diese Datei wird nach components.css geladen und gewinnt deshalb bei gleicher Gewichtung. ========================================================================== */ /* --- Die vier Stufen ----------------------------------------------------- */ .mnkz-page { /* * Geschrieben als "Anteil der Bildbreite + fester Sockel". Der Anstieg * bleibt dadurch flach genug, dass die Endgröße erst auf breiten * Bildschirmen erreicht wird, und die Untergrenze zählt nicht nur für * Winzlinge, sondern für die verbreiteten 390–430 px. */ --stufe-hero: clamp(41px, 3.6vw + 27px, 88px); --stufe-titel: clamp(34px, 1.4vw + 29px, 52px); --stufe-lesen: clamp(16px, 0.2vw + 15.2px, 17px); --stufe-klein: 12px; /* --- Die vorhandenen Größen auf die Stufen umlegen --- */ --fs-3xs: var(--stufe-klein); --fs-2xs: var(--stufe-klein); --fs-xs: var(--stufe-klein); --fs-sm: var(--stufe-lesen); --fs-base:var(--stufe-lesen); --fs-md: var(--stufe-lesen); --fs-lg: var(--stufe-lesen); --fs-xl: var(--stufe-lesen); --fs-2xl: var(--stufe-titel); --fs-3xl: var(--stufe-titel); --fs-4xl: var(--stufe-titel); --fs-5xl: var(--stufe-hero); --fs-6xl: var(--stufe-hero); --fs-7xl: var(--stufe-hero); /* * Vier Textfarben statt sieben. Die beiden Grautöne, die im Theme für Text * benutzt werden, bekommen hier ihre neuen Werte – sie kommen sonst * nirgends vor, nicht als Rahmen und nicht als Fläche. * * Weiß #FFFFFF Überschriften und Blocktitel * Hellgrau #C9C9C9 Lead und Fließtext, alles zum Lesen * Grau #8A8A8A Kleingedrucktes und Meta-Angaben * Grün #7FF932 Labels, Links, Symbole – nie Fließtext */ --grey-400: #C9C9C9; --grey-500: #8A8A8A; /* --- Das Abstandsraster (Vielfache von 4) --- */ --sp-label: 12px; /* Label → Titel */ --sp-titel: 16px; /* Titel → Lead */ --sp-kopf: 32px; /* Kopfblock → Inhalt */ --sp-eng: 8px; /* Blocktitel → sein Text */ --sp-karte: 20px; /* Karte innen */ --sp-karten: 12px; /* Karte zu Karte */ } @media (min-width: 900px) { .mnkz-page { --sp-kopf: 40px; --sp-karte: 24px; --sp-karten: 16px; } } /* --- Nur noch zwei Schriften -------------------------------------------- Elementor legt für die ganze Website eine eigene Schrift fest (Roboto für Fließtext, Poppins für h1 und h2). Diese Regeln holen die monkeyz-Schriften zurück. body.mnkz-page wiegt schwerer als .elementor-kit-8, deshalb genügt das ohne !important. ------------------------------------------------------------------------ */ body.mnkz-page, body.mnkz-page h1, body.mnkz-page h2, body.mnkz-page h3, body.mnkz-page h4, body.mnkz-page h5, body.mnkz-page h6, body.mnkz-page p, body.mnkz-page li, body.mnkz-page span, body.mnkz-page a, body.mnkz-page strong, body.mnkz-page em, body.mnkz-page button, body.mnkz-page input, body.mnkz-page select, body.mnkz-page textarea, body.mnkz-page label, body.mnkz-page address, body.mnkz-page dt, body.mnkz-page dd, body.mnkz-page td, body.mnkz-page th { font-family: var(--font-core); } /* Impact bleibt den Überschriften und den Deko-Ziffern vorbehalten. */ body.mnkz-page .mz-title, body.mnkz-page .mz-flow__num, body.mnkz-page .mz-benefit__num { font-family: var(--font-display); } /* --- Grundwert für jede Überschrift -------------------------------------- Elementor schreibt für h1 und h2 feste Größen vor (auf dem Telefon 29 und 25 px). Sie schlagen überall dort durch, wo das Theme keine eigene Größe mitgibt – zuletzt aufgefallen an den Sortennamen, die als h2 plötzlich 25 px hatten. Diese Regel nimmt das zurück und setzt jede Überschrift ohne eigene Rolle auf die Lesegröße, also auf einen Blocktitel. Die Rollen weiter unten (.mz-title--h1, .mz-hero__title …) wiegen schwerer und setzen ihre eigenen Werte. Neue Überschriften landen damit automatisch im System, statt bei Elementor. ------------------------------------------------------------------------ */ body.mnkz-page h1, body.mnkz-page h2, body.mnkz-page h3, body.mnkz-page h4, body.mnkz-page h5, body.mnkz-page h6 { font-size: var(--stufe-lesen); font-weight: var(--fw-bold); line-height: 1.35; color: var(--text-primary); } /* --- Überschriften in Impact: nur ein Schnitt ---------------------------- Impact liegt als Webfont in genau einer Strichstärke vor (400). Stand die Überschrift auf 700 – wie hier eine Zeit lang –, rechnete der Browser den fetten Schnitt selbst dazu ("faux bold"): Er verdickt die Umrisse nach außen, bis die Innenräume von a, e, g und ä zulaufen. Impact ist von Haus aus eine schwere, schmale Schrift; künstlich verfettet wird daraus ein schwarzer Block, der schlecht zu lesen ist. Deshalb steht hier ausdrücklich 400 – das ist bei Impact die volle Strichstärke, nicht die dünne. Century Gothic hat echte fette Schnitte im Theme, dort bleibt 700 richtig (siehe Blocktitel weiter unten). Dazu zwei Kleinigkeiten, die Impact in Versalien braucht: eine Spur mehr Laufweite, damit die schmalen Buchstaben nicht ineinanderlaufen, und mehr Zeilenabstand – bei 1,08 stießen die Umlautpunkte der zweiten Zeile fast an die erste. ------------------------------------------------------------------------ */ .mnkz-page .mz-title { font-weight: var(--fw-regular); letter-spacing: 0.02em; } /* --- Stufe 1 · Hero ------------------------------------------------------ */ .mnkz-page .mz-title--hero, .mnkz-page .mz-hero__title { font-size: var(--stufe-hero); line-height: 1.06; } /* --- Stufe 2 · Abschnittstitel ------------------------------------------ h1 und h2 der Staffel sind jetzt dieselbe Größe. Ein Abschnitt ist ein Abschnitt – es gab keinen Grund, „Unsere Sorten" kleiner zu setzen als „So wirst du Mitglied". ------------------------------------------------------------------------ */ .mnkz-page .mz-title--h1, .mnkz-page .mz-title--h2 { font-size: var(--stufe-titel); line-height: 1.16; } /* --- Stufe 3 · Blocktitel ------------------------------------------------ .mz-title--h3 sitzt über Fenstern und Karten. Es ist ein Blocktitel und damit Century Gothic, nicht Impact: Impact in dieser Größe wäre gedrängt und schlecht zu lesen. ------------------------------------------------------------------------ */ .mnkz-page .mz-title--h3 { font-family: var(--font-core); font-size: var(--stufe-lesen); font-weight: var(--fw-bold); text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--text-primary); } /* Alles, was in einer Karte oben steht, ist derselbe Blocktitel. */ .mnkz-page .mz-card__title, .mnkz-page .mz-flow__titel, .mnkz-page .mz-fact__titel, .mnkz-page .mz-benefit__text strong, .mnkz-page .mz-acc__q { font-family: var(--font-core); font-size: var(--stufe-lesen); font-weight: var(--fw-bold); line-height: 1.35; color: var(--white); } .mnkz-page .mz-flow__titel, .mnkz-page .mz-fact__titel, .mnkz-page .mz-card__title { margin-bottom: var(--sp-eng); } /* --- Stufe 3 · Lead und Fließtext --------------------------------------- Gleiche Größe wie der Blocktitel, aber normal und hellgrau. Der Lead erkennt sich zusätzlich an der kurzen Zeile: Er steht allein unter dem Titel, der Fließtext im Block. ------------------------------------------------------------------------ */ .mnkz-page .mz-lead { font-size: var(--stufe-lesen); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--grey-300); max-width: 46ch; } .mnkz-page .mz-flow__text, .mnkz-page .mz-fact__text, .mnkz-page .mz-benefit__text span, .mnkz-page .mz-acc__a p, .mnkz-page .mz-hours, .mnkz-page .mz-entrance, .mnkz-page .mz-gate__text { font-size: var(--stufe-lesen); line-height: var(--lh-body); color: var(--grey-400); } /* --- Stufe 4 · Label ----------------------------------------------------- Vorher 14 px, klein geschrieben und weit gesperrt – damit fast so groß wie der Fließtext und nicht mehr als Rubrik erkennbar. Jetzt kleiner, dafür in Versalien und fett: deutlicher, obwohl leiser. ------------------------------------------------------------------------ */ .mnkz-page .mz-eyebrow { display: flex; width: fit-content; font-family: var(--font-core); font-size: var(--stufe-klein); font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-label); } .mnkz-page .mz-flow__zeit, .mnkz-page .mz-faq-gruppe__titel, .mnkz-page .mz-footer__head, .mnkz-page .mz-footer__label { font-size: var(--stufe-klein); letter-spacing: 0.16em; text-transform: uppercase; } /* --- Stufe 4 · Kleingedrucktes ------------------------------------------ Die Zeitangabe der Anmeldeschritte stand vorher grün, fett und in Versalien – sie schrie damit lauter als der Titel darunter, obwohl sie die unwichtigste Angabe der Karte ist. Jetzt ist sie da, aber leise. ------------------------------------------------------------------------ */ .mnkz-page .mz-flow__zeit { font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; color: var(--grey-500); margin-bottom: var(--sp-eng); } /* * Hinweisboxen bleiben in Lesegröße, solange sie Inhalt tragen * („Lieber persönlich?"). Nur was wirklich Kleingedrucktes ist – der * Rechtshinweis unter dem Anmeldeformular und der Fußbereich – geht auf * Stufe 4. */ /* Der Scroll-Hinweis war die letzte Stelle mit einem eigenen Pixelwert (11 px). */ .mnkz-page .mz-hero__scroll span, .mnkz-page .mz-hero__note, .mnkz-page .mz-signup__legal, .mnkz-page .mz-footer address, .mnkz-page .mz-footer__register, .mnkz-page .mz-footer__note, .mnkz-page .mz-route__hinweis { font-size: var(--stufe-klein); line-height: 1.6; } .mnkz-page .mz-hero__note, .mnkz-page .mz-footer__register, .mnkz-page .mz-footer__note { color: var(--grey-500); } /* --- Bedienelemente ------------------------------------------------------ Knöpfe und Felder sind keine Textform, sondern Bauteile: Sie unterscheiden sich über Höhe und Innenabstand, nicht über die Schriftgröße. Deshalb tragen sie alle die Lesegröße – auch der kleine Knopf im Kopfbereich, der vorher als einziges Element 13 px hatte. ------------------------------------------------------------------------ */ .mnkz-page .mz-btn, .mnkz-page .mz-btn--sm, .mnkz-page .mz-btn--lg, .mnkz-page .mz-header__actions .mz-btn--sm, .mnkz-page .mz-hero__cta .mz-btn, .mnkz-page .mz-field__control { font-size: var(--stufe-lesen); } /* --- Abstände ------------------------------------------------------------ Die wichtigste Regel: Was zusammengehört, steht enger beieinander als das, was daneben steht. Vorher waren „Titel → Text", „Karte → Karte" und „Abschnitt → Abschnitt" fast gleich groß – deshalb las sich alles als ein Block. ------------------------------------------------------------------------ */ .mnkz-page .mz-title + .mz-lead { margin-top: var(--sp-titel); } /* Im Kopfbereich steht der Knopf jetzt direkt unter der Überschrift – der Absatz dazwischen ist entfallen. Er bekommt deshalb denselben Abstand wie ein Kopfblock zu seinem Inhalt, sonst klebt er an den großen Versalien. */ .mnkz-page .mz-hero__cta { margin-top: var(--sp-kopf); } /* Der Kopfblock eines Abschnitts hält Abstand zu seinem Inhalt – und der Inhalt bringt keinen eigenen mehr mit, sonst addierte sich beides. */ .mnkz-page .mz-measure { margin-bottom: var(--sp-kopf); } .mnkz-page .mz-flow, .mnkz-page .mz-benefits, .mnkz-page .mz-facts, .mnkz-page .mz-location, .mnkz-page .mz-accordion { margin-top: 0; } .mnkz-page .mz-flow, .mnkz-page .mz-facts { gap: var(--sp-karten); } .mnkz-page .mz-flow__item, .mnkz-page .mz-card, .mnkz-page .mz-fact { padding: var(--sp-karte); } /* Auf dem Telefon war der Abstand zwischen zwei Abschnitten (48 px) kaum größer als der zwischen zwei Karten – jetzt ist er es deutlich. */ @media (max-width: 900px) { .mnkz-page .mz-section { padding-block: 56px; } }