/* ============================================================ BRAND MUT — Tokens ============================================================ Alle markenrelevanten CSS-Variablen plus die Liquid-Formel fuer die html-Basisgroesse (1920px -> 20px Base). ============================================================ */ /* ---------- Liquid-Basisgroesse ---------- */ html { font-size: calc(1vw * 20 / 19.2); } :root { /* ---------- Palette ---------- Migrationsstand: Platzhalter-Namen = Hex-Werte, frei umbenennbar. Die Rollen darunter referenzieren NUR die Palette. */ --palette-191919: #191919; --palette-ffffff: #ffffff; --palette-a5a5a5: #a5a5a5; --palette-a3a3a3: #a3a3a3; --palette-525252: #525252; --palette-d1d1d1: #d1d1d1; --palette-00ff00: #00ff00; /* ---------- Farben ---------- Pflicht-Kern: bg-black/bg-white, headline-Paar, color1. Alles Ungesetzte erbt ueber die System-Erbfolge (theme.css): subhead/emphasis/active/footer von headline, inactive/footnote von body, footnote-bg vom Hintergrund, toc-hover von active. */ --bg-black: var(--palette-191919); --bg-white: var(--palette-ffffff); /* Letterbox-Hintergrund bei gesperrtem Seitenverhaeltnis (aspect). Frei: Farbe, Verlauf oder Bild als beliebiger CSS-background. */ --letterbox-bg: var(--palette-525252); /* Text-Rollen je Theme (on-dark = schwarzer Hintergrund). Das System mappt sie auf --c- und konsumiert nur die. */ --headline-on-dark: var(--palette-ffffff); --headline-on-light: var(--palette-191919); --body-on-dark: var(--palette-a5a5a5); --body-on-light: var(--palette-a3a3a3); --inactive-on-dark: var(--palette-525252); --inactive-on-light: var(--palette-d1d1d1); --footer-on-dark: var(--palette-ffffff); --footer-on-light: var(--palette-191919); /* Linien-Rolle (optional): Content-Trennlinien (.rule, .tbl-rule). Gesetzt = eigene Farbe; nicht gesetzt = Fallback currentColor (Textfarbe). */ --line-on-dark: var(--palette-ffffff); --line-on-light: var(--palette-191919); /* Fussnote: Farbe und Hintergrund erben (body bzw. Theme-Hintergrund). */ /* Link-Rolle: Unterstreichung plus eine Akzentfarbe (Gruen) fuer beide Themes. */ --link-decoration: underline; --link: var(--palette-00ff00); /* TOC-Link-Hover: erbt active ueber die System-Erbfolge. */ --toc-hover-decoration: none; --footnote-bg-alpha: 0.75; --footnote-size: 1rem; --footnote-pad: 0.05rem 0.2rem; /* Byline (Name + Rolle), genutzt von quote und cover-letter */ --byline-name-weight: 600; --byline-role-weight: 400; --byline-name-family: var(--font-main); /* Söhne Halbfett */ --byline-role-family: var(--font-main); /* Söhne Buch */ /* Keine Headline-/Listen-Tokens: mut-Headlines und -Listen erben die Hauptschrift (Soehne Buch, regular). Bei Bedarf hier --headline-* bzw. --list-* setzen; die Hooks in theme.css sind ohne Fallback. */ /* Akzent-/Marker-Farben (eigene Slots, keine Erbfolge untereinander) */ --color1: var(--palette-00ff00); /* color2 = Grauwert der BodyCopy. Zeigt auf die Palette (keine Rollen- Kopplung mehr); Wertgleichheit mit der Body-Rolle ist Absicht der Marke, technisch aber Zufall. Theme-Schalter unten waehlen den aktiven Wert. */ --color2-on-dark: var(--palette-a5a5a5); --color2-on-light: var(--palette-a3a3a3); /* ---------- Schriften ---------- */ --body-weight: 400; /* Gewicht des Fliesstexts; Wurzel der Vererbung, deshalb Pflicht */ --font-main: "Söhne", sans-serif; --font-accent: "Mut Provoke Green", cursive; --accent-size: 1.1em; /* optischer Ausgleich Akzent-Schrift */ --font-alternate1: "Tiempos Text", serif; /* ---------- Layout ---------- */ --slide-pad-x: 2rem; /* Rand links und rechts */ --slide-pad-y: var(--slide-pad-x); /* erbt von Rand x; eigener Wert ueberschreibt */ --gutter-x: var(--slide-pad-x); /* horizontaler Strukturabstand (Spalten, Tabellen-Spalten, Halbflaechen-Naht). Default = Rand, zur Entkopplung ueberschreibbar. */ --gutter-y: var(--gutter-x); /* erbt von Steg x; eigener Wert ueberschreibt */ --bar-pad-x: 2rem; /* Polster der Chrome-Balken; ohne Wert erbte es vom Folienrand */ --bar-pad-y: 2rem; --bar-gap: 1.5rem; /* innerer Abstand im Chrome-Balken; ohne Wert erbt er vom Steg */ /* ---------- Vertikale Flow-Abstaende (Absatzformate, schriftrelativ, em) ---------- Abstand-danach je Skalenstufe; an die .t-*-Klasse gehaengt, konsumiert von .body-para:not(:last-child). Ungesetzte Stufe faellt auf --gutter-y/-x zurueck. */ /* Trennlinie (***): Abstand davor und danach als Marken-Faktoren (* 1lh). */ /* Hauptlinie (Basis, Fallback fuer ALLE Typen): davor 1lh, danach 0.25lh. Nur die isolierte Trennlinie weicht ab: danach 1lh. */ --line-space-before: 0.8; --line-space-after: 0.2; --line-separator-after: 1; --linegap-factor: 1; /* Multiplikator auf --space-after (1 = Durchschuss = ein Absatzabstand) */ --line-width: 0.15rem; /* Strichstaerke der Trennlinien (Header + Content) */ /* ---------- Breadcrumb-Abschnitte ---------- */ /* Breadcrumb-Groesse = eine Skalenstufe. --bc-fs/--bc-lh zeigen auf das gewuenschte --fs-N/--lh-N-Paar; Krumengroesse und Abschnittsabstand folgen daraus automatisch. Realer Zeilenabstand der Stufe = fs * lh. Fuer 2x: beide Zeilen auf --fs-2 / --lh-2 setzen, sonst nichts. */ --bc-fs: var(--fs-1); --bc-lh: 1.1; --bc-section-line: calc(var(--bc-fs) * var(--bc-lh)); /* realer Zeilenabstand der Stufe: Header-Reservierung und Zeilenhoehe der Abschnitts-Krume */ --bc-sections: 0; /* Startwert; das System setzt die Abschnittszahl des aktiven Kapitels je Folie */ /* ---------- Listen-Bullets ({list} + {bulletN}, identisch je Marke) ---------- */ --bullet1: "\2022"; /* Default-Bullet (Punkt) */ --bullet2: "\2192"; /* Pfeil */ --bullet3: "+"; --bullet4: "-"; --bullet-gap: 1em; /* Marker-Einzug (haengend) fuer Listen und toc: Mutter; Varianten .bullet-N/.number-N ueberschreiben */ /* Nummern-Schemata ({numberN}): Zaehler-Ausdruck, Zaehler-Name 'li' liefert das System. Stil/Format hier in der Marke, kein Default. */ --number1: counters(li, ".", decimal) ". "; --number2: counters(li, ".", decimal) ") "; --number3: counters(li, ".", lower-alpha) ") "; /* Eintragsabstand ALLER Listen (auch toc): Mutter, PFLICHT. Faktor auf den Absatzabstand der Stufe (1 = ein Absatzabstand). Die Stil-Varianten .list-N ueberschreiben ihn. */ --list-gap-factor: 1; /* ---------- Quote-Hang (schriftabhaengig, auf Tiempos Text Italic abgestimmt) ---------- Das oeffnende „ soll buendig auf der slide-pad-Linie sitzen, der Fliesstext rueckt um --quote-hang ein. --quote-advance ist der Chrome/Firefox-Fallback (negativer Erstzeilen-Einzug). Startwerte, im Player nachjustieren. */ --quote-hang: 0.5em; --quote-advance: 0.5em; /* ---------- Quote-Rollen (Schrift/Schnitt) ---------- */ --quote-text-family: var(--font-alternate1); /* Tiempos Text Italic */ --quote-text-weight: 400; --quote-text-style: italic; } /* color2 themeabhaengig: wie die Farb-Rollen waehlt die Theme-Klasse am Slide-Container den aktiven Grauwert. Nur hier (markeneigen), das System themt --colorN nicht. */ .theme-dark { --color2: var(--color2-on-dark); } .theme-light { --color2: var(--color2-on-light); } /* ---------- Listen-Stil-Varianten ({listN}, markeneigen) ---------- Eintragsabstand je Variante ueber --list-gap-factor (Faktor auf den Absatzabstand; ueberschreibt die Mutter, wird NICHT mit ihr verrechnet). list1 = abstandslos, list2 = halber {linegap} dieser Marke, list3 = voller {linegap}. Frei erweiterbar (.list-N; greift auf body-list UND toc). */ .list-1 { --list-gap-factor: 0; } .list-3 { --list-gap-factor: 2; } /* ---------- Schrift-Skala (markeneigen, generiert) ---------- Faktor = Klassenname mit _ statt Punkt. Vererbung je Eigenschaft von 1x aus: _eff = eigener Wert, sonst naechstkleinere gesetzte Stufe, Wurzel 1x. */ :root{ /* 0.75x */ --fs-0_75: 0.75rem; --ls-0_75: 0.02; /* 1x */ --fs-1: 1rem; --lh-1: 1.4; --ls-1: 0.01; --space-after-1: 0.4; /* 1.25x */ --fs-1_25: 1.25rem; --lh-1_25: 1.3; --ls-1_25: 0.005; /* 1.5x */ --fs-1_5: 1.5rem; --lh-1_5: 1.2; --ls-1_5: 0.0; /* 2x */ --fs-2: 2rem; --lh-2: 1; --ls-2: -0.01; /* 3x */ --fs-3: 3rem; --ls-3: -0.02; /* 4x */ --fs-4: 4rem; --ls-4: -0.04; /* 6x */ --fs-6: 6rem; --lh-6: 0.9; /* 8x */ --fs-8: 8rem; --ls-8: -0.045; /* 12x */ --fs-12: 12rem; --ls-12: -0.05; /* 16x */ --fs-16: 16rem; --lh-0_75_eff: var(--lh-0_75, var(--lh-1_eff)); --ls-0_75_eff: var(--ls-0_75, var(--ls-1_eff)); --space-after-0_75_eff: var(--space-after-0_75, var(--space-after-1_eff)); --lh-1_eff: var(--lh-1); --ls-1_eff: var(--ls-1); --space-after-1_eff: var(--space-after-1); --lh-1_25_eff: var(--lh-1_25, var(--lh-1_eff)); --ls-1_25_eff: var(--ls-1_25, var(--ls-1_eff)); --space-after-1_25_eff: var(--space-after-1_25, var(--space-after-1_eff)); --lh-1_5_eff: var(--lh-1_5, var(--lh-1_25_eff)); --ls-1_5_eff: var(--ls-1_5, var(--ls-1_25_eff)); --space-after-1_5_eff: var(--space-after-1_5, var(--space-after-1_25_eff)); --lh-2_eff: var(--lh-2, var(--lh-1_5_eff)); --ls-2_eff: var(--ls-2, var(--ls-1_5_eff)); --space-after-2_eff: var(--space-after-2, var(--space-after-1_5_eff)); --lh-3_eff: var(--lh-3, var(--lh-2_eff)); --ls-3_eff: var(--ls-3, var(--ls-2_eff)); --space-after-3_eff: var(--space-after-3, var(--space-after-2_eff)); --lh-4_eff: var(--lh-4, var(--lh-3_eff)); --ls-4_eff: var(--ls-4, var(--ls-3_eff)); --space-after-4_eff: var(--space-after-4, var(--space-after-3_eff)); --lh-6_eff: var(--lh-6, var(--lh-4_eff)); --ls-6_eff: var(--ls-6, var(--ls-4_eff)); --space-after-6_eff: var(--space-after-6, var(--space-after-4_eff)); --lh-8_eff: var(--lh-8, var(--lh-6_eff)); --ls-8_eff: var(--ls-8, var(--ls-6_eff)); --space-after-8_eff: var(--space-after-8, var(--space-after-6_eff)); --lh-12_eff: var(--lh-12, var(--lh-8_eff)); --ls-12_eff: var(--ls-12, var(--ls-8_eff)); --space-after-12_eff: var(--space-after-12, var(--space-after-8_eff)); --lh-16_eff: var(--lh-16, var(--lh-12_eff)); --ls-16_eff: var(--ls-16, var(--ls-12_eff)); --space-after-16_eff: var(--space-after-16, var(--space-after-12_eff)); } .t-0_75 { font-size: var(--fs-0_75); line-height: var(--lh-0_75_eff); letter-spacing: calc(var(--ls-0_75_eff) * 1ch); --space-after: var(--space-after-0_75_eff, 0); } .t-1 { font-size: var(--fs-1); line-height: var(--lh-1_eff); letter-spacing: calc(var(--ls-1_eff) * 1ch); --space-after: var(--space-after-1_eff, 0); } .t-1_25 { font-size: var(--fs-1_25); line-height: var(--lh-1_25_eff); letter-spacing: calc(var(--ls-1_25_eff) * 1ch); --space-after: var(--space-after-1_25_eff, 0); } .t-1_5 { font-size: var(--fs-1_5); line-height: var(--lh-1_5_eff); letter-spacing: calc(var(--ls-1_5_eff) * 1ch); --space-after: var(--space-after-1_5_eff, 0); } .t-2 { font-size: var(--fs-2); line-height: var(--lh-2_eff); letter-spacing: calc(var(--ls-2_eff) * 1ch); --space-after: var(--space-after-2_eff, 0); } .t-3 { font-size: var(--fs-3); line-height: var(--lh-3_eff); letter-spacing: calc(var(--ls-3_eff) * 1ch); --space-after: var(--space-after-3_eff, 0); } .t-4 { font-size: var(--fs-4); line-height: var(--lh-4_eff); letter-spacing: calc(var(--ls-4_eff) * 1ch); --space-after: var(--space-after-4_eff, 0); } .t-6 { font-size: var(--fs-6); line-height: var(--lh-6_eff); letter-spacing: calc(var(--ls-6_eff) * 1ch); --space-after: var(--space-after-6_eff, 0); } .t-8 { font-size: var(--fs-8); line-height: var(--lh-8_eff); letter-spacing: calc(var(--ls-8_eff) * 1ch); --space-after: var(--space-after-8_eff, 0); } .t-12 { font-size: var(--fs-12); line-height: var(--lh-12_eff); letter-spacing: calc(var(--ls-12_eff) * 1ch); --space-after: var(--space-after-12_eff, 0); } .t-16 { font-size: var(--fs-16); line-height: var(--lh-16_eff); letter-spacing: calc(var(--ls-16_eff) * 1ch); --space-after: var(--space-after-16_eff, 0); }