/** * KuLaDu Typography System * * Single Source of Truth für alle Typografie auf der Website. * Basierend auf Typescale.com mit responsiven Font-Sizes. * * WICHTIG: Alle Typografie-Styles NUR in dieser Datei! * Komponenten und Templates nutzen nur Utility-Classes. * * Base: 100% (16px) Mobile → 112.5% (18px) Desktop @768px * Scale: 1.125 (Major Second) * Fonts: Merriweather Regular 400 (Body), Gill Sans Nova (Headlines/UI), Source Code Pro (Mono) * * @package Bricks Child Theme * @since 2.0.0 */ /* ============================================================================== HTML BASE FONT-SIZE (Typescale Root) ============================================================================== */ /* * Mobile: 100% = 16px base (Standard) * Desktop: 112.5% = 18px base (größere Lesbarkeit auf großen Bildschirmen) */ html { font-size: 100% !important; /* 16px base (Mobile) */ } @media screen and (min-width: 768px) { html { font-size: 100% !important; /* 16px base (Desktop) */ } } /* ============================================================================== TYPOGRAPHY RESET ============================================================================== */ /* * Browser-Defaults neutralisieren für konsistentes Rendering */ h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, table, fieldset, legend { margin: 0; padding: 0; } /* Lists ohne default list-style */ ul, ol { list-style: none; } /* ============================================================================== BODY BASE STYLES ============================================================================== */ body { font-family: var(--font-body); /* Merriweather */ font-weight: var(--font-weight-body); /* Regular 400 */ font-size: var(--text-size-100); /* 1rem = 18px mobile, 16px desktop */ line-height: var(--line-height-body); /* 1.6 */ color: var(--color-gray-900); /* Dunkelgrau für Body-Text (bessere Lesbarkeit) */ background: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================================== HEADLINES (h1-h6) ============================================================================== */ /* * Gill Sans Nova Ultra (Black 900) * Line-height: 1.25 * Letter-spacing: -0.022em * Margins: 2.25rem top, 1rem bottom */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-ui); /* Gill Sans Nova */ font-weight: var(--font-weight-heading); /* Ultra/Black 900 */ line-height: var(--line-height-heading); /* 1.25 */ letter-spacing: var(--letter-spacing-heading); /* -0.022em */ color: var(--color-black); margin-top: var(--typo-heading-margin-top); /* 2.25rem */ margin-bottom: var(--typo-heading-margin-bottom); /* 1rem */ } /* Erstes Element: Kein margin-top */ h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, .h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child/*, h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type, .h1:first-of-type, .h2:first-of-type, .h3:first-of-type, .h4:first-of-type, .h5:first-of-type, .h6:first-of-type*/ { margin-top: 0; } /* Headline Sizes */ h1, .h1 { font-size: var(--text-size-600); } /* ~36px mobile, ~48px desktop */ h2, .h2 { font-size: var(--text-size-400); } /* ~32px mobile, ~40px desktop */ h3, .h3 { font-size: var(--text-size-300); } /* ~29px mobile, ~33px desktop */ h4, .h4 { font-size: var(--text-size-200); } /* ~26px mobile, ~28px desktop */ h5, .h5 { font-size: var(--text-size-100); } /* ~23px mobile, ~23px desktop */ h6, .h6 { font-size: var(--text-size-90); } /* ~20px mobile, ~19px desktop */ /* ============================================================================== HEADLINE OVERFLOW PROTECTION & HYPHENATION ============================================================================== */ /* * Automatische Silbentrennung für lange deutsche Wörter * Nur auf Mobile (< 768px), ab Tablet deaktiviert */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { /* Silbentrennung (benötigt lang="de" im HTML) */ hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; /* Feinere Silbentrennung: Min 6 Zeichen, 3 vor/nach Bindestrich */ hyphenate-limit-chars: 6 3 3; /* Overflow-Schutz als Fallback */ overflow-wrap: break-word; word-wrap: break-word; } /* Ab Tablet: Silbentrennung deaktivieren (genug Platz) */ @media (min-width: 768px) { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; } } /* Text Balance/Pretty für große Headlines */ h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; /* Fallback für ältere Browser */ text-wrap: pretty; /* Überschreibt in neueren Browsern */ } /* ============================================================================== PARAGRAPHS & BODY TEXT ============================================================================== */ p { font-family: var(--font-body); /* Merriweather */ font-weight: var(--font-weight-body); /* Regular 400 */ font-size: var(--text-size-100); /* 1rem */ line-height: var(--line-height-body); /* 1.6 */ color: var(--color-gray-900); /* Dunkelgrau (erbt von body) */ margin-top: var(--typo-paragraph-margin-top); /* 1rem */ margin-bottom: var(--typo-paragraph-margin-bottom); /* 1rem */ } /* Erstes Element: Kein margin-top */ p:first-child { margin-top: 0; } /* Letztes Element: Kein margin-bottom */ p:last-child { margin-bottom: 0; } /* ============================================================================== LEAD PARAGRAPH (Intro Text) ============================================================================== */ /* * Größerer Intro-Text am Anfang von Artikeln * Merriweather Regular, größere Font-Size wie H5 */ .lead, p.lead { font-family: var(--font-body); /* Merriweather */ font-weight: var(--font-weight-body); /* Regular 400 */ font-size: var(--text-size-300); /* ~23px (wie H5) */ line-height: var(--line-height-body); /* 1.6 (wie Body) */ color: var(--color-gray-900); /* Dunkelgrau wie Body-Text */ } /* ============================================================================== SMALL TEXT ============================================================================== */ small, .small { font-size: var(--text-size-90); /* ~16px mobile, ~13px desktop */ line-height: var(--line-height-body); /* 1.6 */ } /* ============================================================================== DETAILS / META TEXT (Monospace) ============================================================================== */ /* * Für Datum, Uhrzeit, technische Details, Metadaten * Alle Varianten nutzen Source Code Pro (Monospace) * Zwei Größen: Klein (90) und Normal/Base (100) */ /* Standard Details/Meta - Klein */ .details, .details-mono, .meta { font-family: var(--font-mono); /* Source Code Pro */ font-weight: var(--font-weight-normal); /* Regular 400 */ font-size: var(--text-size-90); /* ~16px mobile, ~13px desktop */ line-height: var(--line-height-body); /* 1.6 */ color: var(--color-gray-900); /* Dunkelgrau wie Body-Text */ } /* Details/Meta in Body-Größe */ .details-base, .meta-base { font-family: var(--font-mono); /* Source Code Pro */ font-weight: var(--font-weight-normal); /* Regular 400 */ font-size: var(--text-size-100); /* ~18px mobile, ~16px desktop */ line-height: var(--line-height-body); /* 1.6 */ color: var(--color-gray-900); /* Dunkelgrau wie Body-Text */ } /* Adresse
*/ address{ font-style: normal; } /* ============================================================================== KICKER (Text über Headlines) ============================================================================== */ /* * Kleiner, fetter Text über Hauptüberschriften * Gill Sans Nova Bold, etwas größer als Fließtext */ .kicker { font-family: var(--font-ui); /* Gill Sans Nova */ font-weight: var(--font-weight-bold); /* Bold 700 */ font-size: var(--text-size-200); /* ~20px mobile, ~19px desktop */ line-height: var(--line-height-tight); /* 1.25 */ letter-spacing: var(--letter-spacing-wide); /* 0.025em */ color: var(--color-black); display: block; margin-bottom: 0.375rem; /* 6px - enger Abstand zur Headline */ } /* ============================================================================== LINKS ============================================================================== */ a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.2s ease, text-decoration-color 0.2s ease, text-decoration-thickness 0.2s ease; } a:hover { color: var(--text-link-hover); text-decoration-color: var(--text-link-hover); text-decoration-thickness: 2px; /* Dicker bei Hover für bessere Sichtbarkeit */ } /* Focus nur bei Keyboard-Navigation (nicht bei Maus-Klick) */ a:focus { outline: none; /* Entferne Browser-Standard */ box-shadow: none; } a:focus-visible { outline: 2px solid #3333ff; outline-offset: 2px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #3333ff; border-radius: 2px; } /* Links in Headlines: Keine Unterstreichung */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.2s ease, text-decoration-color 0.2s ease, text-decoration-thickness 0.2s ease; color: inherit; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--text-link-hover); text-decoration-color: var(--text-link-hover); text-decoration-thickness: 2px; /* Dicker bei Hover für bessere Sichtbarkeit */ } /* Links in Buttons: Keine Link-Styles */ a.kuladu-button, a[class*="button"] { color: var(--color-black) !important; text-decoration: none !important; } /* ============================================================================== GLOBAL FOCUS STYLES (WCAG 2.2 compliant) Doppel-Outline: #3333ff + Weiß für Sichtbarkeit auf allen Hintergründen ============================================================================== */ /* Buttons, interaktive Elemente: Focus nur bei Keyboard-Navigation */ button:focus, [role="button"]:focus, [type="button"]:focus, [type="submit"]:focus, [type="reset"]:focus, .kuladu-button:focus, summary:focus { outline: none; /* Entferne Standard-Focus bei Maus-Klick */ box-shadow: none; } button:focus-visible, [role="button"]:focus-visible, [type="button"]:focus-visible, [type="submit"]:focus-visible, [type="reset"]:focus-visible, .kuladu-button:focus-visible, summary:focus-visible { outline: 2px solid #3333ff; outline-offset: 2px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #3333ff; border-radius: 2px; } /* Formular-Felder: Transitions */ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable="true"] { transition: outline 0.2s ease, box-shadow 0.2s ease; } /* Focus: Entferne Browser-Standard */ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus, [contenteditable="true"]:focus { outline: none !important; box-shadow: none !important; } /* Focus-visible: Nur bei Keyboard-Navigation */ input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable="true"]:focus-visible { outline: 2px solid #3333ff !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #3333ff !important; } /* Checkbox & Radio: Focus bei Keyboard-Navigation */ input[type="checkbox"]:focus, input[type="radio"]:focus { outline: none; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid #3333ff; outline-offset: 2px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #3333ff; } /* Switch (role="switch"): Focus States */ /* Pattern: input[role="switch"] + label > .switch-visual-element */ /* Focus: Entferne Browser-Standard */ input[role="switch"]:focus + label > *:last-child, input[role="switch"]:focus + label::after { outline: none !important; box-shadow: none !important; } /* Focus-visible: Nur bei Keyboard-Navigation */ input[role="switch"]:focus-visible + label > *:last-child, input[role="switch"]:focus-visible + label::after { outline: 2px solid #3333ff !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #3333ff !important; } /* Links in Cards: Keine Link Styles*/ .card > div:has(img){ padding-right: var(--space-2); padding-bottom: var(--space-2); } .card img{ box-shadow: var(--shadow-hard-lg);; transition: all .3s ease; border: 2px solid var(--color-black); } .card:hover img{ box-shadow: var(--shadow-hard-xl);; } .card, .card a{ text-decoration: none; color: var(--color-black); } .card:hover, .card:hover a, .card a:hover{ text-decoration: none; color: var(--color-black); } /* ============================================================================== LISTS (ul, ol) ============================================================================== */ .brxe-text{ ul, ol { font-family: var(--font-body); /* Merriweather */ font-size: var(--text-size-100); /* 1rem */ line-height: var(--line-height-body); /* 1.6 */ color: var(--color-gray-900); /* Dunkelgrau wie Body-Text */ margin-top: var(--typo-list-margin-top); /* 1rem */ margin-bottom: var(--typo-list-margin-bottom); /* 1rem */ padding-left: var(--space-6); /* 24px Einrückung */ } /* Erstes/Letztes Element */ ul:first-child, ol:first-child { margin-top: 0; } ul:last-child, ol:last-child { margin-bottom: 0; } /* List Items */ li { margin-bottom: var(--space-2); /* 8px Abstand zwischen Items */ } #brxe-wgaoyu .bricks-nav-menu > li{ margin-bottom: 0; } li:last-child { margin-bottom: 0; } /* Nested Lists */ ul ul, ul ol, ol ul, ol ol { margin-top: var(--space-2); margin-bottom: var(--space-2); } /* Unordered Lists: Disc Marker */ ul { list-style-type: disc; } ul ul { list-style-type: circle; } /* Ordered Lists: Decimal */ ol { list-style-type: decimal; } } /* ============================================================================== BLOCKQUOTES ============================================================================== */ blockquote { font-family: var(--font-body); font-size: var(--text-size-200); /* Etwas größer */ line-height: var(--line-height-body); color: var(--color-gray-900); /* Dunkelgrau wie Body-Text */ font-style: normal; margin: var(--space-8) 0; padding-left: var(--space-6); padding-right: var(--space-4); border-left: 4px solid var(--color-black); } .bricks-type-hero blockquote p{ color: var(--color-black); } blockquote p { margin-top: 0; } blockquote p:last-child { margin-bottom: 0; } .bricks-type-hero > blockquote p{ font-size: var(--text-size-300); font-family: var(--font-heading); font-weight: var(--font-weight-black); } .bricks-color-primary > blockquote{ border-color: var(--color-primary-500); } .bricks-color-secondary > blockquote{ border-color: var(--color-secondary-500); } .bricks-color-light > blockquote{ border-color: var(--color-gray-300); } .bricks-color-dark > blockquote{ border-color: var(--color-gray-500); } .bricks-color-muted > blockquote{ border-color: var(--color-tertiary-500); } .bricks-color-info > blockquote, .bricks-color-success > blockquote, .bricks-color-warning > blockquote, .bricks-color-danger > blockquote{ padding-top: var(--space-4); padding-bottom: var(--space-4); } .bricks-color-info > blockquote{ border-color: var(--color-info-500); background-color: var(--color-info-100); } .bricks-color-info > blockquote *{ color: var(--color-info-950); } .bricks-color-success > blockquote{ border-color: var(--color-success-500); background-color: var(--color-success-100); } .bricks-color-success > blockquote *{ color: var(--color-success-950); } .bricks-color-warning > blockquote{ border-color: var(--color-warning-500); background-color: var(--color-warning-100); } .bricks-color-warning > blockquote *{ color: var(--color-warning-950); } .bricks-color-danger > blockquote{ border-color: var(--color-error-500); background-color: var(--color-error-100); } .bricks-color-danger > blockquote *{ color: var(--color-error-950); } /* ============================================================================== CODE & PREFORMATTED TEXT ============================================================================== */ code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; padding: 0.125em 0.375em; background: var(--color-gray-100); border-radius: var(--radius-sm); color: var(--color-gray-900); } pre { font-family: var(--font-mono); font-size: var(--text-size-90); line-height: 1.5; background: var(--color-gray-100); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-6) 0; overflow-x: auto; } pre code { background: none; padding: 0; border-radius: 0; } /* ============================================================================== BUTTONS (Typography only - Layout in elements.css) ============================================================================== */ /* * Gill Sans Nova Bold * Line-height: 1 * Letter-spacing: 0 */ .kuladu-button, button[class*="button"], a[class*="button"] { font-family: var(--font-ui); /* Gill Sans Nova */ font-weight: var(--font-weight-button); /* Bold 700 */ line-height: var(--line-height-button); /* 1 */ letter-spacing: var(--letter-spacing-button); /* 0 */ } /* ============================================================================== BADGES (Typography only - Layout in components/event-badge.css) ============================================================================== */ /* * Gill Sans Nova SemiBold */ .event-badge, [class*="badge"] { font-family: var(--font-ui); /* Gill Sans Nova */ font-weight: var(--font-weight-badge); /* SemiBold 600 */ line-height: var(--line-height-none); /* 1 */ } /* ============================================================================== BRICKS BUILDER ELEMENTS ============================================================================== */ /* * Bricks-generierte Elemente folgen den gleichen Typografie-Regeln */ /* Bricks Headings */ .brxe-heading h1, .brxe-heading h2, .brxe-heading h3, .brxe-heading h4, .brxe-heading h5, .brxe-heading h6 { /* Erben alle Styles von nativen h1-h6 */ } /* Bricks Text */ .brxe-text p, .brxe-text-basic p { /* Erben alle Styles von nativem p */ } /* Bricks Lists */ .brxe-list ul, .brxe-list ol { /* Erben alle Styles von nativen ul/ol */ } /* ============================================================================== ACCESSIBILITY - SCREEN READER ONLY ============================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================================================== NAVIGATION (Header Menu) ============================================================================== */ /* * Navigation immer in Gill Sans Bold, keine Bullets */ nav ul, nav ol, header nav ul, header nav ol, .brx-nav-menu ul, .brx-nav-menu ol { list-style: none !important; margin: 0; padding: 0; } nav a, header nav a, .brx-nav-menu a { font-family: var(--font-ui); /* Gill Sans Nova */ font-weight: var(--font-weight-bold); /* Bold 700 */ text-decoration: none; } /* ============================================================================== UTILITY CLASSES - Text Sizes ============================================================================== */ /* * Direkte Zugriff auf Typescale-Größen * Nutzen wenn kein semantisches Element passt */ .text-xs { font-size: var(--text-size-80); } /* ~14px mobile, ~11px desktop */ .text-sm { font-size: var(--text-size-90); } /* ~16px mobile, ~13px desktop */ .text-base { font-size: var(--text-size-100); } /* ~18px mobile, ~16px desktop */ .text-lg { font-size: var(--text-size-200); } /* ~20px mobile, ~19px desktop */ .text-xl { font-size: var(--text-size-300); } /* ~23px mobile, ~23px desktop */ .text-2xl { font-size: var(--text-size-400); } /* ~26px mobile, ~28px desktop */ .text-3xl { font-size: var(--text-size-500); } /* ~29px mobile, ~33px desktop */ .text-4xl { font-size: var(--text-size-600); } /* ~32px mobile, ~40px desktop */ .text-5xl { font-size: var(--text-size-700); } /* ~36px mobile, ~48px desktop */ /* ============================================================================== UTILITY CLASSES - Font Weights ============================================================================== */ .font-normal { font-weight: var(--font-weight-normal); } /* 400 */ .font-semibold { font-weight: var(--font-weight-semibold); } /* 600 */ .font-bold { font-weight: var(--font-weight-bold); } /* 700 */ .font-black { font-weight: var(--font-weight-black); } /* 900 */ /* ============================================================================== UTILITY CLASSES - Font Families ============================================================================== */ .font-serif { font-family: var(--font-body); } /* Merriweather */ .font-sans { font-family: var(--font-ui); } /* Gill Sans Nova */ .font-mono { font-family: var(--font-mono); } /* Source Code Pro */ /* ============================================================================== UTILITY CLASSES - Line Heights ============================================================================== */ .leading-none { line-height: var(--line-height-none); } /* 1 */ .leading-tight { line-height: var(--line-height-tight); } /* 1.25 */ .leading-normal { line-height: var(--line-height-normal); } /* 1.5 */ .leading-relaxed { line-height: var(--line-height-relaxed); } /* 1.6 */ .leading-loose { line-height: var(--line-height-loose); } /* 1.75 */ /* ============================================================================== UTILITY CLASSES - Letter Spacing ============================================================================== */ .tracking-tight { letter-spacing: var(--letter-spacing-tight); } /* -0.022em */ .tracking-normal { letter-spacing: var(--letter-spacing-normal); } /* 0 */ .tracking-wide { letter-spacing: var(--letter-spacing-wide); } /* 0.025em */ /* ============================================================================== UTILITY CLASSES - Text Alignment ============================================================================== */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } /* ============================================================================== UTILITY CLASSES - Text Transform ============================================================================== */ .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } /* ============================================================================== UTILITY CLASSES - Typography Spacing (Margins) ============================================================================== */ /* Margin Top */ .typo-mt-0 { margin-top: 0; } .typo-mt-sm { margin-top: var(--typo-paragraph-margin-top); } /* 1rem */ .typo-mt-md { margin-top: var(--typo-heading-margin-top); } /* 2.25rem */ /* Margin Bottom */ .typo-mb-0 { margin-bottom: 0; } .typo-mb-sm { margin-bottom: var(--typo-paragraph-margin-bottom); } /* 1rem */ .typo-mb-md { margin-bottom: var(--typo-heading-margin-bottom); } /* 1rem */ /* Lightbox */ .pswp__counter{ font-family: var(--font-mono); }