/* ExtraKlang – Block-Stile (Komponenten). Farben/Schriften kommen aus theme.json. */

:root {
	--ek-magenta: var(--wp--preset--color--magenta);
	--ek-line: var(--wp--preset--color--line);
}

/* Dachzeile über Überschriften */
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ek-magenta);
	line-height: 1;
}
.is-style-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.has-text-align-center.is-style-eyebrow { justify-content: center; }

/* Kursive Hervorhebung in Überschriften = Magenta */
:where(h1, h2, h3) em { color: var(--ek-magenta); }
.has-plum-background-color :where(h1, h2, h3) em,
.has-ink-background-color :where(h1, h2, h3) em { color: var(--wp--preset--color--rose); }

/* Bild: Bogen (Hero) – Querformat, damit das ganze Ensemble zu sehen ist */
.wp-block-image.is-style-arch img {
	border-radius: clamp(90px, 16vw, 240px) clamp(90px, 16vw, 240px) 6px 6px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 30%;
	width: 100%;
	box-shadow: var(--wp--preset--shadow--soft);
}
.wp-block-image.is-style-arch figcaption { text-align: right; }

/* Bild: Porträt s/w, farbig beim Überfahren */
.wp-block-image.is-style-portrait { overflow: hidden; border-radius: 4px; margin-bottom: 0; }
.wp-block-image.is-style-portrait img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	filter: grayscale(1) contrast(1.05);
	transition: filter .5s, transform .8s;
}
.wp-block-image.is-style-portrait:hover img { filter: none; transform: scale(1.04); }

/* Gruppen */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border-left: 2px solid var(--wp--preset--color--rose);
	padding: 22px 24px;
	font-size: 15px;
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-group.is-style-card :where(h3, h4) { color: var(--wp--preset--color--ink); font-size: 1.15rem; margin: 0 0 4px; }
.wp-block-group.is-style-form-card {
	background: var(--wp--preset--color--white);
	border-radius: 18px;
	padding: clamp(24px, 4vw, 44px);
	box-shadow: var(--wp--preset--shadow--soft);
}
.wp-block-group.is-style-outline { border: 1px solid rgba(255,255,255,.3); border-radius: 18px; padding: 32px; }
.wp-block-group.is-style-row {
	border-bottom: 1px solid var(--ek-line);
	padding-block: 20px;
}
.wp-block-group.is-style-row > * { margin: 0; }

/* Gruppe mit Aquarell-Blüte als Dekor */
.wp-block-group.is-style-bloom { position: relative; overflow: hidden; isolation: isolate; }
.wp-block-group.is-style-bloom::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(560px, 80vw);
	aspect-ratio: 1;
	right: -80px;
	bottom: -140px;
	background: url(../img/echinacea.png) no-repeat center / contain;
	opacity: .35;
	pointer-events: none;
}

/* Hero: Bild mit Blüte dahinter, Termin-Badge darüber */
.wp-block-columns.is-style-hero > .wp-block-column:last-child { position: relative; isolation: isolate; }

.wp-block-columns.is-style-hero .ek-next {
	position: absolute;
	width: max-content;
	max-width: min(320px, calc(100% - 24px));
	left: -28px;
	bottom: -34px;
	z-index: 2;
}
@media (max-width: 781px) {
	.wp-block-columns.is-style-hero .ek-next { position: relative; left: auto; bottom: auto; display: flex; width: auto; max-width: none; margin: -28px 12px 0; }
}

/* Liste: Schritte 01 / 02 / 03 */
.wp-block-list.is-style-steps { list-style: none; padding: 0; counter-reset: s; }
.wp-block-list.is-style-steps > li {
	counter-increment: s;
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid rgba(134,1,78,.18);
	color: var(--wp--preset--color--ink-soft);
	font-size: 15px;
}
.wp-block-list.is-style-steps > li::before {
	content: counter(s, decimal-leading-zero);
	font: italic 500 30px/1 var(--wp--preset--font-family--serif);
	color: var(--ek-magenta);
}
.wp-block-list.is-style-steps strong { display: block; color: var(--wp--preset--color--ink); font-weight: 500; }

/* Button hell (Spendenbereich) */
.wp-block-button.is-style-light .wp-block-button__link { background: transparent; border-color: #fff; color: #fff; }
.wp-block-button.is-style-light .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--plum); }
.wp-block-button.is-style-outline .wp-block-button__link { border-color: currentColor; color: var(--wp--preset--color--ink); background: transparent; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #fff; }

/* Kopfbereich: großes Logo links, Burger-Menü + Social rechts, darunter „ExtraKlang e.V.“ */
.ek-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Kein backdrop-filter: der würde das Vollbild-Menü auf Header-Höhe einsperren. */
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--ek-line);
}
.admin-bar .ek-header { top: var(--wp-admin--admin-bar--height, 0); }
.ek-logo img { width: clamp(76px, 8vw, 104px); height: auto; }
.ek-header__right { align-items: flex-end !important; }
.ek-claim {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-align: right;
}
.ek-nav .wp-block-navigation__responsive-container-open svg { width: 38px; height: 38px; }
.ek-nav .wp-block-navigation__responsive-container-open:hover { color: var(--ek-magenta); }
.ek-nav .wp-block-navigation__responsive-container-close svg { width: 34px; height: 34px; }
.ek-nav .wp-block-navigation__responsive-container.is-menu-open { padding: clamp(24px, 6vw, 72px); }
.ek-nav .is-menu-open .wp-block-navigation__responsive-container-content { gap: 10px !important; padding-top: 48px; }
.ek-nav .is-menu-open .wp-block-navigation-item__content { font: 500 clamp(1.7rem, 4vw, 2.6rem)/1.2 var(--wp--preset--font-family--serif); text-decoration: none; }
.ek-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--ek-magenta); }
.ek-nav .is-menu-open .ek-social { margin-top: 28px; }

/* Social-Icons (Instagram, Facebook, YouTube) – inline SVG, keine externen Anfragen */
.ek-social .wp-social-link a { transition: color .2s, transform .2s; }
.ek-social .wp-social-link:hover a { color: var(--ek-magenta) !important; transform: translateY(-1px); }

/* Fußbereich */
.ek-footer a { text-decoration: none; }
.ek-footer h4 { font: 500 11px/1 var(--wp--preset--font-family--sans); letter-spacing: .2em; text-transform: uppercase; }
.ek-footer .wp-block-list { list-style: none; padding: 0; line-height: 2; }

/* Ältere Inhalte mit festen Pixelmaßen: auf dem Handy nicht verzerren */
.wp-block-post-content .wp-block-image img { max-width: 100%; height: auto !important; }

/* Seitentitel auf Unterseiten */
.ek-page-title em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.is-style-portrait img { transition: none; }
}
.ek-hide-mobile{} @media (max-width:781px){.ek-hide-mobile{display:none!important}}

/* Nichts darf seitlich überstehen (Blüten-Dekor ragt bewusst über den Rand) */
.wp-site-blocks { overflow-x: clip; }
/* Infokarten in Spalten gleich hoch */
.wp-block-column > .wp-block-group.is-style-card { height: 100%; box-sizing: border-box; }

/* YouTube 2-Klick */
.ek-video { aspect-ratio: 16 / 9; background: var(--wp--preset--color--ink); color: #fff; border-radius: 6px; overflow: hidden; display: grid; }
.ek-video__inner { display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; font-size: 14px; color: rgba(255,255,255,.75); }
.ek-video__inner a { color: var(--wp--preset--color--rose); }
.ek-video__btn { font: 500 15px/1 var(--wp--preset--font-family--sans); padding: 14px 26px; border-radius: 999px; border: 0; background: var(--wp--preset--color--magenta); color: #fff; cursor: pointer; }
.ek-video__btn:hover { background: var(--wp--preset--color--plum); }
.ek-video iframe { width: 100%; height: 100%; border: 0; }

/* Biografien: einheitliche Porträts */
.ek-bio__img { margin: 0; }
.ek-bio__img img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 4px; }
.ek-bio__img figcaption { margin-top: 8px; }
@media (max-width: 781px) { .ek-bio__img img { aspect-ratio: 1; object-position: 50% 25%; } }

/* Programme: Programmzettel mit Abstand, Plakat-Galerie */
.ek-sheets .ek-sheet img { box-shadow: 0 24px 50px -30px rgba(22,17,20,.45); border-radius: 4px; }
.ek-posters.wp-block-gallery.is-cropped .wp-block-image img { aspect-ratio: 1 / 1.414; object-fit: cover; border-radius: 4px; }
.ek-posters.wp-block-gallery .wp-block-image { flex-grow: 0 !important; }

/* Blüten-Trenner zwischen den Abschnitten (Startseite: zwischen Hero und Terminen) */
.ek-divider { padding-block: 0 clamp(8px, 2vw, 24px); }
.ek-divider > .ek-divider__bloom { display: flex; align-items: center; gap: clamp(16px, 4vw, 48px); margin: 0 auto !important; max-width: 1200px; }
.ek-divider > .ek-divider__bloom::before,
.ek-divider > .ek-divider__bloom::after { content: ""; flex: 1; height: 1px; background: var(--wp--preset--color--rose); opacity: .6; }
.ek-divider__bloom img {
	width: clamp(110px, 16vw, 190px); height: auto !important;
	/* Stängel laufen unten weich aus */
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.ek-divider + .wp-block-group { padding-top: var(--wp--preset--spacing--50) !important; }