/* =========================================================================
   DITIB-NRW 2026 — components.css
   Karten, Buttons, Inputs, Chips, Sprachumschalter, Header/Footer, Stat-Band,
   Timeline, Vorstand/Region-Grids, Formulare, Consent-Karten.
   ========================================================================= */

/* ---------------------------------------------------------------- Buttons */
.btn,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;                 /* Touch-Target ≥44px */
	padding: .75rem 1.5rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: background-color var(--dur-base) var(--ease-standard),
		transform var(--dur-base) var(--ease-standard),
		box-shadow var(--dur-base) var(--ease-standard),
		border-color var(--dur-base) var(--ease-standard);
}

/* Primär: Petrol-700 Fläche, weiße Schrift (5.6:1) */
.btn--primary,
.wp-block-button:not(.is-style-outline):not(.is-style-cta) .wp-block-button__link {
	background: var(--wp--preset--color--petrol-700);
	color: #fff;
}
.btn--primary:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-cta) .wp-block-button__link:hover {
	background: var(--wp--preset--color--petrol-800);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
	color: #fff;
}
.btn--primary:active,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { transform: translateY(0); }

/* Sekundär / Outline */
.btn--secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--petrol-700);
	border-color: var(--wp--preset--color--petrol-700);
}
.btn--secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--petrol-50);
	color: var(--wp--preset--color--petrol-800);
	border-color: var(--wp--preset--color--petrol-800);
	transform: translateY(-1px);
}

/* CTA-Marken-Akzent (Rot, sparsam — max. 1/Sektion) */
.btn--cta,
.wp-block-button.is-style-cta .wp-block-button__link {
	background: var(--wp--preset--color--red-600);
	color: #fff;
}
.btn--cta:hover,
.wp-block-button.is-style-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--red-700);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
	color: #fff;
}

/* Auf dunklen Flächen: heller Outline-Button */
.hero .wp-block-button.is-style-outline .wp-block-button__link,
.feature-dark .wp-block-button.is-style-outline .wp-block-button__link,
.section-dark .wp-block-button.is-style-outline .wp-block-button__link {
	color: #F3F8F8;
	border-color: rgba(228, 200, 102, .6);
}
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.feature-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.section-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(228, 200, 102, .12);
	border-color: var(--wp--preset--color--gold-300);
	color: #fff;
}

/* ------------------------------------------------------------------ Links */
.entry-content a:not(.wp-element-button):not(.no-underline),
.prose a:not(.wp-element-button) {
	color: var(--wp--preset--color--petrol-700);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1.5px;
	transition: background-size var(--dur-base) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
	padding-bottom: 1px;
}
.entry-content a:not(.wp-element-button):hover,
.entry-content a:not(.wp-element-button):focus-visible { background-size: 100% 1.5px; color: var(--wp--preset--color--petrol-800); }

/* -------------------------------------------------------------- Karten */
.card {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-md);
	padding: var(--wp--preset--spacing--60);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
	height: 100%;
}
/* Reduzierte Effekte: keine wachsende Gold-Linie mehr — nur ein ruhiges, dezentes Anheben. */
.card::after { content: none; }
.card:hover,
.card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: #c9dee1;
}

.card__icon {
	width: 3rem; height: 3rem;
	display: grid; place-items: center;
	border-radius: var(--radius-sm);
	background: var(--wp--preset--color--petrol-50);
	color: var(--wp--preset--color--petrol-700);
	margin-bottom: var(--wp--preset--spacing--50);
}
.card__icon svg { width: 1.6rem; height: 1.6rem; }
.card h3 { margin: 0 0 .5rem; }
.card p { margin: 0; color: var(--wp--preset--color--muted); }

/* Karten-Media (Bild in abgerundeter Maske, scale bei Hover) */
.card-media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 16 / 10;
	margin-bottom: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface-2);
}
.card-media img { width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-out-soft); }
.card:hover .card-media img { transform: scale(1.03); }

/* --------------------------------------------------------- Chips / Badges */
.chip,
.badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .75rem;
	border-radius: var(--radius-pill);
	background: var(--wp--preset--color--petrol-50);
	color: var(--wp--preset--color--petrol-700);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1.4;
}
.badge--gold { background: rgba(201, 162, 39, .12); color: var(--wp--preset--color--gold-700); }
.badge--red { background: rgba(225, 13, 25, .08); color: var(--wp--preset--color--red-600); }

/* ---------------------------------------------------------- Site-Header
   Dunkles, edles Petrol-Band mit Girih-Ornament. Marken-Lockup (Emblem +
   Wortmarke). Dynamik: Basmala klappt beim Scrollen ein, Balken kompakter,
   Gold-Linie + Schatten. Zustand via .is-scrolled (JS, Sentinel/IO). */
.site-header {
	position: fixed;            /* IMMER sichtbar — unabhängig von Overflow-Vorfahren (kugelsicher) */
	top: 0; left: 0; right: 0;
	width: 100%;
	z-index: 100;
	background-color: #ffffff;
	border-bottom: 1px solid #e2ecee;
	transition: box-shadow .35s var(--ease-out-soft), border-color .35s var(--ease-out-soft);
}
.site-header::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold-500), transparent);
	opacity: 0; transition: opacity .35s var(--ease-out-soft);
}
.site-header.is-scrolled {
	box-shadow: 0 10px 28px -18px rgba(20, 50, 58, .28);
	border-color: #d6e4e6;
}
.site-header.is-scrolled::after { opacity: .5; }

/* Basmala-Leiste — würdevoll in Gold auf Dunkel, klappt beim Scrollen ein */
.site-header__basmala {
	display: flex; justify-content: center; align-items: center;
	height: 34px; overflow: hidden;
	padding: .35rem 1rem;
	border-bottom: 1px solid rgba(228, 200, 102, .16);
	background: rgba(0, 0, 0, .18);
	transition: height .4s var(--ease-out-soft), padding .4s var(--ease-out-soft), opacity .3s var(--ease-out-soft), border-color .4s var(--ease-out-soft);
}
.site-header.is-scrolled .site-header__basmala {
	height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-color: transparent;
}
.site-header__basmala svg { height: 20px; width: auto; }
.site-header__basmala svg [fill]:not([fill="none"]),
.site-header__basmala svg path { fill: var(--wp--preset--color--gold-300); }
.site-header__basmala .basmala { color: var(--wp--preset--color--gold-300); opacity: .92; }

.site-header__bar {
	display: flex; align-items: center;
	gap: var(--wp--preset--spacing--50);
	max-width: 1340px; margin-inline: auto;
	padding: .7rem clamp(1.1rem, 4vw, 1.9rem);
	transition: padding-top .3s var(--ease-out-soft), padding-bottom .3s var(--ease-out-soft);
}
/* Navigation exakt vertikal mittig in der Bar (WP-Nav-Defaults neutralisieren).
   WICHTIG: WP legt Bar-Kindern einen 24px-Block-Abstand oben auf → das drückt
   die Navigation nach unten. Hier hart auf 0 setzen. */
.site-header__bar > *,
.site-header__utility > * { margin-block: 0 !important; margin-top: 0 !important; }
.site-header__utility { align-items: center; }
/* NUR die Listen flexen — NICHT .primary-nav selbst (sonst wird das mobile
   display:none überschrieben und die Navigation quillt auf Mobil auf). */
.primary-nav ul, .primary-nav li { display: flex; align-items: center; margin: 0; }
.site-header .primary-nav a { display: inline-flex; align-items: center; line-height: 1; }
.site-header.is-scrolled .site-header__bar { padding-top: .4rem; padding-bottom: .4rem; }

/* Marken-Lockup: Emblem + Wortmarke */
.site-brand {
	display: flex; align-items: center; gap: .7rem;
	margin-right: auto; text-decoration: none; flex-shrink: 0;
}
.site-brand__emblem {
	height: 46px; width: auto; max-width: none; flex: 0 0 auto;
	/* nie beschneiden/runden (globale img-Regel überschreiben) */
	object-fit: contain; border-radius: 0 !important;
	filter: drop-shadow(0 1px 3px rgba(20, 50, 58, .18));
	transition: height .3s var(--ease-out-soft);
}
@media (min-width: 700px) { .site-brand__emblem { height: 50px; } }
.site-header.is-scrolled .site-brand__emblem { height: 44px; }
.site-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand__name {
	color: #14323a; font-weight: 700;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: .01em;
}
.site-brand__name .brand-ev { color: var(--wp--preset--color--petrol-700); font-weight: 600; }
/* NRW im Header-Logo in Logo-Farben (auf hell: kräftig & kontrastreich) */
.site-brand__name .nrw-n { color: #E10D19; }
.site-brand__name .nrw-r { color: #8A8A8A; }
.site-brand__name .nrw-w { color: #4E9B3A; }
.site-brand__sub {
	color: #5a7a80;
	font-size: .66rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em; margin-top: .18rem;
}
@media (max-width: 480px) { .site-brand__sub { display: none; } }

.site-header__utility { display: flex; align-items: center; gap: var(--wp--preset--spacing--50); flex-wrap: nowrap; white-space: nowrap; }

/* Primär-Navigation (Desktop) — dunkel auf hell, Gold-Unterstreichung.
   WICHTIG: WP-Layout-Klasse .wp-block-navigation.is-layout-flex erzwingt sonst
   display:flex (höhere Spezifität) → Nav bliebe auf Mobil sichtbar. Daher !important. */
.primary-nav { display: none !important; }
@media (min-width: 1180px) {
	.primary-nav { display: flex !important; align-items: center; }
	.primary-nav ul { display: flex; gap: clamp(.3rem, 1vw, .9rem); flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
	.site-header .primary-nav a,
	.site-header .primary-nav a:link,
	.site-header .primary-nav a:visited,
	.site-header .primary-nav .wp-block-navigation-item__content {
		color: #14323a !important; text-decoration: none;
		font-weight: 600; font-size: 1rem; letter-spacing: .01em;
		padding: .5rem .55rem; position: relative;
		transition: color var(--dur-base) var(--ease-standard);
	}
	/* Eleganter Hover: Text wird Petrol + feine Gold-Linie wächst aus der Mitte */
	.site-header .primary-nav a::after {
		content: ""; position: absolute; left: 50%; right: 50%; bottom: .2rem;
		height: 2px; border-radius: 2px; background: var(--wp--preset--color--gold-500);
		transition: left var(--dur-base) var(--ease-out-soft), right var(--dur-base) var(--ease-out-soft);
	}
	.site-header .primary-nav a:hover,
	.site-header .primary-nav a:focus-visible,
	.site-header .primary-nav a[aria-current="page"] { color: var(--wp--preset--color--petrol-700) !important; }
	.site-header .primary-nav a:hover::after,
	.site-header .primary-nav a:focus-visible::after,
	.site-header .primary-nav a[aria-current="page"]::after { left: .55rem; right: .55rem; }
}

/* Kontakt-CTA (rote Marken-Schaltfläche) */
.header-cta {
	display: none; align-items: center; gap: .45rem;
	background: var(--wp--preset--color--red-600); color: #fff;
	padding: .6rem 1.2rem; border-radius: var(--radius-pill);
	font-weight: 600; font-size: .95rem; text-decoration: none;
	box-shadow: 0 8px 20px -8px rgba(225, 13, 25, .6);
	transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
@media (min-width: 1180px) { .header-cta { display: inline-flex; } }
.header-cta:hover { background: var(--wp--preset--color--red-700); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(225, 13, 25, .7); color: #fff; }
.header-cta svg { flex: 0 0 auto; }

/* ------------------------------------------------- Sprachumschalter DE/TR */
.lang-switch {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--radius-pill);
	background: var(--wp--preset--color--petrol-50);
	border: 1px solid var(--wp--preset--color--border);
	gap: 2px;
}
.lang-switch a,
.lang-switch span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 32px;
	padding: 0 .6rem;
	border-radius: var(--radius-pill);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.lang-switch [aria-current="true"],
.lang-switch .current-lang {
	background: var(--wp--preset--color--petrol-700);
	color: #fff;
}
.lang-switch a:hover { background: var(--wp--preset--color--petrol-100); }

/* --------------------------------------------------------- Mobile-Menü-Button */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	background: transparent;
	border: none;
	border-radius: var(--radius);
	color: #14323a;
	cursor: pointer;
	order: 3;
	transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.menu-toggle:hover { background: var(--wp--preset--color--petrol-50); color: var(--wp--preset--color--petrol-800); }
.menu-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--petrol-700); outline-offset: 2px; }
@media (min-width: 1180px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 30px; height: 30px; }
/* Moschee-Silhouette Linien (Kuppel + Minarette) — Morph via mobile-menu.js */
.menu-toggle .mosque-line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
	transform-origin: center;
}

/* ------------------------------------------------- Mobile-Menü-Overlay */
.mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: #ffffff;
	color: #14323a;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 6vw, 3rem);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Schnell & deckend öffnen — kein langes Halbtransparent-Fenster (behebt „Ruckeln") */
	transition: opacity 160ms var(--ease-standard), visibility 0s linear 160ms;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mobile-overlay::before { content: none; }
.mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 160ms var(--ease-standard);
}
/* Menüpunkte gestaffelt einblenden, erst NACHDEM der Grund deckt — nie Text über Hero */
.mobile-overlay.is-open nav li,
.mobile-overlay.is-open .lang-switch { animation: mobileItemIn 260ms var(--ease-out-soft) backwards; }
.mobile-overlay.is-open nav li:nth-child(1) { animation-delay: 120ms; }
.mobile-overlay.is-open nav li:nth-child(2) { animation-delay: 155ms; }
.mobile-overlay.is-open nav li:nth-child(3) { animation-delay: 190ms; }
.mobile-overlay.is-open nav li:nth-child(4) { animation-delay: 225ms; }
.mobile-overlay.is-open nav li:nth-child(5) { animation-delay: 260ms; }
.mobile-overlay.is-open nav li:nth-child(6) { animation-delay: 295ms; }
.mobile-overlay.is-open nav li:nth-child(7) { animation-delay: 330ms; }
@keyframes mobileItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mobile-overlay.is-open nav li, .mobile-overlay.is-open .lang-switch { animation: none; } }
.mobile-overlay__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--wp--preset--spacing--70); }
.mobile-overlay__head img { height: 50px; width: auto; }
.mobile-overlay__close { color: #14323a; }
/* Schließen-„✕": beide Linien um die Mitte drehen (sonst Rotation um 0,0 → nur ein Strich) */
.mobile-overlay__close .mosque-line { transform-box: fill-box; transform-origin: center; }
.mobile-overlay nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; position: relative; }
.mobile-overlay nav a {
	display: block;
	padding: .95rem 0;
	font-size: var(--wp--preset--font-size--fs-md);
	font-weight: 600;
	color: #14323a;
	text-decoration: none;
	border-bottom: 1px solid #e6eef0;
	transition: color var(--dur-fast) var(--ease-standard), padding-left var(--dur-base) var(--ease-standard);
}
.mobile-overlay nav a:hover,
.mobile-overlay nav a:focus-visible { color: var(--wp--preset--color--petrol-700); padding-left: .5rem; }
.mobile-overlay .lang-switch { align-self: flex-start; margin-top: var(--wp--preset--spacing--60); }
body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------- Stat-Band */
.stat-band {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.stat {
	text-align: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	position: relative;
}
.stat + .stat::before {
	content: "";
	position: absolute; left: 0; top: 20%; bottom: 20%;
	width: 1px;
	background: linear-gradient(var(--wp--preset--color--gold-500), transparent);
	opacity: .5;
}
.stat__num {
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--petrol-700);
	font-feature-settings: "tnum", "cv11";
}
.section-dark .stat__num { color: var(--wp--preset--color--gold-300); }
.stat__label {
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.section-dark .stat__label { color: #DCE8EA; }
@media (max-width: 700px) {
	.stat-band { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(3)::before, .stat:nth-child(1)::before { content: none; }
}

/* ---------------------------------------------------------------- Grids */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--60); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--wp--preset--spacing--60); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--70); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
	content: ""; position: absolute; left: 11px; top: .5rem; bottom: .5rem;
	width: 2px; background: var(--wp--preset--color--border-strong);
}
.timeline li { position: relative; padding: 0 0 var(--wp--preset--spacing--70) 3rem; }
.timeline li::before {
	content: ""; position: absolute; left: 4px; top: .3rem;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--wp--preset--color--gold-500);
	box-shadow: 0 0 0 4px var(--wp--preset--color--bg);
}
.timeline .timeline__year { font-weight: 600; color: var(--wp--preset--color--petrol-700); font-feature-settings: "tnum"; }
.timeline h3 { margin: .2rem 0 .4rem; }

/* ------------------------------------------------- Vorstand / Region-Karten */
.person-card { text-align: center; }
.person-card .card-media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.person-card h3 { font-size: var(--wp--preset--font-size--fs-md); margin: 0; }
.person-card .role { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); margin: .25rem 0 0; }
.avatar-round img { border-radius: var(--radius-full); aspect-ratio: 1; }

/* ------------------------------------------------------------- Formulare */
.form-field { margin-bottom: var(--wp--preset--spacing--60); }
.form-field label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--wp--preset--color--text); }
.form-field .req { color: var(--wp--preset--color--red-600); }
.form-control,
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
textarea, select {
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--radius-sm);
	padding: .75rem 1rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text);
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
textarea { min-height: 9rem; resize: vertical; }
.form-control:focus, input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--wp--preset--color--petrol-700);
	box-shadow: 0 0 0 3px rgba(15, 102, 116, .18);
}
.form-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
.form-consent input { width: auto; margin-top: .2rem; min-width: 20px; min-height: 20px; }
.form-error { color: var(--wp--preset--color--error); font-size: var(--wp--preset--font-size--sm); margin-top: .35rem; }
.form-success { color: var(--wp--preset--color--success); font-weight: 600; }

/* --------------------------------------------------------- Consent-Karte */
.consent-card {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	gap: var(--wp--preset--spacing--50);
	min-height: 360px;
	padding: var(--wp--preset--spacing--80);
	border-radius: var(--radius-lg);
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}
/* Kein Muster hinter dem Consent-Text — ruhige Fläche, volle Lesbarkeit. */
.consent-card::before { content: none; }
.consent-card > * { position: relative; }
.consent-card h3 { margin: 0; }
.consent-card p { color: var(--wp--preset--color--muted); margin: 0; max-width: 46ch; }

/* --------------------------------------------------------------- Footer */
.site-footer {
	position: relative;
	background: var(--wp--preset--color--petrol-900);
	color: #DCE8EA;
	overflow: hidden;
}
.site-footer::before {
	content: ""; position: absolute; inset: 0;
	background: var(--ornament-girih-gold) repeat; background-size: 54px 54px;
	opacity: .06; pointer-events: none;
}
.site-footer__inner {
	position: relative;
	max-width: 1200px; margin-inline: auto;
	padding: var(--wp--preset--spacing--100) clamp(1.25rem, 5vw, 2rem) var(--wp--preset--spacing--70);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--wp--preset--spacing--70);
}
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer h2, .site-footer h3 { color: #F3F8F8; font-size: var(--wp--preset--font-size--fs-md); margin: 0 0 var(--wp--preset--spacing--50); }
.site-footer img.footer-logo { height: 96px; width: auto; margin-bottom: var(--wp--preset--spacing--50); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.site-footer a { color: #DCE8EA; text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.site-footer a:hover { color: var(--wp--preset--color--gold-300); }
.site-footer__bottom {
	position: relative;
	border-top: 1px solid rgba(228, 200, 102, .18);
	max-width: 1200px; margin-inline: auto;
	padding: var(--wp--preset--spacing--60) clamp(1.25rem, 5vw, 2rem);
	display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50); justify-content: space-between; align-items: center;
	font-size: var(--wp--preset--font-size--sm); color: #9FB4B8;
}
.social-links { display: flex; gap: .75rem; }
.social-links a {
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 1px solid rgba(228,200,102,.24); border-radius: var(--radius-sm);
	transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.social-links a:hover { background: rgba(228,200,102,.12); border-color: var(--wp--preset--color--gold-300); transform: translateY(-2px); }
.social-links svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------- Hero */
.hero {
	position: relative;
	background-color: var(--wp--preset--color--petrol-900);
	color: #F3F8F8;
	overflow: hidden;
	isolation: isolate;
}
/* Cinematic-Variante: Moschee-Foto als Vollbild-Hintergrund (Verlauf inline im Pattern) */
.hero--photo {
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	min-height: clamp(560px, 78vh, 820px);
	display: flex;
	align-items: center;
}
.hero--photo .hero__inner { padding-block: clamp(3rem, 2rem + 5vw, 6rem); text-align: left; }
/* Alle Hero-Inhalte linksbündig an derselben Kante (überschreibt WP-Constrained-Zentrierung) */
.hero--photo .hero__inner > * { margin-left: 0 !important; margin-right: auto !important; }
.hero--photo .hero__inner .eyebrow { justify-content: flex-start; }
.hero--photo .hero__inner .lead { max-width: 46ch; }
.hero--photo .hero__inner .hero__actions { justify-content: flex-start; }
/* Extra-Abdunkelung als Overlay-Ebene (auf Mobil stärker, damit Text überall sitzt) */
.hero--photo::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: transparent;
}
@media (max-width: 719px) {
	.hero--photo { background-position: center; min-height: 0; }
	.hero--photo::before { background: rgba(15, 32, 38, .55); }
}
/* NRW in Logo-Farben (rot/grau/grün) */
.nrw { white-space: nowrap; }
.nrw-n { color: #E10D19; }
.nrw-r { color: #B8B8B8; }
.nrw-w { color: #6FB24C; }
.hero__grid { max-width: 1200px; }
/* Zweispaltig (Moschee rechts) schon ab 720px — bleibt auf Tablet/schmalem Desktop rechts */
@media (min-width: 720px) {
	.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
}
.hero__media { margin: 0; }
.hero__media img {
	width: 100%; height: 100%; max-height: 460px; object-fit: cover;
	border-radius: var(--radius); box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
	border: 1px solid rgba(255,255,255,.08);
}
/* Mobil: Moschee als ruhiges Banner ganz oben, danach Text + Buttons — klar verbunden */
@media (max-width: 719px) {
	.hero__grid { display: flex; flex-direction: column; }
	.hero__media { order: -1; margin: 0 0 1.75rem; }
	.hero__media img { max-height: 240px; }
}
.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(4.5rem, 3rem + 8vw, 9rem) clamp(1.25rem, 5vw, 2rem);
}
.hero h1 { color: #F3F8F8; font-size: var(--wp--preset--font-size--display); margin: 0 0 var(--wp--preset--spacing--50); }
.hero p.lead { color: #DCE8EA; max-width: 54ch; }
.hero .eyebrow { color: var(--wp--preset--color--gold-300); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--60); }

/* Seitenkopf für Unterseiten (page.html): Petrol-Band mit weißem Original-Muster */
.entry-content > .wp-block-post-content > *:first-child { margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }
/* Seitentitel-Band — auf JEDER Unterseite identisch: Petrol + winziger Muster-Akzent.
   Doppelte Klasse erzwingt Vorrang vor einer evtl. mitgesetzten .section-tint
   (die sonst mit !important den Grund blass macht → weißer Titel unsichtbar). */
.page-hero.page-hero {
	background-color: var(--wp--preset--color--petrol-900) !important;
	background-image: url("../img/ornament/khatam-header.svg") !important;
	background-size: 52px auto;
	background-position: top center;
	padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.page-hero.page-hero :is(h1, h2, .wp-block-heading) { color: #F3F8F8; }

/* Pro Seite ein Moschee-Bild im Titelband, dunkles Petrol-Overlay hält den Titel lesbar.
   (Body-Slug-Klassen via functions.php; Archive über post-type-archive-Klassen.) */
.ditib-page-ueber-uns .page-hero.page-hero,
.ditib-page-schulreferat .page-hero.page-hero,
.ditib-page-kontakt .page-hero.page-hero,
.post-type-archive-veranstaltung .page-hero.page-hero,
.post-type-archive-presse .page-hero.page-hero {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
}
.ditib-page-ueber-uns .page-hero.page-hero {
	background-image: linear-gradient(90deg, rgba(15,32,38,.92) 0%, rgba(15,32,38,.78) 45%, rgba(15,32,38,.6) 100%), url("../img/hero/hero-ueber-uns.jpg") !important;
}
.ditib-page-schulreferat .page-hero.page-hero {
	background-image: linear-gradient(90deg, rgba(15,32,38,.92) 0%, rgba(15,32,38,.78) 45%, rgba(15,32,38,.6) 100%), url("../img/hero/hero-schulreferat.jpg") !important;
}
.ditib-page-kontakt .page-hero.page-hero {
	background-image: linear-gradient(90deg, rgba(15,32,38,.92) 0%, rgba(15,32,38,.78) 45%, rgba(15,32,38,.6) 100%), url("../img/hero/hero-kontakt.jpg") !important;
}
.post-type-archive-veranstaltung .page-hero.page-hero {
	background-image: linear-gradient(90deg, rgba(15,32,38,.92) 0%, rgba(15,32,38,.78) 45%, rgba(15,32,38,.6) 100%), url("../img/hero/hero-veranstaltungen.jpg") !important;
}
.post-type-archive-presse .page-hero.page-hero {
	background-image: linear-gradient(90deg, rgba(15,32,38,.92) 0%, rgba(15,32,38,.78) 45%, rgba(15,32,38,.6) 100%), url("../img/hero/hero-presse.jpg") !important;
}
/* Full-Bleed: Band randlos über volle Breite, Inhalt bleibt im 1200er-Raster */
.page-hero.is-layout-constrained {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.page-hero.is-layout-constrained > * {
	max-width: 1200px;
	margin-inline: auto;
}
.page-hero .eyebrow { color: var(--wp--preset--color--gold-300); justify-content: flex-start; margin-bottom: .75rem; }
/* Alle Kopfzeilen-Texte auf dem dunklen Band hell — auch Archive-h1/lead ohne __title-Klasse */
.page-hero :is(h1, h2, h3, h4, h5, h6) { color: #F3F8F8; }
.page-hero p, .page-hero .lead { color: #DCE8EA; }
.page-hero__title {
	color: #F3F8F8 !important;
	font-size: var(--wp--preset--font-size--xxx-large, clamp(2.4rem, 1.6rem + 3.4vw, 4rem));
	line-height: 1.05;
	margin: 0;
	max-width: none;
}

/* Feature-Block (dunkel) — RANDLOS über volle Breite, saubere Kanten, kein Muster.
   Inhalt bleibt im 1200er-Raster zentriert. */
.feature-dark,
.section-dark.section-py {
	position: relative;
	overflow: hidden;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-inline: clamp(1.25rem, 5vw, 2rem);
	background-color: var(--wp--preset--color--petrol-900);
}
.feature-dark > *,
.section-dark.section-py > * { max-width: 1200px; margin-inline: auto; }
.feature-dark .ornament-layer,
.section-dark.section-py .ornament-layer { display: none; }

/* Getönte Vollsektionen ebenfalls RANDLOS bis zum Rand (nicht abgeschnitten).
   Inhalt bleibt mittig im 1200er-Raster. Gilt überall (Landesvorstand, Gremien,
   Archiv-Rückblick usw.). */
.section-py.section-tint,
.section-py.section-tint-strong {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.section-py.section-tint > *,
.section-py.section-tint-strong > * { max-width: 1200px; margin-inline: auto; }

/* Vorstände & Gremien: Mitglieder-Kacheln (Name + Position). */
.gremium { margin-top: clamp(2rem, 4vw, 3.25rem); }
.gremium__name { margin: 0 0 .35rem; }
.member-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 1rem; }
.member {
	background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius); padding: .85rem 1.05rem;
}
.member--lead { border-color: var(--wp--preset--color--petrol-200, #bfe0e5); background: var(--wp--preset--color--petrol-50); }
.member__name { font-weight: 700; color: var(--wp--preset--color--petrol-900); line-height: 1.25; }
.member__role { font-size: .82rem; color: var(--wp--preset--color--muted); margin-top: .15rem; }

/* Zwei-Foto-Reihe (z. B. Schulreferat-Einblicke). */
.workshop-row { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .workshop-row { grid-template-columns: 1fr 1fr; } }
.workshop-row figure { margin: 0; }
.workshop-row img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Download-/Formular-Kacheln. */
.download-list { display: grid; gap: .8rem; margin-top: 1.5rem; }
@media (min-width: 720px) { .download-list { grid-template-columns: 1fr 1fr; } }
.download-item {
	display: flex; align-items: center; gap: 1rem;
	padding: 1rem 1.15rem; background: #fff;
	border: 1px solid var(--wp--preset--color--border); border-radius: var(--radius);
	text-decoration: none; color: var(--wp--preset--color--text);
	transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.download-item:hover { border-color: var(--wp--preset--color--petrol-700); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.download-item__ic { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; background: var(--wp--preset--color--petrol-50); color: var(--wp--preset--color--petrol-700); border-radius: 10px; }
.download-item__ic svg { width: 22px; height: 22px; }
.download-item__tx { display: flex; flex-direction: column; min-width: 0; }
.download-item__ti { font-weight: 700; color: var(--wp--preset--color--petrol-900); line-height: 1.3; }
.download-item__me { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-top: .2rem; }

/* Event-Galerie („Impressionen"): gleichmäßiges Raster, abgerundete Kacheln. */
.event-gallery.wp-block-gallery { gap: 14px; margin-top: 1rem; }
.event-gallery .wp-block-image { margin: 0; }
.event-gallery .wp-block-image img {
	width: 100%; height: 100%;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--radius);
}

/* „Termin einreichen"-Button im Titelband: hoher Kontrast (weiße Füllung, dunkler Text). */
.termin-cta .wp-block-button__link,
.page-hero .termin-cta .wp-block-button__link {
	background: #ffffff !important;
	color: var(--wp--preset--color--petrol-900) !important;
	border: 1.5px solid #ffffff !important;
	font-weight: 700;
}
.termin-cta .wp-block-button__link:hover,
.page-hero .termin-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold-300) !important;
	border-color: var(--wp--preset--color--gold-300) !important;
	color: var(--wp--preset--color--petrol-900) !important;
}

/* CTA-Band mit atmosphärischem Moschee-Hintergrund + dunklem Overlay (Text bleibt lesbar). */
.section-dark.section-py.cta-band {
	background-image: linear-gradient(rgba(15,32,38,.9), rgba(15,32,38,.82)), url("../img/hero/cta-zusammenarbeit.jpg") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* Zweispaltiges Feature: Text + Bild (Premium-Split), stapelt auf Mobil. */
.feature-split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) { .feature-split { grid-template-columns: 1.05fr .95fr; } }
.feature-split__text { max-width: 40rem; }
.feature-split__text .wp-block-heading { color: #F3F8F8; margin: .2rem 0 1rem; }
.feature-split__text .lead { color: #DCE8EA; }
.feature-split__media { margin: 0; }
.feature-split__media img {
	width: 100%; height: auto; border-radius: var(--radius);
	box-shadow: 0 26px 60px -26px rgba(0,0,0,.65);
}
.feature-split__cta {
	display: inline-flex; align-items: center; margin-top: 1.6rem;
	padding: .75rem 1.5rem; border-radius: var(--radius);
	border: 1.5px solid rgba(228,200,102,.6); color: #F3F8F8;
	text-decoration: none; font-weight: 600; min-height: 44px;
	transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.feature-split__cta:hover { background: rgba(228,200,102,.12); border-color: var(--wp--preset--color--gold-300); color: #fff; }
/* Auf der Schulreferat-Seite ist der „Zum Schulreferat"-Button überflüssig (man ist ja dort). */
.ditib-page-schulreferat .feature-split__cta { display: none; }

/* Chronik zweispaltig: Bild + Timeline. Auf Desktop füllt das Bild die volle
   Spaltenhöhe (= Timeline-Höhe), formatfüllend & mittig beschnitten. */
.chronik-split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 860px) { .chronik-split { grid-template-columns: 1fr 1.1fr; } }
.chronik-split__media { margin: 0; }
/* Gut proportioniertes Hochformat (4:5), nie gequetscht. */
.chronik-split__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
@media (min-width: 860px) {
	/* Bild bleibt beim Scrollen neben der Timeline stehen. */
	.chronik-split__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.chronik-split__text .eyebrow { margin-top: 0; }

/* Ornament-Trenner → ruhige, kurze Gold-Linie statt Punktreihe (reduziert, edel). */
.section-divider { display: flex; justify-content: center; padding-block: clamp(1rem, 3vw, 2.25rem); }
.section-divider .draw { display: none; }
.section-divider::after {
	content: ""; width: 52px; height: 2px; border-radius: 2px;
	background: var(--wp--preset--color--gold-500); opacity: .55;
}

/* Sektionsüberschrift zentriert mit Eyebrow */
.section-head { text-align: center; max-width: none; margin-inline: auto; margin-bottom: var(--wp--preset--spacing--80); }
.section-head .wp-block-heading { max-width: none; }
.section-head .eyebrow { justify-content: center; }
.section-head p:not(.eyebrow) { margin-inline: auto; max-width: 720px; color: var(--wp--preset--color--muted); }
.section-head .eyebrow { color: var(--wp--preset--color--petrol-700); }

/* Migrierte Fotos */
.vorstand-foto img { border-radius: var(--radius); box-shadow: var(--wp--preset--shadow--md, 0 18px 40px -20px rgba(20,50,58,.35)); max-height: 480px; object-fit: cover; }
/* Ansprech-Kachel: Bild füllt die Kachelhöhe (so groß wie der Textbereich). */
.ansprech-card { align-items: stretch; overflow: hidden; }
.ansprech-card .wp-block-column:first-child { display: flex; }
.ansprech-foto { margin: 0; width: 100%; }
.ansprech-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: 0 10px 26px -12px rgba(20,50,58,.4); min-height: 260px; }
@media (max-width: 781px) { .ansprech-foto img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } }
.is-style-rounded img { border-radius: var(--radius); }

.hero .section-head .eyebrow, .section-dark .section-head .eyebrow, .feature-dark .section-head .eyebrow { color: var(--wp--preset--color--gold-300); }

/* ---------------------------------------------------- Kontaktformular */
.ditib-form__row { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }
.ditib-form label { font-weight: 600; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text); }
.ditib-form input[type="text"], .ditib-form input[type="email"], .ditib-form select, .ditib-form textarea {
	width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--radius-sm); background: #fff; color: var(--wp--preset--color--text);
	font: inherit; font-size: var(--wp--preset--font-size--body);
	transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ditib-form input:focus, .ditib-form select:focus, .ditib-form textarea:focus {
	outline: none; border-color: var(--wp--preset--color--petrol-700);
	box-shadow: 0 0 0 3px rgba(15,102,116,.15);
}
.ditib-form textarea { resize: vertical; min-height: 120px; }
.ditib-form__check label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
.ditib-form__check input { margin-top: .2rem; flex: 0 0 auto; }
.ditib-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { padding: .85rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: var(--wp--preset--font-size--sm); }
.form-notice--ok { background: rgba(21,121,139,.10); color: var(--wp--preset--color--petrol-800); border: 1px solid rgba(21,121,139,.3); }
.form-notice--err { background: rgba(225,13,25,.07); color: var(--wp--preset--color--red-700); border: 1px solid rgba(225,13,25,.25); }
.map-consent .btn { margin-top: .75rem; }

/* =========================================================================
   Smooth-Übergänge — weißer Streifen weg + weiche Farbverläufe zwischen
   Header, Hero und allen Sektionen (statt harter weiß/blau-Kanten).
   ========================================================================= */

/* Weißer Streifen zwischen Header und Hero (WP-Standard-margin am main) weg */
.wp-site-blocks > main,
main.wp-block-group { margin-top: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }

/* Helle Tint-Sektionen an den Rändern nur dezent in den Body-Ton überblenden */
/* Ruhige, klare Flächen statt verwaschener Verlaufskanten (seriöser). */
.section-tint { background: #e7f0f2 !important; }
.section-tint-strong { background: #dce9eb !important; }

/* Keine verschwommenen Verlaufskanten mehr an den dunklen Bändern — klare Kanten. */
.feature-dark::before,
.feature-dark::after { content: none !important; }

/* =========================================================================
   Sticky-Header-Fix: Der Template-Part-Wrapper (<div class="wp-block-template-part">)
   ist nur so hoch wie der Header und begrenzt dadurch die Sticky-Reichweite —
   der Header scrollt mit weg. display:contents entfernt den Wrapper-Kasten,
   sodass der Header relativ zur gesamten Seite klebt.
   ========================================================================= */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }