/* ============================================================
   EUROPE-BRIDGE – Europa-Block zwischen Hero und Zahlen-Sektion.

   Zwei Spalten mit klarer Arbeitsteilung: links die Einordnung in der Sprache
   der Seite, rechts derselbe Gedanke in der ANDEREN Sprache plus der Weg dorthin.
   Die rechte Spalte ist optisch abgesetzt (heller Grund + Orange), damit sie
   peripher als eigenes Angebot gelesen wird und nicht als Fliesstext-Fortsetzung.

   Farbwahl: heller Blau-Tint (--bks-blue-050) statt Navy. Der Hero darueber ist
   blau, der Signpost in seinem Fuss und die Sprach-Leiste ganz oben sind Navy –
   ein viertes dunkles Feld direkt darunter haette den Seitenanfang zugemauert.
   Der Markenname traegt das Orange als TEXT (--accent-text auf hellem Grund, nicht
   --orange: auf Weiss faellt #e86a2a im Kontrast durch, siehe brand-signpost.css).

   Markup: bks_europe_bridge() in functions.php, eingebunden ueber
   patterns/europe-bridge.php.
   ============================================================ */

.bks-rd .europe-bridge {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: 48px;
	align-items: center;
}

/* KEINE Karte um den ganzen Block (Fassung 1 hatte eine). Grund (JD, 2026-08-22):
   Eine Karte bringt eigene Innenabstaende mit – der 2px-Strich des Kickers stand
   dadurch 40px weiter rechts als der Kicker der Sektion darueber/darunter, die
   vertikale Kante der Seite brach. Der Block sitzt jetzt direkt im .wrap-Raster,
   der Kicker fluchtet mit allen anderen Sektionen. */
.bks-rd .europe-bridge__col { padding: 0; }

.bks-rd .europe-bridge__kicker { color: var(--bks-blue, #006699); margin: 0 0 10px; }

.bks-rd .europe-bridge__head {
	font-size: var(--fs-2, 30px);
	color: var(--bks-blue, #006699);
	margin: 0 0 14px;
	text-wrap: balance;
}

.bks-rd .europe-bridge__body {
	margin: 0;
	color: var(--grey-700, #46525c);
	font-size: var(--fs-4, 17px);
	line-height: 1.6;
	max-width: 46ch;
}

/* Rechte Spalte: das Angebot in der anderen Sprache. */
/* Rechte Spalte: das Angebot in der anderen Sprache, als weisses Feld auf dem
   grauen Buehnengrund der Sektion. Weiss statt Blau-Tint, weil die Sektion selbst
   jetzt --stage traegt; zwei getoente Flaechen uebereinander wirkten trueb. */
.bks-rd .europe-bridge__col--other {
	background: #fff;
	border-radius: var(--r-lg, 10px);
	box-shadow: var(--shadow-2, 0 2px 14px rgba(6, 42, 66, 0.10));
	padding: 30px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}

.bks-rd .europe-bridge__beacon {
	margin: 0;
	font-size: var(--fs-4, 17px);
	line-height: 1.55;
	color: var(--ink, #1c2a33);
	/* Der fremdsprachige Satz ist der eigentliche Koeder – etwas kraeftiger als
	   Fliesstext, aber KEINE Ueberschrift: er soll gelesen, nicht gescannt werden. */
	font-weight: 500;
}

.bks-rd .europe-bridge__cta {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: var(--fs-3, 20px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--accent-text, #b8470f);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	align-self: flex-start;
	transition: border-color 0.15s ease;
}

.bks-rd .europe-bridge__cta:hover,
.bks-rd .europe-bridge__cta:focus-visible {
	border-bottom-color: var(--accent-text, #b8470f);
}

/* EU-Flagge im CTA. Hoehe an die Schrift gekoppelt, damit sie bei jeder
   Schriftgroesse mitwaechst; `flex: none` verhindert, dass sie beim Umbruch der
   Zeile gestaucht wird. Leichter Rahmen, weil das Flaggenblau auf weissem Grund
   sonst randlos ausfranst. */
.bks-rd .europe-bridge__flag {
	flex: none;
	width: auto;
	height: 1em;
	align-self: center;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(6, 42, 66, 0.12);
}

.bks-rd .europe-bridge__arrow { transition: transform 0.15s ease; }
.bks-rd .europe-bridge__cta:hover .europe-bridge__arrow { transform: translateX(3px); }

@media (max-width: 860px) {
	.bks-rd .europe-bridge { grid-template-columns: 1fr; gap: 28px; }
	.bks-rd .europe-bridge__col--other { padding: 26px 24px; }
	.bks-rd .europe-bridge__body { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bks-rd .europe-bridge__arrow { transition: none; }
}