/*
 * CTA-Bausteine in den Beiträgen von bkv-budget.de.
 * Farben aus der Seite /ueber-uns/ (bkvu-*), Schrift vom Theme.
 */

.w24bbc {
	--w24bbc-blau: #0056b3;
	--w24bbc-blau-dunkel: #00427f;
	--w24bbc-kicker: #00739a;
	--w24bbc-ink: #1f2d3d;
	--w24bbc-soft: #4d5d6e;
	--w24bbc-linie: #cfe2f5;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	margin: 40px 0;
	padding: 26px 30px;
	background: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%);
	border: 1px solid var(--w24bbc-linie);
	border-left: 5px solid var(--w24bbc-blau);
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(20, 40, 60, 0.06);
	color: var(--w24bbc-ink);
	line-height: 1.6;
	box-sizing: border-box;
}

.w24bbc *,
.w24bbc *::before,
.w24bbc *::after {
	box-sizing: border-box;
}

.w24bbc p {
	margin: 0;
	padding: 0;
}

.w24bbc .w24bbc__inhalt {
	flex: 1 1 340px;
	min-width: 0;
}

.w24bbc .w24bbc__kicker {
	margin-bottom: 4px;
	color: var(--w24bbc-kicker);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.w24bbc .w24bbc__titel {
	margin-bottom: 6px;
	color: var(--w24bbc-blau);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.w24bbc .w24bbc__text {
	color: var(--w24bbc-soft);
	font-size: 15.5px;
}

.w24bbc .w24bbc__aktion {
	flex: 0 0 auto;
}

/* Knopf – als Link und als Formularknopf gleich. */
.w24bbc .w24bbc__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	margin: 0;
	padding: 13px 26px;
	border: 0;
	border-radius: 100px;
	background: var(--w24bbc-blau);
	box-shadow: 0 8px 20px rgba(0, 86, 179, 0.25);
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.w24bbc .w24bbc__knopf::after {
	content: "→";
	font-weight: 700;
}

.w24bbc .w24bbc__knopf:hover,
.w24bbc .w24bbc__knopf:focus-visible {
	background: var(--w24bbc-blau-dunkel);
	box-shadow: 0 12px 26px rgba(0, 86, 179, 0.32);
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
}

.w24bbc .w24bbc__knopf:focus-visible {
	outline: 3px solid #7fb2e5;
	outline-offset: 2px;
}

/* Mitarbeiter-Rechner: kräftige Fläche, damit das Eingabefeld als Werkzeug auffällt. */
.w24bbc--widget {
	background: linear-gradient(135deg, #003f85 0%, #0056b3 55%, #00a6d6 100%);
	border: 0;
	box-shadow: 0 14px 34px rgba(0, 63, 133, 0.22);
	color: #ffffff;
}

.w24bbc--widget .w24bbc__kicker {
	color: rgba(255, 255, 255, 0.85);
}

.w24bbc--widget .w24bbc__titel {
	color: #ffffff;
}

.w24bbc--widget .w24bbc__text {
	color: rgba(255, 255, 255, 0.92);
}

.w24bbc .w24bbc__form {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.w24bbc .w24bbc__label {
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
}

.w24bbc .w24bbc__feld {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.w24bbc .w24bbc__zahl {
	width: 150px;
	height: 50px;
	margin: 0;
	padding: 0 18px;
	border: 2px solid transparent;
	border-radius: 100px;
	background: #ffffff;
	box-shadow: none;
	color: var(--w24bbc-ink);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
}

.w24bbc .w24bbc__zahl::placeholder {
	color: #8a97a5;
	font-weight: 400;
}

.w24bbc .w24bbc__zahl:focus {
	border-color: #7fb2e5;
	outline: none;
}

.w24bbc--widget .w24bbc__knopf {
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 30, 70, 0.25);
	color: var(--w24bbc-blau);
}

.w24bbc--widget .w24bbc__knopf:hover,
.w24bbc--widget .w24bbc__knopf:focus-visible {
	background: #eef6ff;
	color: var(--w24bbc-blau-dunkel);
}

@media (max-width: 640px) {
	.w24bbc {
		padding: 22px 20px;
	}

	.w24bbc .w24bbc__inhalt {
		flex-basis: 100%;
	}

	.w24bbc .w24bbc__aktion,
	.w24bbc .w24bbc__form {
		flex-basis: 100%;
	}

	.w24bbc .w24bbc__aktion .w24bbc__knopf {
		width: 100%;
		white-space: normal;
	}

	.w24bbc .w24bbc__zahl {
		flex: 1 1 120px;
		width: auto;
	}

	.w24bbc .w24bbc__feld .w24bbc__knopf {
		flex: 1 1 160px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w24bbc .w24bbc__knopf {
		transition: none;
	}

	.w24bbc .w24bbc__knopf:hover,
	.w24bbc .w24bbc__knopf:focus-visible {
		transform: none;
	}
}

@media print {
	.w24bbc {
		display: none;
	}
}

/* Hinweis unter Beiträgen mit Steuer- oder Rechtsthemen – bewusst zurückhaltend, auch im Druck. */
.w24bbc-hinweis {
	margin: 36px 0;
	padding: 16px 20px;
	border: 1px solid #d9e2ec;
	border-left: 4px solid #8a97a5;
	border-radius: 10px;
	background: #f7f9fb;
	color: #4d5d6e;
	font-size: 14.5px;
	line-height: 1.6;
	box-sizing: border-box;
}

.w24bbc-hinweis p {
	margin: 0;
	padding: 0;
}

.w24bbc-hinweis strong {
	color: #1f2d3d;
}