/* Beeken-online Shop-Design fuer die Kontaktformulare.
   Wird NACH style-kontaktformular.css geladen und ueberschreibt nur Optik (Farben, Schrift, Rundungen).
   Farben/Schriften wie im Shop: Navy #152a63, Burgund #7c1322, Gold #e79a2e, Creme #fdf6e9, Nunito. */

:root {
	--bk-cream: #fdf6e9;
	--bk-cream-deep: #f8ecd4;
	--bk-navy: #152a63;
	--bk-navy-dark: #0d1c46;
	--bk-burgundy: #7c1322;
	--bk-burgundy-dark: #5c0e19;
	--bk-gold: #e79a2e;
	--bk-text: #2c2716;
	--bk-muted: #6b6350;
	--bk-line: #d9cfba;
}

body,
textarea,
input,
select,
.senden {
	font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
	font-size: 16px;
	color: var(--bk-text);
}

/* im Shop (iframe) durchsichtig, damit der Seitenhintergrund durchscheint */
body { background: transparent; padding-top: 0; }

.kontaktformular {
	width: 720px;
	margin-left: 0;
	padding: 1.2rem 0 1rem;
}

.kontaktformular .row { margin-bottom: .8rem; }

.kontaktformular .row .control-label,
.kontaktformular .row .textarea-label,
.kontaktformular .row .select-label { color: var(--bk-text); }

/* Eingabefelder */
.kontaktformular .row .field {
	font-size: 16px;
	padding: .6rem .95rem;
	color: var(--bk-text);
	background-color: #fff;
	border: 1.5px solid var(--bk-line);
	border-radius: 12px;
	margin-top: 0;
}
.kontaktformular .row .field:hover { border-color: var(--bk-navy) !important; }
.kontaktformular .row .field:focus {
	border-color: var(--bk-navy) !important;
	box-shadow: 0 0 0 3px rgba(231, 154, 46, .45) !important;
	background-color: #fff;
}
.kontaktformular .row textarea { height: 9rem; resize: vertical; line-height: 1.45; }
.kontaktformular .row ::placeholder { color: var(--bk-muted); opacity: .85; }

.kontaktformular .row select.unselected,
.kontaktformular .row select.field {
	background-color: #fff;
	border: 1.5px solid var(--bk-line);
	border-radius: 12px;
	color: var(--bk-text);
}
.kontaktformular .row select.unselected { color: var(--bk-muted); }

/* Checkbox */
.kontaktformular .row input[type="checkbox"] {
	border: 1.5px solid var(--bk-line);
	border-radius: 6px;
	background-color: #fff;
}
.kontaktformular .row input[type="checkbox"]:hover,
.kontaktformular .row input[type="checkbox"]:focus { border-color: var(--bk-navy) !important; box-shadow: 0 0 0 3px rgba(231, 154, 46, .45) !important; }
.kontaktformular .row input:checked { background-color: var(--bk-navy); filter: none; }
.kontaktformular .checkbox-row .checkbox-inline a,
.kontaktformular .checkbox-row .checkbox-inline span { color: var(--bk-navy); font-weight: 600; }
.kontaktformular .checkbox-row .checkbox-inline a:hover,
.kontaktformular .checkbox-row .checkbox-inline a:focus { color: var(--bk-burgundy); text-decoration: underline; }

/* Captcha */
#captcha { border-radius: 10px; border: 1.5px solid var(--bk-line); vertical-align: middle; }
.kontaktformular .captchareload i { color: var(--bk-navy) !important; font-size: 1.15rem; }

/* Senden-Button wie die Shop-Buttons: Burgund, Pillenform */
.kontaktformular .row .senden {
	width: auto;
	min-width: 240px;
	height: auto;
	padding: .75rem 2rem;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	background-color: var(--bk-burgundy);
	border: 0;
	border-radius: 999px;
	margin-top: .6rem;
	transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.kontaktformular .row .senden:hover { background-color: var(--bk-burgundy-dark); }
.kontaktformular .row .senden:focus-visible { outline: 3px solid var(--bk-gold); outline-offset: 2px; }

/* Fehler */
.kontaktformular .row .error .field,
.kontaktformular .row .error .checkbox-inline input,
.kontaktformular.kontaktformular-validate .row .field:invalid,
.kontaktformular.kontaktformular-validate .row .checkbox-inline input:invalid {
	background-color: #fdecee;
	border-color: var(--bk-burgundy);
}
.errormsg { color: var(--bk-burgundy); font-weight: 700; }
.kontaktformular .row .field:focus:valid,
.kontaktformular .row .checkbox-inline input:focus:valid { border-color: var(--bk-navy); }

/* ---- eigenstaendige Seite (nicht im Shop-iframe): Kopfzeile wie im Shop ---- */
body.bk-standalone { background: var(--bk-cream); padding: 0 0 2rem; }
.bk-fhead {
	background: var(--bk-navy);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.bk-fhead .bk-logo { background: #fff; border-radius: 14px; padding: 6px 12px; display: inline-flex; }
.bk-fhead .bk-logo img { height: 56px; width: auto; display: block; }
.bk-fhead .bk-fnav { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bk-fhead .bk-fnav a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: .45rem 1.1rem;
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
}
.bk-fhead .bk-fnav a:hover,
.bk-fhead .bk-fnav a:focus-visible { background: #fff; color: var(--bk-navy); }
.bk-fwrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.bk-fwrap h1 {
	font-family: 'Baloo 2', 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	color: var(--bk-navy);
	background: var(--bk-cream-deep);
	border-radius: 18px;
	padding: .55rem 1.1rem;
	margin: 1.6rem 0 1rem;
}
.bk-fwrap .bk-fintro { color: var(--bk-text); margin: 0 0 1rem; line-height: 1.5; }
.bk-fwrap .kontaktformular { background: #fff; border-radius: 20px; padding: 1.4rem 1.6rem 1.2rem; box-shadow: 0 2px 14px rgba(21, 42, 99, .10); width: 100%; }

@media (max-width: 600px) {
	.kontaktformular .row { flex-direction: column; }
	.kontaktformular .row .col-sm-4 { margin: 0 0 .8rem !important; width: 100%; }
	.bk-fhead .bk-fnav { margin-left: 0; }
	.kontaktformular .row .senden { width: 100%; }
}