/**
 * KW Biohof – Elementor-V4-Defense (Single Source of Truth)
 *
 * Elementor V4 färbt Links/Buttons standardmäßig PINK (über seine globalen
 * Farb-Variablen --e-global-color-*). Diese Datei löst das an einer Stelle:
 *
 * 1. BRIDGE: Wir mappen Elementors globale Farben auf unsere Tokens. Dadurch
 *    nutzt jedes Elementor-Element automatisch das Biohof-Grün statt Pink.
 * 2. LINK-DEFENSE: Explizite Link-Farben in unseren .biohof-Wrappern für alle
 *    vier Zustände (Hover/Focus/Focus-visible/Active).
 *
 * BEWUSST NICHT in @layer: Elementors Kit-Styles sind ungelayert und würden
 * gelayerte Regeln immer schlagen. Stattdessen gewinnen wir über Spezifität:
 * der doppelte Attribut-Selektor ergibt (0,2,0) gegen Elementors (0,1,0) –
 * ganz ohne !important und unabhängig von der Ladereihenfolge.
 *
 * ZWEITE Pink-Quelle: Hello-Elementor `assets/css/reset.css` färbt nackte
 * <button> mit fester Farbe (#c36) bei :hover/:focus. Innerhalb unserer
 * .biohof-Wrapper neutralisiert die Button-Regel unten das mit (sie setzt den
 * Hintergrund transparent). Die Bild-Lightbox liegt jedoch im Top-Layer am
 * <body>, AUSSERHALB dieses Scopes – sie sichert ihre Buttons mit derselben
 * Spezifitäts-Technik selbst (siehe assets/css/core/lightbox.css).
 *
 * Wartungsregel: NEUE Pink-Overrides ausschließlich hier ergänzen (Ausnahme:
 * die Top-Layer-Lightbox, die kein Scope erreicht).
 */

/* 1. Bridge: Elementor-Globalfarben → Biohof-Tokens. */
[class*="elementor-kit-"][class*="elementor-kit-"] {
	--e-global-color-primary: var(--biohof-color-primary);
	--e-global-color-secondary: var(--biohof-color-accent);
	--e-global-color-text: var(--biohof-color-text);
	--e-global-color-accent: var(--biohof-color-accent);
}

/* 2. Link-Defense innerhalb unserer Komponenten (alle vier Zustände). */
.elementor-widget.elementor-widget :where(.biohof) a:not([class*="biohof-button"]):where(:hover, :focus, :focus-visible, :active) {
	color: var(--biohof-color-primary-hover);
}

/* Native Buttons in unseren Wrappern: kein Pink-Hintergrund/-Gradient. */
.elementor-widget.elementor-widget :where(.biohof) button:not([class*="biohof-button"]):where(:hover, :focus, :focus-visible, :active) {
	background-color: transparent;
	background-image: none;
	color: inherit;
}

/* 2b. Auto-Ausgabe (SiteChrome): Navigation/Footer liegen AUSSERHALB jedes
 * .elementor-widget – die Regeln oben greifen dort nicht. Hello-Elementors
 * reset.css färbt nackte <button> bei :hover/:focus pink (#c36 =
 * `[type="button"]:focus`, Spezifität (0,2,0)) – sichtbar z.B. am fokussierten
 * Untermenü-Auslöser der Navigation („nach dem Klick"). Die Doppel-Klasse am
 * Träger ergibt (0,3,1) und schlägt das ohne Ladereihenfolge-Abhängigkeit; bei
 * :hover bleibt der grüne Look (navigation.css ist mit (0,4,0) spezifischer). */
.biohof-site-header.biohof-site-header button:not([class*="biohof-button"]):where(:hover, :focus, :focus-visible, :active),
.biohof-site-footer.biohof-site-footer button:not([class*="biohof-button"]):where(:hover, :focus, :focus-visible, :active) {
	background-color: transparent;
	background-image: none;
	color: inherit;
}

/* 3. Flex-Item-Höhen-Fix (Container-Query × Elementor-Flex).
 *
 * Elementors Widget-Hülle (.elementor-widget) ist ein Flex-Item im Spalten-
 * Container .e-con/.e-con-inner und bekommt per Default `stretch`-Breite
 * (indefinit). Enthält das Widget ein `container-type: inline-size`-Element
 * (Überschrift, Fließtext, Bild+Text, Statement …), löst diese indefinite
 * Inline-Größe in Chromium ein Doppel-Layout aus, das die Blockhöhe der Hülle
 * auf ~2× aufbläht – in der schmalen (responsiven) Ansicht sichtbar als
 * riesige Leerfläche unter dem Inhalt. Eine DEFINITE Breite (100 %) löst die
 * Inline-Größe in einem Durchgang → kein Phantom-Platz; `container-type` und
 * alle `@container`-Queries bleiben erhalten. align-self deckt zugleich den
 * V4-Stretch-Gotcha ab. Bewährtes Muster aus KW Lobby (Struktur-Vorbild).
 */
.e-con > .elementor-widget.elementor-widget[class*="elementor-widget-biohof_"],
.e-con > .e-con-inner > .elementor-widget.elementor-widget[class*="elementor-widget-biohof_"] {
	align-self: flex-start;
	width: 100%;
}
