/**
 * HIMML – globale Styles (Frontend und Editor).
 *
 * Aufbau:
 *  1. Tokens, die theme.json nicht abbilden kann
 *  2. Grundlagen
 *  3. Kopfbereich und dunkler Seitenanfang („Sky“)
 *  4. Himml-Zeichen (Wasserzeichen, dunkle Sektionen)
 *  5. Sektionen der Startseite
 *  5b. Inhaltsseiten (Seitenkopf-Einleitung, Fließtext, Weiterlesen)
 *  6. Fußbereich
 *  7. Bewegung (Reveal) und Hilfsklassen
 *
 * Varianten einzelner Blöcke (is-style-*) stehen in assets/css/blocks/.
 */

/* 1. Tokens ------------------------------------------------------------ */
:root {
	--himml-muted: var(--wp--preset--color--muted);
	--himml-ease: var(--wp--custom--ease, cubic-bezier(.2, .7, .2, 1));
	--himml-header-height: var(--wp--custom--header-height, 132px);
	--himml-rose-line: url("../images/brand/himml-zeichen-linie.svg");
	--himml-rose-dark: url("../images/brand/himml-zeichen-linie-10.svg") right -10vw center / min(62vw, 820px) auto no-repeat fixed;
}

@media (max-width: 760px) {
	:root {
		--himml-header-height: var(--wp--custom--header-height-mobile, 100px);
		--himml-rose-dark: url("../images/brand/himml-zeichen-linie-10.svg") right -35vw center / 105vw auto no-repeat fixed;
	}
}

/* Sektions-Farben: gedämpfter Text passend zum Grund. */
[class*="is-style-section-night"] {
	--himml-muted: #b9c6e0;
}

[class*="is-style-section-stone"] {
	--himml-muted: #d9dce1;
}

/* 2. Grundlagen -------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

/* Fokus: blue auf hellen Flächen (9,5 : 1 auf Weiß), sky auf dunklen (7 : 1 auf Nachtblau).
   sky auf Weiß hätte nur 2,5 : 1. Die Farbe erbt sich, die nächste Fläche gewinnt. */
:root {
	--himml-focus: var(--wp--preset--color--blue);
}

.himml-site-header,
.wp-block-cover,
[class*="is-style-section-night"],
[class*="is-style-section-stone"],
.has-night-background-color,
.has-night-soft-background-color,
.has-stone-background-color {
	--himml-focus: var(--wp--preset--color--sky);
}

.has-blue-background-color {
	--himml-focus: var(--wp--preset--color--base);
}

[class*="is-style-section-paper"],
[class*="is-style-section-sand"],
.has-base-background-color,
.has-white-background-color,
.has-sand-background-color,
.has-grey-background-color,
.has-mist-background-color,
.is-style-step,
.is-style-link-card,
.is-style-obit-card,
.is-style-logo-card,
.wp-block-quote.is-style-review,
.wp-block-navigation__submenu-container,
.himml-map {
	--himml-focus: var(--wp--preset--color--blue);
}

:focus-visible {
	outline: 2px solid var(--himml-focus);
	outline-offset: 3px;
}

/* Abstände zwischen Template-Teilen und ganzen Sektionen: keine Lücken. */
.wp-site-blocks {
	position: relative;
}

.wp-site-blocks > *,
.wp-block-post-content > .alignfull,
main > .alignfull {
	margin-block: 0;
}

.himml-title-light {
	font-weight: 300 !important;
	line-height: 1.15;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* 3. Kopfbereich und „Sky“ -------------------------------------------- */

/* Der Kopf liegt transparent über dem dunklen Seitenanfang. */
.himml-site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 20;
	color: #fff;
}

.himml-header__bar {
	min-height: var(--himml-header-height);
	gap: 24px;
}

.himml-logo {
	margin: 0;
	flex: none;
}

/* SVG-Logos ohne feste Maße: Seitenverhältnis vorgeben, sonst bleibt das Bild im Editor leer. */
.himml-logo img {
	display: block;
	height: 80px;
	width: auto;
	aspect-ratio: 450.78 / 156.98;
	border-radius: 0;
}

/* Wie im Entwurf sichtbar: neben der Navigation 150 px breit. */
@media (min-width: 1040px) {
	.himml-header .himml-logo img {
		width: 150px;
		height: auto;
	}
}

.himml-footer .himml-logo img {
	height: 60px;
}

.himml-header__contact {
	gap: 12px;
}

@media (max-width: 760px) {
	.himml-logo img {
		height: 62px;
	}

	.himml-header__contact .wp-block-buttons {
		display: none;
	}
}

/* Platz für den überlagernden Kopf. */
.has-header-offset {
	padding-top: calc(var(--himml-header-height) + clamp(24px, 3vw, 48px)) !important;
}

/* Dunkler Seitenanfang: Verläufe, Zeichen, feines Korn. */
.himml-sky {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.himml-sky::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		var(--himml-rose-dark),
		radial-gradient(1200px 600px at 75% -10%, rgba(29, 91, 209, .55), transparent 60%),
		radial-gradient(800px 500px at 10% 110%, rgba(14, 65, 148, .5), transparent 60%);
}

.himml-sky::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

/* Seitenköpfe der Unterseiten: Titel bündig mit den Brotkrumen (breite Spalte). */
.himml-sky.has-header-offset > :not(.alignfull):not(.alignwide):not(.himml-hero) {
	max-width: var(--wp--style--global--wide-size) !important;
}

.himml-sky .wp-block-breadcrumbs {
	color: var(--wp--preset--color--on-night-muted);
}

.himml-sky .wp-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.himml-sky .wp-block-breadcrumbs a:hover {
	color: #fff;
}

/* Hero der Startseite. */
.himml-hero.himml-hero > * + * {
	margin-block-start: 26px;
}

.himml-hero__title {
	font-weight: 100;
	letter-spacing: -.015em;
}

.himml-hero__title strong {
	display: block;
	margin-bottom: .12em;
	color: #fff;
	font-weight: 700;
	letter-spacing: -.02em;
}

.himml-hero__title strong + br {
	display: none;
}

@media (max-width: 560px) {
	.himml-hero__title br {
		display: none;
	}
}

.himml-hero .is-style-lead {
	max-width: 54ch;
	color: #c5d0e6;
}

.himml-trust {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px 26px;
}

@media (min-width: 1100px) {
	.himml-trust {
		flex-direction: row;
	}
}

.himml-hero .wp-block-buttons {
	gap: 12px;
}

.himml-hero .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
}

.himml-hero .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	background: var(--wp--preset--color--grey-mid);
}

.himml-hero__avail.is-style-status {
	display: flex;
	align-self: stretch;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 17px;
}

/* 4. Himml-Zeichen ----------------------------------------------------- */

/* Fixiert hinter der Seite: scheint auf offenen weißen Flächen durch. */
body:not(.editor-styles-wrapper)::before {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
	right: -10vw;
	top: 50%;
	width: min(62vw, 820px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	opacity: .055;
	background: #30343b;
	-webkit-mask: var(--himml-rose-line) center / contain no-repeat;
	mask: var(--himml-rose-line) center / contain no-repeat;
}

@media (max-width: 760px) {
	body:not(.editor-styles-wrapper)::before {
		width: 105vw;
		right: -35vw;
		opacity: .045;
	}
}

/* Dunkle Sektionen mit dem Zeichen als ruhiger Lage. */
.has-rose {
	position: relative;
	isolation: isolate;
}

.has-rose::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--himml-rose-dark);
}

@media print {
	body::before,
	.has-rose::before,
	.himml-sky::before {
		display: none;
	}
}

/* 5. Sektionen --------------------------------------------------------- */

/* Kopf einer Sektion: Titel links, Einleitung rechts. */
.himml-sec-head {
	gap: 32px;
	margin-bottom: 40px;
}

.himml-sec-head h2 {
	max-width: 16ch;
}

.himml-sec-head > .wp-block-group > * + * {
	margin-block-start: 14px;
}

.himml-sec-head .is-style-lead {
	max-width: 44ch;
}

/* Todesfall: weiße Karte über der Hero-Kante. */
.wp-block-post-content > .himml-emergency,
main > .himml-emergency,
.himml-emergency {
	position: relative;
	z-index: 2;
	margin-block-start: -64px;
}

/* Nur direkt unter dem dunklen Hero überlappen; auf Inhaltsseiten (nach dem Einstieg) normal. */
:not(.himml-sky) + .himml-emergency.himml-emergency {
	margin-block-start: 0;
}

.himml-emergency__panel {
	display: grid;
	grid-template-columns: .9fr 1.6fr;
	grid-template-areas:
		"intro panels"
		"tabs panels"
		"foot foot";
	grid-template-rows: auto 1fr auto;
	column-gap: clamp(24px, 4vw, 56px);
}

.himml-emergency__panel > * {
	margin: 0 !important;
}

.himml-emergency__intro {
	grid-area: intro;
}

.himml-emergency__intro > * + * {
	margin-block-start: 14px;
}

.himml-emergency__intro .is-style-lead {
	margin-block-start: 16px;
}

.himml-steps {
	display: contents;
}

.himml-steps .wp-block-tab-list {
	grid-area: tabs;
	align-self: start;
	margin-top: 22px;
}

.himml-steps .wp-block-tab-panels {
	grid-area: panels;
}

.himml-steps .wp-block-tab-panel {
	gap: 14px;
	counter-reset: step;
}

/* Wie im Entwurf: Spalten dürfen mit dem Inhalt wachsen (Core erzeugt minmax(0, 1fr)). */
@media (min-width: 901px) {
	.himml-steps .wp-block-tab-panel:has(> :nth-child(3)) {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.himml-steps .wp-block-tab-panel:not(:has(> :nth-child(3))) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.himml-emergency__foot {
	grid-area: foot;
	margin-top: clamp(24px, 4vw, 40px) !important;
	gap: 16px;
}

@media (max-width: 900px) {
	.himml-emergency__panel {
		grid-template-columns: 1fr;
		grid-template-areas: "intro" "tabs" "panels" "foot";
		grid-template-rows: auto;
	}

	.himml-steps .wp-block-tab-panels {
		margin-top: 20px;
	}

	.himml-steps .wp-block-tab-panel {
		grid-template-columns: 1fr !important;
	}
}

/* Leistungen. */
.himml-tiles {
	gap: 18px;
}

@media (max-width: 1000px) {
	.himml-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	.himml-tiles {
		grid-template-columns: 1fr !important;
	}
}

/* Vorsorge: dunkelgraue Fläche wie das Kontaktband, rechts weiße Box.
 * Die Farben stehen hier und nicht nur am Sektionsstil, damit auch Seiten, deren
 * Inhalt noch den alten Stil „Hellgrau“ trägt, dunkelgrau werden. */
.himml-vorsorge {
	--himml-muted: #d9dce1;
	--himml-focus: var(--wp--preset--color--sky);
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	background-color: var(--wp--preset--color--stone) !important;
	color: #d9dce1;
}

.himml-vorsorge__copy :is(h2, li) {
	color: var(--wp--preset--color--base);
}

.himml-vorsorge__copy .has-muted-color {
	color: var(--himml-muted) !important;
}

.himml-vorsorge__copy .is-style-kicker {
	color: var(--wp--preset--color--pale);
}

.himml-vorsorge__copy .is-style-check li::before {
	background: var(--wp--preset--color--pale);
}

.himml-vorsorge__side {
	--himml-focus: var(--wp--preset--color--blue);
}

.himml-vorsorge > * {
	margin: 0 !important;
}

.himml-vorsorge__copy > * + * {
	margin-block-start: 12px;
}

.himml-vorsorge__copy h2 {
	margin-block-start: 14px;
}

.himml-vorsorge__copy > p:not(.is-style-kicker) {
	max-width: 52ch;
}

.himml-vorsorge__side {
	text-align: center;
}

.himml-vorsorge__logo {
	margin: 0;
}

.himml-vorsorge__logo img {
	height: clamp(72px, 7vw, 96px);
	width: auto;
	aspect-ratio: 450.78 / 156.98;
	border-radius: 0;
}

@media (max-width: 900px) {
	.himml-vorsorge {
		grid-template-columns: 1fr;
	}
}

/* Team. */
.himml-quotebox {
	margin-block-start: 44px !important;
	gap: 24px;
	padding: 28px 32px;
}

.himml-quotebox__portrait {
	flex: none;
	margin: 0;
}

.himml-quotebox__portrait img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.himml-quotebox__quote {
	color: #fff;
	font-size: clamp(20px, 1.7vw, 25px);
	line-height: 1.4;
	letter-spacing: -.01em;
}

.himml-quotebox .has-small-font-size {
	margin-block-start: 8px;
}

.himml-quotebox a {
	font-weight: 500;
	text-underline-offset: 4px;
}

@media (max-width: 620px) {
	.himml-quotebox {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
		gap: 16px;
	}
}

/* Bewertungen. */
.himml-voices__title {
	max-width: 17ch;
}

.himml-voices .is-style-lead {
	margin-block-start: 22px;
	color: var(--wp--preset--color--body);
}

.himml-more-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--ink);
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	text-underline-offset: 5px;
}

.himml-more-link a:hover {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
}

/* Spalten erst unter 900 px untereinander (Core: 782 px). */
@media (max-width: 900px) {
	.himml-voices,
	.himml-faq,
	.himml-region-history,
	#standorte .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.himml-voices > .wp-block-column,
	.himml-faq > .wp-block-column,
	.himml-region-history > .wp-block-column,
	#standorte .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Hauptsitz und Region. */
.himml-hq {
	overflow: hidden;
}

.himml-hq__caption > * + * {
	margin-block-start: 0;
}

.himml-hq__label {
	margin-bottom: 8px;
	color: #cfdcf6;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.himml-hq h3 {
	margin-bottom: 10px;
	font-size: 25px;
}

.himml-hq__hours {
	margin-top: 5px !important;
	color: #cfdcf6;
	font-size: 15px;
}

.himml-hq__actions {
	margin-top: 18px !important;
	gap: 12px;
}

.himml-hq__actions .wp-block-button__link {
	min-height: 44px;
	padding: 10px 16px;
	border-color: rgba(255, 255, 255, .35);
	background: transparent;
	font-size: 16.5px;
	backdrop-filter: none;
}

.himml-hq__actions .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, .65);
	background: rgba(255, 255, 255, .07);
}

.himml-region-copy h3 {
	max-width: 19ch;
}

.himml-region-copy > p {
	max-width: 48ch;
}

/* Geschichte (Startseite) und Einstieg (Inhaltsseiten): Medien und Text auf grauer Fläche. */
:is(.himml-history, .himml-intro) {
	overflow: hidden;
}

:is(.himml-history, .himml-intro) .wp-block-media-text__media {
	min-height: 380px;
}

:is(.himml-history, .himml-intro) .wp-block-media-text__content {
	padding: clamp(32px, 4vw, 64px);
}

:is(.himml-history, .himml-intro) .wp-block-media-text__content > * + * {
	margin-block-start: 16px;
}

@media (max-width: 900px) {
	:is(.himml-history, .himml-intro).wp-block-media-text {
		grid-template-columns: 100% !important;
	}

	:is(.himml-history, .himml-intro) .wp-block-media-text__media {
		grid-row: 1;
	}

	:is(.himml-history, .himml-intro) .wp-block-media-text__content {
		grid-row: 2;
	}
}

/* Trauerfeiern. */
.himml-obits .himml-sec-head {
	margin-bottom: 36px;
}

.himml-obits .is-style-lead {
	color: #d6dff0;
}

.himml-obits__footer {
	gap: 24px;
}

.himml-obits__footer p {
	color: #d6dff0;
	font-size: 16.5px;
}

.himml-obits__footer strong {
	display: inline-block;
	margin-bottom: 4px;
	color: #fff;
	font-size: 18.5px;
}

@media (max-width: 1000px) {
	.himml-obit-grid {
		gap: 16px !important;
	}
}

@media (max-width: 760px) {
	.himml-obit-grid,
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 761px) and (max-width: 1000px) {
	.wp-block-post-template.is-layout-grid:not(.himml-obit-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 560px) {
	.himml-region-history .is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Archive: Abstand unter dem dunklen Seitenkopf. */
.himml-archive-query {
	margin-top: var(--wp--preset--spacing--60) !important;
}

.himml-archive-query .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

/* FAQ: linke Spalte bleibt stehen. */
.himml-faq__side {
	position: sticky;
	top: 32px;
	align-self: flex-start !important;
}

.himml-faq__side > * + * {
	margin-block-start: 18px;
}

.himml-faq__side h2 {
	margin-block-start: 14px;
}

.himml-faq__side .wp-block-buttons {
	margin-block-start: 22px;
}

@media (max-width: 900px) {
	.himml-faq__side {
		position: static;
	}
}

/* 5b. Inhaltsseiten ---------------------------------------------------- */

/* Einleitung im Seitenkopf: Auszug der Seite (himml/page-hero). */
.himml-page-lead {
	margin-block-start: 20px !important;
}

.himml-page-lead p {
	max-width: 58ch;
	margin: 0;
	color: var(--wp--preset--color--on-night);
	line-height: 1.5;
}

/* Fließtext auf Inhaltsseiten: mehr Luft vor Zwischentiteln. Gilt direkt im
 * Seiteninhalt und in Gruppen mit der Klasse himml-prose (Muster „Textabschnitt“). */
:is(.wp-block-post-content, .himml-prose) > :is(h2, h3, h4):not(:first-child) {
	margin-block-start: 2em;
}

:is(.wp-block-post-content, .himml-prose) > :is(h2, h3, h4) + * {
	margin-block-start: .75em;
}

:is(.wp-block-post-content, .himml-prose) > .is-style-kicker + :is(h2, h3) {
	margin-block-start: 14px;
}

.himml-prose > .is-style-lead {
	margin-block-start: 22px;
}

.himml-prose > .wp-block-image {
	margin-block: var(--wp--preset--spacing--50);
}

.himml-prose > .wp-block-image figcaption {
	margin-top: 10px;
}

/* Team: Profile untereinander, getrennt durch Linien. */
.himml-profiles > * {
	margin-block: 0 !important;
}

.himml-profiles > * + * {
	margin-block-start: clamp(32px, 4vw, 48px) !important;
	padding-block-start: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--wp--preset--color--line);
}

[class*="is-style-section-sand"] .himml-profiles > * + * {
	border-top-color: var(--wp--preset--color--grey-mid);
}

/* Sprungmarken: Ziele unter dem Kopf nicht verdecken. */
:where(.wp-block-post-content) [id] {
	scroll-margin-top: 24px;
}

/* Weiterlesen: Link-Karten im Raster, darüber eine Linie. */
.himml-more {
	padding-top: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--wp--preset--color--line);
}

.himml-more .himml-sec-head {
	margin-bottom: 32px;
}

/* 5c. Foto-Treatment ---------------------------------------------------- */

/* Fotos stehen dynamikreduziert (weniger Sättigung und Kontrast) mit einem
 * Blauverlauf von unten, wie die Leistungskacheln der Startseite. Verlinkte
 * Fotos (Kacheln, Link-Karten) werden beim Überfahren farbig. Logos, Porträts,
 * Produktbilder und Galerien bleiben unberührt. Bilder mit „logo“ im Dateinamen
 * sind ausgenommen, weitere schließt die Zusatzklasse `himml-no-treatment` am
 * Block aus (z. B. Kapitel mit Firmenlogo). */
:root {
	--himml-photo-filter: saturate(.4) contrast(.92) brightness(1.03);
	--himml-photo-shade: linear-gradient(0deg, rgba(7, 22, 51, .62) 0%, rgba(14, 65, 148, .26) 38%, rgba(14, 65, 148, 0) 70%);
}

.is-style-tile:not(.himml-no-treatment, :has(img[src*="logo" i])) .wp-block-cover__image-background,
.is-style-link-card:not(.himml-no-treatment, :has(img[src*="logo" i])) :is(.wp-block-image, .wp-block-post-featured-image) img,
:is(.himml-intro, .himml-history, .is-style-chapter):not(.himml-no-treatment, :has(img[src*="logo" i])) .wp-block-media-text__media img,
.himml-page-image:not(.himml-no-treatment, :has(img[src*="logo" i])) img,
.himml-prose > .wp-block-image:not(.himml-no-treatment, :has(img[src*="logo" i])) img {
	filter: var(--himml-photo-filter);
	transition: filter .6s var(--himml-ease), transform .6s var(--himml-ease);
}

.is-style-tile:is(:hover, :focus-within) .wp-block-cover__image-background,
.is-style-link-card:is(:hover, :focus-within) img {
	filter: none;
}

/* Verlauf als eigene Lage über dem Foto; die Kachel bringt ihren Verlauf selbst mit. */
.is-style-link-card:not(.himml-no-treatment, :has(img[src*="logo" i])) :is(.wp-block-image, .wp-block-post-featured-image),
:is(.himml-intro, .himml-history, .is-style-chapter):not(.himml-no-treatment, :has(img[src*="logo" i])) .wp-block-media-text__media,
.himml-page-image:not(.himml-no-treatment, :has(img[src*="logo" i])),
.himml-prose > .wp-block-image:not(.himml-no-treatment, :has(img[src*="logo" i])) {
	position: relative;
}

.is-style-link-card:not(.himml-no-treatment, :has(img[src*="logo" i])) :is(.wp-block-image, .wp-block-post-featured-image)::after,
:is(.himml-intro, .himml-history, .is-style-chapter):not(.himml-no-treatment, :has(img[src*="logo" i])) .wp-block-media-text__media::after,
.himml-page-image:not(.himml-no-treatment, :has(img[src*="logo" i]))::after,
.himml-prose > .wp-block-image:not(.himml-no-treatment, :has(img[src*="logo" i]))::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--himml-photo-shade);
	pointer-events: none;
}

/* Beitragsbild: Radius liegt am Bild, der Verlauf braucht ihn an der Fläche. */
.himml-page-image:not(.himml-no-treatment, :has(img[src*="logo" i])) {
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--x-large);
}

/* In der Bildunterschrift keinen Verlauf. */
.himml-prose > .wp-block-image:has(figcaption)::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.is-style-tile:not(.himml-no-treatment, :has(img[src*="logo" i])) .wp-block-cover__image-background,
	.is-style-link-card:not(.himml-no-treatment, :has(img[src*="logo" i])) :is(.wp-block-image, .wp-block-post-featured-image) img {
		transition: none;
	}
}

/* 6. Fußbereich -------------------------------------------------------- */
.himml-footer {
	color: var(--wp--preset--color--on-night-muted);
}

/* Kontaktband ragt zur Hälfte in die Sektion davor. */
.himml-cta {
	position: relative;
	z-index: 2;
	gap: 24px;
	transform: translateY(-50%);
	margin-bottom: clamp(-40px, -3vw, -16px) !important;
}

/* Auf dem Handy ist das Band hoch: halbe Höhe würde Inhalt der letzten Sektion
   überdecken (Hauptbereich endet mit mind. 80 px Abstand). */
@media (max-width: 760px) {
	.himml-cta {
		transform: translateY(-56px);
	}
}

.himml-cta p {
	color: #d9dce1;
}

.himml-cta .wp-block-buttons {
	gap: 12px;
}

.himml-footer__cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.himml-footer__cols > * {
	margin: 0 !important;
}

.himml-footer__cols .himml-logo {
	margin-bottom: 20px;
}

.himml-footer__cols h5 {
	margin-bottom: 16px;
	font-size: 14px;
	letter-spacing: .12em;
}

.himml-footer a:not(.wp-block-button__link) {
	color: #dbe3f2;
	text-decoration: none;
	transition: color .2s;
}

.himml-footer a:not(.wp-block-button__link):hover {
	color: #fff;
}

.himml-footer__legal {
	margin-top: 0 !important;
	gap: 12px;
}

/* „Nach oben“: #top springt laut HTML-Spezifikation an den Seitenanfang,
 * auch ohne Element mit dieser ID; weich über scroll-behavior. */
.himml-footer .himml-to-top a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
}

.himml-to-top a::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z'/%3E%3C/svg%3E") center / 14px no-repeat;
	transition: background-color .2s, border-color .2s, transform .2s var(--himml-ease);
}

.himml-to-top a:hover::after {
	border-color: #fff;
	background-color: rgba(255, 255, 255, .12);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.himml-to-top a::after {
		transition: none;
	}

	.himml-to-top a:hover::after {
		transform: none;
	}
}

@media (max-width: 900px) {
	.himml-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

/* Anruf-Leiste auf dem Handy. */
.himml-sticky-call {
	display: none !important;
}

.himml-sticky-call .wp-block-button {
	width: 100%;
}

@media (max-width: 760px) {
	body:not(.editor-styles-wrapper) .himml-sticky-call {
		display: flex !important;
		flex-direction: column;
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		z-index: 60;
		margin: 0 !important;
	}

	/* Platz für die Leiste im dunklen Fuß statt weißer Streifen darunter. */
	.himml-footer {
		padding-bottom: 112px !important;
	}
}

/* 7. Bewegung und Hilfsklassen ---------------------------------------- */

/* Reveal: nur wenn view.js läuft (html.himml-js), sonst sofort sichtbar. */
.himml-js .himml-reveal:not(.is-revealed) {
	opacity: 0;
	transform: translateY(20px);
}

.himml-js .himml-reveal {
	transition: opacity .7s ease, transform .7s var(--himml-ease);
}

@media (prefers-reduced-motion: reduce) {
	.himml-js .himml-reveal:not(.is-revealed) {
		opacity: 1;
		transform: none;
	}

	.himml-js .himml-reveal {
		transition: none;
	}
}

@media (max-width: 1180px) {
	.himml-hide-below-xl {
		display: none !important;
	}
}

@keyframes himml-pulse {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(74, 222, 128, .2);
	}

	50% {
		box-shadow: 0 0 0 7px rgba(74, 222, 128, .08);
	}
}

/* Übernommene Inhalte (Sektionen mit Klasse himml-legacy): Die Blöcke der alten
 * Seite bleiben unverändert und gültig, hier werden sie ans Design angeglichen. */
.himml-legacy h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Lange URLs im Fließtext (Datenschutz) umbrechen statt seitlich zu scrollen. */
.himml-legacy :is(p, li) {
	overflow-wrap: break-word;
}

.himml-legacy .wp-block-button__link :is(.icon, .fa) {
	display: none;
}

.himml-legacy :is(.wp-block-gallery, .wp-block-image, .wp-block-video, .wp-block-audio, .wp-block-columns, .wp-block-embed, .wp-block-file, .wp-block-accordion) {
	margin-block: var(--wp--preset--spacing--40);
}

.himml-legacy .wp-block-gallery.has-nested-images {
	gap: 12px;
}

.himml-legacy .wp-block-gallery img,
.himml-legacy .wp-block-video video,
.himml-legacy .wp-block-media-text__media img {
	border-radius: var(--wp--preset--border-radius--medium);
}

/* Bildunterschriften in Galerien liegen auf dem Bild. Die Schriftfarbe aus theme.json
 * (muted) war auf hellen Produktfotos (Decken, Kissen) nicht lesbar: weiße Schrift auf
 * nachtblauem Verlauf. */
.himml-legacy .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	padding: 28px 12px 10px;
	border-radius: 0 0 var(--wp--preset--border-radius--medium) var(--wp--preset--border-radius--medium);
	background: linear-gradient(0deg, rgba(7, 22, 51, .85) 0%, rgba(7, 22, 51, .55) 60%, rgba(7, 22, 51, 0) 100%);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Produkt-Finder (Plugin urnen-finder) lädt seine Karten erst nach Sekunden von
 * himml-bestattungen.de und schob den Inhalt darunter weg. Solange er lädt, hält
 * er ungefähr die Höhe von zwei Kartenreihen frei. */
.wp-block-himmlbestattungen-urnen-finder:has(.urnen-finder-loading) {
	min-height: min(900px, 110vh);
}

.himml-legacy .wp-block-table table {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--small);
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	font-size: var(--wp--preset--font-size--small);
}

.himml-legacy .wp-block-table :is(td, th) {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}

.himml-legacy .wp-block-table tr:last-child > :is(td, th) {
	border-bottom: 0;
}

.himml-legacy .wp-block-table td:first-child {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.himml-legacy iframe {
	max-width: 100%;
	border-radius: var(--wp--preset--border-radius--medium);
}

.himml-legacy .wp-block-audio audio {
	width: 100%;
}

.himml-legacy .wp-block-media-text {
	gap: clamp(24px, 4vw, 56px);
}

.himml-legacy .wp-block-media-text__content {
	padding-inline: 0;
}

/* Video (Einbettung mit Klasse himml-video): abgerundet wie Bilder. */
.himml-video .wp-block-embed__wrapper {
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--x-large);
	background: var(--wp--preset--color--grey);
}

/*
 * Borlabs-Platzhalter (YouTube/Vimeo) im Video: Borlabs entfernt den 16:9-Rahmen
 * und lässt den Text die Höhe bestimmen. Hier wieder 16:9 (wächst nur, wenn der
 * Inhalt nicht passt), Vorschaubild unter nachtblauem Verlauf, Text und Buttons
 * im Theme-Stil. Hohe Spezifität, weil Borlabs mit body/div/[data-…] arbeitet.
 */
.himml-video:has(.brlbs-cmpnt-content-blocker) .wp-block-embed__wrapper {
	background: var(--wp--preset--color--night);
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] {
	height: auto;
	font-family: inherit;
	line-height: 1.5;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-preset-c {
	height: auto;
	border-radius: 0;
	background: var(--wp--preset--color--night);
}

/* 16:9 als Mindesthöhe über ein Abstandselement statt aspect-ratio: der Rahmen
   schneidet (overflow: hidden), diese Ebene muss wachsen können, wenn Text und
   Buttons im schmalen Video nicht hineinpassen. */
body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-preset-c::before {
	content: "";
	flex: none;
	width: 0;
	padding-top: 56.25%;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-play-button {
	display: none;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-thumbnail {
	border-radius: 0;
	filter: saturate(0.8);
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-preset-c .brlbs-cmpnt-cb-main {
	margin: 0 !important;
	height: auto;
	overflow: visible;
	justify-content: center;
	gap: 14px;
	padding: clamp(20px, 5%, 48px);
	border-radius: 0;
	background: linear-gradient(180deg, rgba(7, 22, 51, 0.55) 0%, rgba(7, 22, 51, 0.88) 100%);
	color: var(--wp--preset--color--on-night);
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 46ch;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-description {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-description strong {
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] a.brlbs-cmpnt-cb-provider-toggle {
	color: var(--wp--preset--color--pale);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-preset-c .brlbs-cmpnt-cb-buttons {
	width: auto;
	margin: 4px 0 0;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-buttons a.brlbs-cmpnt-cb-btn {
	width: auto;
	padding: 11px 22px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--wp--preset--border-radius--pill);
	background: transparent;
	color: var(--wp--preset--color--base);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

/* „Inhalt entsperren“ ist der Hauptweg: weißer Knopf. */
body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-buttons a.brlbs-cmpnt-cb-btn[data-borlabs-cookie-unblock] {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--night);
}

body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-buttons a.brlbs-cmpnt-cb-btn:hover,
body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-buttons a.brlbs-cmpnt-cb-btn:focus-visible {
	border-color: var(--wp--preset--color--pale);
	background: var(--wp--preset--color--pale);
	color: var(--wp--preset--color--night);
}

/* Schmale Videos (Handy, halbe Spalte): Buttons untereinander, knapper Abstand. */
@container brlbsCmpntContentBlocker (max-width: 520px) {
	body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-preset-c .brlbs-cmpnt-cb-main {
		gap: 10px;
		padding: 18px;
		background: rgba(7, 22, 51, 0.86);
	}

	body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-preset-c .brlbs-cmpnt-cb-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 8px;
	}

	body .himml-video div.brlbs-cmpnt-container.brlbs-cmpnt-content-blocker[data-borlabs-cookie-content-blocker-id] .brlbs-cmpnt-cb-buttons a.brlbs-cmpnt-cb-btn {
		padding: 9px 16px;
		font-size: 14px;
	}
}

/* Eingebettete Fremdinhalte mit fester Breite (z. B. Sterbegeld-Rechner auf
   /bestattungsvorsorge-kosten/) dürfen in Lesesektionen nicht überstehen. */
.himml-legacy iframe {
	width: 100% !important;
}