/* ============================================================ Wishalize Child · Design System — Wishalize ------------------------------------------------------------ Universelle Komponenten + Utilities. Referenziert ausschliesslich Tokens aus design-tokens.css. KEINE Hex-Werte, KEINE Hardcodes. Inhalt: 1. Reveal-Utilities (data-Attribute-API) [Base] 2. Marquee (.wsh-marquee) [Base] 3. Kästli (.wsh-kaestli / .wsh-k) [Base] 4. Lese-Utilities (.wsh-measure/-narrow/-prose) [Base] 5. FAQ-Akkordeon (.wsh-faq) [Projekt] Abschnitte mit [Base] stammen aus wishalize-base 0.6.2 und werden hier nicht editiert (CONVENTIONS.md §2). Änderungen gehen in die Base und werden neu heruntergezogen. ============================================================ */ /* ============================================================ 1. REVEAL-UTILITIES ------------------------------------------------------------ Verwendung im Markup:
…
…
Trigger: wsh-animations.js (IntersectionObserver). Respektiert prefers-reduced-motion automatisch. ============================================================ */ [data-wsh-reveal] { opacity: 0; transition: opacity var(--wsh-duration-slower) var(--wsh-ease-smooth), transform var(--wsh-duration-slower) var(--wsh-ease-smooth); will-change: opacity, transform; } [data-wsh-reveal="fade-up"] { transform: translateY(24px); } [data-wsh-reveal="fade-down"] { transform: translateY(-24px); } [data-wsh-reveal="fade-left"] { transform: translateX(24px); } [data-wsh-reveal="fade-right"] { transform: translateX(-24px); } [data-wsh-reveal="scale"] { transform: scale(0.96); } [data-wsh-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-wsh-reveal] { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------ Text-Balance-Utility (verhindert Wörter-Waisen bei Umbruch) Anwendung: CSS-Klasse .wsh-balance auf Heading-Widget legen. Wird von modernen Browsern automatisch rebalanced — ältere fallen auf normalen Umbruch zurück (kein Nachteil). ------------------------------------------------------------ */ .wsh-balance { text-wrap: balance; -webkit-text-wrap: balance; } .wsh-heading-balance { text-wrap: balance; } /* ------------------------------------------------------------ Silbentrennungs-Utility (verhindert Wort-Überlauf bei langen Wörtern) Anwendung: CSS-Klasse .wsh-hyphens auf Container mit langen Wörtern. Trennt automatisch mit Bindestrich, wenn Wort zu breit für Container. Voraussetzung: ist gesetzt (macht WordPress). ------------------------------------------------------------ */ .wsh-hyphens { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; } /* ============================================================ 2. MARQUEE — Laufband ------------------------------------------------------------ Markup-Beispiel:
Begriff A Begriff B …
Hintergrund/Schrift via Tokens steuerbar: --wsh-marquee-bg, --wsh-marquee-item-color, --wsh-marquee-speed ============================================================ */ .wsh-marquee { background: var(--wsh-marquee-bg); overflow: hidden; padding: var(--wsh-space-6) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .wsh-marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: wsh-marquee-scroll var(--wsh-marquee-speed) linear infinite; } .wsh-marquee:hover .wsh-marquee__track, .wsh-marquee.is-paused .wsh-marquee__track { animation-play-state: paused; } .wsh-marquee__item { display: inline-flex; align-items: center; gap: 28px; padding: 0 28px; font-family: var(--wsh-font-primary-family); font-size: var(--wsh-marquee-item-size); font-weight: 600; color: var(--wsh-marquee-item-color); letter-spacing: -0.01em; } .wsh-marquee__dot { width: 7px; height: 7px; border-radius: var(--wsh-radius-pill); background: var(--wsh-complement); display: inline-block; } @keyframes wsh-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .wsh-marquee__track { animation: none; } } /* ============================================================ 3. KÄSTLI — Hover-Karten-Grid ------------------------------------------------------------ Markup-Beispiel:
01

Titel

Sub-Zeile

…
Farbvarianten (Modifier): --primary, --secondary Weitere Varianten per Modifier in DIESEM File ergänzen. Responsives Grid: 4 → 2 → 1. ============================================================ */ .wsh-kaestli { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wsh-space-5); font-family: var(--wsh-font-text-family); } @media (max-width: 1024px) { .wsh-kaestli { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .wsh-kaestli { grid-template-columns: 1fr; } } .wsh-k { position: relative; overflow: hidden; background: var(--wsh-k-bg, var(--wsh-primary)); color: var(--wsh-white); border-radius: var(--wsh-radius-lg); padding: var(--wsh-space-6); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--wsh-shadow-sm); transition: transform var(--wsh-duration-base) var(--wsh-ease-out), box-shadow var(--wsh-duration-base) var(--wsh-ease-out); } .wsh-k:hover { transform: translateY(-6px); box-shadow: var(--wsh-shadow-hover); } .wsh-k--primary { --wsh-k-bg: var(--wsh-primary); --wsh-k-num: var(--wsh-accent); } .wsh-k--secondary { --wsh-k-bg: var(--wsh-secondary); --wsh-k-num: rgba(255,255,255,.7); } .wsh-k__circle { position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: var(--wsh-radius-pill); background: rgba(255, 255, 255, 0.07); transition: transform var(--wsh-duration-slow) var(--wsh-ease-out); } .wsh-k:hover .wsh-k__circle { transform: scale(1.5); } .wsh-k__num { position: relative; font-family: var(--wsh-font-mono-family); font-size: 13px; color: var(--wsh-k-num, rgba(255, 255, 255, 0.7)); } .wsh-k__body { position: relative; } .wsh-k__line { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } .wsh-k__sub { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); } /* ============================================================ LIGHTBOX — Klickbares Bild → Modal-Gallery (übertragen aus R&C) ------------------------------------------------------------ Trigger: Element mit .wsh-lightbox + href/data-src. Grouping: data-lightbox-group="…" für Prev/Next in Gruppe. Versteckte Zusatz-Bilder: data-lightbox-hidden. JS: initLightbox() in wsh-animations.js (Modul ebenfalls übertragen). ============================================================ */ .wsh-lightbox { cursor: zoom-in; } .wsh-lightbox img { transition: opacity var(--wsh-duration-base, 0.25s) ease-out; } .wsh-lightbox:hover img { opacity: 0.85; } .wsh-lightbox[data-lightbox-hidden] { display: none !important; } .wsh-lightbox-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: var(--wsh-lightbox-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease-out, visibility 0s linear 0.25s; } .wsh-lightbox-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .wsh-lightbox-modal__stage { position: relative; max-width: var(--wsh-lightbox-max-width); max-height: var(--wsh-lightbox-max-height); display: flex; flex-direction: column; align-items: center; gap: 12px; } .wsh-lightbox-modal__img { max-width: 100%; max-height: calc(var(--wsh-lightbox-max-height) - 60px); object-fit: contain; border-radius: var(--wsh-lightbox-radius); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6); transition: opacity 0.25s ease-out; } .wsh-lightbox-modal.is-loading .wsh-lightbox-modal__img { opacity: 0.4; } .wsh-lightbox-modal__caption { color: var(--wsh-lightbox-caption-color); font-size: 14px; line-height: 1.5; text-align: center; max-width: 640px; } .wsh-lightbox-modal__counter { position: absolute; top: -34px; left: 0; color: var(--wsh-lightbox-counter-color); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.08em; } .wsh-lightbox-modal__btn { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 999px; border: none; background: var(--wsh-lightbox-btn-bg); color: var(--wsh-lightbox-btn-color); cursor: pointer; display: grid; place-items: center; transition: background 0.25s ease-out; padding: 0; margin: 0; font: inherit; -webkit-appearance: none; appearance: none; } .wsh-lightbox-modal__btn:hover, .wsh-lightbox-modal__btn:focus-visible { background: var(--wsh-lightbox-btn-bg-hover); } .wsh-lightbox-modal__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .wsh-lightbox-modal__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .wsh-lightbox-modal__close { top: 20px; right: 20px; } .wsh-lightbox-modal__prev { left: 20px; top: 50%; transform: translateY(-50%); } .wsh-lightbox-modal__next { right: 20px; top: 50%; transform: translateY(-50%); } .wsh-lightbox-modal.is-solo .wsh-lightbox-modal__prev, .wsh-lightbox-modal.is-solo .wsh-lightbox-modal__next { display: none; } @media (max-width: 560px) { .wsh-lightbox-modal__prev { left: 8px; } .wsh-lightbox-modal__next { right: 8px; } .wsh-lightbox-modal__btn { width: 40px; height: 40px; } .wsh-lightbox-modal__close { top: 12px; right: 12px; } } /* ============================================================ 4. LESE-UTILITIES — Zeilenlänge und Ausrichtung ------------------------------------------------------------ Löst ein wiederkehrendes Problem auf textlastigen Seiten (Datenschutz, Impressum, AGB, lange Artikel): über 1440px verteilter Fliesstext ist anstrengend zu lesen. Der naheliegende Reflex — den Container schmaler machen — behandelt das Symptom und erzeugt ein neues: Elementors Boxed-Container zentriert sich per margin-inline:auto, und der Inhalt klebt danach unverrückbar in der Seitenmitte. Containerbreite und Zeilenlänge sind zwei verschiedene Dinge. Deshalb hier zwei getrennte Werkzeuge. ============================================================ */ /* ------------------------------------------------------------ 4.1 · .wsh-measure — Zeilenlänge begrenzen ------------------------------------------------------------ Auf den Container legen, der die Textblöcke enthält. Der Container behält seine Breite und Position; nur die Textzeilen werden gekappt. Die Einheit ist ch (Breite der Ziffer „0"), nicht px. Damit hängt die Zeilenlänge an der Schriftgrösse statt an einer festen Pixelzahl — sie bleibt lesbar, wenn die Typo wächst oder der Nutzer zoomt. 60–75 Zeichen gelten als Optimum, Default hier 68. Bewusst NICHT auf die Widgets angewendet, sondern auf die Textelemente darin: Hintergründe, Trennlinien und Bilder sollen weiterhin die volle Containerbreite nutzen. Nur die Buchstaben werden kürzer. ------------------------------------------------------------ */ .wsh-measure :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, figcaption) { max-width: var(--wsh-measure); } /* Ausnahme: Elemente, die bewusst ausbrechen sollen */ .wsh-measure .wsh-measure-full, .wsh-measure .wsh-measure-full :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote) { max-width: none; } .wsh-measure--narrow { --wsh-measure: 55ch; } .wsh-measure--wide { --wsh-measure: 80ch; } /* ------------------------------------------------------------ 4.2 · .wsh-narrow — Inhaltsblock begrenzen und ausrichten ------------------------------------------------------------ Für Blöcke, die schmaler sein sollen als die Seitenspalte — Textkolumnen, Formulare, Zitate, einzelne Karten. WICHTIG: Der Container behält seine normale Breite (Boxed auf Seitenbreite). Begrenzt werden die KINDER. Genau darin liegt der Unterschied zum naheliegenden Reflex, den Container selbst schmal zu machen: Container schmal → Elementor zentriert ihn per margin-inline:auto. Diese Zentrierung lässt sich nicht abschalten, und wer sie überschreibt, landet am VIEWPORT-Rand, nicht am Rand der Seitenspalte. Das äussere .e-con ist immer voll breit. Kinder begrenzen → die Seitenspalte bleibt der Bezugsrahmen, der Block richtet sich an ihr aus. Ausserdem: max-width statt width, deshalb kein Zurücksetzen auf 100% pro Breakpoint. Breite über --wsh-narrow steuern (Default 900px, pro Projekt in design-tokens.css anpassen). Ausrichtung über die Modifier. wsh-narrow begrenzt, zentriert wsh-narrow--start begrenzt, linksbündig wsh-narrow--end begrenzt, rechtsbündig wsh-narrow--sm/--lg engere bzw. weitere Variante Auto-Margins gewinnen in Flexbox gegen align-items — die Klasse funktioniert dadurch unabhängig davon, was am Container unter „Elemente ausrichten" eingestellt ist. Gilt für Container in Spaltenrichtung. Bei Zeilenrichtung stattdessen die Breite der Kinder in Elementor setzen. ------------------------------------------------------------ */ .wsh-narrow > .e-con-inner > * { width: 100%; max-width: var(--wsh-narrow); margin-inline: auto; } .wsh-narrow--start > .e-con-inner > * { margin-inline: 0 auto; } .wsh-narrow--end > .e-con-inner > * { margin-inline: auto 0; } .wsh-narrow--sm { --wsh-narrow: var(--wsh-narrow-sm); } .wsh-narrow--lg { --wsh-narrow: var(--wsh-narrow-lg); } /* ------------------------------------------------------------ 4.3 · .wsh-prose — Fliesstext mit der Projekt-Typografie ------------------------------------------------------------ Setzt Fliesstext so, wie ihn niemand von Hand nachbaut: vertikaler Rhythmus, Listen, Links, Zitate, Tabellen, Bilder. ÜBERSCHRIFTEN GEHÖREN NICHT HIERHER. Die Zuordnung „welche Schriftvorlage trägt welches H-Tag" wird in Elementor gepflegt: Site Settings → Theme Style → Typografie → Überschriften Dort beim Typografie-Feld über das Globus-Symbol die gespeicherte Vorlage wählen. Das gilt global — auch für Überschriften in Texteditor-Widgets und Gutenberg-Inhalten — und ist in der Oberfläche sichtbar statt in einer CSS-Datei vergraben. Würde .wsh-prose dieselben Tags setzen, hätten beide Regeln identische Spezifität und die Ladereihenfolge entschiede. Für Projekte ohne gepflegten Theme Style gibt es den Modifier .wsh-prose--scale weiter unten. Was das ermöglicht: - Rechtstexte als EIN Texteditor-Widget statt vierzig - Copy-Paste zwischen Projekten ohne JSON-Export - Blogbeiträge in derselben Optik wie die gebauten Seiten - automatisiert eingespielte Inhalte sind ohne Nacharbeit richtig gesetzt Elementor-Widgets INNERHALB eines Prose-Containers behalten ihre eigenen Styles — deren Selektoren sind spezifischer. Gemischte Container sind dadurch unproblematisch. Kombiniert mit .wsh-measure für die Zeilenlänge. Automatische Zuweisung an Beitragsinhalte: siehe functions.php, Konstante WSH_PROSE_AUTOWRAP. ------------------------------------------------------------ */ .wsh-prose { color: var(--wsh-prose-color); font-family: var(--wsh-font-text-family); font-size: var(--wsh-font-text-size); font-weight: var(--wsh-font-text-weight); line-height: var(--wsh-prose-leading); } /* --- Überschriften: nur Abstände und Umbruchverhalten. Schrift, Grösse, Gewicht und Farbe kommen aus dem Elementor Theme Style. --- */ .wsh-prose :is(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } /* --- Vertikaler Rhythmus --- Überschriften bekommen Abstand nach OBEN, Absätze nach UNTEN. Dadurch bleibt der Abstand zwischen Text und folgender Überschrift stabil, egal welche Ebene folgt. */ .wsh-prose > :first-child { margin-top: 0; } .wsh-prose > :last-child { margin-bottom: 0; } .wsh-prose :is(h1, h2, h3, h4, h5, h6) { margin-top: var(--wsh-prose-heading-gap); margin-bottom: var(--wsh-space-3); } .wsh-prose :is(p, ul, ol, dl, blockquote, table, figure, pre) { margin-top: 0; margin-bottom: var(--wsh-prose-gap); } /* --- Listen --- */ .wsh-prose :is(ul, ol) { padding-inline-start: var(--wsh-space-6); } .wsh-prose li { margin-bottom: var(--wsh-space-2); } .wsh-prose li:last-child { margin-bottom: 0; } .wsh-prose li > :is(ul, ol) { margin-top: var(--wsh-space-2); margin-bottom: 0; } /* --- Links: unterstrichen, weil im Fliesstext Farbe allein kein ausreichender Hinweis ist (auch Barrierefreiheit). --- */ .wsh-prose a { color: var(--wsh-prose-link-color); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; } .wsh-prose a:hover, .wsh-prose a:focus-visible { text-decoration-thickness: 2px; } /* --- Auszeichnungen --- */ .wsh-prose strong, .wsh-prose b { font-weight: 600; } .wsh-prose small { font-size: 0.875em; } .wsh-prose blockquote { padding-inline-start: var(--wsh-space-5); border-inline-start: 3px solid var(--wsh-accent); font-style: italic; } .wsh-prose hr { border: 0; border-top: 1px solid var(--wsh-prose-rule-color); margin-block: var(--wsh-space-8); } /* --- Tabellen: Grundgerüst, damit importiertes HTML nicht auseinanderfällt. Feinschliff pro Projekt. --- */ .wsh-prose table { width: 100%; border-collapse: collapse; } .wsh-prose :is(th, td) { padding: var(--wsh-space-3) var(--wsh-space-4); border-bottom: 1px solid var(--wsh-prose-rule-color); text-align: start; vertical-align: top; } .wsh-prose th { font-weight: 600; } /* --- Bilder brechen nicht aus --- */ .wsh-prose :is(img, video) { max-width: 100%; height: auto; } /* ------------------------------------------------------------ 4.3b · .wsh-prose--scale — Überschriften-Zuordnung als Fallback ------------------------------------------------------------ Nur verwenden, wenn der Elementor Theme Style NICHT gepflegt ist oder der Fliesstext bewusst von ihm abweichen soll. Die Zuordnung selbst steht als Tokenblock in design-tokens.css („PROSE — Zuordnung Skala → H-Tags"). Dort umhängen, nicht hier: welche Stufe zu welchem Tag gehört, ist projektspezifisch. ------------------------------------------------------------ */ .wsh-prose--scale h1 { font-family: var(--wsh-prose-h1-family); font-size: var(--wsh-prose-h1-size); font-weight: var(--wsh-prose-h1-weight); letter-spacing: var(--wsh-prose-h1-ls, normal); } .wsh-prose--scale h2 { font-family: var(--wsh-prose-h2-family); font-size: var(--wsh-prose-h2-size); font-weight: var(--wsh-prose-h2-weight); letter-spacing: var(--wsh-prose-h2-ls, normal); } .wsh-prose--scale h3 { font-family: var(--wsh-prose-h3-family); font-size: var(--wsh-prose-h3-size); font-weight: var(--wsh-prose-h3-weight); letter-spacing: var(--wsh-prose-h3-ls, normal); } .wsh-prose--scale h4 { font-family: var(--wsh-prose-h4-family); font-size: var(--wsh-prose-h4-size); font-weight: var(--wsh-prose-h4-weight); letter-spacing: var(--wsh-prose-h4-ls, normal); } .wsh-prose--scale :is(h5, h6) { font-family: var(--wsh-prose-h5-family); font-size: var(--wsh-prose-h5-size); font-weight: var(--wsh-prose-h5-weight); } .wsh-prose--scale :is(h1, h2, h3, h4, h5, h6) { color: var(--wsh-prose-heading-color); line-height: var(--wsh-prose-heading-leading); } /* ============================================================ 5. FAQ-AKKORDEON — .wsh-faq ------------------------------------------------------------ Herkunft: Snippet-Bibliothek (Projekt Monia Herzog), dort mit mh-Prefix und eigenen Hex-Werten. Hier vollständig auf Wishalize-Tokens umgestellt; alle Rohwerte stehen in design-tokens.css unter „FAQ-Akkordeon". Markup: snippets-refactored/faq.html JS: assets/js/wsh-animations.js → initFaqs() Öffentliche API (data-Attribute am Wurzelelement): data-wsh-faq aktiviert die Komponente data-wsh-faq-single="false" mehrere Panels gleichzeitig offen (Default: nur eines) Die Nummerierung setzt das JS (01, 02, …). Neue Frage = .wsh-faq__item kopieren, Frage und Antwort ersetzen; die Nummern rutschen automatisch nach. Progressive Enhancement: ohne JS bleiben alle Panels offen und lesbar, das Plus-Icon wird ausgeblendet. Der Inhalt ist damit auch dann vollständig zugänglich — und für Suchmaschinen sichtbar, unabhängig davon, ob sie JavaScript ausführen. BASE-KANDIDAT: Ein FAQ-Akkordeon ist nicht Wishalize-spezifisch und steht in der README der Base bereits auf der Liste. Nach der zweiten Verwendung in die Base heben (CONVENTIONS §4). ============================================================ */ .wsh-faq { display: flex; flex-direction: column; font-family: inherit; } .wsh-faq__item { border-bottom: var(--wsh-faq-rule-width) solid var(--wsh-faq-rule-color); } /* ------------------------------------------------------------ 5.1 · Trigger — die anklickbare Zeile ------------------------------------------------------------