/**
 * Shared design tokens and layout primitives.
 *
 * Migrated verbatim from the site wide WPCode snippet. Rules are unchanged so
 * that pages rendered through the widget library are visually identical to the
 * pages they replace. Once every page has been migrated the WPCode snippet is
 * removed and this file becomes the single source.
 *
 * @package FarbstoffeElements
 * @since   1.0.0
 */

/* ==========================================================================
   1. ROOT — design tokens and base
   ========================================================================== */

.fbi {
	--blue: #0066CC;
	--sky: #0B87D0;
	--cyan: #2EB0E7;
	--navy: #041853;
	--navy2: #042B6D;
	--ink: #182238;
	--mut: #4B586E;
	--line: #E2E9F3;
	--bg: #F6F9FD;

	font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.fbi * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.fbi img {
	max-width: 100%;
	display: block;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

.fbi h1,
.fbi h2,
.fbi h3,
.fbi .plex {
	font-family: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif;
}

/* H1 only ever appears inside the dark hero band. */
.fbi h1 {
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	max-width: 850px;
	margin-bottom: 8px;
	color: #fff !important;
}

.fbi h2 {
	font-size: clamp(25px, 3.1vw, 36px);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.18;
}

.fbi h2.dark {
	color: var(--navy) !important;
}

@keyframes fbiflow {

	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.fbi .ghead {
	display: inline-block;
	background: linear-gradient(90deg, #0066CC, #2EB0E7, #7B4DD8, #E0318A, #F5A623, #0066CC);
	background-size: 320% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #0066CC;
	animation: fbiflow 8s ease infinite;
}

.fbi .prose {
	margin-top: 20px;
}

.fbi .prose p:last-child {
	margin-bottom: 0;
}

.fbi .prose strong {
	color: var(--navy2);
	font-weight: 600;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.fbi .wrap {
	max-width: 1150px;
	margin: 0 auto;
	padding: 0 26px;
}

.fbi .sec {
	padding: 84px 0;
}

.fbi .sec.soft {
	background: var(--bg);
}

.fbi .center {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 50px;
}

.fbi .center .kicker {
	justify-content: center;
}

.fbi .center p {
	color: var(--mut);
	font-size: 15.7px;
	margin-top: 14px;
}

.fbi .duo {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 60px;
	align-items: center;
}

.fbi .cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

/* ==========================================================================
   4. HERO BAND AND BREADCRUMB
   ========================================================================== */

.fbi .hero {
	position: relative;
	color: #fff;
	overflow: hidden;
	background: linear-gradient(115deg, #03123E 0%, var(--navy2) 42%, #05489B 74%, var(--sky) 100%);
	padding: 42px 0 46px;
}

.fbi .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .10;
	background-image: repeating-linear-gradient(112deg, transparent 0 52px, rgba(46, 176, 231, .8) 52px 53px);
}

.fbi .hero::after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	right: -120px;
	top: -160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(46, 176, 231, .32), transparent 62%);
}

.fbi .hero .wrap {
	position: relative;
	z-index: 2;
}

.fbi .hsub {
	font-size: 15px;
	color: rgba(255, 255, 255, .88);
	max-width: 720px;
	line-height: 1.7;
}

.fbi .crumb {
	font-size: 13px;
	color: rgba(255, 255, 255, .66);
	margin-bottom: 16px;
}

.fbi .crumb a {
	color: rgba(255, 255, 255, .66);
	text-decoration: none;
	transition: .2s;
}

.fbi .crumb a:hover {
	color: #fff;
}

.fbi .crumb b {
	color: var(--cyan);
	font-weight: 500;
}

.fbi .crumb span {
	margin: 0 8px;
	opacity: .55;
}

/* ==========================================================================
   5. KICKER (section eyebrow)
   ========================================================================== */

.fbi .kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sky);
	margin-bottom: 16px;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.fbi .btn {
	display: inline-block;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 32px;
	border-radius: 10px;
	text-decoration: none;
	transition: .25s;
}

/* Solid variant, for use on dark backgrounds. */
.fbi .btn-w {
	background: #fff;
	color: var(--navy2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.fbi .btn-w:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .36);
	color: var(--blue);
}

/* Outline variant, for use on dark backgrounds. */
.fbi .btn-o {
	border: 1.5px solid rgba(255, 255, 255, .55);
	color: #fff;
}

.fbi .btn-o:hover {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: #fff;
}

.fbi .hbtns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
}

/* ==========================================================================
   7. CTA BLOCKS
   ========================================================================== */

.fbi .ctasec {
	padding: 0 0 92px;
}

.fbi .ctabox {
	position: relative;
	overflow: hidden;
	color: #fff;
	text-align: center;
	border-radius: 22px;
	padding: 66px 44px;
	background: linear-gradient(118deg, #03123E, var(--navy2) 48%, #05489B 82%, var(--sky));
}

.fbi .ctabox::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .11;
	background-image: repeating-linear-gradient(112deg, transparent 0 48px, rgba(46, 176, 231, .8) 48px 49px);
}

.fbi .ctabox > * {
	position: relative;
}

.fbi .ctabox h2 {
	color: #fff !important;
	margin: 0 auto 14px;
	max-width: 640px;
}

.fbi .ctabox p {
	color: rgba(255, 255, 255, .84);
	max-width: 560px;
	margin: 0 auto 30px;
	font-size: 15.7px;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 940px) {

	.fbi .duo {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.fbi .cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {

	.fbi .sec {
		padding: 58px 0;
	}

	.fbi .hero {
		padding: 34px 0 38px;
	}

	.fbi .cards {
		grid-template-columns: 1fr;
	}

	.fbi .btn,
	.fbi .hbtns .btn {
		width: 100%;
		text-align: center;
	}

	.fbi .ctabox {
		padding: 48px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fbi .ghead {
		animation: none;
	}
}