/* =========================================================================
   DITIB Bedburg — Theme v4.0 (Clean Architecture)

   Architektur:
   1) Design Tokens (single source of truth)
   2) Reset + Base
   3) Layout-System (ONE container var, alle Sektionen)
   4) Typografie-Skala
   5) Komponenten (Header, Hero, Cards, Buttons, …)
   6) Animationen (einheitliches Timing)
   7) Responsive (Mobile-first, klare Breakpoints)
   8) Accessibility
   ========================================================================= */

/* =========================================================================
   1) DESIGN TOKENS
   ========================================================================= */
:root {
	/* Farben */
	--c-white:      #FFFFFF;
	--c-paper:      #FCFAF5;
	--c-off-white:  #F8F6F2;
	--c-ink:        #1F2937;
	--c-ink-soft:   #374151;
	--c-muted:      #6B7280;
	--c-muted-2:    #9CA3AF;
	--c-border:     #E5E7EB;
	--c-border-soft:#F1F0EC;
	--c-teal:       #157A7E;
	--c-teal-dark:  #0F5F62;
	--c-teal-soft:  #E8F2F2;
	--c-red:        #A02828;
	--c-red-dark:   #7A1E1E;
	--c-red-soft:   #F5E8E8;

	/* Typografie */
	--ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Inter", system-ui, sans-serif;
	--ff-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	--ff-arabic: "Amiri", "Scheherazade New", serif;

	/* Spacing (8er-Raster) */
	--s-1: 4px;   --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
	--s-5: 24px;  --s-6: 32px;   --s-7: 48px;   --s-8: 64px;
	--s-9: 96px;  --s-10: 128px;

	/* Radii */
	--r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;

	/* Shadows */
	--sh-1: 0 1px 2px rgba(17,24,39,0.04);
	--sh-2: 0 4px 12px rgba(17,24,39,0.06), 0 1px 3px rgba(17,24,39,0.04);
	--sh-3: 0 12px 32px rgba(17,24,39,0.10), 0 4px 8px rgba(17,24,39,0.04);
	--sh-4: 0 24px 60px rgba(17,24,39,0.14), 0 8px 16px rgba(17,24,39,0.04);

	/* ★ LAYOUT — ONE source of truth ★ */
	--container-max: 1200px;
	--container-pad: clamp(20px, 4vw, 40px);

	/* Animation (eine Skala für alles) */
	--t-fast: 150ms;
	--t-base: 250ms;
	--t-slow: 500ms;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* WP-Layout-Variablen an unseren Container koppeln */
:root {
	--wp--style--global--content-size: 1200px;
	--wp--style--global--wide-size: 1320px;
}

/* =========================================================================
   2) RESET + BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	overflow-x: hidden;
	max-width: 100vw;
}
body {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--c-ink);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	letter-spacing: -0.005em;
	overflow-x: hidden;
	max-width: 100vw;
}
.wp-site-blocks { overflow-x: hidden; }
img, picture, video, iframe, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; height: 1px; background: var(--c-border); margin: var(--s-7) 0; }
::selection { background: var(--c-teal); color: #fff; }

/* =========================================================================
   3) LAYOUT — Ein Container-System für ALLES
   =========================================================================
   Regel: Jeder Top-Level-Wrapper (.ditib-page-header, .ditib-content)
   bekommt EXAKT diese Klasse-Definition. Inner-Children haben padding/margin
   auto = 0, max-width = 100%. KEINE verschachtelten Paddings.
   ========================================================================= */
.wp-site-blocks > main > .ditib-page-header,
.wp-site-blocks > main > .ditib-content {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
	box-sizing: border-box;
}

/* Alle nested Wrapper: kein eigenes Padding/Margin */
.ditib-page-header,
.ditib-content,
.ditib-content > .entry-content,
.ditib-content > .wp-block-post-content,
.entry-content,
.wp-block-post-content {
	max-width: 100%;
}
.ditib-content > .entry-content,
.ditib-content > .wp-block-post-content {
	padding: 0;
	margin: 0;
}

/* Inner-Elemente: vollständig links-bündig, kein margin: auto */
.ditib-page-header > *,
.ditib-content > .entry-content > *,
.ditib-content > .wp-block-post-content > * {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Reading-Width nur für Text-Blöcke (Lesbarkeit) — ABER linksbündig (NICHT zentriert) */
.ditib-content > .entry-content > p,
.ditib-content > .wp-block-post-content > p,
.ditib-content > .entry-content > h2,
.ditib-content > .wp-block-post-content > h2,
.ditib-content > .entry-content > h3,
.ditib-content > .wp-block-post-content > h3,
.ditib-content > .entry-content > ul,
.ditib-content > .wp-block-post-content > ul,
.ditib-content > .entry-content > ol,
.ditib-content > .wp-block-post-content > ol {
	max-width: 780px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Cards + Wide-Blöcke spannen volle Container-Breite */
.ditib-content > .entry-content > .ditib-hutbe,
.ditib-content > .wp-block-post-content > .ditib-hutbe,
.ditib-content > .entry-content > .ditib-hadith,
.ditib-content > .wp-block-post-content > .ditib-hadith,
.ditib-content > .entry-content > .ditib-ayet,
.ditib-content > .wp-block-post-content > .ditib-ayet,
.ditib-content > .entry-content > .ditib-prayer,
.ditib-content > .wp-block-post-content > .ditib-prayer,
.ditib-content > .entry-content > .ditib-maps-consent,
.ditib-content > .wp-block-post-content > .ditib-maps-consent,
.ditib-content > .entry-content > .ditib-events,
.ditib-content > .wp-block-post-content > .ditib-events,
.ditib-content > .entry-content > .ditib-gallery,
.ditib-content > .wp-block-post-content > .ditib-gallery,
.ditib-content > .entry-content > .ditib-form,
.ditib-content > .wp-block-post-content > .ditib-form,
.ditib-content > .entry-content > .wp-block-columns,
.ditib-content > .wp-block-post-content > .wp-block-columns,
.ditib-content > .entry-content > .wp-block-buttons,
.ditib-content > .wp-block-post-content > .wp-block-buttons {
	max-width: 100%;
	width: 100%;
}

/* WP-Block-Group im Content: kein eigener Constraint */
.entry-content > .wp-block-group,
.wp-block-post-content > .wp-block-group {
	max-width: 100%;
}

/* =========================================================================
   4) TYPOGRAFIE
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-sans);
	color: var(--c-ink);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	margin: 0 0 0.65em;
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}
h1 {
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
	letter-spacing: -0.04em;
	line-height: 1.1;
}
h2 {
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	line-height: 1.15;
}
h3 {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	line-height: 1.25;
}
h4 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
p { margin: 0 0 1.1em; color: var(--c-ink-soft); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a {
	color: var(--c-teal);
	text-decoration: none;
	transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-teal-dark); }
strong, b { font-weight: 600; color: var(--c-ink); }
small { font-size: 0.875rem; color: var(--c-muted); }
.is-style-lead, p.has-large-font-size {
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.6;
	color: var(--c-ink-soft);
}
[lang="ar"] {
	font-family: var(--ff-arabic);
	font-size: 1.15em;
	line-height: 1.8;
	direction: rtl;
}

/* H2-Underline (links-bündig, 48×2px Rot→Türkis-Verlauf) */
.entry-content h2,
.wp-block-post-content h2,
.wp-site-blocks h2.wp-block-heading {
	position: relative;
	padding-bottom: 0.4em;
	margin-top: 2em;
}
.entry-content h2::after,
.wp-block-post-content h2::after,
.wp-site-blocks h2.wp-block-heading::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	background: linear-gradient(90deg, var(--c-red) 0%, var(--c-teal) 100%);
	margin: 0.5em 0 0 0;
	border-radius: 1px;
}
.ditib-hero h2::after,
.ditib-page-header h2::after,
.ditib-prayer__title::after,
.ditib-news__title::after,
.ditib-about__title::after,
.ditib-team__title::after,
.ditib-cta__title::after,
.ditib-hutbe__title::after,
.ditib-events__title::after { display: none !important; }

/* Listen mit Türkis-Strich statt Bullets */
.entry-content ul,
.wp-block-post-content ul,
.wp-block-list {
	list-style: none;
	padding-left: 0;
}
.entry-content ul li,
.wp-block-post-content ul li,
.wp-block-list li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: 0.4em;
}
.entry-content ul li::before,
.wp-block-post-content ul li::before,
.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1px;
	background: var(--c-teal);
}

/* =========================================================================
   5) BUTTONS — Einheitliches Komponentensystem
   ========================================================================= */
.wp-block-button__link,
.ditib-hero__btn,
.ditib-about__btn,
.ditib-team__btn,
.ditib-cta__btn,
button.ditib-btn,
a.ditib-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 14px 24px !important;
	min-height: 48px !important;
	font-family: var(--ff-sans) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.005em !important;
	border-radius: var(--r-md) !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center !important;
	white-space: normal !important;
	box-sizing: border-box !important;
	max-width: 100%;
	word-break: break-word;
	transition:
		transform var(--t-fast) var(--ease),
		background var(--t-base) var(--ease),
		border-color var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease),
		color var(--t-base) var(--ease) !important;
}

/* Primary (Rot mit Gradient) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.ditib-hero__btn--primary,
.ditib-about__btn,
.ditib-cta__btn--primary,
a.ditib-btn--primary {
	background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%) !important;
	color: #fff !important;
	box-shadow: var(--sh-2);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.ditib-hero__btn--primary:hover,
.ditib-about__btn:hover,
.ditib-cta__btn--primary:hover {
	background: linear-gradient(135deg, var(--c-red-dark) 0%, #5a1414 100%) !important;
	transform: translateY(-1px);
	box-shadow: var(--sh-3);
}

/* Secondary (Outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.ditib-team__btn,
.ditib-cta__btn:not(.ditib-cta__btn--primary),
a.ditib-btn--secondary {
	background: transparent !important;
	color: var(--c-ink) !important;
	border-color: var(--c-border) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.ditib-team__btn:hover,
.ditib-cta__btn:not(.ditib-cta__btn--primary):hover {
	background: var(--c-ink) !important;
	color: #fff !important;
	border-color: var(--c-ink) !important;
	transform: translateY(-1px);
}

/* Hero-Secondary (Outline auf dunklem Hintergrund) */
.ditib-hero__btn:not(.ditib-hero__btn--primary) {
	background: rgba(255,255,255,0.1) !important;
	color: #fff !important;
	border-color: rgba(255,255,255,0.22) !important;
}
.ditib-hero__btn:not(.ditib-hero__btn--primary):hover {
	background: rgba(255,255,255,0.18) !important;
	border-color: rgba(255,255,255,0.4) !important;
}
.ditib-hero__btn-icon { display: none; }

/* =========================================================================
   6) HEADER (sticky, Glass-Effect, Dropdown-Submenus)
   ========================================================================= */
.wp-block-template-part:has(> .ditib-header) {
	position: sticky;
	top: 0;
	z-index: 1000;
}
.ditib-header {
	background: rgba(255,255,255,0.92);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--c-border);
	box-shadow: var(--sh-1);
	position: relative;
}
.ditib-header__inner,
.ditib-header--3col {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 14px var(--container-pad);
	display: flex !important;
	align-items: center;
	gap: 24px !important;
	min-height: 72px !important;
}
.ditib-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.ditib-header__brand a {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}
.ditib-header__brand img {
	max-height: 44px !important;
	max-width: 150px !important;
	width: auto !important;
	height: auto !important;
	display: block;
	transition: transform var(--t-base) var(--ease);
}
.ditib-header__brand a:hover img { transform: scale(1.04); }
.ditib-header__brand .wp-block-site-title { display: none; }

.ditib-header__nav-wrap {
	flex: 1 1 auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	overflow: visible;
}

.ditib-header .wp-block-navigation {
	font-family: var(--ff-sans);
	font-size: 0.95rem;
	font-weight: 500;
	min-width: 0;
}
.ditib-header .wp-block-navigation .wp-block-navigation__container {
	gap: 4px !important;
}
.ditib-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 8px 14px !important;
	color: var(--c-ink-soft) !important;
	border-radius: var(--r-sm);
	white-space: nowrap;
	line-height: 1.2;
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease) !important;
}
.ditib-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--c-off-white) !important;
	color: var(--c-ink) !important;
}
.ditib-header .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--c-teal-dark) !important;
	background: var(--c-teal-soft) !important;
}

/* Submenu (Dropdown) */
.ditib-header .wp-block-navigation .has-child { position: relative; }
.ditib-header .wp-block-navigation__submenu-container {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	background: #fff !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md);
	box-shadow: var(--sh-3) !important;
	min-width: 240px;
	max-width: calc(100vw - 32px);
	padding: 6px !important;
	margin-top: 6px;
	z-index: 1001;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease),
		visibility 0s linear var(--t-base);
}
.ditib-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.ditib-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.ditib-header .wp-block-navigation .wp-block-navigation-submenu[aria-expanded="true"] > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.ditib-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -8px; left: 0; right: 0;
	height: 8px;
}
.ditib-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 14px !important;
	border-radius: var(--r-sm);
	display: block;
}

/* Lang-Switch */
.ditib-lang-switch-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.ditib-lang-switch {
	display: inline-flex;
	background: var(--c-off-white);
	padding: 3px;
	border-radius: 8px;
	border: 1px solid var(--c-border);
	flex-shrink: 0;
}
.ditib-lang-switch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
.ditib-lang-switch__btn:hover { color: var(--c-ink); }
.ditib-lang-switch__btn.is-active {
	background: #fff;
	color: var(--c-ink) !important;
	box-shadow: var(--sh-1);
}
.ditib-lang-switch__flag { display: none !important; }

/* Burger (Mobile only) */
.ditib-header .wp-block-navigation__responsive-container-open {
	display: none !important;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--r-sm);
	color: var(--c-ink);
	background: transparent;
}

/* Subtiler Trenner unter Header */
.ditib-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--c-teal) 50%, transparent 100%);
	opacity: 0.4;
	pointer-events: none;
}

/* =========================================================================
   7) PAGE-HEADER (Title-Bereich auf Subseiten)
   ========================================================================= */
.ditib-page-header {
	padding-top: clamp(48px, 7vw, 80px) !important;
	padding-bottom: clamp(32px, 5vw, 56px) !important;
	border-bottom: 1px solid var(--c-border);
	margin-bottom: clamp(40px, 5vw, 64px);
	background:
		radial-gradient(ellipse 70% 90% at 100% 0%, rgba(21,122,126,0.10) 0%, transparent 60%),
		radial-gradient(ellipse 60% 80% at 0% 100%, rgba(160,40,40,0.08) 0%, transparent 60%),
		var(--c-paper);
	border-radius: var(--r-xl);
	max-width: calc(var(--container-max) - 0px) !important;
}
.ditib-page-header h1,
.ditib-page-header .wp-block-post-title,
.ditib-page-header .has-text-align-center {
	font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
	margin: 0;
	text-align: left !important;
}

/* =========================================================================
   8) HERO (Startseite — Foto-Background mit Glass-Card)
   ========================================================================= */
.ditib-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	min-height: 640px;
	padding: 96px var(--container-pad) 80px;
	background: var(--c-ink);
	margin: 20px;
	max-width: calc(100% - 40px);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-4);
	box-sizing: border-box;
}
.ditib-hero__bg {
	position: absolute; inset: 0;
	background-image: var(--ditib-hero-bg-img, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}
.ditib-hero::before {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgba(31,41,55,0.92) 0%, rgba(31,41,55,0.65) 50%, rgba(31,41,55,0.85) 100%),
		radial-gradient(ellipse 60% 70% at 15% 100%, rgba(160,40,40,0.30) 0%, transparent 60%);
	z-index: 1;
	pointer-events: none;
}
.ditib-hero::after {
	content: "";
	position: absolute;
	top: -10%; right: -10%;
	width: 480px; height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(21,122,126,0.22) 0%, transparent 60%);
	filter: blur(40px);
	z-index: 1;
	pointer-events: none;
}
.ditib-hero__pattern,
.ditib-hero__mosque { display: none; }
.ditib-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 48px;
	align-items: end;
}
.ditib-hero__main { max-width: 720px; }
.ditib-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
	margin: 0 0 24px;
}
.ditib-hero__kicker::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--c-teal);
}
.ditib-hero__title {
	margin: 0 0 24px !important;
	color: #fff !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	text-align: left;
}
.ditib-hero__title-main {
	font-size: clamp(2.25rem, 1.6rem + 3.5vw, 4rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: #fff;
}
.ditib-hero__title-sub {
	font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255,255,255,0.75);
	max-width: 32ch;
}
.ditib-hero__subtitle {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
	line-height: 1.7;
	max-width: 580px;
	margin: 0 0 40px;
	color: rgba(255,255,255,0.85);
}
.ditib-hero__cta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

/* =========================================================================
   9) NEXT-PRAYER WIDGET (Hero-Card)
   ========================================================================= */
.ditib-next-prayer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto auto;
	align-items: center;
	gap: 6px 16px;
	padding: 24px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--r-lg);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	font-variant-numeric: tabular-nums;
	color: #fff;
	box-shadow: 0 24px 60px rgba(0,0,0,0.30);
	width: 100%;
	max-width: 360px;
	justify-self: end;
	box-sizing: border-box;
}
.ditib-next-prayer__pulse {
	grid-column: 1; grid-row: 1;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-teal);
	box-shadow: 0 0 0 0 rgba(21,122,126,0.6);
	animation: pulse 2.2s infinite;
}
.ditib-next-prayer__label {
	grid-column: 2; grid-row: 1;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.55;
}
.ditib-next-prayer__time {
	grid-column: 3; grid-row: 1 / 3;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	align-self: center;
}
.ditib-next-prayer__name {
	grid-column: 2; grid-row: 2;
	font-size: 1.05rem;
	font-weight: 600;
	opacity: 0.9;
}
.ditib-next-prayer__countdown {
	grid-column: 1 / -1; grid-row: 3;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,0.10);
	font-size: 0.78rem;
	opacity: 0.65;
	text-align: right;
}
.ditib-next-prayer__countdown [data-cd] {
	font-weight: 600;
	margin-left: 4px;
}

/* =========================================================================
   10) GEBETSZEITEN-TABELLE
   ========================================================================= */
.ditib-prayer {
	position: relative;
	background: var(--c-ink);
	color: #fff;
	padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px);
	border-radius: var(--r-xl);
	margin: 32px 0;
	overflow: hidden;
	box-shadow: var(--sh-4);
	box-sizing: border-box;
	max-width: 100%;
}
.ditib-prayer::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse 60% 80% at 0% 0%, rgba(21,122,126,0.18) 0%, transparent 60%),
		radial-gradient(ellipse 50% 70% at 100% 100%, rgba(160,40,40,0.15) 0%, transparent 60%);
	pointer-events: none;
}
.ditib-prayer__head,
.ditib-prayer__grid,
.ditib-prayer__source { position: relative; z-index: 1; }
.ditib-prayer__head {
	text-align: center;
	margin-bottom: 32px;
}
.ditib-prayer__title {
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
}
.ditib-prayer__date {
	font-size: 0.85rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}
.ditib-prayer__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}
.ditib-prayer__cell {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--r-md);
	padding: 16px 8px;
	text-align: center;
	min-width: 0;
	overflow: hidden;
	transition:
		background var(--t-base) var(--ease),
		transform var(--t-base) var(--ease);
}
.ditib-prayer__cell.is-next {
	background: linear-gradient(160deg, #fff 0%, var(--c-teal-soft) 100%);
	color: var(--c-ink);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0,0,0,0.20);
}
.ditib-prayer__cell.is-next::after {
	content: "Nächstes";
	display: block;
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-teal-dark);
	font-weight: 700;
	margin-top: 6px;
}
.ditib-prayer__label-tr {
	font-size: 0.95rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ditib-prayer__label-de {
	font-size: 0.65rem;
	opacity: 0.55;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ditib-prayer__cell.is-next .ditib-prayer__label-de {
	opacity: 0.75;
	color: var(--c-teal-dark);
}
.ditib-prayer__time {
	font-size: 1.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ditib-prayer__source {
	text-align: center;
	font-size: 0.78rem;
	opacity: 0.55;
	margin-top: 24px;
}
.ditib-prayer__source a {
	color: rgba(255,255,255,0.8);
	text-decoration: underline;
}

/* =========================================================================
   11) ABOUT-TEASER (Startseite — Split-Layout)
   ========================================================================= */
.ditib-about {
	margin: clamp(48px, 7vw, 96px) 0;
	padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px);
	background:
		radial-gradient(ellipse 70% 90% at 100% 0%, rgba(21,122,126,0.08) 0%, transparent 60%),
		radial-gradient(ellipse 60% 80% at 0% 100%, rgba(160,40,40,0.06) 0%, transparent 60%),
		linear-gradient(180deg, transparent 0%, var(--c-paper) 100%);
	border-radius: var(--r-xl);
}
.ditib-about__inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}
.ditib-about__visual { min-width: 0; }
.ditib-about__visual-card {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--sh-4);
	background: var(--c-off-white);
}
.ditib-about__visual-card img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 5 / 4;
}
.ditib-about__stats { display: none; }
.ditib-about__body { min-width: 0; }
.ditib-about__kicker,
.ditib-news__kicker,
.ditib-team__kicker,
.ditib-cta__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-teal-dark);
	margin: 0 0 16px;
}
.ditib-about__kicker span,
.ditib-news__kicker span,
.ditib-team__kicker span,
.ditib-cta__kicker span {
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--c-teal);
}
.ditib-about__title {
	font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 24px;
}
.ditib-about__text {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--c-ink-soft);
	margin: 0 0 16px;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}
.ditib-about__btn { margin-top: 16px; }

/* =========================================================================
   12) NEWS / AKTUELLES (Startseite)
   ========================================================================= */
.ditib-news {
	margin: clamp(48px, 7vw, 96px) 0;
	padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px);
	background:
		radial-gradient(ellipse 60% 60% at 50% 0%, rgba(21,122,126,0.06) 0%, transparent 60%),
		linear-gradient(180deg, var(--c-paper) 0%, transparent 50%);
	border-radius: var(--r-xl);
}
.ditib-news__head {
	max-width: var(--container-max);
	margin: 0 auto 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--c-border);
}
.ditib-news__title {
	font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 10px 0 0;
}
.ditib-news__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	max-width: var(--container-max);
	margin: 0 auto;
}
.ditib-news__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #fff 0%, var(--c-paper) 100%);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 28px 24px;
	overflow: hidden;
	min-width: 0;
	max-width: 100%;
	box-shadow: var(--sh-1);
	transition:
		transform var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease),
		border-color var(--t-base) var(--ease);
}
.ditib-news__card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--c-red) 0%, var(--c-teal) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-slow) var(--ease);
}
.ditib-news__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-3);
	border-color: transparent;
}
.ditib-news__card:hover::before { transform: scaleX(1); }
.ditib-news__icon { display: none; }
.ditib-news__media {
	display: block;
	margin: -28px -24px 20px;
	background: linear-gradient(135deg, var(--c-red-soft) 0%, var(--c-off-white) 50%, var(--c-teal-soft) 100%);
	border-bottom: 1px solid var(--c-border);
	overflow: hidden;
}
.ditib-news__media img {
	width: 100%;
	height: clamp(180px, 22vw, 240px);
	object-fit: contain;
	padding: 8px;
}
.ditib-news__tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-teal-dark);
	background: var(--c-teal-soft);
	padding: 5px 11px;
	border-radius: var(--r-sm);
	margin-bottom: 14px;
	align-self: flex-start;
}
.ditib-news__card-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.3;
}
.ditib-news__text {
	font-size: 0.92rem;
	color: var(--c-ink-soft);
	line-height: 1.6;
	margin: 0 0 20px;
	flex: 1;
}
.ditib-news__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-ink);
	font-weight: 600;
	font-size: 0.88rem;
	margin-top: auto;
	transition: color var(--t-fast) var(--ease);
}
.ditib-news__link svg {
	width: 14px;
	height: 14px;
	transition: transform var(--t-fast) var(--ease);
}
.ditib-news__link:hover { color: var(--c-teal-dark); }
.ditib-news__link:hover svg { transform: translateX(3px); }

/* Featured News (2 große oben, 3 kompakt unten) */
@media (min-width: 1024px) {
	.ditib-news__grid { grid-template-columns: repeat(6, 1fr); }
	.ditib-news__card { grid-column: span 2; }
	.ditib-news__card--featured { grid-column: span 3; }
	.ditib-news__card--featured .ditib-news__card-title { font-size: 1.3rem; line-height: 1.25; }
	.ditib-news__card--featured .ditib-news__text { font-size: 0.98rem; }
	.ditib-news__card--featured .ditib-news__media img {
		height: clamp(220px, 28vw, 320px);
		object-fit: cover;
		padding: 0;
	}
	.ditib-news__card--featured:first-child .ditib-news__media {
		background: linear-gradient(135deg, #1a2a3a 0%, #0f1419 100%);
	}
	.ditib-news__card--featured:first-child .ditib-news__media img {
		object-fit: contain;
		padding: 8px;
	}
}
@media (max-width: 1023px) and (min-width: 700px) {
	.ditib-news__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   13) HUTBE / HADITH / AYET — Editorial Quote-Cards
   ========================================================================= */
.ditib-hutbe,
.ditib-hadith,
.ditib-ayet {
	position: relative;
	background: var(--c-paper);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 44px 32px 32px;
	margin: 24px 0;
	overflow: hidden;
	box-shadow: var(--sh-1);
	max-width: 100%;
	box-sizing: border-box;
	transition:
		transform var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease),
		border-color var(--t-base) var(--ease);
}
.ditib-hutbe > *,
.ditib-hadith > *,
.ditib-ayet > * {
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.ditib-hutbe::before,
.ditib-hadith::before,
.ditib-ayet::before {
	content: "\201C";
	position: absolute;
	top: -10px; left: 20px;
	font-family: var(--ff-display);
	font-size: 6rem;
	line-height: 1;
	font-weight: 700;
	opacity: 0.14;
	pointer-events: none;
}
.ditib-hutbe::before,
.ditib-hadith::before { color: var(--c-red); }
.ditib-ayet::before { color: var(--c-teal); }
.ditib-hutbe:hover,
.ditib-hadith:hover,
.ditib-ayet:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-3);
	border-color: transparent;
}
.ditib-hutbe__label,
.ditib-hadith__label,
.ditib-ayet__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.ditib-hutbe__label::before,
.ditib-hadith__label::before,
.ditib-ayet__label::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
}
.ditib-hutbe__label,
.ditib-hadith__label { color: var(--c-red); }
.ditib-hutbe__label::before,
.ditib-hadith__label::before { background: var(--c-red); }
.ditib-ayet__label { color: var(--c-teal-dark); }
.ditib-ayet__label::before { background: var(--c-teal); }
.ditib-hadith__text,
.ditib-ayet__text {
	font-family: var(--ff-display);
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
	line-height: 1.5;
	color: var(--c-ink);
	margin: 0 0 20px;
	font-weight: 500;
}
.ditib-hutbe__title {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	font-weight: 700;
	color: var(--c-ink);
	margin: 0 0 14px;
}
.ditib-hutbe__meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 0.83rem;
	color: var(--c-muted);
	margin-bottom: 20px;
}
.ditib-hutbe__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-ink);
	font-weight: 600;
	font-size: 0.9rem;
}
.ditib-hutbe__link::after {
	content: "→";
	transition: transform var(--t-fast) var(--ease);
}
.ditib-hutbe__link:hover { color: var(--c-teal-dark); }
.ditib-hutbe__link:hover::after { transform: translateX(3px); }
.ditib-hadith__source,
.ditib-ayet__source {
	font-size: 0.82rem;
	color: var(--c-muted);
}

/* Inspiration-Band (Off-White-Hintergrund hinter Hutbe+Hadith+Ayet) */
.wp-block-columns:has(.ditib-hadith),
.wp-block-columns:has(.ditib-ayet),
.wp-block-columns:has(.ditib-hutbe) {
	position: relative;
	padding: 64px 0;
	margin: 64px 0;
	gap: 24px !important;
}
.wp-block-columns:has(.ditib-hadith)::before,
.wp-block-columns:has(.ditib-ayet)::before,
.wp-block-columns:has(.ditib-hutbe)::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	background:
		radial-gradient(ellipse 70% 80% at 0% 0%, rgba(160,40,40,0.04) 0%, transparent 60%),
		radial-gradient(ellipse 70% 80% at 100% 100%, rgba(21,122,126,0.04) 0%, transparent 60%),
		var(--c-off-white);
	z-index: -1;
}

/* =========================================================================
   14) TEAM HIGHLIGHT
   ========================================================================= */
.ditib-team {
	margin: clamp(48px, 7vw, 96px) 0;
	padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 48px);
	background:
		radial-gradient(ellipse 70% 80% at 0% 50%, rgba(160,40,40,0.06) 0%, transparent 60%),
		radial-gradient(ellipse 70% 80% at 100% 50%, rgba(21,122,126,0.06) 0%, transparent 60%),
		var(--c-paper);
	border-radius: var(--r-xl);
}
.ditib-team__head {
	text-align: center;
	margin-bottom: 48px;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}
.ditib-team__head .ditib-team__kicker { justify-content: center; }
.ditib-team__title {
	font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.4rem);
	font-weight: 700;
	margin: 16px 0 0;
}
.ditib-team__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: var(--container-max);
	margin: 0 auto;
}
.ditib-team__card {
	display: block;
	background: linear-gradient(180deg, #fff 0%, var(--c-off-white) 100%);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 24px 20px;
	text-align: center;
	color: var(--c-ink) !important;
	text-decoration: none !important;
	box-shadow: var(--sh-1);
	transition:
		transform var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease),
		border-color var(--t-base) var(--ease);
}
.ditib-team__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-3);
	border-color: transparent;
}
.ditib-team__img-wrap {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--r-md);
	overflow: hidden;
	margin-bottom: 18px;
	background: linear-gradient(135deg, var(--c-red-soft) 0%, var(--c-teal-soft) 100%);
}
.ditib-team__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}
.ditib-team__card:hover .ditib-team__img-wrap img { transform: scale(1.04); }
.ditib-team__name {
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 4px;
}
.ditib-team__role {
	font-size: 0.82rem;
	color: var(--c-teal-dark);
	font-weight: 600;
}
.ditib-team__more {
	text-align: center;
	margin-top: 40px;
}

/* =========================================================================
   15) CTA-SECTION (Startseite — Dark)
   ========================================================================= */
.ditib-cta {
	position: relative;
	margin: clamp(48px, 7vw, 96px) 0;
	padding: clamp(56px, 6vw, 80px) clamp(24px, 4vw, 48px);
	background:
		radial-gradient(ellipse 50% 70% at 15% 0%, rgba(21,122,126,0.28) 0%, transparent 55%),
		radial-gradient(ellipse 50% 70% at 100% 100%, rgba(160,40,40,0.35) 0%, transparent 55%),
		linear-gradient(135deg, #1F2937 0%, #0F1419 100%);
	color: #fff;
	border-radius: var(--r-xl);
	overflow: hidden;
	text-align: center;
	box-shadow: var(--sh-4);
}
.ditib-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}
.ditib-cta__kicker {
	color: rgba(255,255,255,0.65);
	justify-content: center;
}
.ditib-cta__kicker span { background: rgba(255,255,255,0.5); }
.ditib-cta__title {
	color: #fff !important;
	font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem) !important;
	font-weight: 700 !important;
	margin: 16px 0 20px !important;
}
.ditib-cta__text {
	font-size: 1.05rem !important;
	color: rgba(255,255,255,0.85) !important;
	margin: 0 auto 32px !important;
	max-width: 580px;
}
.ditib-cta__buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.ditib-cta__btn--primary {
	background: #fff !important;
	color: var(--c-ink) !important;
	border-color: #fff !important;
}
.ditib-cta__btn--primary:hover {
	background: var(--c-teal-soft) !important;
	color: var(--c-teal-dark) !important;
}

/* =========================================================================
   16) EVENT-BADGE (Kermes-Countdown im Hero)
   ========================================================================= */
.ditib-event-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 12px;
	margin: 0 0 24px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.16);
	color: #fff;
	border-radius: 999px;
	font-weight: 500;
	font-size: 0.85rem;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition:
		background var(--t-base) var(--ease),
		border-color var(--t-base) var(--ease);
}
.ditib-event-badge:hover {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.30);
	color: #fff;
}
.ditib-event-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-teal);
	animation: pulse 2.2s infinite;
}
.ditib-event-badge__arrow {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	font-size: 0.85rem;
	font-weight: 700;
}
.ditib-event-badge.is-live {
	background: var(--c-red);
	border-color: transparent;
}
.ditib-event-badge.is-live .ditib-event-badge__dot { background: #fff; }

/* =========================================================================
   17) MARQUEE (Begrüßungs-Laufschrift unter Header)
   ========================================================================= */
.ditib-marquee {
	overflow: hidden;
	background: var(--c-ink);
	color: rgba(255,255,255,0.85);
	height: 32px;
	display: flex;
	align-items: center;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
	border-top: 1px solid rgba(255,255,255,0.06);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ditib-marquee::before,
.ditib-marquee::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 50px;
	z-index: 2;
	pointer-events: none;
}
.ditib-marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--c-ink) 0%, transparent 100%);
}
.ditib-marquee::after {
	right: 0;
	background: linear-gradient(-90deg, var(--c-ink) 0%, transparent 100%);
}
.ditib-marquee__track {
	display: flex;
	gap: 24px;
	white-space: nowrap;
	animation: marquee 60s linear infinite;
	flex-shrink: 0;
	padding-left: 100%;
}
.ditib-marquee:hover .ditib-marquee__track { animation-play-state: paused; }
.ditib-marquee__item {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	font-weight: 500;
}
.ditib-marquee__sep {
	color: var(--c-teal);
	opacity: 0.6;
	font-size: 0.6rem;
}

/* =========================================================================
   18) FOOTER
   ========================================================================= */
.ditib-footer {
	background:
		radial-gradient(ellipse 60% 100% at 50% 0%, rgba(21,122,126,0.10) 0%, transparent 60%),
		var(--c-ink);
	color: rgba(255,255,255,0.7);
	padding: 64px 0 32px;
	margin-top: clamp(48px, 7vw, 96px);
	position: relative;
}
.ditib-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}
.ditib-footer__col { min-width: 0; }
.ditib-footer__col h4 {
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.ditib-footer__brand-title {
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 8px;
}
.ditib-footer__brand-desc {
	font-size: 0.88rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.6);
	margin: 0 0 20px;
}
.ditib-footer__addr p {
	font-size: 0.85rem;
	margin-bottom: 6px;
	color: rgba(255,255,255,0.75);
}
.ditib-footer__nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 7px;
}
.ditib-footer__nav li {
	padding-left: 0;
	margin: 0;
}
.ditib-footer__nav li::before { display: none; }
.ditib-footer__nav a {
	color: rgba(255,255,255,0.75);
	font-size: 0.88rem;
	display: inline-block;
	padding: 2px 0;
	transition: color var(--t-fast) var(--ease);
}
.ditib-footer__nav a:hover { color: var(--c-teal); }
.ditib-footer__social {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}
.ditib-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.75);
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
.ditib-footer__social a:hover {
	background: var(--c-teal);
	color: #fff;
}

/* Footer-Legal-Wrap (3 zentrierte Zeilen) */
.ditib-footer__legal-wrap {
	max-width: var(--container-max);
	margin: 40px auto 0;
	padding: 24px var(--container-pad) 0;
	border-top: 1px solid rgba(255,255,255,0.08);
	text-align: center;
}
.ditib-footer__legal-wrap p {
	margin: 0 0 10px !important;
	line-height: 1.5;
}
.ditib-footer__legal-wrap p:last-child { margin-bottom: 0 !important; }
.ditib-footer__legal-wrap .ditib-footer__legal {
	font-size: 0.86rem;
	color: rgba(255,255,255,0.85);
}
.ditib-footer__legal-wrap .ditib-footer__legal a {
	color: rgba(255,255,255,0.92);
	font-weight: 500;
	transition: color var(--t-fast) var(--ease);
}
.ditib-footer__legal-wrap .ditib-footer__legal a:hover { color: var(--c-teal); }
.ditib-footer__legal-wrap .ditib-footer__legal span {
	color: rgba(255,255,255,0.4);
	margin: 0 6px;
}
.ditib-footer__legal-wrap .ditib-footer__credit {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.55);
}
.ditib-footer__legal-wrap .ditib-footer__credit-link {
	color: rgba(255,255,255,0.85);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.28);
	text-underline-offset: 3px;
	transition:
		color var(--t-fast) var(--ease),
		text-decoration-color var(--t-fast) var(--ease);
}
.ditib-footer__legal-wrap .ditib-footer__credit-link:hover {
	color: var(--c-teal);
	text-decoration-color: var(--c-teal);
}
.ditib-footer__legal-wrap .ditib-footer__copy {
	font-size: 0.78rem;
	color: rgba(255,255,255,0.5);
}

/* =========================================================================
   19) COOKIE-BANNER + MAPS-CONSENT
   ========================================================================= */
.ditib-cookie-banner {
	position: fixed;
	bottom: 20px;
	left: 20px;
	right: 20px;
	max-width: min(760px, calc(100vw - 40px));
	margin: 0 auto;
	z-index: 9999;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-4);
	padding: 20px 24px;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--t-base) var(--ease),
		transform var(--t-base) var(--ease);
}
.ditib-cookie-banner::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--c-teal);
	border-top-left-radius: var(--r-lg);
	border-bottom-left-radius: var(--r-lg);
}
.ditib-cookie-banner.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.ditib-cookie-banner__inner {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}
.ditib-cookie-banner__body {
	flex: 1 1 320px;
	min-width: 0;
}
.ditib-cookie-banner__title {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 4px;
	color: var(--c-ink);
}
.ditib-cookie-banner__text {
	font-size: 0.83rem;
	line-height: 1.55;
	color: var(--c-muted);
	margin: 0;
}
.ditib-cookie-banner__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ditib-cookie-banner__btn {
	padding: 9px 16px;
	border-radius: var(--r-sm);
	border: 0;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	font-family: var(--ff-sans);
	transition: background var(--t-fast) var(--ease);
}
.ditib-cookie-banner__btn--primary {
	background: var(--c-ink);
	color: #fff;
}
.ditib-cookie-banner__btn--primary:hover { background: var(--c-teal-dark); }
.ditib-cookie-banner__btn--secondary {
	background: transparent;
	color: var(--c-ink-soft);
	border: 1px solid var(--c-border);
}
.ditib-cookie-banner__btn--secondary:hover { background: var(--c-off-white); }

.ditib-maps-consent {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-2);
	margin: 24px 0;
	background: linear-gradient(135deg, var(--c-off-white) 0%, #fff 50%, var(--c-teal-soft) 100%);
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 24px;
	border: 1px solid var(--c-border);
	box-sizing: border-box;
}
.ditib-maps-consent.is-loaded {
	background: none;
	padding: 0;
	min-height: auto;
	display: block;
}
.ditib-maps-consent__placeholder { max-width: 460px; }
.ditib-maps-consent__title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--c-ink);
}
.ditib-maps-consent__desc {
	font-size: 0.9rem;
	color: var(--c-muted);
	margin: 0 0 12px;
	line-height: 1.6;
}
.ditib-maps-consent__addr {
	font-weight: 600;
	color: var(--c-ink);
	margin: 0 0 24px;
	font-size: 0.95rem;
}
.ditib-maps-consent__btn {
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);
	color: #fff;
	border: 0;
	border-radius: var(--r-md);
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--sh-2);
	transition:
		transform var(--t-fast) var(--ease),
		box-shadow var(--t-base) var(--ease);
}
.ditib-maps-consent__btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--sh-3);
}

/* =========================================================================
   20) BACK-TO-TOP
   ========================================================================= */
.ditib-back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: var(--c-ink);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
	transition:
		opacity var(--t-base) var(--ease),
		transform var(--t-base) var(--ease),
		background var(--t-base) var(--ease);
	z-index: 50;
	box-shadow: var(--sh-3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ditib-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.ditib-back-to-top:hover {
	background: var(--c-teal-dark);
	transform: translateY(-3px);
}

/* =========================================================================
   21) EVENTS LISTING (Veranstaltungen-Seite)
   ========================================================================= */
.ditib-events { margin: 32px 0 64px; }
.ditib-events__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--c-border);
}
.ditib-events__filter-btn {
	font-family: var(--ff-sans);
	font-size: 0.85rem;
	font-weight: 500;
	padding: 7px 16px;
	background: transparent;
	border: 1px solid var(--c-border);
	color: var(--c-ink-soft);
	border-radius: 999px;
	cursor: pointer;
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease);
}
.ditib-events__filter-btn:hover {
	background: var(--c-off-white);
	color: var(--c-ink);
}
.ditib-events__filter-btn.is-active {
	background: var(--c-ink);
	color: #fff;
	border-color: var(--c-ink);
}
.ditib-events__list {
	display: grid;
	gap: 16px;
}
.ditib-event-card {
	display: grid;
	grid-template-columns: 96px 1fr 240px;
	gap: 24px;
	align-items: center;
	padding: 20px 24px;
	background: linear-gradient(180deg, #fff 0%, var(--c-paper) 100%);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	transition:
		transform var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease),
		border-color var(--t-base) var(--ease);
}
.ditib-event-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sh-3);
	border-color: transparent;
}
.ditib-event-card.is-hidden { display: none; }
.ditib-event-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
	background: linear-gradient(180deg, var(--c-red-soft) 0%, var(--c-off-white) 100%);
	border-radius: var(--r-sm);
	text-align: center;
}
.ditib-event-card__day {
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1;
	color: var(--c-red);
	font-variant-numeric: tabular-nums;
}
.ditib-event-card__mon {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--c-ink-soft);
	margin-top: 4px;
}
.ditib-event-card__year {
	font-size: 0.65rem;
	color: var(--c-muted);
	margin-top: 2px;
}
.ditib-event-card__body { min-width: 0; }
.ditib-event-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.78rem;
	color: var(--c-muted);
	margin-bottom: 8px;
}
.ditib-event-card__cat {
	display: inline-block;
	padding: 3px 9px;
	background: var(--c-teal-soft);
	color: var(--c-teal-dark);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.65rem;
	border-radius: 4px;
}
.ditib-event-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.3;
}
.ditib-event-card__excerpt {
	font-size: 0.92rem;
	color: var(--c-ink-soft);
	line-height: 1.6;
	margin: 0;
}
.ditib-event-card__visual {
	width: 100%;
	height: 100%;
	min-height: 120px;
	background-size: cover;
	background-position: center;
	border-radius: var(--r-sm);
}

/* =========================================================================
   22) GALLERY + LIGHTBOX
   ========================================================================= */
.ditib-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin: 32px 0;
}
.ditib-gallery__item {
	position: relative;
	overflow: hidden;
	background: var(--c-off-white);
	border: 0;
	padding: 0;
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-sm);
	transition:
		transform var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease);
}
.ditib-gallery__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--sh-3);
}
.ditib-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}
.ditib-gallery__item:hover img { transform: scale(1.05); }

.ditib-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(11,15,23,0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}
.ditib-lightbox[hidden] { display: none !important; }
.ditib-lightbox__figure {
	max-width: min(92vw, 1100px);
	max-height: 88vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}
.ditib-lightbox__img {
	max-width: 100%;
	max-height: 76vh;
	border-radius: var(--r-md);
}
.ditib-lightbox__caption {
	color: rgba(255,255,255,0.85);
	font-size: 0.9rem;
	text-align: center;
}
.ditib-lightbox__close,
.ditib-lightbox__prev,
.ditib-lightbox__next {
	position: absolute;
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	font-size: 1.4rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ditib-lightbox__close { top: 20px; right: 20px; }
.ditib-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.ditib-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* =========================================================================
   23) FORM (Kontaktformular)
   ========================================================================= */
.ditib-form {
	display: grid;
	gap: 18px;
	max-width: 720px;
	margin: 32px 0;
}
.ditib-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.ditib-form__field {
	display: grid;
	gap: 6px;
	min-width: 0;
}
.ditib-form__field label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--c-ink);
}
.ditib-form__field label span {
	color: var(--c-red);
	margin-left: 2px;
}
.ditib-form__field input,
.ditib-form__field textarea {
	font-family: var(--ff-sans);
	font-size: 0.95rem;
	padding: 12px 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: #fff;
	transition:
		border-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}
.ditib-form__field input:focus,
.ditib-form__field textarea:focus {
	outline: 0;
	border-color: var(--c-teal);
	box-shadow: 0 0 0 3px rgba(21,122,126,0.15);
}
.ditib-form__field textarea {
	min-height: 140px;
	resize: vertical;
}
.ditib-form__field.is-error input,
.ditib-form__field.is-error textarea {
	border-color: var(--c-red);
	box-shadow: 0 0 0 3px rgba(160,40,40,0.10);
}
.ditib-form__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ditib-form__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 8px;
}
.ditib-form__submit {
	font-family: var(--ff-sans);
	padding: 14px 24px;
	min-height: 46px;
	background: var(--c-ink);
	color: #fff;
	border: 0;
	border-radius: var(--r-md);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background var(--t-fast) var(--ease);
}
.ditib-form__submit:hover { background: var(--c-teal-dark); }
.ditib-form__status {
	margin: 0;
	font-size: 0.88rem;
	color: var(--c-muted);
}
.ditib-form__status.is-success {
	color: var(--c-teal-dark);
	font-weight: 600;
}
.ditib-form__status.is-error {
	color: var(--c-red);
	font-weight: 600;
}

/* =========================================================================
   24) VORSTAND (Block-Columns mit Portraits)
   ========================================================================= */
.wp-block-columns .wp-block-image,
.wp-block-columns figure.wp-block-image { margin: 0; width: 100%; }
.wp-block-columns .wp-block-image img,
.wp-block-columns figure.wp-block-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-md);
	display: block;
}

/* WP-Block-Columns Defaults */
.wp-block-columns { gap: 32px !important; }
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { min-width: 0; }
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Doppel-H1 verstecken (Template-H1 reicht) */
.wp-block-post-content > h1.wp-block-heading:first-child,
.entry-content > h1.wp-block-heading:first-child {
	display: none;
}

/* =========================================================================
   25) ANIMATIONEN — Eine einheitliche Skala
   ========================================================================= */
@keyframes pulse {
	0%   { box-shadow: 0 0 0 0 rgba(21,122,126,0.6); }
	70%  { box-shadow: 0 0 0 14px rgba(21,122,126,0); }
	100% { box-shadow: 0 0 0 0 rgba(21,122,126,0); }
}
@keyframes marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@keyframes rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-Reveal (Intersection-Observer-basiert) */
[data-animate] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--t-slow) var(--ease),
		transform var(--t-slow) var(--ease);
}
[data-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================================
   26) ACCESSIBILITY
   ========================================================================= */
a:focus-visible,
button:focus-visible,
.ditib-team__card:focus-visible,
.ditib-news__link:focus-visible {
	outline: 2px solid var(--c-teal) !important;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   27) RESPONSIVE BREAKPOINTS
   ========================================================================= */
/* Tablet (≤ 1100px) */
@media (max-width: 1100px) {
	.ditib-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
	.ditib-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.ditib-next-prayer {
		max-width: 100%;
		justify-self: stretch;
	}
	.ditib-about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.ditib-about__visual { order: -1; }
	.wp-block-columns:has(.ditib-hadith),
	.wp-block-columns:has(.ditib-ayet),
	.wp-block-columns:has(.ditib-hutbe) {
		flex-wrap: wrap !important;
		padding: 48px 0;
		margin: 48px 0;
	}
	.wp-block-columns:has(.ditib-hadith) > .wp-block-column,
	.wp-block-columns:has(.ditib-ayet) > .wp-block-column,
	.wp-block-columns:has(.ditib-hutbe) > .wp-block-column {
		flex-basis: 100% !important;
		min-width: 100% !important;
	}
	.ditib-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.ditib-footer__col--brand { grid-column: 1 / -1; }
}

/* Mobile-Header (≤ 768px) */
@media (max-width: 768px) {
	.ditib-header__inner,
	.ditib-header--3col {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		grid-template-areas: "lang brand burger" !important;
		gap: 8px !important;
		min-height: 64px !important;
		padding: 10px var(--container-pad) !important;
		align-items: center !important;
	}
	.ditib-header__brand {
		grid-area: brand;
		justify-self: center !important;
	}
	.ditib-header__brand img { max-height: 40px !important; }
	.ditib-header__nav-wrap {
		grid-area: burger;
		flex: 0 0 auto !important;
		justify-self: end !important;
		justify-content: flex-end !important;
	}
	.ditib-lang-switch-wrap {
		grid-area: lang;
		flex: 0 0 auto !important;
		justify-self: start !important;
	}
	.ditib-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: none !important;
	}
	.ditib-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.ditib-lang-switch__btn {
		min-width: 32px;
		padding: 5px 8px;
		font-size: 0.7rem;
	}
}

/* Mobile (≤ 700px) */
@media (max-width: 700px) {
	.ditib-event-card {
		grid-template-columns: 72px 1fr !important;
		gap: 14px !important;
		padding: 16px !important;
	}
	.ditib-event-card__visual { display: none !important; }
	.ditib-event-card__day { font-size: 1.5rem; }
	.ditib-event-card__title { font-size: 1.02rem; }
	.ditib-footer__inner {
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 24px 16px !important;
	}
	.ditib-footer__col--brand {
		grid-column: 1 / -1 !important;
		text-align: center !important;
	}
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
	.ditib-hero {
		min-height: 540px;
		padding: 64px var(--container-pad) 56px;
		margin: 12px;
		max-width: calc(100% - 24px);
		border-radius: var(--r-lg);
	}
	.ditib-hero__btn {
		padding: 12px 18px !important;
		font-size: 0.88rem !important;
		min-height: 44px !important;
		flex: 1 1 auto;
	}
	.ditib-news__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.ditib-news__card,
	.ditib-news__card--featured { grid-column: 1 / -1; }
	.ditib-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.ditib-prayer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ditib-prayer {
		padding: 24px 16px;
	}
	.ditib-hutbe,
	.ditib-hadith,
	.ditib-ayet {
		padding: 36px 20px 24px;
	}
	.ditib-hutbe::before,
	.ditib-hadith::before,
	.ditib-ayet::before {
		font-size: 4.5rem;
		left: 16px;
	}
	.ditib-cookie-banner {
		bottom: 10px;
		left: 10px;
		right: 10px;
		padding: 14px 16px !important;
	}
	.ditib-cookie-banner__inner {
		gap: 10px !important;
		flex-direction: column;
		align-items: stretch;
	}
	.ditib-cookie-banner__body {
		flex: 0 0 auto !important;
		min-height: 0 !important;
	}
	.ditib-cookie-banner__actions {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		width: 100%;
	}
	.ditib-cookie-banner__btn {
		width: 100%;
		min-height: 40px;
		font-size: 0.82rem;
	}
	.ditib-cta {
		padding: 56px 20px !important;
		border-radius: var(--r-lg);
	}
	.ditib-form__row { grid-template-columns: 1fr; }
	.ditib-form__field input,
	.ditib-form__field textarea { font-size: 16px; }
	.ditib-form__submit { width: 100%; }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
	.ditib-hero__title-main {
		font-size: clamp(1.85rem, 1.4rem + 3vw, 2.5rem);
	}
	.ditib-hero { min-height: 480px; }
	.ditib-prayer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ditib-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
	.ditib-footer__inner {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		text-align: center;
	}
	.ditib-footer__col { text-align: center; }
	.ditib-footer__nav { justify-self: center; }
	.ditib-footer__social { justify-content: center !important; }
}

/* =========================================================================
   28) MOBILE-NAV-OVERLAY
   ========================================================================= */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	color: var(--c-ink) !important;
	padding: 0 !important;
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 100000 !important;
	overflow-y: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100% !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 80px 24px 32px !important;
	margin: 0 !important;
	list-style: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.05rem !important;
	font-weight: 500 !important;
	padding: 16px 12px !important;
	border-bottom: 1px solid var(--c-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--c-ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	background: var(--c-off-white) !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0 0 16px !important;
	margin: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}
body:has(.wp-block-navigation__responsive-container.is-menu-open) .ditib-header {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* =========================================================================
   PATCH v4.0.1 — Hero gleiche Breite + Header dauerhaft sticky
   ========================================================================= */

/* 1) overflow-x: hidden auf html bricht position:sticky → ersetze mit clip */
html {
	overflow-x: clip !important;
}
body {
	overflow-x: clip !important;
}

/* 2) Header sticky robuster — explizit auf alle möglichen Wrapper */
.wp-block-template-part:has(> .ditib-header),
.wp-site-blocks > .wp-block-template-part,
header.wp-block-template-part {
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
}

/* 3) Hero auf gleiche Container-Breite wie About + News */
.ditib-hero {
	max-width: var(--container-max) !important;
	margin: 24px auto !important;
}
@media (max-width: 600px) {
	.ditib-hero {
		margin: 12px var(--container-pad) !important;
		max-width: calc(100% - calc(2 * var(--container-pad))) !important;
	}
}

/* =========================================================================
   PATCH v4.0.2 — Header definitiv sticky (overflow weg von Ancestors)
   ========================================================================= */

/* Overflow von allen Ancestors des Headers entfernen */
html, body, .wp-site-blocks {
	overflow-x: visible !important;
	overflow: visible !important;
	max-width: 100% !important;
}

/* Overflow nur dort wo nötig: <main> (enthält Marquee etc. die breakout machen) */
.wp-site-blocks > main {
	overflow-x: clip;
}

/* Footer kann auch overflow-x: clip kriegen (für Footer-Marquee) */
.wp-site-blocks > footer { overflow-x: clip; }

/* Header sticky — robust mit klarer Selektor-Spezifität */
body .wp-site-blocks > .wp-block-template-part:first-child,
body .wp-site-blocks > header.wp-block-template-part {
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
	background: rgba(255,255,255,0.92);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

/* =========================================================================
   29) MOBILE & RESPONSIVE — Premium Mobile Experience (v4.1)

   Strikt durchdachter Mobile-First-Pass. Breakpoints:
   - 320px  → kleine Phones (iPhone SE)
   - 375px  → iPhone Standard
   - 414px  → moderne Phones (Pro Max)
   - 600px  → Phablet/Phone-Landscape
   - 768px  → Tablet Portrait
   - 1024px → Tablet Landscape
   ========================================================================= */

/* ---- Safe-Area-Aware Padding (iOS Notch, Home-Indicator) ---- */
:root {
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--mobile-pad: 20px;
}

/* Mobile-Container: einheitliches Padding mit Safe-Area-Berücksichtigung */
@media (max-width: 900px) {
	:root {
		--container-pad: max(20px, var(--safe-left), var(--safe-right));
	}
	.ditib-cookie-banner {
		left: max(10px, var(--safe-left)) !important;
		right: max(10px, var(--safe-right)) !important;
		bottom: max(10px, var(--safe-bottom)) !important;
	}
	.ditib-back-to-top {
		bottom: max(24px, calc(var(--safe-bottom) + 16px));
		right: max(20px, calc(var(--safe-right) + 12px));
	}
}

/* ---- Touch-Targets ≥ 44×44 (WCAG AA) ---- */
@media (hover: none) and (pointer: coarse) {
	.ditib-news__link,
	.ditib-hutbe__link,
	.ditib-footer__nav a,
	.ditib-footer__social a,
	.ditib-events__filter-btn,
	.ditib-lang-switch__btn,
	.wp-block-navigation-item__content,
	.ditib-footer__legal-wrap a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.ditib-footer__nav a { padding: 10px 0; }
	.ditib-news__link { padding: 8px 0; }
	/* Active-State statt Hover für Touch */
	.ditib-news__card:active,
	.ditib-team__card:active,
	.ditib-event-card:active,
	.ditib-hutbe:active,
	.ditib-hadith:active,
	.ditib-ayet:active {
		transform: scale(0.99);
		transition: transform 100ms ease;
	}
	/* Hover-Effekte abschalten auf Touch */
	.ditib-news__card:hover,
	.ditib-team__card:hover,
	.ditib-event-card:hover,
	.ditib-hutbe:hover,
	.ditib-hadith:hover,
	.ditib-ayet:hover { transform: none; }
}

/* ---- Typografie für Mobile (lesbar, proportional) ---- */
@media (max-width: 600px) {
	body {
		font-size: 16px;
		line-height: 1.6;
	}
	h1 {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
		letter-spacing: -0.03em;
		line-height: 1.15;
	}
	h2 {
		font-size: clamp(1.4rem, 4.5vw, 1.75rem);
		line-height: 1.2;
	}
	h3 {
		font-size: clamp(1.1rem, 3.5vw, 1.3rem);
		line-height: 1.3;
	}
	p, .is-style-lead {
		font-size: 16px;
		line-height: 1.6;
	}
	.is-style-lead {
		font-size: clamp(16px, 4vw, 1.1rem);
	}
	/* Reading-Width Begrenzung auf Mobile aufheben (Container ist ja schon schmal) */
	.ditib-content > .entry-content > p,
	.ditib-content > .wp-block-post-content > p,
	.ditib-content > .entry-content > h2,
	.ditib-content > .wp-block-post-content > h2,
	.ditib-content > .entry-content > h3,
	.ditib-content > .wp-block-post-content > h3,
	.ditib-content > .entry-content > ul,
	.ditib-content > .wp-block-post-content > ul,
	.ditib-content > .entry-content > ol,
	.ditib-content > .wp-block-post-content > ol {
		max-width: 100%;
	}
}

/* ---- Sehr kleine Screens (320–375px) ---- */
@media (max-width: 375px) {
	:root { --container-pad: 16px; }
	.ditib-hero {
		min-height: 460px;
		padding: 56px 16px 48px;
		margin: 8px;
		max-width: calc(100% - 16px);
	}
	.ditib-hero__title-main { font-size: 1.75rem; letter-spacing: -0.03em; }
	.ditib-hero__subtitle { font-size: 0.95rem; }
	.ditib-hero__btn {
		padding: 12px 16px !important;
		font-size: 0.85rem !important;
		min-height: 44px !important;
	}
	.ditib-next-prayer {
		padding: 18px;
		gap: 4px 12px;
	}
	.ditib-next-prayer__time { font-size: 1.7rem; }
	.ditib-next-prayer__label { font-size: 0.62rem; letter-spacing: 0.18em; }
	.ditib-next-prayer__name { font-size: 0.95rem; }
}

/* ---- iPhone Standard (375–414px) ---- */
@media (min-width: 376px) and (max-width: 480px) {
	:root { --container-pad: 18px; }
}

/* ---- Mobile Container-Consistency ---- */
@media (max-width: 768px) {
	/* Wrapper haben EXAKT --container-pad — nicht clamp */
	.wp-site-blocks > main > .ditib-page-header,
	.wp-site-blocks > main > .ditib-content {
		padding-left: var(--container-pad) !important;
		padding-right: var(--container-pad) !important;
	}
	.ditib-hero { padding-left: var(--container-pad); padding-right: var(--container-pad); }
	.ditib-about,
	.ditib-news,
	.ditib-team { padding-left: var(--container-pad); padding-right: var(--container-pad); }
	.ditib-cta { padding-left: var(--container-pad) !important; padding-right: var(--container-pad) !important; }
	.ditib-header__inner,
	.ditib-header--3col,
	.ditib-footer__inner,
	.ditib-footer__legal-wrap { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}

/* ---- Sections: Padding-Vertikal mobile-friendly ---- */
@media (max-width: 600px) {
	.ditib-about,
	.ditib-news,
	.ditib-team {
		margin: 32px 0;
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.ditib-page-header {
		padding-top: 32px !important;
		padding-bottom: 24px !important;
		margin-bottom: 24px;
	}
}

/* ---- Mobile Hero-Optimierung ---- */
@media (max-width: 768px) {
	.ditib-hero {
		min-height: 520px;
		padding: 64px var(--container-pad) 56px;
		margin: 12px;
		max-width: calc(100% - 24px);
		border-radius: var(--r-lg);
	}
	.ditib-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.ditib-hero__main { max-width: 100%; }
	.ditib-hero__title-main {
		font-size: clamp(2rem, 7vw, 2.75rem);
	}
	.ditib-hero__cta { gap: 8px; }
	.ditib-hero__btn {
		flex: 1 1 calc(50% - 4px);
		min-width: 130px;
	}
	.ditib-next-prayer {
		max-width: 100%;
		justify-self: stretch;
	}
}

/* ---- Mobile Cards-Padding korrigieren (kein -margin-Overflow) ---- */
@media (max-width: 600px) {
	.ditib-news__card {
		padding: 20px 18px;
	}
	.ditib-news__media {
		margin: -20px -18px 16px;
	}
	.ditib-news__media img {
		height: 200px;
	}
	.ditib-hutbe,
	.ditib-hadith,
	.ditib-ayet {
		padding: 36px 20px 24px;
	}
	.ditib-team__card { padding: 20px 16px; }
	.ditib-team__name { font-size: 0.95rem; }
	.ditib-team__role { font-size: 0.78rem; }
}

/* ---- Mobile Forms (iOS Zoom-Prävention, klare Labels) ---- */
@media (max-width: 768px) {
	.ditib-form__field input,
	.ditib-form__field textarea {
		font-size: 16px; /* iOS zoom-prevention */
		padding: 14px 14px;
		min-height: 48px;
	}
	.ditib-form__field textarea {
		min-height: 140px;
		padding: 14px;
	}
	.ditib-form__field label {
		font-size: 0.88rem;
	}
	.ditib-form__row { grid-template-columns: 1fr; gap: 14px; }
	.ditib-form__submit {
		width: 100%;
		min-height: 52px;
		font-size: 1rem;
	}
}

/* ---- Mobile Events-List ---- */
@media (max-width: 600px) {
	.ditib-events__filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 6px;
		padding-bottom: 16px;
		margin: 0 calc(var(--container-pad) * -1) 24px;
		padding-left: var(--container-pad);
		padding-right: var(--container-pad);
	}
	.ditib-events__filter::-webkit-scrollbar { display: none; }
	.ditib-events__filter-btn {
		flex: 0 0 auto;
		min-height: 40px;
	}
}

/* ---- Mobile Gallery: dichter, ohne Lücken ---- */
@media (max-width: 600px) {
	.ditib-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
}
@media (max-width: 380px) {
	.ditib-gallery { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Mobile Footer: kompakt, klar geordnet ---- */
@media (max-width: 600px) {
	.ditib-footer { padding: 48px 0 24px; }
	.ditib-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}
	.ditib-footer__col h4 { text-align: center; }
	.ditib-footer__nav {
		text-align: center;
		align-items: center;
	}
	.ditib-footer__nav a {
		display: inline-block;
		padding: 10px 0;
		min-height: 44px;
		line-height: 24px;
	}
	.ditib-footer__col--brand {
		text-align: center;
	}
	.ditib-footer__brand-desc { max-width: 30ch; margin-left: auto; margin-right: auto; }
	.ditib-footer__social {
		justify-content: center;
		margin-top: 16px;
	}
	.ditib-footer__legal-wrap { padding-top: 20px; margin-top: 32px; }
	.ditib-footer__legal-wrap p { margin-bottom: 8px !important; }
}

/* ---- Mobile Cookie-Banner ---- */
@media (max-width: 600px) {
	.ditib-cookie-banner {
		padding: 14px 16px !important;
		border-radius: var(--r-md);
	}
	.ditib-cookie-banner__title { font-size: 0.92rem; }
	.ditib-cookie-banner__text { font-size: 0.8rem; line-height: 1.5; }
	.ditib-cookie-banner__btn { min-height: 44px; font-size: 0.85rem; }
}

/* ---- Mobile-Animationen: reduziert ---- */
@media (max-width: 768px) {
	/* Marquee langsamer + dezenter auf Mobile */
	.ditib-marquee { height: 28px; }
	.ditib-marquee__track { animation-duration: 80s; }
	.ditib-marquee__item { font-size: 0.7rem; }
	/* Card-Hover deaktiviert (siehe oben @media hover:none) */
	/* Stagger-Animations reduziert */
	.ditib-news__grid > .ditib-news__card,
	.ditib-team__grid > .ditib-team__card { animation-duration: 400ms; }
}

/* ---- Mobile Header-Refinement ---- */
@media (max-width: 768px) {
	.ditib-header__inner,
	.ditib-header--3col {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		min-height: 60px !important;
	}
	.ditib-header__brand img {
		max-height: 38px !important;
		max-width: 130px !important;
	}
	.ditib-header .wp-block-navigation__responsive-container-open {
		width: 44px !important;
		height: 44px !important;
	}
}

/* ---- Mobile Page-Header: kompakte Title-Box ---- */
@media (max-width: 600px) {
	.ditib-page-header {
		border-radius: var(--r-lg);
		padding-top: 40px !important;
		padding-bottom: 32px !important;
	}
	.ditib-page-header h1 {
		font-size: clamp(1.6rem, 6vw, 2.1rem);
	}
}

/* ---- Mobile Prayer-Card: bessere Skalierung ---- */
@media (max-width: 600px) {
	.ditib-prayer {
		padding: 24px 16px;
		margin: 24px 0;
	}
	.ditib-prayer__head { margin-bottom: 20px; }
	.ditib-prayer__title { font-size: 1.15rem; }
	.ditib-prayer__date { font-size: 0.8rem; }
	.ditib-prayer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
	.ditib-prayer__cell { padding: 12px 6px; }
	.ditib-prayer__time { font-size: 1.05rem; }
	.ditib-prayer__label-tr { font-size: 0.85rem; }
	.ditib-prayer__label-de { font-size: 0.6rem; }
}
@media (max-width: 380px) {
	.ditib-prayer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Mobile CTA-Section ---- */
@media (max-width: 600px) {
	.ditib-cta {
		padding: 48px 20px !important;
		border-radius: var(--r-lg);
		margin: 32px 0;
	}
	.ditib-cta__title {
		font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
	}
	.ditib-cta__text {
		font-size: 0.95rem !important;
	}
	.ditib-cta__buttons {
		flex-direction: column;
		width: 100%;
		gap: 8px;
	}
	.ditib-cta__btn { width: 100%; }
}

/* ---- Mobile Hadith/Ayet auf gestapeltem Inspiration-Band ---- */
@media (max-width: 900px) {
	.wp-block-columns:has(.ditib-hadith),
	.wp-block-columns:has(.ditib-ayet),
	.wp-block-columns:has(.ditib-hutbe) {
		padding: 32px 0;
		margin: 32px 0;
	}
}

/* ---- Lang-Switch sehr kompakt auf super-kleinen Screens ---- */
@media (max-width: 360px) {
	.ditib-lang-switch__btn {
		min-width: 30px;
		padding: 4px 6px;
		font-size: 0.65rem;
	}
}

/* ---- Mobile-Lightbox: sicher zentriert + nicht zu groß ---- */
@media (max-width: 600px) {
	.ditib-lightbox { padding: 16px; }
	.ditib-lightbox__close,
	.ditib-lightbox__prev,
	.ditib-lightbox__next {
		width: 44px;
		height: 44px;
		font-size: 1.2rem;
	}
	.ditib-lightbox__close { top: 12px; right: 12px; }
	.ditib-lightbox__prev { left: 8px; }
	.ditib-lightbox__next { right: 8px; }
}

/* ---- Bilder mit Aspect-Ratio (kein Layout-Shift) ---- */
.ditib-news__media img { aspect-ratio: 16 / 10; }
.ditib-team__img-wrap img { aspect-ratio: 1 / 1; }
.ditib-about__visual-card img { aspect-ratio: 5 / 4; }

/* ---- Mobile Stagger-Animations weicher (weniger Distanz) ---- */
@media (max-width: 600px) {
	[data-animate] {
		transform: translateY(12px);
		transition-duration: 350ms;
	}
}

/* ---- Print-Styles (Bonus: druckfreundlich) ---- */
@media print {
	.ditib-header,
	.ditib-footer,
	.ditib-cookie-banner,
	.ditib-back-to-top,
	.ditib-marquee,
	.ditib-events__filter,
	.ditib-hero__cta { display: none !important; }
	body { background: #fff !important; color: #000 !important; }
	.ditib-hero, .ditib-cta { background: #fff !important; color: #000 !important; }
}

/* =========================================================================
   PATCH v4.1.1 — Mobile Menu + Footer-Layout + Kontrast
   ========================================================================= */

/* ============ 1. MOBILE MENU OVERLAY — aufgewertet ============ */
.wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(180deg, #fff 0%, var(--c-paper) 100%) !important;
	padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 80px 24px 40px !important;
	max-width: 480px !important;
	margin: 0 auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	padding: 0 !important;
	gap: 4px !important;
}

/* Menü-Items: größer, mit Hover-Background statt Border-Bottom */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	padding: 14px 16px !important;
	border: 0 !important;
	border-radius: var(--r-md) !important;
	color: var(--c-ink) !important;
	background: transparent !important;
	transition: background var(--t-fast) var(--ease) !important;
	min-height: 48px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active {
	background: var(--c-teal-soft) !important;
	color: var(--c-teal-dark) !important;
}

/* Submenu-Items (eingerückt + dezenter) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	padding: 0 0 0 12px !important;
	margin: 0 0 8px !important;
	border-left: 2px solid var(--c-teal-soft) !important;
	margin-left: 16px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	padding: 11px 14px !important;
	color: var(--c-ink-soft) !important;
	min-height: 44px;
}

/* Parent-Item (mit Submenu) anders styling */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	color: var(--c-teal-dark) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 16px 16px 8px !important;
	background: transparent !important;
}

/* Submenu-Toggle/Arrow ausblenden — wird automatisch aufgeklappt */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* Close-Button polieren */
.wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 44px !important;
	height: 44px !important;
	background: var(--c-off-white) !important;
	border-radius: 50% !important;
	color: var(--c-ink) !important;
	border: 1px solid var(--c-border) !important;
}

/* ============ 2. MOBILE FOOTER — kompakt und 2-spaltig ============ */
@media (max-width: 600px) {
	.ditib-footer { padding: 40px 0 24px; }
	.ditib-footer__inner {
		grid-template-columns: 1fr 1fr !important;
		gap: 28px 20px !important;
		text-align: left !important;
	}
	/* Brand-Spalte: volle Breite zentriert, mit klar lesbarem Text */
	.ditib-footer__col--brand {
		grid-column: 1 / -1 !important;
		text-align: center !important;
		padding-bottom: 24px;
		border-bottom: 1px solid rgba(255,255,255,0.10);
		margin-bottom: 4px;
	}
	.ditib-footer__brand-title { font-size: 1.1rem; }
	.ditib-footer__brand-desc {
		font-size: 0.88rem;
		line-height: 1.6;
		color: rgba(255,255,255,0.75) !important;
		max-width: 32ch;
		margin-left: auto;
		margin-right: auto;
	}
	.ditib-footer__addr p {
		font-size: 0.85rem;
		color: rgba(255,255,255,0.85) !important;
	}
	.ditib-footer__addr a {
		color: var(--c-teal) !important;
		font-weight: 500;
	}
	/* Nav-Spalten: links-bündig im Stack, kompakter Spacing */
	.ditib-footer__col:not(.ditib-footer__col--brand) {
		text-align: left !important;
	}
	.ditib-footer__col h4 {
		text-align: left !important;
		font-size: 0.72rem;
		margin-bottom: 12px;
		color: #fff !important;
	}
	.ditib-footer__nav {
		gap: 2px !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	.ditib-footer__nav a {
		display: block !important;
		padding: 6px 0 !important;
		min-height: 32px;
		line-height: 20px;
		font-size: 0.88rem;
		color: rgba(255,255,255,0.85) !important;
	}
	/* 4. Spalte (Kontakt & Service) unter die 3 anderen */
	.ditib-footer__col:nth-child(4) {
		grid-column: 1 / -1 !important;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 16px;
		align-items: start;
		padding-top: 20px;
		border-top: 1px solid rgba(255,255,255,0.08);
		margin-top: 4px;
	}
	.ditib-footer__col:nth-child(4) h4 { grid-column: 1 / -1; }
	.ditib-footer__col:nth-child(4) .ditib-footer__nav {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 16px;
		grid-column: 1;
	}
	.ditib-footer__col:nth-child(4) .ditib-footer__social {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
		align-self: start;
	}
}

/* Sehr klein (≤ 380px): wieder 1-spaltig */
@media (max-width: 380px) {
	.ditib-footer__inner {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.ditib-footer__col:nth-child(4) {
		grid-template-columns: 1fr !important;
	}
	.ditib-footer__col:nth-child(4) .ditib-footer__social {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
	}
}

/* ============ 3. KONTRAST — alle Texte auf dunklem BG lesbar ============ */
.ditib-footer p,
.ditib-footer__addr p {
	color: rgba(255,255,255,0.85);
}
.ditib-footer__addr a,
.ditib-footer__addr a:visited {
	color: var(--c-teal) !important;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(21,122,126,0.4);
	text-underline-offset: 2px;
}
.ditib-footer__addr a:hover {
	color: #fff !important;
	text-decoration-color: #fff;
}
.ditib-footer__brand-desc {
	color: rgba(255,255,255,0.75) !important;
}
.ditib-footer__nav a {
	color: rgba(255,255,255,0.85);
}
.ditib-footer__legal-wrap p {
	color: rgba(255,255,255,0.75);
}
.ditib-footer__legal-wrap .ditib-footer__copy {
	color: rgba(255,255,255,0.65) !important;
}
.ditib-footer__legal-wrap .ditib-footer__credit {
	color: rgba(255,255,255,0.7) !important;
}
.ditib-footer__legal-wrap .ditib-footer__credit-label {
	color: rgba(255,255,255,0.7) !important;
}

/* Hero Türkis-Akzent: hellerer Türkis für besseren Kontrast auf dunkelblau */
.ditib-hero__kicker::before {
	background: #5BCBCF;
}
.ditib-hero__kicker {
	color: rgba(255,255,255,0.85) !important;
}

/* Next-Prayer Label & Sabah-Text mehr Kontrast */
.ditib-next-prayer__label { opacity: 0.7; color: #fff; }
.ditib-next-prayer__name { opacity: 0.95; color: #fff; }
.ditib-next-prayer__countdown {
	opacity: 0.8;
	color: rgba(255,255,255,0.85);
}

/* Marquee-Items besser lesbar */
.ditib-marquee__item {
	color: rgba(255,255,255,0.92);
	font-weight: 500;
}
.ditib-marquee__sep {
	color: #5BCBCF;
	opacity: 0.7;
}

/* ============ PATCH v4.1.2 — Adresse im Footer voll weiß ============ */
.ditib-footer__addr,
.ditib-footer__addr p,
.ditib-footer__addr strong {
	color: #ffffff !important;
}
.ditib-footer__addr a,
.ditib-footer__addr a:visited {
	color: #ffffff !important;
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.4);
	text-underline-offset: 3px;
	font-weight: 500;
}
.ditib-footer__addr a:hover {
	color: var(--c-teal) !important;
	text-decoration-color: var(--c-teal);
}

/* ============ PATCH v4.1.3 — Footer 4. Spalte sauber ============ */
@media (max-width: 600px) {
	.ditib-footer__col:nth-child(4) {
		grid-column: 1 / -1 !important;
		display: block !important;
		padding-top: 20px;
		border-top: 1px solid rgba(255,255,255,0.08);
		margin-top: 4px;
	}
	.ditib-footer__col:nth-child(4) h4 {
		display: block;
		margin-bottom: 14px !important;
	}
	.ditib-footer__col:nth-child(4) .ditib-footer__nav {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 2px 16px !important;
		margin-bottom: 16px;
	}
	.ditib-footer__col:nth-child(4) .ditib-footer__nav a {
		display: block !important;
		padding: 8px 0 !important;
		min-height: 40px;
		line-height: 24px;
		font-size: 0.9rem;
	}
	.ditib-footer__col:nth-child(4) .ditib-footer__social {
		display: flex !important;
		gap: 10px;
		margin-top: 16px;
		justify-content: flex-start;
	}
}
@media (max-width: 380px) {
	.ditib-footer__col:nth-child(4) .ditib-footer__nav {
		grid-template-columns: 1fr;
	}
}

/* ============ PATCH v4.1.4 — Mobile Menu zentriert + Cards gleiche Breite ============ */

/* MOBILE MENU: alles zentriert ohne Indent */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: center !important;
	justify-content: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: var(--c-paper) !important;
	border-left: 0 !important;
	border-radius: var(--r-md) !important;
	padding: 4px 0 !important;
	margin: 0 0 12px 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	padding: 10px 16px !important;
	color: var(--c-ink-soft) !important;
	min-height: 44px;
	text-align: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	text-align: center !important;
	justify-content: center !important;
}

/* HOMEPAGE: alle Sektions-Cards gleiche horizontale Breite (Padding angleichen) */
.wp-site-blocks > main > .wp-block-columns:has(.ditib-hadith),
.wp-site-blocks > main > .wp-block-columns:has(.ditib-ayet),
.wp-site-blocks > main > .wp-block-columns:has(.ditib-hutbe) {
	max-width: var(--container-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--container-pad) !important;
	padding-right: var(--container-pad) !important;
	box-sizing: border-box;
}

/* Alle Top-Level Sektionen auf der Startseite: identische Container-Breite */
.wp-site-blocks > main > .ditib-news,
.wp-site-blocks > main > .ditib-about,
.wp-site-blocks > main > .ditib-team,
.wp-site-blocks > main > .ditib-hero,
.wp-site-blocks > main > .wp-block-columns {
	max-width: var(--container-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Auf Mobile: Cards-Padding identisch zu News */
@media (max-width: 600px) {
	.wp-site-blocks > main > .wp-block-columns:has(.ditib-hadith),
	.wp-site-blocks > main > .wp-block-columns:has(.ditib-ayet),
	.wp-site-blocks > main > .wp-block-columns:has(.ditib-hutbe) {
		padding-left: var(--container-pad) !important;
		padding-right: var(--container-pad) !important;
		padding-top: 32px;
		padding-bottom: 32px;
		margin: 24px auto !important;
	}
}

/* Inspiration-Band hinter den Quote-Cards: NICHT mehr full-vw extending */
.wp-block-columns:has(.ditib-hadith)::before,
.wp-block-columns:has(.ditib-ayet)::before,
.wp-block-columns:has(.ditib-hutbe)::before {
	inset: 0 !important;
	border-radius: var(--r-xl);
}

/* ============ PATCH v4.1.5 — Hutbe-Background entfernt, Card = Container ============ */
/* Hintergrund des wp-block-columns-Wrappers komplett raus — Card hat eigene bg */
.wp-block-columns:has(.ditib-hadith),
.wp-block-columns:has(.ditib-ayet),
.wp-block-columns:has(.ditib-hutbe) {
	padding: 0 !important;
	margin: 24px auto !important;
	background: transparent !important;
}
.wp-block-columns:has(.ditib-hadith)::before,
.wp-block-columns:has(.ditib-ayet)::before,
.wp-block-columns:has(.ditib-hutbe)::before {
	display: none !important;
}

/* Hutbe/Hadith/Ayet Card: vollständig im Container, gleiche Breite wie News-Cards */
.wp-site-blocks > main > .wp-block-columns > .wp-block-column > .ditib-hutbe,
.wp-site-blocks > main > .wp-block-columns > .wp-block-column > .ditib-hadith,
.wp-site-blocks > main > .wp-block-columns > .wp-block-column > .ditib-ayet,
.wp-site-blocks > main > .wp-block-columns .ditib-hutbe,
.wp-site-blocks > main > .wp-block-columns .ditib-hadith,
.wp-site-blocks > main > .wp-block-columns .ditib-ayet {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Auf Mobile: jede Card hat denselben margin/padding wie News-Section */
@media (max-width: 900px) {
	.wp-block-columns:has(.ditib-hadith) > .wp-block-column,
	.wp-block-columns:has(.ditib-ayet) > .wp-block-column,
	.wp-block-columns:has(.ditib-hutbe) > .wp-block-column {
		padding: 0 !important;
		margin: 0 0 16px 0 !important;
	}
}

/* ============ PATCH v4.1.6 — Homepage Sections gleiche Breite ============ */
/* Startseite hat ALLE Sections in main > .entry-content (nicht direkt unter main) */

.wp-site-blocks > main > .entry-content > .ditib-hero,
.wp-site-blocks > main > .entry-content > .ditib-about,
.wp-site-blocks > main > .entry-content > .ditib-news,
.wp-site-blocks > main > .entry-content > .ditib-team,
.wp-site-blocks > main > .entry-content > .ditib-cta,
.wp-site-blocks > main > .entry-content > .wp-block-columns,
.wp-site-blocks > main > .wp-block-post-content > .ditib-hero,
.wp-site-blocks > main > .wp-block-post-content > .ditib-about,
.wp-site-blocks > main > .wp-block-post-content > .ditib-news,
.wp-site-blocks > main > .wp-block-post-content > .ditib-team,
.wp-site-blocks > main > .wp-block-post-content > .ditib-cta,
.wp-site-blocks > main > .wp-block-post-content > .wp-block-columns {
	max-width: var(--container-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* Spacer auch im Container */
.wp-site-blocks > main > .entry-content > .wp-block-spacer,
.wp-site-blocks > main > .wp-block-post-content > .wp-block-spacer {
	max-width: var(--container-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hero behält rounded margin */
.wp-site-blocks > main > .entry-content > .ditib-hero,
.wp-site-blocks > main > .wp-block-post-content > .ditib-hero {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}

/* Columns mit Hutbe/Hadith/Ayet: identisches Padding wie News-Section */
.wp-site-blocks > main > .entry-content > .wp-block-columns:has(.ditib-hadith),
.wp-site-blocks > main > .entry-content > .wp-block-columns:has(.ditib-ayet),
.wp-site-blocks > main > .entry-content > .wp-block-columns:has(.ditib-hutbe),
.wp-site-blocks > main > .wp-block-post-content > .wp-block-columns:has(.ditib-hadith),
.wp-site-blocks > main > .wp-block-post-content > .wp-block-columns:has(.ditib-ayet),
.wp-site-blocks > main > .wp-block-post-content > .wp-block-columns:has(.ditib-hutbe) {
	padding-left: clamp(24px, 4vw, 48px) !important;
	padding-right: clamp(24px, 4vw, 48px) !important;
	margin: 24px auto !important;
}
@media (max-width: 600px) {
	.wp-site-blocks > main > .entry-content > .wp-block-columns:has(.ditib-hadith),
	.wp-site-blocks > main > .entry-content > .wp-block-columns:has(.ditib-ayet),
	.wp-site-blocks > main > .entry-content > .wp-block-columns:has(.ditib-hutbe),
	.wp-site-blocks > main > .wp-block-post-content > .wp-block-columns:has(.ditib-hadith),
	.wp-site-blocks > main > .wp-block-post-content > .wp-block-columns:has(.ditib-ayet),
	.wp-site-blocks > main > .wp-block-post-content > .wp-block-columns:has(.ditib-hutbe) {
		padding-left: var(--container-pad) !important;
		padding-right: var(--container-pad) !important;
	}
}

/* entry-content auf Homepage: kein eigenes Padding (sonst stackt es) */
.wp-site-blocks > main > .entry-content,
.wp-site-blocks > main > .wp-block-post-content {
	padding: 0 !important;
	max-width: 100% !important;
}

/* ============ PATCH v4.1.7 — Mobile Menu klar strukturiert ============ */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 80px 20px 40px !important;
	max-width: 440px !important;
	margin: 0 auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

/* Top-Level standalone Links (Veranstaltungen, Galerie, Der Vorstand, Spenden) */
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-dialog > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	color: var(--c-ink) !important;
	background: var(--c-off-white) !important;
	padding: 18px 20px !important;
	border-radius: var(--r-md) !important;
	border: 1px solid var(--c-border) !important;
	text-align: center !important;
	min-height: 56px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content:active {
	background: var(--c-teal-soft) !important;
	color: var(--c-teal-dark) !important;
	border-color: var(--c-teal) !important;
}

/* Top-Level Items MIT Submenu (Die Gemeinde, Der Glaube, Kontakt) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu {
	background: linear-gradient(180deg, var(--c-teal-soft) 0%, var(--c-paper) 100%);
	border: 1px solid var(--c-teal-soft);
	border-radius: var(--r-lg);
	padding: 14px 12px 12px;
	margin-top: 8px;
	margin-bottom: 8px;
}

/* Parent-Label (Die Gemeinde, Der Glaube, Kontakt) — als Section-Header */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--c-teal-dark) !important;
	background: transparent !important;
	padding: 6px 16px 14px !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center !important;
	min-height: 0 !important;
	pointer-events: none;
	cursor: default;
}

/* Submenu-Container (Children of parent) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Submenu-Items (Über uns, Unsere Entstehung, Tätigkeiten etc.) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--c-ink) !important;
	background: #fff !important;
	padding: 14px 18px !important;
	border-radius: var(--r-md) !important;
	border: 1px solid transparent !important;
	text-align: center !important;
	min-height: 48px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active {
	background: var(--c-teal) !important;
	color: #fff !important;
	border-color: var(--c-teal-dark) !important;
}

/* Submenu-Arrow ausblenden (alles ist sowieso aufgeklappt) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* Close-Button: groß + klar erkennbar */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: 20px !important;
	right: 20px !important;
	width: 48px !important;
	height: 48px !important;
	background: var(--c-ink) !important;
	border-radius: 50% !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: var(--sh-3);
	z-index: 100002;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	color: #fff !important;
	width: 24px;
	height: 24px;
}

/* Aktive Seite (current-menu-item) hervorheben */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	background: var(--c-teal-dark) !important;
	color: #fff !important;
	border-color: var(--c-teal-dark) !important;
}

/* ============ PATCH v4.1.8 — Menu-Items full-width + Close safe-area ============ */

/* Top-Level Navigation-Items: alle in voller Breite (auch Standalone wie Veranstaltungen, Galerie) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100% !important;
	display: block !important;
}

/* Standalone Items als Block-Card mit voller Breite */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Submenu-Container (Children) auch volle Breite */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100% !important;
	display: block !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Submenu-Parent (Die Gemeinde, Der Glaube, Kontakt) Container — volle Breite */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu {
	width: 100% !important;
	display: block !important;
	box-sizing: border-box;
}

/* Close-Button: Safe-Area-aware Position für iPhones mit Notch */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: max(20px, calc(var(--safe-top, 0px) + 12px)) !important;
	right: max(20px, calc(var(--safe-right, 0px) + 12px)) !important;
}

/* ============ PATCH v4.1.9 — X-Button zentriert + Hero gleiche Breite ============ */

/* Close-X exakt in der Mitte des dunklen Kreises */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	line-height: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	display: block !important;
	margin: 0 !important;
	width: 22px !important;
	height: 22px !important;
}

/* HERO: exakt gleiche Breite + Position wie Aktuelles-Section */
.ditib-hero,
.wp-site-blocks > main > .ditib-hero,
.wp-site-blocks > main > .entry-content > .ditib-hero,
.wp-site-blocks > main > .wp-block-post-content > .ditib-hero {
	max-width: var(--container-max) !important;
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 24px !important;
	margin-bottom: 24px !important;
	box-sizing: border-box !important;
}

/* Mobile: Hero margin gleich wie andere Sections (kein extra Edge-Margin) */
@media (max-width: 600px) {
	.ditib-hero,
	.wp-site-blocks > main > .ditib-hero,
	.wp-site-blocks > main > .entry-content > .ditib-hero,
	.wp-site-blocks > main > .wp-block-post-content > .ditib-hero {
		margin-left: var(--container-pad) !important;
		margin-right: var(--container-pad) !important;
		max-width: calc(100% - calc(2 * var(--container-pad))) !important;
	}
}

/* =========================================================================
   ISLAM TOPIC GRID (auf /der-islam/ — 11 Artikel-Kacheln)
   ========================================================================= */
.ditib-islam-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--s-4);
	margin: var(--s-6) 0 var(--s-7);
}

.ditib-islam-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	background: var(--c-paper);
	border: 1px solid var(--c-border-soft);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--c-ink);
	transition: transform var(--t-fast) var(--ease),
	            box-shadow var(--t-base) var(--ease),
	            border-color var(--t-fast) var(--ease),
	            background var(--t-fast) var(--ease);
	position: relative;
	overflow: hidden;
}

.ditib-islam-card::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--c-red) 0%, var(--c-teal) 100%);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--t-base) var(--ease);
}

.ditib-islam-card:hover,
.ditib-islam-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sh-2);
	border-color: var(--c-border);
	background: var(--c-white);
	color: var(--c-ink);
}

.ditib-islam-card:hover::before,
.ditib-islam-card:focus-visible::before { transform: scaleY(1); }

.ditib-islam-card__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 600;
	color: var(--c-ink);
}

.ditib-islam-card__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--c-ink-soft);
	flex: 1;
}

.ditib-islam-card__cta {
	margin-top: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-red);
	letter-spacing: 0.01em;
}

.ditib-islam-card__cta span[aria-hidden] {
	display: inline-block;
	transition: transform var(--t-fast) var(--ease);
	margin-left: 2px;
}

.ditib-islam-card:hover .ditib-islam-card__cta span[aria-hidden],
.ditib-islam-card:focus-visible .ditib-islam-card__cta span[aria-hidden] {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	.ditib-islam-grid {
		grid-template-columns: 1fr;
		gap: var(--s-3);
	}
	.ditib-islam-card { padding: 16px 18px; }
	.ditib-islam-card__title { font-size: 1.125rem; }
}

/* "Zurück zur Übersicht" Link am Top jedes Sub-Artikels */
.ditib-islam-back {
	margin: 0 0 var(--s-5) !important;
	font-size: 0.9375rem;
}
.ditib-islam-back a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--c-teal);
	text-decoration: none;
	font-weight: 500;
	padding: 4px 8px;
	margin-left: -8px;
	border-radius: var(--r-sm);
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ditib-islam-back a:hover {
	background: var(--c-teal-soft);
	color: var(--c-teal-dark);
}