/** * NYB Design — zentrale Gestaltungsklassen * ---------------------------------------- * Wird von nyb-design.php nach dem Theme-Stylesheet eingebunden. * Alle Klassen tragen das Praefix "nyb-", damit sie beim Herauskauf einer * Website zusammen mit den uebrigen nyb-*-Dateien vollstaendig entfernbar sind. * * Element 1: Eyebrow — die kleine Ueberzeile ueber einer Ueberschrift. * Erwartetes Markup (kommt spaeter aus den Directus-Skeletons): * *

UNSERE PHILOSOPHIE

* * Element 2: Footer-Sitemap — die Linkliste in der Footer-Global-Section. * Siehe den eigenen Abschnitt am Dateiende. * * Barrierefreiheit: * - Es werden keine Inhalte per CSS erzeugt (kein content: bei ::before/::after), * damit Screenreader und Textextraktion nichts verlieren. Der linke Balken der * Bar-Variante ist deshalb ein border-left, kein Pseudo-Element. * - Die Fallbacks nutzen bewusst currentColor. Ohne gesetzte Variablen erbt der * Eyebrow die Textfarbe seines Kontextes und bleibt in hellen wie in dunklen * Sektionen lesbar. Es entstehen keine unsichtbaren Texte. */ /** * CSS-Variablen (werden NICHT hier deklariert, sondern ausschliesslich per * var(..., fallback) an der Verwendungsstelle aufgeloest — eine Deklaration in * :root wuerde die Fallback-Kette totlegen). Gesetzt werden sie entweder von * nyb-design.php aus den Salient-Theme-Optionen oder projektspezifisch. * * --nyb-eyebrow-color Textfarbe Fallback: currentColor * --nyb-eyebrow-accent Balken-/Pill-Farbe Fallback: currentColor * --nyb-eyebrow-bg Pill-Hintergrund Fallback: transparent * --nyb-eyebrow-size Schriftgroesse Fallback: 1rem * --nyb-eyebrow-spacing Laufweite Fallback: 2px * --nyb-eyebrow-gap Abstand nach unten Fallback: 2rem */ /* -------------------------------------------------------------------------- * Basisklasse * ----------------------------------------------------------------------- */ .nyb-eyebrow { display: flex; align-items: flex-start; font-size: var(--nyb-eyebrow-size, 1rem); font-weight: 700; letter-spacing: var(--nyb-eyebrow-spacing, 2px); line-height: 1; text-transform: uppercase; color: var(--nyb-eyebrow-color, currentColor); margin: 0 0 var(--nyb-eyebrow-gap, 2rem) 0; /* Salient setzt auf blanken Absaetzen p { padding-bottom: var(--nectar- paragraph-bottom-spacing, 28px) } (Spezifitaet 0,0,1). Ohne diese Zeile addiert sich der Salient-Innenabstand auf --nyb-eyebrow-gap und der Abstand zur Ueberschrift verdoppelt sich. Die Klasse (0,1,0) gewinnt regulaer — kein !important noetig. */ padding: 0; } /* -------------------------------------------------------------------------- * Variante: Balken (vertikaler Strich links) * ----------------------------------------------------------------------- */ .nyb-eyebrow--bar { border-left: 4px solid var(--nyb-eyebrow-accent, currentColor); padding-left: .75rem; /* Optische Korrektur: schiebt die Schrift 2px nach unten, damit der Balken oben nicht auf der Versalhoehe abschneidet, und holt die 4px Rahmen- breite optisch an die Satzkante zurueck. Nicht wegoptimieren. */ padding-top: 2px; margin-left: 2px; } /* -------------------------------------------------------------------------- * Variante: Pill (abgerundete Kapsel) * ----------------------------------------------------------------------- */ .nyb-eyebrow--pill { display: inline-flex; align-items: center; /* WCAG 2.2 AA: Wird --nyb-eyebrow-bg projektspezifisch gesetzt, MUSS der Kontrast zwischen --nyb-eyebrow-color und --nyb-eyebrow-bg mindestens 4,5:1 betragen. Das laesst sich in CSS nicht erzwingen und ist beim Setzen der CI-Farben zu pruefen. Ohne gesetzte Variable wird die Flaeche aus currentColor abgeleitet. Damit ist die Kapsel in hellen wie dunklen Sektionen sichtbar und der Text bleibt garantiert lesbar. In Browsern ohne color-mix() faellt die ganze Deklaration ungueltig aus und der Hintergrund bleibt transparent — der Text ist dann immer noch vollstaendig lesbar. */ background: var(--nyb-eyebrow-bg, color-mix(in srgb, currentColor 12%, transparent)); border-radius: 999px; padding: .5rem 1rem; } /* -------------------------------------------------------------------------- * Variante: Plain (nur Typografie) * ----------------------------------------------------------------------- */ .nyb-eyebrow--plain { /* Kein Schmuck. Die Nullwerte setzen den Eyebrow auch dann sauber zurueck, wenn --plain mit einer anderen Variante oder mit Theme-Regeln kollidiert. */ border: 0; background: none; padding: 0; } /* -------------------------------------------------------------------------- * Salient- / WPBakery-Kompatibilitaet * * 1) Absatz-Innenabstand * Salient setzt p { padding-bottom: var(--nectar-paragraph-bottom-spacing, * 28px) } (Spezifitaet 0,0,1). Das ist in der Basisklasse mit padding: 0 * neutralisiert — die Klasse (0,1,0) gewinnt regulaer, ohne !important. * * 2) Textfarbe in hellen Sektionen * Salient setzt .light p { color: var(--nectar-font-light-color, #fff) } * (0,1,1) und schlaegt damit die Basisklasse (0,1,0). Ohne die Regel unten * wuerde ein projektspezifisch gesetztes --nyb-eyebrow-color in dunklen * Sektionen ignoriert. Ist die Variable nicht gesetzt, aendert sich nichts: * currentColor liefert dieselbe helle Schriftfarbe. Statt !important wird * die Spezifitaet gezielt auf (0,2,0) gehoben. * * 3) Abstand nach unten — bewusst NICHT erzwungen * WPBakery setzt #content .wpb_text_column p:last-child { margin-bottom: 0 } * (1,2,2). Steht der Eyebrow allein in einem Textblock, wird der * margin-bottom der Basisklasse dadurch geschluckt. Das ist korrekt und * darf NICHT per !important zurueckgeholt werden: WPBakery gibt in genau * diesem Fall dem umgebenden .wpb_text_column selbst 30px Abstand nach * unten. Ein erzwungener margin-bottom addiert sich darauf und verdoppelt * den Abstand zur Ueberschrift auf rund 62px. * Gemessen auf Salient 18.2.1 / WPBakery: * Eyebrow allein im Textblock -> 30px vom Container (gewuenscht) * Eyebrow + H2 im Textblock -> --nyb-eyebrow-gap (gewuenscht) * Beide Wege liefern praktisch denselben optischen Abstand. * ----------------------------------------------------------------------- */ .wpb_text_column .nyb-eyebrow { color: var(--nyb-eyebrow-color, currentColor); } /* -------------------------------------------------------------------------- * Responsive * * Unter 768px werden Schriftgroesse, Laufweite und Abstand proportional * heruntergerechnet — per calc() auf die Variable, damit die Reduktion auch * dann greift, wenn projektspezifisch eigene Werte gesetzt sind. Die kleinere * Laufweite ist der Hauptgrund: gesperrte Versalien brechen auf schmalen * Viewports sonst um. * ----------------------------------------------------------------------- */ @media (max-width: 767px) { .nyb-eyebrow { font-size: calc(var(--nyb-eyebrow-size, 1rem) * .875); letter-spacing: calc(var(--nyb-eyebrow-spacing, 2px) * .75); margin-bottom: calc(var(--nyb-eyebrow-gap, 2rem) * .75); } .nyb-eyebrow--bar { padding-left: .5rem; } .nyb-eyebrow--pill { padding: .4rem .8rem; } } /* -------------------------------------------------------------------------- * Element 2: Footer-Sitemap * * Erwartetes Markup (kommt aus der Salient Global Section des Fliessbands): * *

* Startseite
Zimmer ... *

* * Bewusst ein Absatz mit
statt einer