/*
 * Dojo Ronin – Kontaktformular
 * Gestaltung in den Vereinsfarben (Bordeaux), abgestimmt auf das Theme Hestia.
 * Alle Regeln hängen an #drkf, damit Theme-Regeln das Formular nicht verändern.
 */
#drkf {
	--drkf-accent: #5e2028;
	--drkf-accent-dark: #461820;
	--drkf-accent-soft: #f7eff0;
	--drkf-accent-ring: rgba(94, 32, 40, .18);
	--drkf-text: #2f3a48;
	--drkf-muted: #6b7684;
	--drkf-line: #ccd2da;
	--drkf-line-soft: #e6e9ed;
	--drkf-ok: #2e7d32;
	--drkf-err: #b3261e;
	max-width: 720px;
	margin: 0 auto;
	color: var(--drkf-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
}
#drkf *, #drkf *::before, #drkf *::after { box-sizing: border-box; }
#drkf p { font-size: 16px; margin: 0 0 .6em; }
#drkf a { color: var(--drkf-accent); text-decoration: underline; text-underline-offset: 2px; }
#drkf small { display: block; color: var(--drkf-muted); font-size: 13.5px; line-height: 1.45; font-weight: 400; }
#drkf abbr[title] { color: var(--drkf-accent); text-decoration: none; border: 0; cursor: help; }
#drkf .drkf-title { margin: 0 0 18px; font-size: 26px; font-weight: 700; color: var(--drkf-text); }
#drkf .drkf-intro { margin: 0 0 20px; }

/* Theme-Zusätze neutralisieren (Hestia hängt .form-group an Formulare und Feldcontainer). */
#drkf form.form-group, #drkf .form-group { margin: 0; padding: 0; position: static; }
#drkf .material-input { display: none !important; }

/* ---------- Felder ---------- */
#drkf .drkf-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; padding: 0; min-width: 0; }
#drkf .drkf-field > label { display: block; margin: 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--drkf-text); line-height: 1.35; max-width: none; }
#drkf .drkf-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
#drkf .drkf-row > .drkf-field { flex: 1 1 220px; }
#drkf .drkf-field input:not([type="checkbox"]):not([type="hidden"]),
#drkf .drkf-field select,
#drkf .drkf-field textarea {
	display: block; width: 100%; height: 48px; margin: 0; padding: 10px 14px; border: 1.5px solid var(--drkf-line); border-radius: 8px;
	background: #fff; background-image: none; color: var(--drkf-text); font-family: inherit; font-size: 16px; line-height: 1.4;
	box-shadow: none; outline: 0; appearance: none; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s;
}
#drkf .drkf-field textarea { height: auto; min-height: 150px; resize: vertical; }
#drkf .drkf-field .drkf-short { max-width: 140px; }
#drkf .drkf-field select {
	padding-right: 40px; cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235e2028' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 9px;
}
#drkf .drkf-field input:hover, #drkf .drkf-field select:hover, #drkf .drkf-field textarea:hover { border-color: #9aa4b0; }
#drkf .drkf-field input:focus, #drkf .drkf-field select:focus, #drkf .drkf-field textarea:focus,
#drkf .drkf-field .form-group.is-focused .form-control {
	border-color: var(--drkf-accent); box-shadow: 0 0 0 4px var(--drkf-accent-ring); background-color: #fff; background-image: none; background-size: auto; outline: 0;
}
#drkf .drkf-field select:focus {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235e2028' stroke-width='2'/%3E%3C/svg%3E");
	background-size: 14px 9px;
}
#drkf .drkf-field input::placeholder, #drkf .drkf-field textarea::placeholder { color: #9aa4b0; opacity: 1; }
#drkf .drkf-field input:user-invalid, #drkf .drkf-field textarea:user-invalid { border-color: var(--drkf-err); }

/* ---------- Sicherheitsfrage und Einwilligung ---------- */
#drkf .drkf-captcha { padding: 14px 16px; border-radius: 10px; background: var(--drkf-accent-soft); border-left: 4px solid var(--drkf-accent); }
#drkf .drkf-consent { padding: 14px 16px; margin: 0 0 18px; border: 1px solid var(--drkf-line-soft); border-radius: 10px; background: #fff; }
#drkf label.drkf-choice {
	display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0;
	font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--drkf-text); cursor: pointer; max-width: none;
}
#drkf label.drkf-choice > input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--drkf-accent); cursor: pointer; box-shadow: none; }
#drkf label.drkf-choice > span { flex: 1; }

/* ---------- Button ---------- */
#drkf .drkf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	margin: 6px 0 0; padding: 16px 26px; min-height: 52px; border-radius: 8px; border: 1.5px solid var(--drkf-accent);
	font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
	cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .05s;
}
#drkf .drkf-btn-primary, #drkf .drkf-btn-primary:focus { background: var(--drkf-accent); color: #fff; box-shadow: 0 2px 2px 0 rgba(94, 32, 40, .14), 0 3px 1px -2px rgba(94, 32, 40, .2), 0 1px 5px 0 rgba(94, 32, 40, .12); }
#drkf .drkf-btn-primary:hover { background: var(--drkf-accent-dark); border-color: var(--drkf-accent-dark); color: #fff; box-shadow: 0 14px 26px -12px rgba(94, 32, 40, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(94, 32, 40, .2); }
#drkf .drkf-btn:active { transform: translateY(1px); }
#drkf .drkf-btn:focus-visible { box-shadow: 0 0 0 4px var(--drkf-accent-ring); outline: 0; }
#drkf .drkf-btn[disabled] { opacity: .65; cursor: wait; }
#drkf .drkf-noscript { margin-top: 12px; font-size: 14.5px; color: var(--drkf-muted); }

/* ---------- Hinweise ---------- */
#drkf .drkf-notice { border-radius: 10px; padding: 18px 20px; margin: 0 0 24px; border-left: 5px solid; }
#drkf .drkf-notice h3 { margin: 0 0 6px; font-size: 20px; font-family: inherit; }
#drkf .drkf-notice-error { background: #fdf0ef; border-color: var(--drkf-err); color: #5f1612; }
#drkf .drkf-notice-error ul { margin: 6px 0 0 20px; padding: 0; }
#drkf .drkf-notice-error li { margin: 2px 0; }
#drkf .drkf-notice-big { text-align: center; padding: 36px 28px; border-left: 0; border-top: 5px solid var(--drkf-accent); background: var(--drkf-accent-soft); color: var(--drkf-text); }
#drkf .drkf-notice-big h3 { font-size: 26px; margin: 10px 0 10px; color: var(--drkf-accent); }
#drkf .drkf-notice-big p { max-width: 520px; margin: 0 auto 8px; }
#drkf .drkf-notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--drkf-accent); color: #fff; font-size: 28px; line-height: 1; }

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld. */
#drkf .drkf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
	#drkf { font-size: 15px; }
	#drkf .drkf-row > .drkf-field { flex: 1 1 100%; }
}