/*
 * STABAmix – Gestaltung der Plugins im neuen Design (plugins.css)
 *
 * Abgestimmt auf (lokale Kopie, 04.10.2026):
 *   WPForms Lite 2.0.2.1   modernes Markup, «Base and Form Theme Styling»
 *   WooCommerce 11.1.2     Shortcodes Warenkorb/Kasse/Mein Konto, Block-Templates Produkt und Katalog
 *   stabamix-lizenz 1.13.0 Kundenkonto «Lizenzen» und «Installation»
 *   Cookie Notice 3.1.12   Banner unten
 *   Download Monitor 5.3.1 [dlm_cart], [dlm_checkout], Download-Links
 *
 * Grundsätze
 * - Werte aus dem Bauplan §4/§5 (Farben, Schriftskala, Radien 8/12/16, Knöpfe 52/44).
 * - Plugins drucken ihr CSS teils spät (WPForms im Fuss, stabamix-lizenz als <style> im Inhalt).
 *   Deshalb beginnen die Regeln mit «body» (eine Stufe genauer), statt !important zu verwenden.
 *   !important nur dort, wo ein Plugin Werte als style-Attribut oder mit ID-Selektor setzt
 *   (WPForms-Variablen auf #wpforms-ID, Knopffarbe im Cookie-Banner).
 * - stabamix-lizenz: festgelegte Farben bleiben unangetastet (Lizenzschlüssel schwarz/fett,
 *   Status «aktiv» #328034, Knöpfe Rot #EC7572 / Hellgrün #44D592 / Blau #1B71DA – alles aus
 *   dem Plugin selbst). Hier nur Form, Abstände und Schrift.
 * - Kein waagrechtes Scrollen bei 375 px.
 *
 * Aufgeteilt (Theme 1.4.0), damit jede Seite nur lädt, was sie braucht:
 *   plugins.css            0 Eigene Werte, 4 Cookie Notice   – auf jeder Seite
 *   plugins-formulare.css  1 WPForms                          – nur mit WPForms-Formular
 *   plugins-shop.css       2 WooCommerce, 3 stabamix-lizenz,
 *                          5 Download Monitor                 – nur auf WooCommerce-Seiten
 */

/* ==========================================================================
   0. Eigene Werte (Präfix --stxp-), mit den Farben aus theme.json als Quelle
   ========================================================================== */

:root {
	--stxp-ink: var(--wp--preset--color--ink, #12161C);
	--stxp-text: var(--wp--preset--color--text, #2A3038);
	--stxp-muted: var(--wp--preset--color--muted, #555C66);
	--stxp-line: var(--wp--preset--color--line, #E3E6EA);
	--stxp-surface: var(--wp--preset--color--surface, #F5F6F8);
	--stxp-weiss: var(--wp--preset--color--weiss, #FFFFFF);
	--stxp-blau: var(--wp--preset--color--blau, #1B71DA);
	--stxp-blau-dunkel: var(--wp--preset--color--blau-dunkel, #155DB4);
	--stxp-blau-tief: var(--wp--preset--color--blau-tief, #0F4A91);
	--stxp-gruen: var(--wp--preset--color--gruen, #328034);
	/* Rand der Eingabefelder (Bauplan §4 «rahmen»). Hinweis: Entwurf v13 zeichnet die
	   Felder mit #7A8491 (Kontrast 3.8:1 statt 1.7:1) – bei Bedarf nur hier umstellen. */
	--stxp-feldrand: #7A8491; /* wie Entwurf v13 (alle Eingabefelder), Kontrast 3.8:1 */
	/* Fehlertext: Logo-Rot #EC7572 abgedunkelt, Kontrast 6:1 auf Weiss. */
	--stxp-fehler: #A8423F;
	--stxp-fehler-flaeche: #FBEDEC;
	--stxp-fokus-ring: 0 0 0 1px var(--stxp-blau);
	--stxp-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
	--stxp-titel: Manrope, 'Segoe UI', sans-serif;
	--stxp-mono: 'IBM Plex Mono', Consolas, monospace;
}


/* ==========================================================================
   4. Cookie Notice 3.1.12 – nur Schrift und Knöpfe
   Die Knopffarbe setzt das Plugin als style-Attribut (Einstellung «Button»),
   daher hier !important. Alternative: Einstellungen → Cookie Notice → Design.
   ========================================================================== */

body #cookie-notice {
	font-family: var(--stxp-sans);
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: normal;
}

body #cookie-notice .cookie-notice-container,
body #cookie-notice .cookie-revoke-container {
	padding: 16px 52px 16px 20px;
}

body #cookie-notice .cn-text-container {
	margin: 0 0 8px;
}

body #cookie-notice .cn-button:not(.cn-button-custom) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	font-family: var(--stxp-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	vertical-align: middle;
}

body #cookie-notice #cn-accept-cookie,
body #cookie-notice .cn-revoke-cookie {
	background-color: var(--stxp-blau) !important;
	color: #FFFFFF;
}

body #cookie-notice #cn-accept-cookie:hover,
body #cookie-notice .cn-revoke-cookie:hover {
	background-color: var(--stxp-blau-dunkel) !important;
}

body #cookie-notice #cn-more-info,
body #cookie-notice #cn-refuse-cookie {
	background-color: transparent !important;
	color: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

body #cookie-notice #cn-more-info:hover,
body #cookie-notice #cn-refuse-cookie:hover {
	box-shadow: inset 0 0 0 1px #FFFFFF;
}

body #cookie-notice .cn-button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	body #cookie-notice .cookie-notice-container,
	body #cookie-notice .cookie-revoke-container {
		padding: 14px 44px 14px 16px;
	}
}