/* ==========================================================================
   BKS Brand — Logo-Lockup (Wortmarke + Trennstrich + Sprach-Subtext)
   Tokens stammen aus theme.json; hier mit Fallbacks.
   ========================================================================== */

/* TeX Gyre Heros — freier Helvetica-Klon (GUST Font License), selbst gehostet für
   geräteübergreifend identische Schrift. Auf Latein subgesettet (~21 KB/Schnitt).
   Nur 400 + 700 vorhanden → font-weight 600 (Überschriften) löst auf 700 auf. */
@font-face {
	font-family: 'TeX Gyre Heros';
	src: url('../fonts/texgyreheros-regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'TeX Gyre Heros';
	src: url('../fonts/texgyreheros-italic.woff2') format('woff2');
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'TeX Gyre Heros';
	src: url('../fonts/texgyreheros-bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'TeX Gyre Heros';
	src: url('../fonts/texgyreheros-bolditalic.woff2') format('woff2');
	font-weight: 700; font-style: italic; font-display: swap;
}

.bks-lockup {
	--bks-blue: #006699;
	--divider: #2a2a2a;
	--text-black: #231f20;
	--mark-h: 50px;   /* Höhe der Wortmarke */
	--sub: 21px;      /* Subtext-Schriftgröße */

	display: inline-flex;
	align-items: center;
	line-height: 1;
	text-decoration: none;
	color: inherit;
}

.bks-lockup__mark {
	color: var(--bks-blue);
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.bks-lockup__mark svg { height: var(--mark-h); width: auto; display: block; overflow: visible; }
/* overflow:visible — die Wortmarken-viewBox ist bewusst glyph-eng (Gap-Symmetrie, s. Spec);
   ohne visible schneidet das Raster die Antialiasing-Kante der S-Rundung am Boxrand an
   („leicht angeschnitten"-Eindruck bei kleinen Größen/Zoomstufen). Geometrie unverändert. */

.bks-lockup__divider {
	width: 2px;
	background: var(--divider);
	border-radius: 1px;
	height: calc(var(--mark-h) + 12px);
	margin: 0 16px;
	flex: 0 0 auto;
}

/* Beide Subtexte liegen gestapelt (gleiche Zelle) → Breite = max(DE,EN), kein Layout-Sprung beim Wechsel.
   translateY rückt den Block leicht nach unten → Baseline Zeile 2 landet exakt auf Glyph-Unten
   (die Line-Box-Zentrierung lässt die Baseline sonst minimal zu hoch schweben). */
.bks-lockup__subwrap { position: relative; display: grid; transform: translateY(calc(var(--sub) * 0.115)); }
.bks-lockup__sub {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;   /* Zeilen auf TEXTbreite (nicht auf Container gestreckt) →
	                              der Cursor-Sweep kann die echte Textkante je Sprache treffen. */
	gap: 0;
	font-family: 'TeX Gyre Heros', Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: var(--sub);
	line-height: 1.16;
	white-space: nowrap;
	color: var(--text-black);
	opacity: 0;
	visibility: hidden;
}
/* aktiven Subtext zeigen */
.bks-lockup[data-variant="de"] .bks-lockup__sub[data-lang="de"],
.bks-lockup[data-variant="en"] .bks-lockup__sub[data-lang="en"] {
	opacity: 1;
	visibility: visible;
}

/* Größen-Variante: kompakt (Sticky-Header) */
.bks-lockup--sm { --mark-h: 30px; --sub: 13px; }
.bks-lockup--sm .bks-lockup__divider { margin: 0 11px; }

/* Invertiert (auf BKS-Blau / dunkel) */
.bks-lockup--inv .bks-lockup__mark { color: #fff; }
.bks-lockup--inv .bks-lockup__divider { background: rgba(255, 255, 255, 0.45); }
.bks-lockup--inv .bks-lockup__sub { color: #fff; }

/* Top-Bar (Social-Buttons + Sprach-Flagge) ausblenden → Logo rückt nach oben.
   Hinweis: Sprachumschalter kommt später in die eigene Plattform-Top-Bar. */
.gb-container-4c64712b { display: none !important; }

/* Header kompakter (weniger Luft oben/unten). Asymmetrisch (30/14 statt 22/22):
   Logo/Menü sitzen sonst optisch ~8px zu hoch im 120px-Band → Luft unter dem Header
   (Richtung Hero) größer als drüber (Richtung Top-Bar). Mehr Padding oben, weniger
   unten zentriert den Inhalt mittig zwischen Top-Bar und Hero; Bandhöhe bleibt 120px. */
.inside-header { padding-top: 30px !important; padding-bottom: 14px !important; }

/* Header-Lockup: „BKS" absolut nach links → Trennstrich IMMER bündig mit der Content-Kante.
   Die Wortmarke skaliert mit dem verfügbaren Gutter (so groß wie möglich, immer bündig). */
.bks-site-logo .bks-lockup {
	position: relative;
	--mark-h: 30px;  /* Fallback unter dem Breakpoint */
	--sub: 13px;
}
.bks-site-logo .bks-lockup__divider { margin: 0 16px; height: calc(var(--mark-h) + 18px); }

/* Kompaktmodus: der Header zeigt nur BKS | (+ Menü). Der Lang-Subtext wird aus dem
   Fluss genommen (absolut, direkt hinter „BKS |"). Die Zustandsmaschine in
   bks-brand.js (LEER / SUB / MENÜ) steuert per clip-path, was der Cursor zeichnet. */
.bks-site-logo .bks-lockup__subwrap {
	position: absolute;
	left: 100%;          /* rechte Kante von „BKS |" → 16px hinter dem Trennstrich */
	top: 0;
	height: 100%;
	margin: 0;
	align-content: center;
	/* Optisch mittig zu „BKS": +0.115 wirkte zu tief, -0.13 zu hoch → Mittelwert,
	   minimal über der geometrischen Mitte (kompensiert Unterlängen/Leading). */
	transform: translateY(calc(var(--sub) * -0.04));
	/* Klickbar machen: der ganze Lockup (BKS | + Subtext) verlinkt auf die Startseite.
	   Der Subtext-Block sitzt im Freiraum zwischen „BKS |" und dem Menü (~80px Abstand,
	   verifiziert) → blockiert keine Menüpunkte. */
	pointer-events: auto;
}
/* Desktop-Lockup: beide Subtexte stets opacity-sichtbar; Sichtbarkeit allein per
   clip-path (gestapelt → Cursor-Replace beim Sprachwechsel). Default: versteckt. */
.bks-site-logo .bks-lockup__sub {
	opacity: 1 !important;
	visibility: visible !important;
	clip-path: inset(-50% 100% -50% 0);
}
/* Aktiver Subtext im Header IMMER sichtbar (Userwunsch: Subtext verschwindet nicht mehr). */
.bks-site-logo .bks-lockup[data-variant="de"] .bks-lockup__sub[data-lang="de"],
.bks-site-logo .bks-lockup[data-variant="en"] .bks-lockup__sub[data-lang="en"] {
	clip-path: inset(-50% 0 -50% 0);
}
/* Nur beim Sprachwechsel (Flaggenklick → html.bks-intro-armed): aktiver Subtext startet
   versteckt (höhere Spezifität als die „immer sichtbar"-Regel, ABER kein !important —
   damit das per-Frame-Clipping von bks-brand.js während der Animation gewinnt und der
   Subtext SYNCHRON mit dem Cursor aufgedeckt wird, statt am Ende zu „poppen"). */
html.bks-intro-armed .bks-site-logo .bks-lockup[data-variant="de"] .bks-lockup__sub[data-lang="de"],
html.bks-intro-armed .bks-site-logo .bks-lockup[data-variant="en"] .bks-lockup__sub[data-lang="en"] {
	clip-path: inset(-50% 100% -50% 0);
}
/* Das Menü ist IMMER sofort sichtbar — nie von der Lade-Intro versteckt (Userwunsch).
   Die Intro (html.bks-intro-armed) animiert nur noch den Logo-Subtext, nicht das Menü. */

@media (min-width: 1360px) {
	/* BKS bündig zur Body-Content-Spalte: linke Kante von „BKS" = linke Kante des
	   Body-Texts (Content-Box, nach dem 20px-Container-Padding). So rahmt der Header-
	   Inhalt (BKS … Menü) exakt die Body-Spalte — symmetrisch zur rechten Menükante. */
	.bks-site-logo .bks-lockup { --mark-h: 38px; --sub: 20px; }
}

/* ── Marken-Sweep ──────────────────────────────────────────────────────────
   Der Trennstrich fährt als Cursor nach rechts und zeichnet NUR den Logo-Subtext
   (bks-brand.js setzt transform + clip-path je Frame). Das Menü ist nicht beteiligt. */
.bks-lockup__divider { will-change: transform; }

/* Der DE/EU-Flaggen-Switcher sitzt jetzt in der Plattform-Top-Bar (<bks-header>,
   §10a) mit eigenem Shadow-DOM-CSS; das frühere top-right .bks-langswitch ist
   entfallen. bks-brand.js animiert das Lockup über bks-lang-hover/-change-Events. */

/* ── Hero-Karte: Canvas-Hintergrund auf der Startseite ─────────────────────
   bks-hero-map.js hängt das Canvas in den Hero-Block und setzt .bks-hero-map-host.
   Reichstag-Bild raus, BKS-Blau als Grund; Canvas zeichnet das Netz darüber
   (transparent), Hero-Inhalt (Claim/CTA) liegt darüber. */
.bks-hero-map-host {
	position: relative;
	background-image: none !important;
	background-color: var(--bks-blue, #006699) !important;
}
.bks-hero-map-host > .bks-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
}
/* ── Sticky Plattform-Top-Bar (Konsistenz mit der Datenplattform) ──────────
   Die <bks-header>-Bar bleibt oben kleben; der GP-Header (Lockup + Menü) scrollt
   weg. bks-sticky-nav.js blendet beim Scrollen ein Chevron ein, das das echte
   #site-navigation als Leiste unter die Bar pinnt. Desktop-only. */
bks-header { display: block; }
@media (min-width: 769px) {
	bks-header { position: sticky; top: 0; z-index: 1000; }
}
/* Mobile: GPs eigener Mobile-Header (Lockup + Hamburger) ist sticky — die
   Plattform-Bar NICHT zusätzlich pinnen (sonst zwei gestapelte Sticky-Leisten). */
@media (max-width: 768px) {
	bks-header { position: static; }
}
/* position:sticky-Reparatur: das Slideout-Menü (offside) setzt am <body>
   overflow-x:hidden → das macht den Body zum Scroll-Container und bricht sticky
   seiner Kinder. overflow-x:clip clippt horizontal identisch, erzeugt aber KEINEN
   Scroll-Container → sticky funktioniert wieder. Höhere Spezifität schlägt offside. */
body.offside-js--init { overflow-x: clip; }
/* Windows/klassische Scrollbars: Platz dauerhaft reservieren — sonst springt das
   Layout (inkl. Lockup) horizontal, wenn die Scrollbar beim Laden/Seitenwechsel
   erscheint. macOS-Overlay-Scrollbars sind davon unberührt. */
html { scrollbar-gutter: stable; }

/* Beim Scrollen fährt auf Hover der KOMPLETTE GP-Header (#masthead = Logo + Menü,
   an gewohnter Stelle) unter der gepinnten Bar wieder aus. Versteckt sitzt er per
   translateY(-100%) hinter der Bar; bks-sticky-nav.js setzt .bks-navopen bei Hover.
   bks-sticky-nav.js hält per Platzhalter den Fluss (kein Sprung beim Fixieren). */
@media (min-width: 769px) {
	html.bks-scrolled #masthead {
		position: fixed;
		top: var(--bks-topbar-h, 49px);
		left: 0;
		right: 0;
		z-index: 999;
		transform: translateY(-100%);
		transition: transform 0.26s ease;
		will-change: transform;
	}
	html.bks-scrolled.bks-navopen #masthead {
		transform: translateY(0);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
	}

	/* Dezenter Hinweis-Pfeil mittig unter der Bar (nur Cue — Trigger ist Hover). */
	.bks-navhint {
		position: fixed;
		top: var(--bks-topbar-h, 49px);
		left: 50%;
		transform: translateX(-50%);
		z-index: 1001;
		display: none;
		width: 40px;
		height: 15px;
		background: var(--bks-blue, #006699);
		border-radius: 0 0 9px 9px;
		pointer-events: none;
	}
	.bks-navhint::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 3px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid #fff;
	}
	html.bks-scrolled .bks-navhint { display: block; }
	html.bks-scrolled.bks-navopen .bks-navhint { display: none; }

	/* Touch-Tablets: Pfeil ist bedienbar (Tap-Toggle). Größeres, unsichtbares Tap-Ziel
	   nach unten/seitlich, ohne die Optik zu ändern; Fokusring für Tastatur. */
	.bks-navhint.is-tappable { pointer-events: auto; cursor: pointer; }
	.bks-navhint.is-tappable::before {
		content: "";
		position: absolute;
		left: -16px; right: -16px; top: -4px; bottom: -30px;
	}
	.bks-navhint.is-tappable:focus-visible { outline: 3px solid rgba(232, 106, 42, 0.55); outline-offset: 3px; }
}

.bks-hero-map-host > *:not(.bks-hero-canvas) {
	position: relative;
	z-index: 1;
}
/* Claim-Card leicht transparent → das Netz scheint dahinter durch; Backdrop-Blur
   hält den Text trotzdem ruhig lesbar. bks-hero-map.js markiert die Card automatisch. */
.bks-hero-map-host .bks-hero-card {
	background-color: rgba(255, 255, 255, 0.82) !important;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* ── Marken-Konsistenz: Inhalts-Links + generische Buttons (theme.json-Token) ──
   Audit (2026-06-05): Helvetica + Überschriften sind schon site-weit BKS-blau;
   einzige Abweichung waren Links/Buttons in GPs ausgewaschenem #5c7a99 (--accent).
   Hier markenkonform auf BKS-Blau (theme.json-Token `--wp--preset--color--bks-blue`),
   Hover = Accent-Text-Orange #B8470F (AA ≥4.5:1, §6/§9). Die GenerateBlocks-Buttons
   (.gb-button) und Header/Hero-CTAs bleiben unangetastet.
   ENTSCHEIDUNG OFFEN (Default = A): A = Links/Buttons BKS-Blau (kohärent, gewählt);
   B = Akzent-Orange. Umstellen = die zwei Farbwerte hier tauschen. */
/* NUR Fließtext-Links (in Absätzen/Listen) markenkonform blau — damit Card-Titel,
   Button- und Block-Links (z. B. die News-Kästen) NICHT betroffen sind. */
.entry-content p a,
.entry-content li a {
	color: var(--wp--preset--color--bks-blue, #006699);
	text-decoration-color: rgba(0, 102, 153, 0.4);
}
.entry-content p a:hover,
.entry-content p a:focus,
.entry-content li a:hover,
.entry-content li a:focus {
	color: var(--wp--preset--color--bks-accent-text, #B8470F);
}
/* Generische WP-/GP-Buttons (NICHT die GenerateBlocks- oder Header-CTAs). */
.entry-content .wp-block-button__link:not(.has-background),
.entry-content .button:not([class*="gb-button"]) {
	background-color: var(--wp--preset--color--bks-blue, #006699);
	color: #fff;
}
.entry-content .wp-block-button__link:not(.has-background):hover,
.entry-content .wp-block-button__link:not(.has-background):focus,
.entry-content .button:not([class*="gb-button"]):hover,
.entry-content .button:not([class*="gb-button"]):focus {
	background-color: var(--wp--preset--color--bks-accent-text, #B8470F);
	color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   CD-Korrektur — Abgleich mit der Corporate-Design-Suite (CI/bks-corporate-
   design-suite.html). Behebt GeneratePress-Defaults, die vom CD abweichen:
   hellblauer Hintergrund, weiße Überschriften auf Hell, Faux-Bold, Menü-Umbruch.
   CD-Palette: #006699 · #231F20 (Text) · #E86A2A (Akzent) · #2A2A2A (Strich) ·
   #F5F5F5/#FFFFFF (Hintergrund — KEIN Hellblau). Schrift: Helvetica (Neue).
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) Font: echter Helvetica-(Neue)-Stack statt 400-only-Webfont (Faux-Bold weg).
   Neue zuerst → auf macOS echte Medium/Semibold-Schnitte; Windows-Fallback Arial. */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.main-navigation a, .widget-title, .entry-title {
	font-family: 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 2) Hintergrund: GP-Hellblau (#f2f7fa) → CD-Weiß. */
body { background-color: #ffffff !important; }
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .comments-area,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header { background-color: #ffffff !important; }

/* 3) Überschriften: weiß-auf-hell (GP-Default) → CD-Blau; Gewicht etwas leichter
   (600 wirkte zu fett). Wortmarke bleibt 700 (SVG), Fließtext-Bold bleibt 700. */
.page-header h1, .entry-header h1, .entry-title, h1.entry-title {
	color: #006699 !important;
}
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .page-header h1, .entry-title {
	font-weight: 500;
}

/* 4) Navigation kompakter — sonst brechen die 8 EN-Menüpunkte auf zwei Zeilen um.
   18px/600 + 30px Padding → 15px/500 + 16px Padding (passt einzeilig). */
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-item > a,
.main-navigation .menu-bar-items .menu-bar-item > a {
	font-size: 15px;
	/* TeX Gyre Heros hat kein Medium (500) → 500 fiel auf 400 zurück = blass.
	   600 rendert als echter Bold-700-Schnitt → Menü hat wieder Präsenz. */
	font-weight: 600;
	padding-left: 16px;
	padding-right: 16px;
}
/* Submenu-Items dürfen etwas mehr Luft haben (vertikal gelistet). */
.main-navigation .main-nav ul ul li a { padding-left: 20px; padding-right: 20px; }

/* ── Dropdown als schwebende Karte ───────────────────────────────────────────
   GP-Default wirkte „nicht rund": scharfe Ecken, harter 1px-Schatten, transparente
   Box (weiß-auf-weiß), Einblenden erst nach 150ms Verzögerung, kein Slide. Jetzt:
   weiße Karte, weicher (blau getönter) Schatten, gerundet, sofortiges sanftes
   Ein-/Ausblenden mit leichtem Slide; Hover-Tint auf den Unterpunkten. */
.main-navigation .main-nav ul ul.sub-menu {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 16px 38px rgba(0, 52, 80, 0.18), 0 3px 10px rgba(0, 52, 80, 0.08);
	padding: 8px 0;
	margin-top: 8px;                 /* etwas Abstand zur Navi-Leiste (klebte vorher direkt dran) */
	transform: translateY(-7px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Transparente Brücke über die 8px-Lücke → Hover reißt beim Rübergehen nicht ab. */
.main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu::before {
	content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.main-navigation .main-nav ul li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation .main-nav ul li.menu-item-has-children:focus-within > ul.sub-menu {
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
/* Dropdown-Text bündig unter dem Oberpunkt-Text (beide 16px Einzug; kein Border-Versatz). */
.main-navigation .main-nav ul ul.sub-menu li a {
	padding: 9px 16px;
	transition: background-color 0.12s ease, color 0.12s ease;
}
.main-navigation .main-nav ul ul.sub-menu li a:hover,
.main-navigation .main-nav ul ul.sub-menu li a:focus {
	background-color: rgba(0, 102, 153, 0.07);
	color: #006699;
}

/* ══════════════════════════════════════════════════════════════════════════
   GRAFIK-STRUKTUR / Design-System — gibt der weißen Fläche „Halt".
   Konzept: institutionell mit „Daten-Netz"-Unterton (Echo der Hero-Karte/Plattform).
   Bühne = CD-Hellgrau + sehr feines blaues Datengitter · Content = weiße Karten ·
   Überschriften mit kurzem Akzent-Strich (Divider-Motiv der Marke).
   ══════════════════════════════════════════════════════════════════════════ */

/* — Bühne: ruhiger, neutraler Grund OHNE Muster (Quadrat-Gitter entfernt auf
   Wunsch). Halt kommt jetzt vom Blau-Band-Header + den weißen Content-Flächen +
   den Akzent-Strichen. Leichter Grauton, damit der weiße Content sich abhebt. — */
/* Bühne = ECHTES Neutralgrau (kein Blaustich!). Wichtig: #eef1f4 war selbst
   blaustichig (B>G>R) → das war der „hellblaue Hintergrund". #efefef ist r=g=b,
   also komplett neutral; weiße Content-Karten heben sich per Schatten ab. */
body {
	background-color: #efefef !important;
	background-image: none !important;
}
.site.grid-container,
#page {
	background-color: #efefef !important;
}
/* „Read more"-Textbutton hatte einen blaustichigen Hintergrund (GP --accent-2 @0.2)
   → neutraler, unaufdringlicher Grauton. */
.gb-button-d11a403d {
	background-color: rgba(0, 0, 0, 0.04) !important;
}

/* — Content als ruhige weiße Fläche auf dem Grund (dezenter Schatten, kein Muster) — */
.separate-containers .inside-article {
	background-color: #ffffff !important;
	box-shadow: 0 1px 3px rgba(13, 33, 55, 0.06);
	border-radius: 3px;
}

/* — Stray-Hellblau neutralisieren (#f2f7fa-/#eaf5fb-Container, GP-Hover-Hellblau) — */
.gb-container-03a6e1ba,
.gb-container-547ab14a { background-color: #ffffff !important; }
:root { --judithkoblau: #eef1f4; }

/* — Überschriften-Rhythmus: kurzer BKS-blauer Akzent-Strich über jeder Content-H2.
   Greift das Divider-Motiv der Marke auf, gibt Editorial-Takt. — */
.entry-content h2 {
	position: relative;
	margin-top: 2.1em;
	padding-top: 0.6em;
}
.entry-content h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 3px;
	background: #006699;
	border-radius: 1px;
}

/* — Page-Titel etwas präsenter (Header-Wirkung statt schwebender Text) — */
.page-header .entry-title,
.entry-header .entry-title,
.inside-article > .entry-header .entry-title {
	font-size: 34px;
	font-weight: 500;
	line-height: 1.2;
}

/* — Institutioneller Seiten-Banner: vom schwebenden 1200px-Kasten zum full-bleed
   Blau-Band. Geteiltes GP-Element „Global Page Headers" (.gb-container-141fe6bb,
   auf ALLEN Alt-Seiten gleich). Titel bleibt weiß (auf Blau lesbar), das Band geht
   randlos über die volle Breite → wirkt als verankerter Header, nicht als Box.
   (body hat overflow-x:clip → 100vw erzeugt keinen Horizontal-Scroll.) */
.gb-container-141fe6bb {
	background-color: #006699 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: 0 !important;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
	padding-left: max(20px, calc(50vw - 600px)) !important;
	padding-right: max(20px, calc(50vw - 600px)) !important;
	box-sizing: border-box;
}
.gb-container-141fe6bb .gb-headline,
.gb-container-141fe6bb h1 {
	color: #ffffff !important;
	font-weight: 500 !important;
}

/* Neue Seiten (NPL Market, Membership, …) rendern das page-hero-Element NICHT
   (kein Beitragsbild) → sie haben nur die Standard-`.entry-header` mit blauem
   Titel. Diese verwandle ich in dasselbe full-bleed Blau-Band, damit ALLE Seiten
   denselben Header haben. Institutionelle Seiten haben keine `.entry-header` im
   Artikel (page-hero ersetzt sie) → kein Doppel-Band. */
.page .inside-article > .entry-header {
	background-color: #006699;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 34px;
	padding: 28px max(20px, calc(50vw - 600px)) 26px;
	box-sizing: border-box;
}
.page .inside-article > .entry-header .entry-title {
	color: #ffffff !important;
	font-weight: 500 !important;
	font-size: 34px;
}
/* Card-Oberkante bündig zum Band — für ALLE Seiten gleich (institutionelle hatten
   76px Card-Padding über dem Band, neue nur 20px → der vom User bemerkte DE/EN-
   Abstands-Unterschied). Padding-Top + Top-Radius überall weg, Band sitzt einheitlich. */
.page .inside-article {
	padding-top: 0 !important;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/* Auch der innere Content-Wrapper der institutionellen Seiten darf oben keinen
   Extra-Abstand übers Band schieben. */
.page .inside-article > .entry-content { margin-top: 0; }
.page .inside-article > .entry-content > .gb-container-141fe6bb:first-child { margin-top: 0 !important; }

/* Der vom User bemerkte DE/EN-„Abstand zum Menü": Seiten mit Beitragsbild rendern
   ein page-hero-Element (.gb-container-88ff49c1) als UNSICHTBARES ~50px-Cover
   (Bg-Bild opacity:0) zwischen Header und Content → leere Lücke. Auf SEITEN
   ausblenden (der echte Titel kommt aus dem Band 141fe6bb); auf BEITRÄGEN bleibt
   es das sichtbare Bild-Header (opacity 0.6) erhalten. */
body.page .gb-container-88ff49c1 {
	display: none !important;
}

/* — Banner-Höhe + Titelgröße DE/EN vereinheitlichen —
   Institutionelles GP-Band (141fe6bb, Titel 25.6px → 113px) vs neues CSS-Band
   (.entry-header, Titel 34px → 136px) waren unterschiedlich groß. Beide auf
   Titel 30px + feste Höhe 120px (vertikal zentriert) → identische Banner. */
.gb-container-141fe6bb .gb-headline-text,
.gb-container-141fe6bb .gb-headline,
.gb-container-141fe6bb h1,
.page .inside-article > .entry-header .entry-title {
	font-size: 30px !important;
	line-height: 1.2 !important;
}
.gb-container-141fe6bb,
.page .inside-article > .entry-header {
	min-height: 120px !important;
	box-sizing: border-box;
}
.page .inside-article > .entry-header {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Audit-Pass 2026-06-06 (10-Brillen-Review): Button-Hygiene, A11y-Kontraste,
   Lesbarkeit, Mobile-Reflow, Reduced-Motion. Jeder Block nennt die Brille.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buttons nicht in VERSALIEN — GP-Customizer erzwingt uppercase, das widerspricht
   der zugänglichen policy-English-Stimme („SUBSCRIBE TO THE EUROPEAN NPL BRIEFING").
   GenerateBlocks-Buttons (.gb-button) sind nicht betroffen. (Audit: Typografie) */
.entry-content .wp-block-button__link,
.wp-block-button__link,
button:not(.menu-toggle):not(.slideout-toggle),
input[type="submit"] {
	text-transform: none !important;
	letter-spacing: normal;
}

/* Outline-Buttons (z. B. „Contact the office"): die generische Button-Regel oben
   füllt sie blau → mit blauem Outline-Text war es Blau-auf-Blau (unlesbar). Hier
   explizit transparenter Grund + blauer Rahmen/Text, Hover füllt blau. (Audit: CD/Conversion) */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid #006699;
	color: #006699;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: #006699;
	border-color: #006699;
	color: #fff;
}

/* GP-„Back to top"-Button war #2e3d4d (GP-Fremdblau, nicht im BKS-System) → Markenblau.
   (Audit: CD-Konsistenz) */
a.generate-back-to-top {
	background-color: #006699;
}
a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
	background-color: #00557f;
}

/* WCAG-AA-Kontrast: GP-Submenu-Links + Artikel-Meta laufen auf #888888 (3.54:1) bzw.
   #5c7a99 (4.47:1) — unter 4.5:1. Auf #476280 (≥4.5:1 auf Weiß). (Audit: A11y) */
.main-navigation .main-nav ul ul li a,
.entry-meta,
.entry-meta a {
	color: #476280;
}

/* Lesbarkeit: Fließtext lief bis ~120 Zeichen/Zeile. Direkte Text-Kinder auf ~72ch
   begrenzen — Bänder, GB-Container und Tabellen bleiben full-width. (Audit: Typografie) */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote {
	max-width: 72ch;
}

/* Hero-Hintergrund: der GenerateBlocks-Container lädt ein 1,74 MB PNG **cross-origin
   von bks-ev.de** (Produktion!) — LCP-Last + Datenabfluss an den Live-Server. Die
   Canvas-Karte verdeckt das Bild ohnehin (auch bei reduced-motion → statischer Canvas).
   Auf ein leichtes lokales Bild (~10 KB) umbiegen: kein Cross-Origin, kein Prod-Leak,
   findHero() erkennt den Container weiter am Hintergrundbild. (Audit: Performance) */
.gb-container-a7e46c64 {
	background-image: url(../img/hero-bg.jpg) !important;
}

/* Reduced-Motion: auch die Sticky-Header-Reveal-Transition respektieren. (Audit: A11y) */
@media (prefers-reduced-motion: reduce) {
	#masthead { transition: none !important; }
}

/* Mobile-Reflow (Audit: Responsive + A11y):
   – GP-Customizer setzt .inside-header auf 100px Padding ringsum → Header gequetscht.
   – Fließtext wurde rechts abgeschnitten (Full-Bleed-Band bläht die inside-article-
     Breite, site-content-Padding clippt) → entry-content explizit 20px Padding.
   – Lange Titel („Why the European NPL Alliance") liefen aus dem Band → 22px + Umbruch. */
@media (max-width: 768px) {
	.inside-header {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.page .inside-article > .entry-content {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}
@media (max-width: 600px) {
	.gb-container-141fe6bb .gb-headline-text,
	.gb-container-141fe6bb h1,
	.page .inside-article > .entry-header .entry-title {
		font-size: 22px !important;
		overflow-wrap: break-word;
		word-break: break-word;
	}
}