/*
Theme Name: Ramsaier Überführungen
Theme URI: https://www.verstorbenen-ueberfuehrung.de/
Author: Sehpunkt
Author URI: https://sehpunkt.de
Description: Block-Theme für die Überführung von Verstorbenen. Dreisprachig, selbst gehostete Schriften, auf Erreichbarkeit und Lesbarkeit unter Belastung ausgelegt. Layout und Gestaltung: Sehpunkt für Bestattungshaus Ramsaier.
Version: 2.6.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ramsaier
Tags: block-theme, full-site-editing, accessibility-ready, three-columns
*/

/* =========================================================================
   1  GRUNDLAGEN
   Alles Gestalterische liegt in theme.json; hier steht nur, was sich dort
   nicht ausdrücken lässt.
   ========================================================================= */

:root {
	--ram-tap: 3rem;          /* Mindesthöhe für Bedienelemente */
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Sichtbarer Fokus überall. Nicht entfernen – ein erheblicher Teil der
   Nutzerschaft navigiert per Tastatur oder Screenreader. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
	border-radius: 1px;
}

.ram-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--tief);
	color: var(--wp--preset--color--weiss);
	text-decoration: none;
}
.ram-skip:focus { left: 0; }

/* Sprungmarken sollen nicht unter dem Kopfbereich verschwinden */
:target { scroll-margin-top: 1.5rem; }

.ram-utility {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gedeckt);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}


/* =========================================================================
   2  KOPFBEREICH

   Breitbild: Logo links, Sprungmarken mittig, Sprachen und Telefon rechts.
   Schmal: nur Logo und Menüknopf, alles Weitere in der Klappfläche.

   Die Klappfläche liegt AUSSERHALB von .ram-kopf. Als Flex-Kind neben Logo
   und Knopf bekam sie nur den Restplatz zugeteilt und wurde schmal, sobald
   am Kopf-Layout etwas geändert wurde.
   ========================================================================= */

.ram-kopfbereich { border-bottom: 1px solid var(--wp--preset--color--linie); }

.ram-kopfzone { width: 100%; }

.ram-kopf {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}
.ram-kopf__marke  { flex: 0 0 auto; margin-right: auto; }
.ram-kopf__mitte  { flex: 1 1 auto; display: flex; justify-content: center; }
.ram-kopf__rechts {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .25rem;
}
.ram-kopf__rechts .ram-phone__number { font-size: clamp(1.25rem, .9rem + 1.1vw, 1.75rem); }

.ram-burger { display: none; }
.ram-klappe { display: none; }

@media (max-width: 60rem) {
	.ram-kopf {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--20);
	}
	.ram-kopf__mitte,
	.ram-kopf__rechts { display: none; }
	.ram-kopf__marke { margin-right: 0; min-width: 0; }

	.ram-burger {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		flex: 0 0 auto;
		min-height: var(--ram-tap);
		padding: .5rem .75rem;
		margin-right: -.75rem;
		background: none;
		border: 0;
		border-radius: 2px;
		font: inherit;
		font-size: var(--wp--preset--font-size--sm);
		color: var(--wp--preset--color--text);
		cursor: pointer;
	}
	.ram-burger__striche {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 1.375rem;
		height: 1rem;
		flex: 0 0 auto;
	}
	.ram-burger__striche span {
		display: block;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
	}
	.ram-burger[aria-expanded="true"] .ram-burger__striche span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.ram-burger[aria-expanded="true"] .ram-burger__striche span:nth-child(2) { opacity: 0; }
	.ram-burger[aria-expanded="true"] .ram-burger__striche span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	.ram-klappe {
		display: block;
		width: 100%;
		flex: 1 0 100%;
		grid-column: 1 / -1;
		max-width: none;
		box-sizing: border-box;
		padding-top: var(--wp--preset--spacing--30);
		margin-top: var(--wp--preset--spacing--20);
		border-top: 1px solid var(--wp--preset--color--linie);
	}
	.ram-klappe[hidden] { display: none; }
	.ram-klappe__inhalt { width: 100%; }

	/* In der Klappfläche steht die Nummer zuoberst und groß –
	   wer hier landet, will meist anrufen, nicht navigieren. */
	.ram-klappe .ram-phone {
		display: flex;
		align-items: flex-start;
		margin-bottom: var(--wp--preset--spacing--30);
	}
	.ram-klappe .ram-phone__number { font-size: 2rem; }

	.ram-klappe .ram-nav,
	.ram-klappe .ram-langs-nav { width: 100%; }

	.ram-klappe .ram-nav__liste {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.ram-klappe .ram-nav__liste li { width: 100%; }
	.ram-klappe .ram-nav__liste a {
		display: block;
		width: 100%;
		min-height: var(--ram-tap);
		padding: .75rem 0;
		font-size: var(--wp--preset--font-size--md);
		border-bottom: 1px solid var(--wp--preset--color--linie);
	}
	.ram-klappe .ram-langs {
		display: flex;
		margin-top: var(--wp--preset--spacing--30);
		flex-wrap: wrap;
		gap: .5rem;
	}
	.ram-klappe .ram-langs li::before { content: none; }
	.ram-klappe .ram-langs a {
		min-height: 2.75rem;
		display: inline-flex;
		align-items: center;
		padding: .5rem .875rem;
		border: 1px solid var(--wp--preset--color--linie);
	}
}

/* Sehr schmale Geräte: Logo darf schrumpfen, der Knopf nicht */
@media (max-width: 24rem) {
	.ram-kopf__marke .ram-logo__bild { max-width: 60vw; }
	.ram-burger__text { display: none; }
	.ram-burger { padding-inline: .5rem; margin-right: -.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
	.ram-burger__striche span { transition: transform .18s ease, opacity .18s ease; }
}


/* =========================================================================
   3  LOGO
   ========================================================================= */

.ram-logo { display: inline-flex; align-items: center; text-decoration: none; }
.ram-logo__bild { display: block; }
.ram-logo--text {
	flex-direction: column;
	align-items: flex-start;
	gap: .1875rem;
	color: inherit;
}
.ram-logo__titel {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.15;
	color: var(--wp--preset--color--tief);
}
.ram-logo--footer {
	display: block;
	width: auto;
	max-width: 190px;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.ram-logo--footer .ram-logo__titel {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}
.ram-logo__hinweis {
	display: block;
	margin-top: .25rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gedeckt);
}
.ram-footer .ram-logo__bild {
	max-width: 190px;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--20);
}


/* =========================================================================
   4  TELEFONNUMMER
   ========================================================================= */

.ram-phone {
	display: inline-flex;
	flex-direction: column;
	gap: .125rem;
	text-decoration: none;
	line-height: 1.05;
	position: relative;
	z-index: 1;
}
.ram-phone__number {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text);
}
.ram-phone__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
}
.ram-phone:hover .ram-phone__number { color: var(--wp--preset--color--akzent); }

/* Auf dunklem Grund: sonst steht die Nummer beinahe schwarz auf grün */
.ram-band--dunkel .ram-phone__number,
.ram-hero .ram-phone__number { color: var(--wp--preset--color--weiss); }
.ram-band--dunkel .ram-phone__note,
.ram-hero .ram-phone__note { color: var(--wp--preset--color--hellgruen); }
.ram-band--dunkel .ram-phone:hover .ram-phone__number,
.ram-hero .ram-phone:hover .ram-phone__number { color: var(--wp--preset--color--hellgruen); }
.ram-band--dunkel .ram-phone:focus-visible,
.ram-hero .ram-phone:focus-visible { outline-color: var(--wp--preset--color--weiss); }


/* =========================================================================
   5  SPRACHUMSCHALTER
   ========================================================================= */

.ram-langs { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.ram-langs a {
	display: inline-block;
	padding: .375rem .625rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .08em;
	text-decoration: none;
	color: var(--wp--preset--color--gedeckt);
	border: 1px solid transparent;
}
.ram-langs a:hover { color: var(--wp--preset--color--text); }
.ram-langs [aria-current="true"] {
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--linie);
	background: var(--wp--preset--color--weiss);
}

/* Kurzfassung DE | EN | FR für den Kopfbereich */
.ram-langs--kurz { gap: 0; }
.ram-langs--kurz li { display: flex; align-items: center; }
.ram-langs--kurz li + li::before {
	content: "|";
	color: var(--wp--preset--color--linie);
	align-self: center;
}
.ram-langs--kurz a {
	padding: .25rem .4375rem;
	border: 0;
	background: none;
	font-size: .8125rem;
	letter-spacing: .06em;
}
.ram-langs--kurz [aria-current="true"] {
	color: var(--wp--preset--color--akzent);
	font-weight: 500;
	background: none;
	border: 0;
}

/* Sprache ohne eigene Fassung dieser Seite: der Klick führt auf die
   Sprachstartseite. Dezent gekennzeichnet, damit der Sprung nicht
   unerklärlich wirkt. */
.ram-langs__ersatz { opacity: .62; }
.ram-langs__ersatz:hover,
.ram-langs__ersatz:focus-visible { opacity: 1; }

.ram-footer .ram-langs { flex-wrap: wrap; }


/* =========================================================================
   6  NAVIGATION
   ========================================================================= */

.ram-nav__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ram-nav__liste a {
	display: inline-block;
	padding: .5rem 0;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	color: var(--wp--preset--color--text);
	border-bottom: 2px solid transparent;
}
.ram-nav__liste a:hover { border-bottom-color: var(--wp--preset--color--akzent); }
.ram-nav__liste .current-menu-item > a,
.ram-nav__liste .current-menu-ancestor > a {
	border-bottom-color: var(--wp--preset--color--text);
}

/* Untermenüs bleiben ausgeklappt statt als Hover-Flyout –
   Hover-Menüs sind auf Touch und per Tastatur unzuverlässig. */
.ram-nav__liste .sub-menu {
	display: flex;
	gap: 0 1rem;
	list-style: none;
	margin: 0 0 0 .75rem;
	padding: 0;
}
.ram-nav__liste .sub-menu a {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gedeckt);
}
@media (max-width: 40rem) {
	.ram-nav__liste .sub-menu { display: none; }
}

/* Fußbereichs-Menü */
.ram-footernav__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 2;
}
.ram-footernav__liste a { text-decoration: none; }
.ram-footernav__liste a:hover { text-decoration: underline; }


/* =========================================================================
   7  LAUFZETTEL
   Route als Beförderungsvermerk, rein typografisch.
   ========================================================================= */

.ram-laufzettel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	max-width: 26rem;
	margin: var(--wp--preset--spacing--40) 0;
	padding: 1.125rem 0;
	border-top: 2px solid var(--wp--preset--color--akzent);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.ram-laufzettel__kopf {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
	margin-bottom: .875rem;
}
.ram-laufzettel__zeile {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: .75rem;
	align-items: baseline;
	padding: .1875rem 0;
}
.ram-laufzettel__iso {
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--wp--preset--color--text);
}
.ram-laufzettel__ort { color: var(--wp--preset--color--text); }
.ram-laufzettel__pfeil {
	grid-column: 1;
	color: var(--wp--preset--color--akzent);
	text-align: center;
	padding: .0625rem 0;
}
.ram-laufzettel__meta {
	margin-top: .875rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gedeckt);
}


/* =========================================================================
   8  FORMULARE
   Große Zielflächen, hoher Kontrast, keine Platzhalter statt Beschriftungen.
   ========================================================================= */

.vu-form { max-width: 40rem; }

.vu-form__phone {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--weiss);
	border-left: 2px solid var(--wp--preset--color--akzent);
	margin-bottom: var(--wp--preset--spacing--40);
}
.vu-form__phone a {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.vu-form__notice {
	padding: 1rem 1.25rem;
	margin-bottom: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--weiss);
	border-left: 3px solid var(--wp--preset--color--akzent);
}
.vu-form__notice--ok { border-left-color: #3F6B4A; }
.vu-form__notice--error { border-left-color: #8C3F3F; }

.vu-form label { display: block; font-weight: 500; margin-bottom: .375rem; }
.vu-form .vu-hint,
.vu-form .vu-req {
	display: block;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gedeckt);
}
.vu-form .vu-req {
	display: inline;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wp--preset--color--akzent);
}

.vu-form input[type="text"],
.vu-form input[type="tel"],
.vu-form input[type="email"],
.vu-form input[type="search"],
.vu-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--ram-tap);
	padding: .75rem .875rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--gedeckt);
	border-radius: 2px;
}
.vu-form textarea { min-height: 8rem; resize: vertical; }

.vu-form__group { border: 0; padding: 0; margin: 0 0 var(--wp--preset--spacing--30); }
.vu-form__group legend {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wp--preset--color--akzent);
	margin-bottom: .625rem;
	padding: 0;
}

.vu-choice {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	min-height: var(--ram-tap);
	padding: .875rem 1rem;
	margin-bottom: .5rem;
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 2px;
	cursor: pointer;
}
.vu-choice:hover { border-color: var(--wp--preset--color--gedeckt); }
.vu-choice:has(input:checked) {
	border-color: var(--wp--preset--color--tief);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--tief);
}
.vu-choice input { margin-top: .25rem; flex: none; }
.vu-choice span { display: flex; flex-direction: column; gap: .1875rem; }
.vu-choice small { color: var(--wp--preset--color--gedeckt); font-size: var(--wp--preset--font-size--sm); }
.vu-choice--inline { display: inline-flex; margin-right: .5rem; }

.vu-consent label {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}
.vu-consent input { margin-top: .25rem; flex: none; }

.vu-form__submit {
	min-height: var(--ram-tap);
	padding: .9rem 2rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--weiss);
	background: var(--wp--preset--color--akzent);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}
.vu-form__submit:hover { background: var(--wp--preset--color--tief); }

.vu-form__prefill {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	padding: .75rem 1rem;
	background: var(--wp--preset--color--weiss);
	border: 1px dashed var(--wp--preset--color--linie);
}

/* Honeypot – für Menschen unsichtbar, für Bots ein Feld wie jedes andere.
   Kein display:none, das erkennen viele Bots. */
.vu-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Länderauswahl an die Theme-Farben binden */
.vu-select__input { border-color: var(--wp--preset--color--gedeckt); }
.vu-quick__item { border-color: var(--wp--preset--color--linie); }
.vu-quick__item:hover,
.vu-quick__item:focus-visible {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}
.vu-results,
.vu-results__row > a { border-color: var(--wp--preset--color--linie); }
.vu-results__row > a:hover { background: var(--wp--preset--color--weiss); }
.vu-results__iso,
.vu-select__count,
.vu-quick__label {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--gedeckt);
}


/* =========================================================================
   9  ABSCHNITTSBÄNDER
   ========================================================================= */

.ram-band { padding-block: var(--wp--preset--spacing--60); }
.ram-band--hell    { background: var(--wp--preset--color--weiss); }
.ram-band--gedeckt { background: var(--wp--preset--color--papier); }
.ram-band--dunkel {
	background: var(--wp--preset--color--tief);
	color: #E4F0E8;
}
.ram-band--dunkel :is(h1, h2, h3) { color: var(--wp--preset--color--weiss); }
.ram-band--dunkel p { color: #E4F0E8; }
.ram-band--dunkel h4 { color: var(--wp--preset--color--hellgruen); }
.ram-band--dunkel a  { color: var(--wp--preset--color--weiss); }
.ram-band--dunkel .ram-spalte-nummeriert { border-top-color: var(--wp--preset--color--hellgruen); }

.ram-spalte-nummeriert {
	border-top: 2px solid var(--wp--preset--color--akzent);
	padding-top: var(--wp--preset--spacing--20);
}

/* Serverseitig gerenderte Bänder: dieselbe Breitenlogik wie die
   Blockvarianten, ohne auf deren Layout-Klassen angewiesen zu sein. */
.ram-band__inhalt {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 78rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}
.ram-band__inhalt > h2 { margin-bottom: var(--wp--preset--spacing--20); }
.ram-band__inhalt > p  { margin-bottom: var(--wp--preset--spacing--30); }


/* =========================================================================
   10  HERO MIT DER WELTKARTE

   Höhe: volle Ansichtshöhe abzüglich Kopfbereich. Die Kopfhöhe steht als
   eine Zahl in --ram-header-h – wenn Sie das Menü umbauen, ist das der
   einzige Wert, der nachgezogen werden muss.

   svh statt vh, weil vh auf Mobilgeräten die eingeblendete Adressleiste
   nicht berücksichtigt und der Hero dort sonst überläuft.
   ========================================================================= */

.ram-hero {
	--ram-header-h: 8.5rem;

	position: relative;
	display: grid;
	place-items: center;
	min-height: max(34rem, calc(100svh - var(--ram-header-h)));
	padding-block: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--tief);
	background-image: url("assets/img/weltkarte-800.webp");
	background-repeat: no-repeat;
	background-position: 52% 42%;
	background-size: cover;
	color: var(--wp--preset--color--weiss);
	text-align: center;
	overflow: hidden;
}

/* Abdunklung: Weiß liegt damit auch über den helleren Landmassen
   bei rund 7:1 statt knapp 4,8:1. */
.ram-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 36, 26, .38);
	pointer-events: none;
}
.ram-hero > * { position: relative; z-index: 1; width: 100%; }

.ram-hero :is(h1, h2, h3) { color: var(--wp--preset--color--weiss); }
.ram-hero h4 { color: var(--wp--preset--color--hellgruen); }
.ram-hero p  { color: #E4F0E8; }

.ram-hero__inhalt {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}
.ram-hero__inhalt > h1 { margin-block: var(--wp--preset--spacing--20); }
.ram-hero__inhalt > p {
	margin-bottom: var(--wp--preset--spacing--40);
	line-height: 1.55;
}

.ram-hero .vu-select__label { color: var(--wp--preset--color--weiss); }
.ram-hero .vu-quick__label  { color: #B7D6C2; }
.ram-hero .vu-quick__item {
	color: var(--wp--preset--color--weiss);
	border-color: rgba(255,255,255,.42);
}
.ram-hero .vu-quick__item:hover,
.ram-hero .vu-quick__item:focus-visible {
	color: var(--wp--preset--color--tief);
	background: var(--wp--preset--color--weiss);
	border-color: var(--wp--preset--color--weiss);
}
.ram-hero .vu-quick { justify-content: center; }
.ram-hero .ram-phone { align-items: center; }
.ram-hero .vu-hero-anfrage { position: relative; z-index: 10; }

.ram-hero :is(a, input, button):focus-visible {
	outline: 3px solid var(--wp--preset--color--weiss);
	outline-offset: 2px;
}

/* Hochformat: die Karte ist 2:1 und würde als cover fast vollständig
   weggeschnitten. Stattdessen auf Europa ausrichten – dort setzen die
   Linien an – und weniger stark abdunkeln. */
@media (max-aspect-ratio: 1/1) {
	.ram-hero {
		background-position: 56% 34%;
		background-size: auto 62%;
	}
	.ram-hero::before { background: rgba(0, 36, 26, .3); }
}

@media (min-width: 50rem) {
	.ram-hero { background-image: url("assets/img/weltkarte-1200.webp"); }
}
@media (min-width: 81rem) {
	.ram-hero { background-image: url("assets/img/weltkarte-1600.webp"); }
}

@media (max-width: 60rem) {
	.ram-hero { --ram-header-h: 12rem; }
}


/* =========================================================================
   11  ABSTÄNDE ZWISCHEN DEN ABSCHNITTEN

   Der Blockabstand liegt zwischen allen Blöcken – zwischen zwei farbigen
   Bahnen wird daraus ein heller Streifen. Vollflächige Abschnitte bekommen
   ihn deshalb genommen; ihr Innenabstand trägt die Trennung ohnehin.
   ========================================================================= */

:is(.ram-hero, .ram-band) { margin-block: 0; }
:is(.ram-hero, .ram-band) + :is(.ram-hero, .ram-band) { margin-block-start: 0; }
:is(.ram-hero, .ram-band) + .ram-footer,
:is(.ram-hero, .ram-band) ~ .ram-footer { margin-top: 0; }

/* Volle Breite auch innerhalb des eingeschränkten Hauptbereichs */
.wp-block-post-content > .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* Der Hero sitzt bündig unter dem Kopfbereich. Die Lücke entsteht durch
   den Innenabstand des Hauptbereichs und den Blockabstand vor dem ersten
   Block – beide werden auf den Startseiten genommen. */
.home main.wp-block-group,
.ram-sprachstart main.wp-block-group {
	padding-top: 0;
	margin-top: 0;
}
.home .wp-block-post-content > *:first-child,
.ram-sprachstart .wp-block-post-content > *:first-child { margin-block-start: 0; }


/* =========================================================================
   12  FUSSBEREICH
   ========================================================================= */

.ram-footer {
	font-size: var(--wp--preset--font-size--sm);
	border-top: 1px solid var(--wp--preset--color--linie);
}
.ram-footer a { text-decoration: none; }
.ram-footer a:hover { text-decoration: underline; }


/* =========================================================================
   13  SPRACHWURZELN
   /en/ und /fr/ sind Startseiten ihrer Sprache – dort keinen Seitentitel.
   ========================================================================= */

.ram-sprachstart .wp-block-post-title { display: none; }