/* =========================================================
   wibutler – WPForms Styling
   Farben hier zentral anpassen:
   ========================================================= */
.wpforms-container {
	--wb-accent: #00E5A0;        /* wibutler Türkis */
	--wb-accent-hover: #00C98C;  /* etwas dunkler für Hover */
	--wb-text: #0A0F0C;          /* Textfarbe / Button-Schrift */
	--wb-muted: #E6E9E8;         /* Hintergrund Fortschrittsbalken */
	--wb-border: #C9CFCC;        /* Rahmen Radios/Checkboxen */
	--wb-max-width: 1200px;      /* Formularbreite – an Seitenlayout anpassen */
}

/* ---------- Ausrichtung: zentriert & begrenzte Breite ---------- */
.wpforms-container,
.wpforms-container-full {
	max-width: var(--wb-max-width) !important;
	margin: 40px auto !important;
	padding: 0 20px !important;
	box-sizing: border-box;
}

.wpforms-container .wpforms-form {
	width: 100%;
}

/* ---------- Fortschrittsbalken ---------- */
.wpforms-container .wpforms-page-indicator {
	margin-bottom: 32px !important;
}

.wpforms-container .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
	background-color: var(--wb-muted) !important;
	border-radius: 20px !important;
	height: 12px !important;
	overflow: hidden;
}

.wpforms-container .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
	background-color: var(--wb-accent) !important;
	border-radius: 20px !important;
	height: 100% !important;
}

.wpforms-container .wpforms-page-indicator-steps {
	color: var(--wb-text) !important;
	font-size: 14px !important;
	margin-bottom: 8px !important;
	opacity: .7;
}

/* Variante "Kreise"/"Connector", falls im Formular eingestellt */
.wpforms-container .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number,
.wpforms-container .wpforms-page-indicator.connector .active .wpforms-page-indicator-page-number {
	background-color: var(--wb-accent) !important;
	color: var(--wb-text) !important;
}
.wpforms-container .wpforms-page-indicator.connector .active,
.wpforms-container .wpforms-page-indicator.connector .active .wpforms-page-indicator-page-triangle {
	background-color: var(--wb-accent) !important;
	border-top-color: var(--wb-accent) !important;
}

/* ---------- Felder & Beschriftungen ---------- */
.wpforms-container .wpforms-field {
	padding: 14px 0 !important;
}

.wpforms-container .wpforms-field-label {
	color: var(--wb-text) !important;
	font-weight: 700 !important;
	margin-bottom: 12px !important;
}

.wpforms-container .wpforms-field-label-inline {
	color: var(--wb-text) !important;
}

/* Optionen etwas luftiger */
.wpforms-container .wpforms-field-radio ul li,
.wpforms-container .wpforms-field-checkbox ul li {
	margin-right: 24px !important;
}

/* ---------- Radio-Buttons & Checkboxen ---------- */
.wpforms-container input[type="radio"],
.wpforms-container input[type="checkbox"] {
	accent-color: var(--wb-accent);
}

/* Für das "Modern"-Markup (eigene Kreise/Häkchen) */
.wpforms-container input[type="radio"]:checked::before,
.wpforms-container input[type="checkbox"]:checked::before {
	border-color: var(--wb-accent) !important;
	box-shadow: 0 0 0 1px var(--wb-accent), 0 1px 2px rgba(0,0,0,.15) !important;
}
.wpforms-container input[type="radio"]:checked::after {
	background-color: var(--wb-accent) !important;
	border-color: var(--wb-accent) !important;
}
.wpforms-container input[type="checkbox"]:checked::after {
	border-left-color: var(--wb-accent) !important;
	border-bottom-color: var(--wb-accent) !important;
}
.wpforms-container input[type="radio"]:focus,
.wpforms-container input[type="checkbox"]:focus {
	outline: 2px solid var(--wb-accent);
	outline-offset: 2px;
}

/* ---------- Textfelder ---------- */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="url"],
.wpforms-container select,
.wpforms-container textarea {
	border-radius: 8px !important;
	border-color: var(--wb-border) !important;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--wb-accent) !important;
	box-shadow: 0 0 0 1px var(--wb-accent) !important;
}

/* ---------- Buttons (Weiter / Zurück / Absenden) ---------- */
.wpforms-container .wpforms-page-button,
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	background-color: var(--wb-accent) !important;
	color: var(--wb-text) !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 12px 32px !important;
	height: auto !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	cursor: pointer;
	transition: background-color .2s ease;
}
.wpforms-container .wpforms-page-button:hover,
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
	background-color: var(--wb-accent-hover) !important;
}

/* "Zurück"-Button dezenter */
.wpforms-container .wpforms-page-prev {
	background-color: transparent !important;
	border: 2px solid var(--wb-accent) !important;
	color: var(--wb-text) !important;
}
.wpforms-container .wpforms-page-prev:hover {
	background-color: var(--wb-muted) !important;
}

.wpforms-container .wpforms-pagebreak-left,
.wpforms-container .wpforms-submit-container {
	padding-top: 16px !important;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
	.wpforms-container,
	.wpforms-container-full {
		padding: 0 16px !important;
		margin: 24px auto !important;
	}
	.wpforms-container .wpforms-field-radio ul li,
	.wpforms-container .wpforms-field-checkbox ul li {
		display: block !important;
		margin: 0 0 10px 0 !important;
	}
}

/* ---------- Bestätigungsmeldung nach dem Absenden ---------- */
.wpforms-confirmation-container-full,
.wpforms-confirmation-container,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	--wb-accent: #00E5A0;
	--wb-text: #0A0F0C;
	background-color: #E6FCF5 !important;   /* sehr helles Türkis */
	border: none !important;
	border-left: 6px solid var(--wb-accent) !important;
	border-radius: 8px !important;
	color: var(--wb-text) !important;
	padding: 24px 28px !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	max-width: 1200px;
	margin: 40px auto !important;
	box-sizing: border-box;
}
.wpforms-confirmation-container-full p,
.wpforms-confirmation-container p {
	color: var(--wb-text) !important;
	margin: 0 !important;
}