/* EHNES CTA – Call-to-Action-Band. CI: Roboto, eckig, Blau/Weiß. */
.ec {
	--ec-accent: #0B55A0;
	--ec-accent-dark: #08427B;
	--ec-ink: #1C2530;
	--ec-muted: #5B6770;
	font-family: "Roboto", system-ui, sans-serif;
	/* 100% breit; Einfassung/Content-Breite übernimmt der Elementor-Container */
	width: 100%;
	box-sizing: border-box;
}
.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }

.ec__inner {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	padding: 48px 56px;
	background: #0B55A0;
}
.ec--center .ec__inner { flex-direction: column; text-align: center; gap: 26px; }

/* Hexagon-Motiv (dezent, rechts) */
.ec--hex .ec__inner::after {
	content: "";
	position: absolute;
	right: -40px; top: 50%;
	width: 260px; height: 260px;
	transform: translateY(-50%);
	background: var(--ws-hexpattern) center / contain no-repeat;
	opacity: .12;
	pointer-events: none;
}
.ec--center.ec--hex .ec__inner::after { right: -80px; }

.ec__text { position: relative; z-index: 1; min-width: 0; }
.ec__eyebrow {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
	font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ec-accent);
}
.ec__eyebrow svg { width: 16px; height: 16px; }
.ec__badge {
	display: inline-block; margin-right: 4px; padding: 3px 9px;
	background: var(--ec-accent); color: #fff;
	font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ec--invert .ec__badge { background: #fff; color: var(--ec-accent); }
.ec__title { margin: 0 0 10px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.18; font-weight: 700; color: var(--ec-ink); }
.ec__lead { margin: 0; max-width: 60ch; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ec-muted); }
.ec--center .ec__lead { margin-inline: auto; }

.ec__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; flex: none; }

.ec__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 15px 30px; border: 2px solid var(--ec-accent); border-radius: 0;
	background: var(--ec-accent); color: #fff; font: 600 15px/1 "Roboto", sans-serif; text-decoration: none; white-space: nowrap;
	transition: background .18s, border-color .18s, color .18s;
}
.ec__btn:hover { background: var(--ec-accent-dark); border-color: var(--ec-accent-dark); color: #fff; }
.ec__btn--sec { background: transparent; color: var(--ec-accent); }
.ec__btn--sec:hover { background: var(--ec-accent); color: #fff; }

/* ---------- Invertiert: blauer Grund, weiße Schrift (CI-Regel) ---------- */
.ec--invert .ec__eyebrow,
.ec--invert .ec__title { color: #fff; }
.ec--invert .ec__lead { color: rgba(255, 255, 255, .88); }
.ec--invert .ec__btn { background: #fff; border-color: #fff; color: var(--ec-accent); }
.ec--invert .ec__btn:hover { background: transparent; color: #fff; }
.ec--invert .ec__btn--sec { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.ec--invert .ec__btn--sec:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }

@media (max-width: 820px) {
	.ec__inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 24px; padding: 36px 28px; }
	.ec--center .ec__inner { align-items: center; }
}