/**
 * 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):
 *
 *     <p class="nyb-eyebrow nyb-eyebrow--bar">UNSERE PHILOSOPHIE</p>
 *
 * 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;
	}
}