/* * ============================================================ * EMEU ERZAEHL-SCHICHT 1.2.0 — die Worker der Geschichten * ============================================================ * * ! ! ! H A U S W E I T E W I R K U N G ! ! ! * * ------------------------------------------------------------ * WOHER DIESE SCHICHT KOMMT (Lumina-Setzung 2026-09-16) * ------------------------------------------------------------ * Lumina: "Ich kann mir solche Settings nur sehr schwer merken. Wenn ich * einfach eine aussagekraeftige Klasse haette und damit sind alle Settings * abgetan, waere mir das nicht nur lieber, ich muesste auch weniger * nachfragen." * * Darum diese neun Klassen. Jede traegt alles, was sie braucht: Groesse, * Zeilenabstand, Laufweite, Gewicht. Wer eine Flaeche baut, schreibt EINEN * Namen ins Klassenfeld und ist fertig. * * ------------------------------------------------------------ * DIE ORDNUNG: NACH ABSCHNITT, NICHT NACH SCHRIFTSTUFE * ------------------------------------------------------------ * Die Namen sind Luminas, und sie sind besser als meine ersten. Meine waren * nach Schriftstufen geordnet — die Ordnung eines Setzers. Ihre sind nach * Abschnitten geordnet — die Ordnung dessen, der die Seite baut. Wer einen * Hero anlegt, sucht "hero" und findet alles, was dazugehoert. * * Die Sprache mischt Deutsch und Englisch, und zwar bewusst. Luminas * Kriterium: "immer jene Begriffe, die direkt on point und unmissverstaendlich * beschreiben, um was es geht. Wir in der EMEU sind die einzigen, die hinter * die Kulissen blicken. Wir muessen zurecht kommen, niemand anders." * Begruendung und Vorbild-Liste: memory/feedback_benennung_on_point_...md * * ------------------------------------------------------------ * WOHER DIE WERTE KOMMEN * ------------------------------------------------------------ * Die sieben Erzaehl-Stufen sind aus Elementors Schriftsaetzen uebernommen, * unveraendert und aus der QUELLE gelesen — nicht aus gemessenen Pixeln * zurueckgerechnet. Die grossen Stufen sind mitwachsend gesetzt; eine * zurueckgerechnete Zahl waere nur bei genau der Fensterbreite richtig, an * der gemessen wurde. * * Die zwei Bild-Stufen sind NEU und wurden entschieden, nicht abgelesen: das * Blatt des Drag-Sliders setzt fuer seine beiden Textfelder ueberhaupt keine * Schrift, sie erben. Lumina: der Platz unter dem Bild gehoert dem Bild-Team, * der Text dort stuetzt das Bild oder erzaehlt eine eigene Geschichte, und * der Slider kann UEBERALL stehen — Shop, Marktplatz, Listing, Pillar-Page. * Darum zeigen genau diese zwei Klassen NICHT auf die Erzaehl-Werte, sondern * auf die Leiter des Hauses: sie tragen die Stufen, die in Shop und * Entdeckungstour ohnehin schon laufen. Damit fuegt sich der Slider ueberall * ein, weil er dort schon wohnt — und nicht, weil ein Wert zufaellig passt. * * ------------------------------------------------------------ * ZUR FORM * ------------------------------------------------------------ * important, wie bei allen Worker-Klassen des Hauses: Builder-Regeln haetten * sonst die hoehere Spezifitaet und gewinnen (dieselbe Erfahrung wie bei den * Abstands-Workern). Wer die Werte OHNE important braucht, nimmt in eigenem * Baustein-CSS die Tokens. * * Die GEWICHTE zeigen auf die Achsen in emeu-schrift.css — hier steht keine * Gewichts-Zahl. Wer das Schriftbild der Geschichten aendern will, aendert * dort eine Zeile und sieht es hier. * * Die SCHRIFTART steht hier absichtlich NICHT. Das Haus hat eine Schrift; * eine Klasse, die sie erzwingt, wuerde einen spaeteren Wechsel blockieren. * ============================================================ */ /* --- HERO — der Einstieg ---------------------------------------------- */ .font__hero__titel { font-size: clamp(2rem, calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)), 4rem) !important; line-height: 1.0225em !important; letter-spacing: -0.0225rem !important; font-weight: var(--w-story-leicht, 300) !important; } .font__hero__text { font-size: 1.0625rem !important; line-height: 1.74994rem !important; letter-spacing: -0.00255rem !important; font-weight: var(--w-story-regulaer, 400) !important; } /* --- QUOTE — Aussage und ihre Herkunft --------------------------------- */ .font__quote__aussage { font-size: clamp(1.5rem, calc(1.5rem + .375 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem) !important; line-height: clamp(1.98rem, calc(1.98rem + .495 * ((100vw - 23.4375rem) / 66.5625)), 2.475rem) !important; letter-spacing: -0.0225rem !important; font-weight: var(--w-story-betont, 600) !important; } /* Die Zeile unter dem Zitat: wer es gesagt hat. */ .font__quote__subline { font-size: 0.875rem !important; line-height: 1.1225rem !important; letter-spacing: 0.0225rem !important; font-weight: var(--w-story-regulaer, 400) !important; } /* --- IMAGE — der Platz des Bild-Teams ---------------------------------- */ /* Diese zwei zeigen auf die HAUS-Leiter, nicht auf die Erzaehl-Werte. Grund siehe Kopf: der Slider steht ueberall, also traegt er die Stufen, die ueberall schon laufen — Ueberschrift wie der Treffername der Entdeckungstour, Text wie der Fliesstext jeder Produktseite. */ .font__image__ueberschrift { font-size: var(--w-schrift-name-groesse, 16px) !important; line-height: var(--w-schrift-name-zeile, 20px) !important; font-weight: var(--w-schrift-betont, 600) !important; } .font__image__text { font-size: var(--w-schrift-text-groesse, 14px) !important; line-height: var(--w-schrift-text-zeile, 20px) !important; font-weight: var(--w-schrift-regulaer, 300) !important; } /* --- ABSATZ — das wiederkehrende Muster der Kapitel -------------------- */ /* Gemessen an der Vorlage: Ueberschrift, darunter die betonte Einleitung, darunter vier bis fuenf Absaetze. Dreimal in Folge. */ .font__absatz__ueberschrift { font-size: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem) !important; line-height: clamp(2.28rem, calc(2.28rem + 1.2 * ((100vw - 23.4375rem) / 66.5625)), 3.48rem) !important; letter-spacing: clamp(-.03em, calc(-.03em + .02 * ((90rem - 100vw) / 66.5625)), -.01em) !important; font-weight: var(--w-story-regulaer, 400) !important; } .font__absatz__einleitung { font-size: clamp(1.25rem, calc(1.25rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.375rem) !important; line-height: 1.75rem !important; letter-spacing: -0.0225rem !important; font-weight: var(--w-story-betont, 600) !important; } .font__absatz__text { font-size: 1.0625rem !important; line-height: 1.74994rem !important; letter-spacing: -0.00255rem !important; font-weight: var(--w-story-regulaer, 400) !important; } /* --- ABSCHNITT, ETIKETT, SCHLUSS-AUFRUF (1.1.0, Lumina 2026-09-19 00:4x) --- * Setzung: "Jeder Anwendungsfall eine eigene Klasse, sonst kapiert das System * niemand mehr." Anlass: die Seiten-Nachbauten nach dem OpenAI-Vorbild (About- * Seite, Amara SSLB) brauchten vier Rollen, die es noch nicht gab. Die Werte sind * die der naechsten bestehenden Stufe (Etikett wie Urheberzeile, Abschnitts-Titel * wie Zitat-Aussage, Aufruf-Ueberschrift wie Absatz-Ueberschrift, Aufruf-Satz wie * Absatz-Text) — bewusst als EIGENE Klassen, damit der Name den Anwendungsfall * traegt und sich jede Rolle spaeter getrennt stellen laesst. * --------------------------------------------------------------------- */ /* Die kleine Zeile ueber dem Hero-Titel (Etikett, Rubrik) */ .font__hero__etikett { font-size: 0.875rem !important; line-height: 1.1225rem !important; letter-spacing: 0.0225rem !important; font-weight: var(--w-story-regulaer, 400) !important; } /* Ueberschrift eines Abschnitts mit Bild (Zweispalter, Karriere, Struktur) */ .font__abschnitt__titel { font-size: clamp(1.5rem, calc(1.5rem + .375 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem) !important; line-height: clamp(1.98rem, calc(1.98rem + .495 * ((100vw - 23.4375rem) / 66.5625)), 2.475rem) !important; letter-spacing: -0.0225rem !important; font-weight: var(--w-story-betont, 600) !important; } /* Ueberschrift des Schluss-Aufrufs (CTA) — Name stand schon im Register */ .font__cta__ueberschrift { font-size: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem) !important; line-height: clamp(2.28rem, calc(2.28rem + 1.2 * ((100vw - 23.4375rem) / 66.5625)), 3.48rem) !important; letter-spacing: clamp(-.03em, calc(-.03em + .02 * ((90rem - 100vw) / 66.5625)), -.01em) !important; font-weight: var(--w-story-regulaer, 400) !important; } /* Satz unter dem Schluss-Aufruf (CTA-Subline) — Name stand schon im Register */ .font__cta__subline { font-size: 1.0625rem !important; line-height: 1.74994rem !important; letter-spacing: -0.00255rem !important; font-weight: var(--w-story-regulaer, 400) !important; } /* --- ZAHLEN-KACHEL (1.2.0, Amaras zweite Nachbau-Seite, NISO 2026-09-19 02:4x, Werte als Annahme) --- Anwendungsfall: eine grosse Kennzahl in einer Kachel plus die Zeile, was sie bedeutet. Wert: 40 bis 64 px mitwachsend, Zeile 1,0, leicht 300 (Ziffern tragen sich selbst). Was: 14 / 18 px, regulaer 400 (gleiche Werte wie das Etikett, eigener Anwendungsfall = eigene Klasse). */ .font__zahl__wert { font-size: clamp(2.5rem, calc(2.5rem + 1.5 * ((100vw - 23.4375rem) / 66.5625)), 4rem) !important; line-height: clamp(2.5rem, calc(2.5rem + 1.5 * ((100vw - 23.4375rem) / 66.5625)), 4rem) !important; letter-spacing: -0.0225rem !important; font-weight: var(--w-story-leicht, 300) !important; font-variant-numeric: tabular-nums; } .font__zahl__was { font-size: 0.875rem !important; line-height: 1.1225rem !important; letter-spacing: 0 !important; font-weight: var(--w-story-regulaer, 400) !important; }