/* smartKMU 2026 — Plugins im Theme-Look: Fluent Forms, Fluent Booking.
   Die Plugins laden ihr CSS selbst und teils erst im Body. Darum:
   - Farben über ihre CSS-Variablen, gesetzt auf body: Die Plugins definieren sie auf :root,
     die nähere Deklaration am body gewinnt unabhängig von der Ladereihenfolge.
   - Detailregeln mit body davor, damit sie die gleich spezifischen Plugin-Regeln schlagen.
   Feld-Look nach components/FormField: surface, 1px border-strong, radius-md, 14px fg-1,
   Label 12px/500, Fokus brand-primary mit shadow-focus. */

body {
	--fluentform-primary: var(--brand-primary);
	--fluentform-secondary: var(--fg-1);
	--fluentform-danger: var(--danger);
	--fluentform-border-color: var(--border-strong);
	--fluentform-border-radius: var(--radius-md);
	--fcal_primary_color: var(--brand-primary);
	--fcal_dark: var(--ink);
	--fcal_slot_border: var(--border-strong);
	--fcal_body_bg: var(--bg-alt);
}

/* ---------- Fluent Forms ---------- */
body .fluentform { font-family: var(--font-sans); color: var(--fg-1); }
body .fluentform .ff-el-group { margin-bottom: var(--space-4); }
body .fluentform .ff-el-input--label { margin-bottom: 6px; }
body .fluentform .ff-el-input--label label { font-size: var(--text-xs); font-weight: 500; color: var(--fg-1); letter-spacing: .01em; }
body .fluentform .ff-el-form-control {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--fg-1);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: 11px 14px;
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
body .fluentform .ff-el-form-control::placeholder { color: var(--fg-3); opacity: 1; }
body .fluentform .ff-el-form-control:focus { border-color: var(--brand-primary); box-shadow: var(--shadow-focus); color: var(--fg-1); background: var(--surface); }
body .fluentform textarea.ff-el-form-control { min-height: 140px; line-height: 1.55; }
body .fluentform .ff-el-form-check label, body .fluentform .ff_t_c { font-size: var(--text-sm); color: var(--fg-1); }
body .fluentform input[type="checkbox"], body .fluentform input[type="radio"] { accent-color: var(--brand-primary); }
body .fluentform .ff-el-help-message { font-size: var(--text-xs); color: var(--fg-2); }
body .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--danger); }
body .fluentform .error, body .fluentform .text-danger { font-size: var(--text-xs); color: var(--danger); margin-top: 4px; }

/* Absende-Knopf wie die Theme-Knöpfe (theme.json elements.button) */
body .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.2;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--radius-md);
	background-color: var(--brand-primary);
	color: #fff;
	opacity: 1;
	transition: background-color var(--dur-fast) var(--ease-standard);
}
body .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover { background-color: var(--brand-dark); color: #fff; opacity: 1; }
body .fluentform .ff-btn-submit:not(.ff_btn_no_style):focus-visible { box-shadow: var(--shadow-focus); }

/* Erfolgs- und Fehlermeldung nach dem Absenden */
body .ff-message-success { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1); background: var(--blue-50); border: 1px solid var(--blue-100); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md); box-shadow: none; padding: 14px 18px; }
body .ff-errors-in-stack { font-size: var(--text-xs); color: var(--danger); }

/* Variante auf blauem Grund (Newsletter-Band) */
.sk-newsletter .fluentform .ff-el-input--label label,
.sk-newsletter .fluentform .ff-el-form-check label { color: #fff; }
.sk-newsletter .fluentform .ff-el-form-control { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
.sk-newsletter .fluentform .ff-el-form-control::placeholder { color: rgba(255,255,255,.7); }
.sk-newsletter .fluentform .ff-el-form-control:focus { background: rgba(255,255,255,.25); border-color: #fff; box-shadow: none; color: #fff; }
.sk-newsletter .fluentform .ff-btn-submit:not(.ff_btn_no_style) { background-color: #fff; color: var(--brand-primary); }
.sk-newsletter .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover { background-color: var(--brand-soft); color: var(--brand-dark); }

/* ---------- Fluent Booking ---------- */
body .fluent_booking_app,
body .fcal_calendar_inner,
body [class*="fcal_"] { font-family: var(--font-sans); }

/* ---------- Elementor-Restinhalte ----------
   functions.php stellt das Elementor-Kit still (Schriften Roboto/Montserrat, Knopf-Stile). Seiten,
   deren Inhalt noch mit Elementor gebaut ist (bis Etappe 7, die Helvetica-Kundenseite auch danach),
   verweisen aber in ihrem Seiten-CSS auf die Kit-Farben; ohne sie werden z. B. Knöpfe durchsichtig.
   Hier nur die Farben, auf die Marke gemappt (Werte identisch mit dem Kit). Die Schrift-Variablen
   bleiben bewusst leer, dann erben die Elemente Ubuntu vom Theme. */
body {
	--e-global-color-primary: var(--brand-primary);
	--e-global-color-secondary: var(--brand-dark);
	--e-global-color-text: var(--fg-1);
	--e-global-color-accent: #F0A202;
	--e-global-color-bdfe85f: #FFFFFF;
	--e-global-color-00b80b8: var(--blue-200);
	--e-global-color-32390de: var(--blue-400);
	--e-global-color-55bef98: #F0F1F0;
	--e-global-color-06203b6: #D15E66;
	--e-global-color-0ab4d76: #357266;
}