/* ninetyone Content-Suite — gemeinsame Frontend-Token (von :root in gespeist) */ /* Module mit aktivem Master-Schalter „Globale Schriften" tragen die Klasse n91cs-fonts auf ihrem Root-Element. Die Body-Schrift vererbt sich von hier auf ALLE Texte des Moduls; Überschriften setzen die jeweiligen Modul-Stylesheets zusätzlich auf var(--n91cs-font-heading). `!important`, weil Divi (Theme/Customizer) sonst die Modul-Schrift überschreibt. */ .n91cs-fonts { font-family: var(--n91cs-font-body, inherit) !important; } /* Sicherheitsnetz: echte Überschriften-Tags im Modul bekommen die Heading-Schrift, auch wenn ein Modul (noch) keine eigene Klassen-Regel dafür hat. */ .n91cs-fonts :is(h1, h2, h3, h4, h5, h6) { font-family: var(--n91cs-font-heading, inherit) !important; } /* ───── Geteilte Button-Stile (zentrale Tokens aus „Globale Einstellungen → Buttons") ───── Module nutzen .n91cs-btn + .n91cs-btn--normal | --outline, wenn sie die globalen Button-Stile erben. Lokale Overrides setzen die --n91cs-btn-*-Variablen im Modul-Scope neu. */ .n91cs-btn { display: inline-block; line-height: 1.2; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .n91cs-btn--normal { color: var(--n91cs-btn-normal-color, #fff); background: var(--n91cs-btn-normal-bg, #1a1a1a); border: var(--n91cs-btn-normal-bw, 0) solid var(--n91cs-btn-normal-bc, #1a1a1a); border-radius: var(--n91cs-btn-normal-radius, 8px); padding: var(--n91cs-btn-normal-pv, 11px) var(--n91cs-btn-normal-ph, 22px); } .n91cs-btn--normal:hover { color: var(--n91cs-btn-normal-color-h, #fff); background: var(--n91cs-btn-normal-bg-h, #333); border-color: var(--n91cs-btn-normal-bc-h, #1a1a1a); } .n91cs-btn--outline { color: var(--n91cs-btn-outline-color, #1a1a1a); background: var(--n91cs-btn-outline-bg, transparent); border: var(--n91cs-btn-outline-bw, 1px) solid var(--n91cs-btn-outline-bc, #1a1a1a); border-radius: var(--n91cs-btn-outline-radius, 8px); padding: var(--n91cs-btn-outline-pv, 11px) var(--n91cs-btn-outline-ph, 22px); } .n91cs-btn--outline:hover { color: var(--n91cs-btn-outline-color-h, #fff); background: var(--n91cs-btn-outline-bg-h, #1a1a1a); border-color: var(--n91cs-btn-outline-bc-h, #1a1a1a); } /* ───── Geteilte Einblend-Animation (Stagger-Reveal, opt-in) ───── Container: .n91cs-anim (+ Variante .n91cs-anim--clip | .n91cs-anim--rise) Items: .n91cs-anim__item mit inline --n91cs-i (Index, von suite-frontend.js). Start-Zustand greift erst mit html.n91cs-anim-ready (JS gesetzt) → ohne JS sichtbar. Reveal bei .is-inview (IntersectionObserver). */ .n91cs-anim { --n91cs-anim-step: .09s; --n91cs-anim-dur: .6s; --n91cs-anim-ease: cubic-bezier(.16, 1, .3, 1); } /* Variante „Rise": leichtes Aufsteigen + Einblenden (universell) */ .n91cs-anim-ready .n91cs-anim--rise .n91cs-anim__item { opacity: 0; transform: translateY(22px); transition: opacity var(--n91cs-anim-dur) var(--n91cs-anim-ease), transform var(--n91cs-anim-dur) var(--n91cs-anim-ease); transition-delay: calc(var(--n91cs-i, 0) * var(--n91cs-anim-step)); will-change: opacity, transform; } .n91cs-anim-ready .n91cs-anim--rise.is-inview .n91cs-anim__item { opacity: 1; transform: none; } /* Variante „Clip": Kachel öffnet sich aus der Mitte (Navbar-Look) */ .n91cs-anim-ready .n91cs-anim--clip .n91cs-anim__item { clip-path: inset(48% 48% 48% 48% round var(--n91cs-anim-radius, 14px)); transition: clip-path var(--n91cs-anim-dur) var(--n91cs-anim-ease); transition-delay: calc(var(--n91cs-i, 0) * var(--n91cs-anim-step)); will-change: clip-path; } .n91cs-anim-ready .n91cs-anim--clip.is-inview .n91cs-anim__item { clip-path: inset(0 0 0 0 round var(--n91cs-anim-radius, 14px)); } @media (prefers-reduced-motion: reduce) { .n91cs-anim .n91cs-anim__item { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } } /* ───── Geteilte Dot-Rail: deckelt viele Pagination-Dots auf feste Breite ───── JS fügt .n91cs-dotrail hinzu, wenn es zu viele Dots werden, und scrollt den aktiven Dot mittig. So sieht es auch bei vielen Beiträgen aufgeräumt aus (statt 30 Dots nebeneinander). */ .n91cs-dotrail { position: relative; max-width: 220px; margin-left: auto; margin-right: auto; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } .n91cs-dotrail::-webkit-scrollbar { display: none; } /* ───── Geteilte Filter-Chips / „Bubbles" (Kategorie-Filter aller Module) ───── Zentral gesteuert über --n91cs-chip-* (Globale Einstellungen → Filter-Chips). Module geben ihren Filter-Buttons die Klasse .n91cs-chip; der Aktiv-Zustand ist .is-active. */ .n91cs-chip { display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; white-space: nowrap; line-height: 1; font-size: 13px; font-weight: var(--n91cs-chip-weight, 600); text-transform: var(--n91cs-chip-transform, none); letter-spacing: .01em; padding: 8px 16px; color: var(--n91cs-chip-text, #444444); background: var(--n91cs-chip-bg, #ffffff); border: var(--n91cs-chip-bw, 1px) solid var(--n91cs-chip-border, #e5e5e5); border-radius: var(--n91cs-chip-radius, 999px); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .n91cs-chip:hover { border-color: var(--n91cs-chip-active-bg, #1a1a1a); } .n91cs-chip.is-active { color: var(--n91cs-chip-active-text, #ffffff); background: var(--n91cs-chip-active-bg, #1a1a1a); border-color: var(--n91cs-chip-active-bg, #1a1a1a); } /* ───── Rechtstexte-Ausgabe ([ninetyone_impressum] / [ninetyone_datenschutz]) ───── Gespeist aus --n91legal-* (Content-Suite → Impressum/Datenschutz → Darstellung). */ .n91legal { font-size: var(--n91legal-tsize, 16px); line-height: 1.7; color: var(--n91legal-text, #444444); } .n91legal__sec { margin: 0 0 var(--n91legal-space, 48px); } .n91legal__sec:last-child { margin-bottom: 0; } .n91legal__title { margin: 0 0 var(--n91legal-tgap, 14px); font-size: var(--n91legal-hsize, 24px); line-height: 1.3; color: var(--n91legal-heading, #111111); } .n91legal p { margin: 0 0 1em; } .n91legal p:last-child { margin-bottom: 0; } .n91legal a { color: inherit; text-decoration: underline; } .n91legal.n91cs-fonts .n91legal__title { font-family: var(--n91cs-font-heading, inherit) !important; }