/* RMH Hero-Panzer, Masse und Bewegung aus Entwurf B (.hero, .panzer, .knopf).
 * Bewegung nur ueber transform. Ausgangszustand: Panzer offen (ueber dem Hero).
 * Geschlossen wird erst durch .rmh-hp--faehrt, das script.js setzt. */
.elementor-widget-rmh-hero-panzer,
.elementor-widget-rmh-hero-panzer > .elementor-widget-container {
	width: 100%;
	max-width: none;
}
.rmh-hp {
	--rmh-hp-nacht: #1c2125;
	--rmh-hp-text: #ebe9e2;
	--rmh-hp-licht: #f2b544;
	--rmh-hp-signal: #c9241d;
	--rmh-hp-signal-hell: #dc2f26;
	--rmh-hp-lam: 44px;
	--rmh-hp-radius: 3px;
	--rmh-hp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--rmh-hp-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	min-height: clamp(40svh, var(--rmh-hp-hoehe, 92svh), 100svh);
	display: grid;
	align-items: end;
	padding: 96px 0 clamp(96px, 13vh, 150px);
	background: var(--rmh-hp-nacht);
	color: var(--rmh-hp-text);
	font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
	line-height: 1.6;
}
.rmh-hp *,
.rmh-hp *::before,
.rmh-hp *::after {
	box-sizing: border-box;
}
.rmh-hp__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 62% 45%;
}
.rmh-hp__schatten {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgb(21 25 27 / 0.94) 0%, rgb(21 25 27 / 0.82) 34%, rgb(21 25 27 / 0.3) 64%, rgb(21 25 27 / 0.12) 100%),
		linear-gradient(0deg, rgb(28 33 37 / 0.55) 0%, rgb(28 33 37 / 0) 35%);
}
.rmh-hp__inhalt {
	width: min(100% - 2 * clamp(20px, 5vw, 64px), 1240px);
	margin-inline: auto;
}
.rmh-hp .rmh-hp__titel {
	margin: 0;
	max-width: 16ch;
	font-family: "Saira Condensed", "Arial Narrow", sans-serif;
	font-size: clamp(2.7rem, 6vw, 5.6rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-wrap: balance;
	text-transform: none;
	color: var(--rmh-hp-text);
}
.rmh-hp .rmh-hp__text {
	margin: 22px 0 0;
	max-width: 44ch;
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	line-height: 1.6;
	color: #d9d6ce;
	text-wrap: pretty;
}
.rmh-hp__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}
.rmh-hp .rmh-hp__knopf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	padding: 16px 24px;
	border: 0;
	border-radius: var(--rmh-hp-radius);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	cursor: pointer;
	transition: transform 140ms var(--rmh-hp-ease-out), background-color 180ms ease, box-shadow 180ms ease;
}
.rmh-hp .rmh-hp__knopf:active {
	transform: scale(0.97);
}
.rmh-hp .rmh-hp__knopf:focus-visible {
	outline: 2px solid var(--rmh-hp-licht);
	outline-offset: 3px;
}
.rmh-hp .rmh-hp__knopf--signal {
	background: var(--rmh-hp-signal);
	color: #fff;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 2px 6px rgb(8 10 12 / 0.4);
}
.rmh-hp .rmh-hp__knopf--signal:hover {
	background: var(--rmh-hp-signal-hell);
	color: #fff;
}
.rmh-hp .rmh-hp__knopf--rahmen {
	background: rgb(28 33 37 / 0.35);
	color: var(--rmh-hp-text);
	box-shadow: inset 0 0 0 1.5px #8d969c;
}
.rmh-hp .rmh-hp__knopf--rahmen:hover {
	color: var(--rmh-hp-text);
	box-shadow: inset 0 0 0 1.5px var(--rmh-hp-licht);
}
.rmh-hp__symbol {
	flex: none;
	width: 1.2em;
	height: 1.2em;
}

/* Panzer: offen (ueber dem Hero) als Ausgangszustand */
.rmh-hp__panzer {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	transform: translateY(-102%);
	background: linear-gradient(180deg, #555d62 0%, #41484c 30%, #33393d 78%, #22272a 96%, #15191b 100%) 0 0 / 100% var(--rmh-hp-lam) repeat-y;
}
.rmh-hp__panzer::after { /* Endleiste */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 16px;
	background: linear-gradient(180deg, #6a7277, #2d3337 60%, #121517);
}
.rmh-hp__schlitze { /* gestrichelte Lichtlinie am unteren Rand jeder Lamelle */
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(90deg, var(--rmh-hp-licht) 0 9px, transparent 9px 21px);
	-webkit-mask: repeating-linear-gradient(180deg, transparent 0 calc(var(--rmh-hp-lam) - 4px), #000 calc(var(--rmh-hp-lam) - 4px) calc(var(--rmh-hp-lam) - 2px), transparent calc(var(--rmh-hp-lam) - 2px) var(--rmh-hp-lam));
	mask: repeating-linear-gradient(180deg, transparent 0 calc(var(--rmh-hp-lam) - 4px), #000 calc(var(--rmh-hp-lam) - 4px) calc(var(--rmh-hp-lam) - 2px), transparent calc(var(--rmh-hp-lam) - 2px) var(--rmh-hp-lam));
	opacity: 0.75;
}
/* Mit JavaScript (Klasse rmh-js aus dem Kopf) ist der Panzer schon beim ersten Zeichnen geschlossen.
 * Faengt das Fussskript nicht an, setzt der Kopf html.rmh-notfall (gemeinsamer Notausgang aller Widgets):
 * dann steht der Panzer offen, ohne Animation, und schliesst sich auch bei spaetem Skript nicht mehr. */
html.rmh-js:not(.rmh-notfall) .rmh-hp[data-animation="an"]:not(.rmh-hp--faehrt) .rmh-hp__panzer {
	transform: translateY(0);
}
html.rmh-notfall .rmh-hp .rmh-hp__panzer {
	animation: none;
	transform: translateY(-102%);
}
/* geschlossen beim Laden, dann hochfahren (Verzoegerung haelt ihn zu) */
.rmh-hp--faehrt .rmh-hp__panzer {
	animation: rmh-hp-hochfahren 1500ms var(--rmh-hp-ease-io) 350ms both;
}
@keyframes rmh-hp-hochfahren {
	from { transform: translateY(0); }
	to   { transform: translateY(-102%); }
}

@media (min-width: 901px) {
	.rmh-hp .rmh-hp__titel { max-width: none; }
	.rmh-hp .rmh-hp__titel .zeile { display: block; }
}
@media (max-width: 600px) {
	.rmh-hp { padding: 64px 0 88px; }
	.rmh-hp .rmh-hp__titel { font-size: clamp(2.4rem, 11vw, 3.2rem); }
	.rmh-hp .rmh-hp__knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.rmh-hp__panzer { display: none; }
	.rmh-hp--faehrt .rmh-hp__panzer { animation: none; }
	.rmh-hp .rmh-hp__knopf { transition: none; }
}
/* Elementor-Editor: immer der Endzustand */
.elementor-editor-active .rmh-hp__panzer { display: none; }

/* Dachzeile ueber der Ueberschrift (Licht, Saira Condensed); sie ist kein Teil der h1 */
.rmh-hp .rmh-hp__dach {
	margin: 0 0 14px;
	font-family: "Saira Condensed", "Arial Narrow", sans-serif;
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--rmh-hp-licht);
}