/* ============================================================================
   EFG Neu – Hauptstylesheet
   Erlöserkirche Gelsenkirchen
   Mobile First, Light Mode default, Dark Mode via html[data-efg-theme="dark"]
   Akzente: Gruen  #bad701 · Blau #c1d6f1
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design-Tokens (Light Mode = Default)
   -------------------------------------------------------------------------- */
:root {
	--efg-green: #bad701;
	--efg-green-ink: #5f7d00;
	--efg-green-deep: #8baa00;
	--efg-blue: #c1d6f1;
	--efg-blue-ink: #2b4a75;

	/* Semantische Flae-/Texttokens (werden im Dark Mode überschrieben) */
	--efg-page-bg: #eef2f8;
	--efg-surface: #ffffff;
	--efg-surface-alt: #f4f7fb;
	--efg-text: #14171a;
	--efg-text-muted: #5c6570;
	--efg-border: #d9dee3;
	--efg-shadow: 0 1px 2px rgba(20, 23, 26, .06), 0 8px 24px rgba(20, 23, 26, .07);

	/* Formen & Masse */
	--efg-radius: 16px;      /* Cards */
	--efg-radius-sm: 10px;
	--efg-radius-pill: 999px;
	--efg-ratio-card: 16 / 9; /* alle Cards mit 16:9 Bildern */
	--efg-header-h: 62px;
	/* Einheitlicher Rand innen (deterministisch, ohne root-padding-Mechanik) */
	--efg-pad: clamp(1rem, 4vw, 2.5rem);
}

/* ----------------------------------------------------------------------------
   2. Dark Mode – nur die semantischen Tokens tauschen
   -------------------------------------------------------------------------- */
html[data-efg-theme="dark"] {
	--efg-page-bg: #0f1317;
	--efg-surface: #191f26;
	--efg-surface-alt: #202832;
	--efg-text: #e8ecef;
	--efg-text-muted: #a5b0bd;
	--efg-border: #2c3542;
	--efg-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .45);

	/* WordPress-Paletten (theme.json) im Dark Mode – Blocks erben automatisch */
	--wp--preset--color--contrast: #e8ecef;
	--wp--preset--color--base: #191f26;
	--wp--preset--color--bg: #0f1317;
	--wp--preset--color--muted: #a5b0bd;
	--wp--preset--color--line: #2c3542;
	--wp--preset--color--dark-surface: #0b0e12;
	--wp--preset--color--accent: #bad701;
	--wp--preset--color--accent-ink: #cbe83f;
	--wp--preset--color--accent-blue: #24384f;
	--wp--preset--color--accent-blue-ink: #a9c6ee;
	--wp--preset--color--blue-tint: #1b222b;

	color-scheme: dark;
}

html { color-scheme: light; scroll-behavior: smooth; }

body {
	background-color: var(--efg-page-bg);
	color: var(--efg-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--efg-green); color: #14171a; }

img { border-radius: inherit; }

/* Weiche, einheitliche Rundungen fuer Content-Bilder */
.wp-block-image img { border-radius: var(--efg-radius-sm); }

/* ----------------------------------------------------------------------------
   3. Barrierefreiheit
   -------------------------------------------------------------------------- */
.skip-link.screen-reader-text,
.efg-skip-link:focus:not(:focus-visible) { /* Platzhalter, siehe unten */ }

.efg-skip-link,
.wp-skip-link-screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--efg-green);
	outline-offset: 2px;
	border-radius: 4px;
}

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

/* ----------------------------------------------------------------------------
   4. Topbar (Metazeile über der Navbar)
   -------------------------------------------------------------------------- */
.efg-topbar {
	background: #16233a;
	color: #dfe7f2;
	font-size: var(--wp--preset--font-size--xs, .82rem);
	line-height: 1.4;
}

html[data-efg-theme="dark"] .efg-topbar {
	background: #0b1016;
	color: #c3ccd8;
	border-bottom: 1px solid var(--efg-border);
}

.efg-topbar a { color: inherit; text-decoration: none; }
.efg-topbar a:hover,
.efg-topbar a:focus-visible { color: var(--efg-green); text-decoration: underline; }

.efg-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1rem;
	padding-block: .45rem;
}

.efg-topbar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.efg-topbar__item { display: inline-flex; align-items: center; gap: .4rem; }
.efg-topbar__icon { color: var(--efg-green); flex: 0 0 auto; }
.efg-topbar__spacer { flex: 1 1 auto; }

/* Hilfsklassen fuer RESPONSIVE Inhalte */
.efg-hide-xs, .efg-topbar__hide-xs { display: none !important; }
@media (min-width: 640px) {
	.efg-hide-xs, .efg-topbar__hide-xs { display: inline-flex !important; }
}

.efg-hide-sm { display: none !important; }
@media (min-width: 1024px) { .efg-hide-sm { display: inline-flex !important; } }

/* Fuer Screenreader (unsichtbar, aber im Accessibility-Tree) */
.efg-screenreader-text,
.screen-reader-text-box {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.efg-topbar__service { font-weight: 600; color: #fff; }
html[data-efg-theme="dark"] .efg-topbar__service { color: var(--efg-green); }

/* ----------------------------------------------------------------------------
   5. Header + Navbar (sticky, kompakt)
   -------------------------------------------------------------------------- */
.efg-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: color-mix(in srgb, var(--efg-surface) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--efg-border);
}

.efg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: var(--efg-header-h);
	padding-block: .4rem;
}

.efg-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
	color: var(--efg-text);
}

.efg-brand-wrap { gap: .6rem; text-decoration: none; }
.efg-brand__text { gap: 0; line-height: 1.15; }
.efg-brand__logo {
	width: 38px;
	height: 42px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: var(--efg-green);
	color: #14171a;
	border-radius: 8px 8px 8px 16px;
	font-weight: 800;
}

.efg-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.02rem;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.01em;
	display: block;
}

.efg-brand__sub {
	display: block;
	font-size: .74rem;
	font-weight: 500;
	color: var(--efg-text-muted);
	letter-spacing: .02em;
}

.efg-header__tools { display: inline-flex; align-items: center; gap: .35rem; }

/* Dark-Mode-Umschalter */
.efg-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--efg-border);
	background: var(--efg-surface);
	color: var(--efg-text);
	border-radius: var(--efg-radius-pill);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.efg-theme-toggle:hover { border-color: var(--efg-green); }
html[data-efg-theme="dark"] .efg-theme-toggle .efg-icon-sun { display: none; }
html:not([data-efg-theme="dark"]) .efg-theme-toggle .efg-icon-moon { display: none; }

/* Kern-Navigation (core/navigation) */
.efg-header .wp-block-navigation__container > li > a {
	padding: .5rem .8rem;
	border-radius: var(--efg-radius-pill);
	font-weight: 600;
	font-size: .98rem;
}

.efg-header .wp-block-navigation__container > li.current-menu-item > a,
.efg-header .wp-block-navigation__container > li > a[aria-current="page"],
.efg-header .wp-block-navigation__container > li.current_page_item > a {
	background: var(--efg-blue);
	color: #14273d;
}

html[data-efg-theme="dark"] .efg-header .wp-block-navigation__container > li.current-menu-item > a,
html[data-efg-theme="dark"] .efg-header .wp-block-navigation__container > li > a[aria-current="page"],
html[data-efg-theme="dark"] .efg-header .wp-block-navigation__container > li.current_page_item > a {
	background: #24384f;
	color: #cfe0f7;
}

.efg-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 1.5rem;
	background: var(--efg-page-bg);
}

.efg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .25rem;
	font-size: 1.2rem;
}

/* ----------------------------------------------------------------------------
   6. Sections / Raster
   -------------------------------------------------------------------------- */
.efg-section,
.efg-page-head,
.efg-topbar__inner,
.efg-header__inner,
.efg-footer__top,
.efg-footer__bottom { padding-inline: var(--efg-pad); }

.efg-section {
	padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.75rem);
	scroll-margin-top: calc(var(--efg-header-h) + 56px);
	position: relative;
}

.efg-section--tight { padding-block: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.efg-section--white { background: var(--efg-surface); }
.efg-section--surface { background: color-mix(in srgb, var(--efg-blue) 32%, var(--efg-surface)); }
.efg-section--green { background: color-mix(in srgb, var(--efg-green) 20%, var(--efg-surface)); }
.efg-section--blue { background: var(--efg-blue); }
html[data-efg-theme="dark"] .efg-section--green { background: #151a13; color: var(--efg-text); }
html[data-efg-theme="dark"] .efg-section--white { background: var(--efg-surface); }
html[data-efg-theme="dark"] .efg-section--surface { background: var(--efg-surface-alt); }
html[data-efg-theme="dark"] .efg-section--blue { background: #1b2836; color: var(--efg-text); }

.efg-section + .efg-section--white,
.efg-section--white + .efg-section { border-top: 1px solid var(--efg-border); }

.efg-kicker {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs, .8rem);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--efg-green-ink);
	background: color-mix(in srgb, var(--efg-green) 22%, transparent);
	padding: .3rem .7rem;
	border-radius: var(--efg-radius-pill);
	margin-block-end: .6rem;
}

html[data-efg-theme="dark"] .efg-kicker { color: var(--efg-green); background: rgba(186, 215, 1, .14); }

.efg-section__title { margin-block-start: 0; }
.efg-lead { font-size: var(--wp--preset--font-size--md, 1.3rem); color: var(--efg-text-muted); max-width: 62ch; }
html[data-efg-theme="dark"] .efg-lead { color: var(--efg-text); opacity: .85; }

.wp-block-separator.efg-hr-accent { height: 4px; max-width: 72px; margin-inline: 0; background: var(--efg-green); }
.efg-hr-accent { border: 0; height: 4px; width: 72px; background: var(--efg-green); border-radius: 4px; margin-block: 1rem; }

/* Abgerundeter Inhalts-Kasten (Container-Breite) */
.efg-panel {
	background: var(--efg-surface);
	border: 1px solid var(--efg-border);
	border-radius: var(--efg-radius);
	box-shadow: var(--efg-shadow);
	padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
}

.efg-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: var(--efg-surface-alt);
	border: 1px solid var(--efg-border);
	border-radius: var(--efg-radius-pill);
	padding: .35rem .8rem;
	font-size: .86rem;
	font-weight: 600;
	color: var(--efg-text);
	white-space: nowrap;
}

html[data-efg-theme="dark"] .efg-chip { background: var(--efg-surface-alt); }
.efg-chip--green { background: var(--efg-green); border-color: transparent; color: #14171a; }
.efg-chip--blue { background: var(--efg-blue); border-color: transparent; color: #14273d; }

.efg-main { display: block; }

.efg-page-head {
	background: var(--efg-surface);
	border-bottom: 1px solid var(--efg-border);
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(.75rem, .5rem + 1vw, 1.25rem);
}

.efg-page-head__title { margin-block: .35rem 0; max-width: 24ch; }

/* Lesetypografie in Seiten/Beitraegen */
.efg-prose > *:first-child { margin-block-start: 0; }
.efg-prose h2 { margin-block-start: 1.6em; }
.efg-prose h3 { margin-block-start: 1.4em; }
.efg-list { display: grid; gap: 1rem; }
.efg-card--row { padding: clamp(1rem, .8rem + 1vw, 1.4rem); }

/* ----------------------------------------------------------------------------
   7. Hero-Slider (full bleed, ausserhalb der Container-Breite)
   -------------------------------------------------------------------------- */
.efg-hero {
	position: relative;
	isolation: isolate;
	background: #0f1317;
}

.efg-hero .efg-hero-slide { margin: 0; }

/* Kein JS: nur Folie 1 (progressive enhancement) */
.efg-hero > .efg-hero-slide:not(:first-child) { display: none; }

/* Mit JS: data-efg-slider-ready steuert die aktive Folie */
.efg-hero[data-efg-slider-ready] > .efg-hero-slide { display: none; }
.efg-hero[data-efg-slider-ready] > .efg-hero-slide.is-active { display: block; animation: efgFade .7s ease both; }

@keyframes efgFade { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

.efg-hero .wp-block-cover__inner-container { width: min(100%, var(--wp--style--global--wide-size, 1160px)); }

/* Folien mit Motiven, deren Text rechts eingebrannt ist: links buendig beschneiden.
   Hoherere Spezifitaet + !important, weil die Core-Styles spaeter geladen werden. */
.efg-hero .wp-block-cover.efg-hero-slide--crop-left > .wp-block-cover__image-background { object-position: left center !important; }

/* Foto-Folie mit eingebranntem Text: Dunklerer Schleier, Typo bleibt lesbar */
.efg-hero .efg-hero-slide--photo .wp-block-cover__background { background-color: #060a12 !important; opacity: .74 !important; }

/* Bildvarianten nur durch Spiegelung – erlaubt, weil nur die 3 Platzhalter zum Einsatz kommen */
.efg-media-flip > .wp-block-image { transform: scaleX(-1); }
.efg-hero .efg-hero-slide--flip > .wp-block-cover__image-background { transform: scaleX(-1); }

/* Werbetafel: eingebranntes Plakatvollbild wird nicht beschnitten, sondern sitzt auf heller Platte */
.efg-advert--contain { background: var(--efg-surface); border: 1px solid var(--efg-border); }
.efg-advert--contain .wp-block-image img { object-fit: contain !important; padding: clamp(.6rem,2vw,1.5rem); box-sizing: border-box; }
.efg-crop-left img, .efg-split__media.efg-crop-left .wp-block-image img { object-position: left center; }

/* spaeteres Hero-Video fuellt den Folien-Rahmen */
.efg-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.efg-hero__media-label {
	display: none;
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-end: .75rem;
	z-index: 2;
	background: rgba(15, 19, 23, .7);
	color: #fff;
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .25rem .6rem;
	border-radius: var(--efg-radius-pill);
}

.efg-hero.is-editable .efg-hero__media-label { display: block; }

/* Slider-Steuerung */
.efg-slider-controls {
	position: absolute;
	inset-block-end: max(1rem, env(safe-area-inset-bottom));
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .6rem;
	background: rgba(12, 16, 20, .55);
	padding: .35rem .5rem;
	border-radius: var(--efg-radius-pill);
	backdrop-filter: blur(6px);
}

.efg-slider-btn {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
}

.efg-slider-btn:hover { background: var(--efg-green); color: #14171a; }

.efg-slider-dots { display: flex; gap: .35rem; padding-inline: .2rem; }

.efg-slider-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .8);
	background: transparent;
	cursor: pointer;
}

.efg-slider-dot.is-active { background: var(--efg-green); border-color: var(--efg-green); width: 26px; border-radius: 6px; }

/* ----------------------------------------------------------------------------
   8. Cards – Grundelement (alle Bilder 16:9)
   -------------------------------------------------------------------------- */
.efg-cards {
	list-style: none;
	margin-inline: 0;
	padding-left: 0;
	padding-inline-start: 0;
	display: grid;
	gap: clamp(1rem, .8rem + 1.5vw, 1.75rem); grid-template-columns: 1fr; }

.efg-cards > li, .efg-cards > .efg-card { display: block; list-style: none; margin: 0; min-width: 0; }
.efg-cards > li > * { height: 100%; }

@media (min-width: 720px) { .efg-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.efg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.efg-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.efg-card {
	background: var(--efg-surface);
	border: 1px solid var(--efg-border);
	border-radius: var(--efg-radius);
	overflow: hidden;
	box-shadow: var(--efg-shadow);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.efg-card__media {
	position: relative;
	aspect-ratio: var(--efg-ratio-card);
	overflow: hidden;
	background: var(--efg-surface-alt);
}

.efg-card__media > .wp-block-image,
.efg-card__media figure { margin: 0; height: 100%; }

.efg-card__media img,
.efg-card__media .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	display: block;
	transition: transform .5s ease;
}

.efg-card:hover .efg-card__media img,
.efg-card:focus-within .efg-card__media img { transform: scale(1.04); }

.efg-card__badge {
	margin: 0;
	position: absolute;
	inset-block-start: .6rem;
	inset-inline-start: .6rem;
	z-index: 2;
	background: var(--efg-green);
	color: #14171a;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .2rem .6rem;
	border-radius: var(--efg-radius-pill);
}

.efg-card__body { padding: clamp(1rem, .8rem + 1vw, 1.4rem); display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.efg-card__title { margin: 0; font-size: var(--wp--preset--font-size--h3); line-height: 1.25; }
.efg-card__title a { color: inherit; text-decoration: none; }
.efg-card__title a:hover { color: var(--efg-green-ink); }
html[data-efg-theme="dark"] .efg-card__title a:hover { color: var(--efg-green); }

.efg-card__meta { font-size: .82rem; color: var(--efg-text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.efg-card__text { margin: 0; color: var(--efg-text); opacity: .9; }
.efg-card__link { margin-block-start: auto; padding-block-start: .5rem; font-weight: 700; }

/* Card-Carousel (Predigten) – horizontales Scrollen, keine Buehnenspruenge */
.efg-carousel { position: relative; }

.efg-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(84%, 340px);
	gap: clamp(.75rem, .6rem + 1vw, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: 1rem;
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
}

.efg-carousel__track > * { scroll-snap-align: start; min-width: 0; }

@media (min-width: 782px) { .efg-carousel__track { grid-auto-columns: min(46%, 420px); } }
@media (min-width: 1120px) { .efg-carousel__track { grid-auto-columns: min(31.5%, 430px); } }

.efg-carousel__controls { display: none; justify-content: center; gap: .5rem; padding-block-start: .25rem; }
.efg-carousel[data-efg-carousel-ready="true"] .efg-carousel__controls:not([hidden]) { display: flex; }

.efg-carousel__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--efg-border);
	background: var(--efg-surface);
	color: var(--efg-text);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--efg-shadow);
}

.efg-carousel__btn:hover:not(:disabled) { background: var(--efg-green); border-color: transparent; color: #14171a; }
.efg-carousel__btn:disabled { opacity: .35; cursor: not-allowed; }

/* ----------------------------------------------------------------------------
   9. Akkordeon (Leitbild) – natives <details>, ohne JavaScript nutzbar
   -------------------------------------------------------------------------- */
.efg-accordion { display: grid; gap: .7rem; margin-block-start: 1.25rem; }

.efg-accordion__item {
	background: var(--efg-surface);
	border: 1px solid var(--efg-border);
	border-radius: var(--efg-radius);
	overflow: hidden;
}

.efg-accordion__item[open] { border-color: var(--efg-green); box-shadow: var(--efg-shadow); }

.efg-accordion__item > summary {
	display: flex;
	align-items: center;
	gap: .8rem;
	cursor: pointer;
	list-style: none;
	padding: clamp(.9rem, .7rem + 1vw, 1.25rem) clamp(1rem, .8rem + 1vw, 1.5rem);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md, 1.2rem);
	line-height: 1.3;
}

.efg-accordion__item > summary::-webkit-details-marker { display: none; }

.efg-accordion__item > summary::after {
	content: "";
	flex: 0 0 auto;
	margin-inline-start: auto;
	width: 14px;
	height: 14px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease, border-color .2s ease;
	color: var(--efg-green-ink);
}

.efg-accordion__item[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
html[data-efg-theme="dark"] .efg-accordion__item > summary::after { color: var(--efg-green); }
.efg-accordion__index { color: var(--efg-green-ink); font-variant-numeric: tabular-nums; font-size: .9em; }
html[data-efg-theme="dark"] .efg-accordion__index { color: var(--efg-green); }

.efg-accordion__panel { padding: 0 clamp(1rem, .8rem + 1vw, 1.5rem) clamp(1rem, .9rem + 1vw, 1.5rem); }
.efg-accordion__panel > *:first-child { margin-block-start: 0; }
.efg-accordion__panel > p:last-child { margin-block-end: 0; }

/* ----------------------------------------------------------------------------
   10. Infoschriften / Kontakt
   -------------------------------------------------------------------------- */
.efg-facts { display: grid; gap: .1rem; margin: 0; }
.efg-facts > div + div { border-top: 1px dashed var(--efg-border); }
dl.efg-facts dt, .efg-facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--efg-text-muted); padding-block-start: .6rem; }
.efg-facts dd { margin: 0 0 .35rem; font-weight: 600; }
dl.efg-facts dt { padding-block-start: 0; }
dl.efg-facts dd { margin-block: .15rem 0; font-size: var(--wp--preset--font-size--sm); text-transform: none; letter-spacing: 0; color: var(--efg-text); }
.efg-facts a { text-decoration: none; }

/* Jumbro-Daten (Bank) */
.efg-iban {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 1rem;
	letter-spacing: .02em;
	background: color-mix(in srgb, var(--efg-blue) 45%, var(--efg-surface));
	border-radius: var(--efg-radius-sm);
	padding: .6rem .8rem;
	display: inline-block;
	user-select: all;
}

html[data-efg-theme="dark"] .efg-iban { background: #23303f; color: #dbe6f5; }

/* ----------------------------------------------------------------------------
   11. Newsletter-Formular (Theme-Shortcode, ohne Plugin)
   -------------------------------------------------------------------------- */
.efg-newsletter { display: grid; gap: .6rem; margin-block-start: .75rem; }
.efg-newsletter__row { display: grid; gap: .5rem; }
.efg-newsletter__label { font-weight: 600; font-size: .92rem; }

.efg-newsletter input[type="email"],
.efg-newsletter input[type="text"] {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--efg-border);
	border-radius: var(--efg-radius-pill);
	background: var(--efg-surface);
	color: var(--efg-text);
	font-size: 1rem;
}

.efg-newsletter input:focus { border-color: var(--efg-green-ink); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--efg-green) 40%, transparent); }
html[data-efg-theme="dark"] .efg-newsletter input:focus { border-color: var(--efg-green); }

@media (min-width: 600px) {
	.efg-newsletter__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.efg-newsletter button[type="submit"] {
	border: 0;
	background: var(--efg-green);
	color: #14171a;
	font-weight: 700;
	padding: .8rem 1.4rem;
	border-radius: var(--efg-radius-pill);
	cursor: pointer;
	white-space: nowrap;
}

.efg-newsletter button[type="submit"]:hover { background: var(--efg-green-deep); color: #fff; }
.efg-newsletter__consent { font-size: .8rem; color: var(--efg-text-muted); display: flex; gap: .5rem; align-items: flex-start; }
.efg-newsletter__consent input { margin-block-start: .2rem; accent-color: var(--efg-green-ink); }
.efg-newsletter__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.efg-notice { border-radius: var(--efg-radius-sm); padding: .8rem 1rem; font-size: .95rem; border: 1px solid transparent; }
.efg-notice--ok { background: color-mix(in srgb, var(--efg-green) 24%, var(--efg-surface)); border-color: var(--efg-green-deep); color: #3c5200; }
.efg-notice--err { background: #fbeceb; border-color: #d1a9a6; color: #7f231c; }
html[data-efg-theme="dark"] .efg-notice--ok { background: rgba(186, 215, 1, .14); color: #d8ee8b; border-color: var(--efg-green-deep); }
html[data-efg-theme="dark"] .efg-notice--err { background: rgba(209, 90, 80, .16); color: #f0b7b1; border-color: #7d3c37; }

/* ----------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.efg-footer {
	background: #14203a;
	color: #dbe3ef;
	margin-block-start: clamp(2rem, 1.5rem + 3vw, 4rem);
	font-size: .95rem;
}

html[data-efg-theme="dark"] .efg-footer { background: #0b0f16; color: #c3ccd8; border-top: 1px solid var(--efg-border); }

.efg-footer a { color: #fff; text-decoration: none; }
html[data-efg-theme="dark"] .efg-footer a { color: #e5eaf2; }
.efg-footer a:hover, .efg-footer a:focus-visible { color: var(--efg-green); text-decoration: underline; }

.efg-footer__top { padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 900px) { .efg-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }

.efg-footer h3, .efg-footer h4 { color: #fff; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-block: 0 0.8rem; }
html[data-efg-theme="dark"] .efg-footer h3, html[data-efg-theme="dark"] .efg-footer h4 { color: var(--efg-green); }

.efg-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.efg-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-block: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	align-items: center;
	font-size: .84rem;
	color: #b3bfd0;
}

html[data-efg-theme="dark"] .efg-footer__bottom { border-top-color: var(--efg-border); color: #97a3b2; }
.efg-footer__accentline { height: 5px; background: linear-gradient(90deg, var(--efg-green) 0%, var(--efg-green) 32%, var(--efg-blue) 32%, var(--efg-blue) 64%, #14203a 64%); }
.efg-social { display: inline-flex; gap: .5rem; }
.efg-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.efg-social a:hover { background: var(--efg-green); color: #14171a; }

/* ----------------------------------------------------------------------------
   13. Content-Feinschliff
   -------------------------------------------------------------------------- */
.wp-block-columns { gap: clamp(1rem, .8rem + 2vw, 2.5rem) !important; }
@media (max-width: 781px) { .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: wrap !important; } }

blockquote { font-size: var(--wp--preset--font-size--md); font-style: normal; }

.wp-block-buttons .wp-block-button__link { box-shadow: none; }
.efg-btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--efg-blue-ink);
}

html[data-efg-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link { color: var(--efg-green); }
.wp-block-button.is-style-soft .wp-block-button__link { background: var(--efg-blue); color: #14273d; }

table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--efg-border); padding: .55rem .6rem; text-align: left; }

/* Anker-Sprungziele unter der sticky Navbar freihalten */
[id] { scroll-margin-top: calc(var(--efg-header-h) + 70px); }

@media (min-width: 1200px) {
	.efg-hero .wp-block-cover__inner-container { padding-inline: clamp(1.5rem, 4vw, 3rem); }
}



/* ----------------------------------------------------------------------------
   15. Kleines fuer Formulare aus Core (Suche) und Pagination
   -------------------------------------------------------------------------- */
.wp-block-search__inside-wrapper .wp-block-search__input {
	border: 1px solid var(--efg-border);
	border-radius: var(--efg-radius-pill);
	padding: .7rem 1rem;
	background: var(--efg-surface);
	color: var(--efg-text);
}

.wp-block-search__button { border-radius: var(--efg-radius-pill) !important; }

.wp-block-query-pagination > .wp-block-query-pagination-nums,
.wp-block-query-pagination-numbers { display: inline-flex; gap: .3rem; align-items: center; }

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers.current {
	display: inline-grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--efg-radius-pill);
	background: var(--efg-surface);
	border: 1px solid var(--efg-border);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current { background: var(--efg-green); border-color: transparent; color: #14171a; }

/* Hero auf sehr kleinen Screens: Cover-Hoehe passend zum Viewport */
@media (max-width: 599px) {
	.efg-hero .wp-block-cover { min-height: clamp(380px, 62svh, 520px); }
}

/* ----------------------------------------------------------------------------
   14. Druck
   -------------------------------------------------------------------------- */
@media print {
	.efg-topbar, .efg-header, .efg-footer, .efg-slider-controls, .efg-carousel__controls, .efg-newsletter { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ----------------------------------------------------------------------------
   16. Inhaltskontrakt – Klassen, die im Seiteninhalt (Startseite & Co.) benutzt werden
       Reihenfolge: Hero-Typo, Buttons, Hinweise, Raster, Akkordeon-Extras
   -------------------------------------------------------------------------- */

/* --- Hero: Typo auf dem Bild -------------------------------------------- */
.efg-hero .wp-block-cover {
	align-items: flex-end;
	min-height: clamp(420px, 68svh, 700px);
	padding-block: clamp(3.5rem, 2rem + 8vw, 7rem) clamp(4rem, 3rem + 6vw, 7rem);
	background-color: #0f1317;
}

.efg-hero .wp-block-cover__inner-container {
	display: grid;
	gap: .35rem;
	justify-items: start;
	text-align: left;
	color: #fff;
	padding-inline: var(--efg-pad);
	margin-inline: 0;
	max-width: min(100%, var(--wp--style--global--wide-size, 1160px));
}

.efg-hero__kicker {
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--efg-green);
}

.efg-hero__title {
	margin: 0;
	max-width: 20ch;
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 3.6vw, 4rem);
	line-height: 1.05;
	text-wrap: balance;
}

.efg-hero__text {
	margin: .35rem 0 0;
	max-width: 56ch;
	font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
	color: rgba(255, 255, 255, .88);
}

.efg-hero .wp-block-buttons { margin-block-start: 1rem; }

/* --- Buttons ------------------------------------------------------------- */
.efg-btn,
a.efg-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border-radius: var(--efg-radius-pill);
	padding: .8rem 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.efg-btn--primary { background: var(--efg-green); color: #14171a; }
.efg-btn--primary:hover, .efg-btn--primary:focus-visible { background: var(--efg-green-deep); color: #fff; }

.efg-btn--secondary { background: var(--efg-blue); color: #14273d; }
.efg-btn--secondary:hover, .efg-btn--secondary:focus-visible { background: #a9c6ea; }

.efg-btn--ghost { background: transparent; border: 2px solid var(--efg-border); color: var(--efg-text); }
.efg-btn--ghost:hover, .efg-btn--ghost:focus-visible { border-color: var(--efg-green-ink); color: var(--efg-green-ink); }

.efg-btn--ghost-light { background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .6); color: #fff; backdrop-filter: blur(4px); }
.efg-btn--ghost-light:hover, .efg-btn--ghost-light:focus-visible { background: rgba(255, 255, 255, .92); color: #14273d; border-color: transparent; }

html[data-efg-theme="dark"] .efg-btn--secondary { background: #24405f; color: #dbe6f5; }
html[data-efg-theme="dark"] .efg-btn--ghost { border-color: var(--efg-border); color: var(--efg-text); }

.wp-block-button .wp-block-button__link.efg-btn { box-shadow: none; border: 0; }
.efg-buttons-row, .efg-section .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* --- Kleinkram ------------------------------------------------------------ */
.efg-note {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--efg-text-muted);
	background: color-mix(in srgb, var(--efg-blue) 22%, transparent);
	border-left: 3px solid var(--efg-green);
	border-radius: 0 var(--efg-radius-sm) var(--efg-radius-sm) 0;
	padding: .7rem .9rem;
	max-width: 74ch;
}

html[data-efg-theme="dark"] .efg-note { background: rgba(193, 214, 241, .08); color: var(--efg-text-muted); }
.efg-note--ok { border-left-color: var(--efg-green-deep); background: color-mix(in srgb, var(--efg-green) 18%, transparent); }

.efg-stack > *:first-child { margin-block-start: 0; }
.efg-mono { font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); letter-spacing: .02em; }
.efg-address { font-style: normal; display: grid; gap: .1rem; line-height: 1.45; }

/* --- Raster -------------------------------------------------------------- */
.efg-grid-2 { display: grid; gap: clamp(1rem, .8rem + 1.5vw, 1.75rem); align-items: start; }
@media (min-width: 900px) { .efg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.efg-split { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: center; }
@media (min-width: 900px) { .efg-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.efg-split__media .wp-block-image { margin: 0; border-radius: var(--efg-radius); overflow: hidden; box-shadow: var(--efg-shadow); aspect-ratio: var(--efg-ratio-card); }
.efg-split__media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* --- Werbung als eine Grafik -------------------------------------------- */
.efg-advert { margin-block-start: 1rem; }
.efg-advert .wp-block-image {
	margin: 0;
	border-radius: var(--efg-radius);
	overflow: hidden;
	box-shadow: var(--efg-shadow);
	aspect-ratio: var(--efg-ratio-card);
	background: var(--efg-surface);
}
.efg-advert .wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.efg-split__media .wp-block-image img, .efg-split__media img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.efg-advert__caption { font-size: var(--wp--preset--font-size--sm); color: var(--efg-text-muted); margin-block-start: .6rem; max-width: 74ch; }

/* --- Kopfzeile mit Carousel-Pfeilen ------------------------------------- */
.efg-head-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; }
.efg-head-row > *:first-child { flex: 1 1 26ch; min-width: 0; }

/* --- Facts as definitions list ------------------------------------------ */
dl.efg-facts {
	display: grid;
	gap: .75rem 1.5rem;
	margin-block-start: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	padding: clamp(1rem, .8rem + 1vw, 1.5rem);
	background: var(--efg-surface-alt);
	border-radius: var(--efg-radius);
}
@media (min-width: 640px) { dl.efg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { dl.efg-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
dl.efg-facts > .efg-fact { border-top: 1px dashed var(--efg-border); padding-block-start: .5rem; margin: 0; }
dl.efg-facts > .efg-fact:first-child, dl.efg-facts > .efg-fact:nth-child(2) { border-top: 0; }
@media (min-width: 1024px) { dl.efg-facts > .efg-fact:nth-child(n+2) { border-top: 0; padding-inline-start: 1rem; border-left: 1px dashed var(--efg-border); } }
html[data-efg-theme="dark"] dl.efg-facts { background: var(--efg-surface-alt); }

/* --- Panels ------------------------------------------------------------- */
.efg-panel--soft { background: color-mix(in srgb, var(--efg-blue) 40%, var(--efg-surface)); border-color: transparent; box-shadow: none; margin-block-start: clamp(1rem, .8rem + 1vw, 1.75rem); }
html[data-efg-theme="dark"] .efg-panel--soft { background: var(--efg-surface-alt); border-color: var(--efg-border); }

/* --- Akkordeon: Nummerierung ------------------------------------------------------------ */
.efg-accordion__item > summary { gap: 1rem; }
.efg-accordion__index { font-size: .85em; opacity: .7; }

/* ----------------------------------------------------------------------------
   17. Gemeindeleben – Gruppenkarten, Sprungnavigation, Wochenübersicht
       Inhalt siehe bin/migrate-02-gemeindeleben.php (kein JavaScript nötig)
   -------------------------------------------------------------------------- */

/* --- Sprungnavigation: Chips als Ankerlinks ------------------------------------ */
.efg-jumpnav { margin-block: clamp(1rem, .8rem + 1vw, 1.75rem) 0; }
.efg-jumpnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.efg-jumpnav a { text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.efg-jumpnav a:hover,
.efg-jumpnav a:focus-visible {
	background: color-mix(in srgb, var(--efg-green) 26%, transparent);
	border-color: var(--efg-green-ink);
	color: var(--efg-green-ink);
}
html[data-efg-theme="dark"] .efg-jumpnav a:hover,
html[data-efg-theme="dark"] .efg-jumpnav a:focus-visible { color: #14171a; background: var(--efg-green); border-color: transparent; }
.efg-jumpnav span {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	opacity: .65;
	padding-inline-start: .15rem;
}

/* Farbige Chips im Dark Mode: die Basisfarbe weiter oben (html[data-efg-theme] .efg-chip)
ist spezifischer als .efg-chip--green, darum hier ebenfalls mit html-Qualifier –
sonst steht dunkler Text auf dunklem Chip. */
html[data-efg-theme="dark"] .efg-chip.efg-chip--green { background: var(--efg-green); border-color: transparent; color: #14171a; }
html[data-efg-theme="dark"] .efg-chip.efg-chip--blue { background: #24405f; border-color: transparent; color: #dbe6f5; }
html[data-efg-theme="dark"] .efg-jumpnav a.efg-chip--green:hover,
html[data-efg-theme="dark"] .efg-jumpnav a.efg-chip--blue:hover,
html[data-efg-theme="dark"] .efg-jumpnav a.efg-chip--green:focus-visible,
html[data-efg-theme="dark"] .efg-jumpnav a.efg-chip--blue:focus-visible { background: var(--efg-green); color: #14171a; border-color: transparent; }

/* --- Anker unter der sticky Navbar freihalten --------------------------------- */
[id^="gruppe-"] { scroll-margin-top: calc(var(--efg-header-h) + 72px); }

.efg-card:target {
	border-color: var(--efg-green-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--efg-green) 45%, transparent), var(--efg-shadow);
}

/* --- Gruppenkarte ------------------------------------------------------------- */
.efg-card--gruppe .efg-card__body { gap: .6rem; }

/* Cards in einer Rasterzeile sind gleich hoch und als Spalte aufgebaut, der Textblock
   waechst – nur so sitzt der Faktenkasten unten buendig. */
.efg-cards > .efg-card.efg-card--gruppe { display: flex; flex-direction: column; height: 100%; }

/* Faktenkasten nach unten buendig: in unterschiedlich hohen Cards einer Zeile sitzen
   "Wer/Wann/Wo" damit auf gleicher Höhe (Card-Body ist Flex-Spalte). */
.efg-card--gruppe .efg-card__body > dl.efg-card__facts { margin-block-start: auto; }

.efg-card__badge--kinder { background: var(--efg-blue); color: #14273d; }
html[data-efg-theme="dark"] .efg-card__badge--kinder { background: #24405f; color: #dbe6f5; }
.efg-card__badge--erwachsene { background: #14203a; color: #dbe3ef; }
html[data-efg-theme="dark"] .efg-card__badge--erwachsene { background: #0b0e12; color: #cfd8e6; }

/* Zweiter, ruhigerer Textabsatz in der Card */
.efg-card__more {
	margin: 0;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--efg-text-muted);
}

/* Faktenzeile in der Card: "Für wen – Wert", kammertauglich */
dl.efg-card__facts {
	display: grid;
	gap: .3rem;
	margin: .35rem 0 0;
	padding: .7rem .85rem;
	background: var(--efg-surface-alt);
	border-radius: var(--efg-radius-sm);
}
dl.efg-card__facts > div {
	display: flex;
	gap: .6rem;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0;
}
dl.efg-card__facts > div + div { border-top: 1px dashed var(--efg-border); padding-block-start: .3rem; }
dl.efg-card__facts dt {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--efg-text-muted);
	padding-block-start: 0;
	flex: 0 0 auto;
}
dl.efg-card__facts dd {
	margin: 0;
	font-weight: 600;
	font-size: .87rem;
	text-align: end;
	max-width: 24ch;
}

/* Kurzes Zitat aus der Gruppe */
.efg-card__quote {
	margin: .25rem 0 0;
	padding-inline-start: .85rem;
	border-left: 3px solid var(--efg-green);
	font-style: italic;
}
.efg-card__quote-author {
	display: block;
	margin-block-start: .3rem;
	font-size: .74rem;
	font-style: normal;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--efg-text-muted);
}

/* --- Wochenübersicht "In der Woche" ------------------------------------------- */
.efg-week {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.5rem, .4rem + .6vw, .9rem);
	margin-block-start: clamp(1.25rem, 1rem + 2vw, 2rem);
}
@media (min-width: 520px) { .efg-week { grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); } }

.efg-week__day {
	display: grid;
	gap: .35rem;
	align-content: start;
	background: var(--efg-surface);
	border: 1px solid var(--efg-border);
	border-radius: var(--efg-radius-sm);
	padding: clamp(.65rem, .5rem + .5vw, 1rem);
}
html[data-efg-theme="dark"] .efg-week__day { background: var(--efg-surface-alt); }

.efg-week__tag {
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--efg-green);
	color: #14171a;
	font-size: .76rem;
	font-weight: 800;
}
.efg-week__day.is-empty { background: transparent; border-style: dashed; }
.efg-week__day.is-empty .efg-week__tag {
	background: transparent;
	border: 1px dashed var(--efg-border);
	color: var(--efg-text-muted);
}

@media (max-width: 389px) { .efg-week { grid-template-columns: 1fr; } }
.efg-week__name { margin: 0; font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
.efg-week__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.efg-week__time {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--efg-text-muted);
	font-variant-numeric: tabular-nums;
}
.efg-week__list a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--efg-green) 60%, transparent);
	font-size: .92rem;
}
.efg-week__list a:hover,
.efg-week__list a:focus-visible { color: var(--efg-green-ink); border-bottom-color: currentColor; }
html[data-efg-theme="dark"] .efg-week__list a:hover,
html[data-efg-theme="dark"] .efg-week__list a:focus-visible { color: var(--efg-green); }
.efg-week__none { margin: 0; font-size: .85rem; color: var(--efg-text-muted); }

/* --- Teens: eigene Badge-Farbe (Jugendliche zwischen Kinder- und Erwachsenenkreis) */
.efg-card__badge--teens { background: #1c2a20; color: #e7f3d6; }
html[data-efg-theme="dark"] .efg-card__badge--teens { background: var(--efg-green); color: #16210b; }

/* ----------------------------------------------------------------------------
   18. Breitensteuerung – dieselbe Contentbreite auf Start- und Unterseiten
       Der Inhalt aller vollbreiten Abschnitte endet bei der Containerbreite
       (wide-size = 1160px) – unabhängig davon, welches Layout das Template für
       den Content-Container vorsieht. Umgesetzt wird das ueber den inneren Rand,
       damit auch inline-block-Elemente (Chips) und Trenner an derselben Kante
       starten. :where() haelt die Spezifikaet bei 0, damit bestehende Regeln
       (.efg-lead, .efg-facts …) weiterhin gewinnen.
 --------------------------------------------------------------------------- */
.efg-main {
	--efg-gutter: max(var(--efg-pad), calc((100vw - var(--wp--style--global--wide-size, 1160px)) / 2));
}
.efg-section.alignfull,
.efg-page-head.alignfull {
	padding-inline: var(--efg-gutter, var(--efg-pad));
}

/* Core zentriert Kinder eines constrained-Containers – hier buendig links stehen. */
.efg-page-head.alignfull > * { margin-inline: 0 !important; }

/* Lesetreite fuer Fliesstext, unabhaengig von der Breite des Abschnitts. */
.efg-section > :where(p, ul, ol, blockquote) { max-width: 74ch; }

/* Core setzt auf Kinder von Flow-Containern einen Zeilenabstand (24px). Zwischen
   grossen Bloecken entsteht dadurch ein heller Streifen zwischen den Abschnitten –
   die Tonflaechen sollen aber buendig aufeinanderstossen. Innerhalb der Abschnitte
   und Boxen bleibt der Abstand erhalten, nur Raster ausnehmen. */
.efg-main.is-layout-flow > *,
.efg-page-body.is-layout-flow > *,
.wp-block-post-content.is-layout-flow.alignfull > * { margin-block-start: 0; }
.efg-cards > *,
.efg-grid-2 > *,
.efg-split > *,
.efg-week > * { margin-block-start: 0; }

/* Dasselbe gilt fuer den Rahmen der Seite: Core haengt an Header, Content und Footer
   je 24px an. Der Streifen liegt dann als heller Abstand unter der sticky Navbar bzw.
   ueber dem Footer – die Flaechen sollen aber buendig aneinanderstossen. */
.wp-site-blocks > :not(:first-child) { margin-block-start: 0; }

/* Gewoehnlicher Seiten-/Beitragsfliesstext ohne Abschnitte (z. B. einfache Seite):
   Lesetreite plus Rand, Vollbreites (.alignfull/.alignwide) bleibt ausgenommen. */
.wp-block-post-content.is-layout-flow.alignfull > :where(:not(.alignfull):not(.alignwide)) {
	max-width: calc(var(--wp--style--global--content-size, 740px) + (var(--efg-gutter, var(--efg-pad)) * 2));
	padding-inline: var(--efg-gutter, var(--efg-pad));
	margin-inline: auto;
}

/* Titelbild einer Seite oder eines Beitrags buendig zur Containerbreite. */
.efg-page-body > .wp-block-post-featured-image {
	padding-inline: var(--efg-gutter, var(--efg-pad));
	margin-block-start: clamp(1rem, 3vw, 2rem);
}
/* Auf grossen Screens nicht hoeher als eine Bildschirmhalfte: das Bild bleibt
   16:9 gesetzt (Block-Attribut) und wird mit object-fit:cover beschnitten. */
.efg-page-body > .wp-block-post-featured-image img {
	border-radius: var(--efg-radius);
	max-height: clamp(200px, 42vh, 440px);
}

/* Wochenuebersicht und Sprungnavigation bleiben ebenfalls in der Containerbreite. */
.efg-week,
.efg-jumpnav ul { max-width: var(--wp--style--global--wide-size, 1160px); margin-inline: auto; }