/* ==========================================================
   HOTTI on Stage – Theme-Styles
   Farben und Schriften kommen aus theme.json (Stile im Website-Editor).
   ========================================================== */

:root {
	--hotti-orange: var(--wp--preset--color--orange, #f48d28);
	--hotti-navy: var(--wp--preset--color--navy, #272d47);
	--hotti-navy-dunkel: var(--wp--preset--color--navy-dunkel, #171a2d);
	--hotti-mono: var(--wp--preset--font-family--roboto-mono, ui-monospace, monospace);
	--hotti-abschnitt: clamp(4rem, 8vw, 6.125rem);
	--hotti-rand: var(--wp--style--root--padding-left, 1.25rem);
}

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

body {
	overflow-x: clip;
	background-image: radial-gradient(120% 70rem at 50% 32rem, var(--hotti-navy) 0%, var(--hotti-navy-dunkel) 72%);
	background-repeat: no-repeat;
}

:focus-visible {
	outline: 3px solid var(--hotti-orange);
	outline-offset: 3px;
}

/* Abstand zwischen den großen Abschnitten des One-Pagers */
.wp-block-post-content.wp-block-post-content > * + *,
.hotti-onepager.hotti-onepager > * + * {
	margin-block-start: var(--hotti-abschnitt);
}

/* ---------- Kopfbereich ---------- */
.hotti-header {
	position: relative;
	z-index: 5;
	gap: 2rem;
	max-width: calc(1283px + 2 * var(--hotti-rand));
	margin-inline: auto;
	padding: 2rem var(--hotti-rand) 0;
}
.hotti-logo { margin: 0; flex: 0 0 auto; }
.hotti-logo img,
.hotti-footer-logo img {
	display: block;
	width: clamp(120px, 18vw, 241px);
	height: auto;
}
.hotti-nav .wp-block-navigation__container { gap: clamp(1rem, 2.4vw, 2rem); }
.hotti-nav a { text-decoration: none; font-weight: 900; }
.hotti-nav a:hover { color: var(--hotti-orange); }
.hotti-nav .wp-block-navigation__responsive-container-open svg,
.hotti-nav .wp-block-navigation__responsive-container-close svg { width: 2rem; height: 2rem; }

/* ---------- Hero: Stuhl auf der Bühne ----------
   --u = 1 Pixel im Figma-Entwurf (Stuhl 535 px breit). Alles skaliert mit dem Stuhl. */
.hotti-hero {
	/* Stuhlbreite: höchstens Figma-Größe (535 px), passt sich aber Breite UND Höhe des Fensters an,
	   damit Kopfbereich + Bühne immer auf den ersten Bildschirm passen. */
	--stuhl: max(200px, min(535px, 62vw, (100vh - 210px) * .52));
	--stuhl: max(200px, min(535px, 62vw, (100svh - 210px) * .52));
	--u: calc(var(--stuhl) / 535);
	position: relative;
	isolation: isolate;
	padding-top: calc(160 * var(--u));
	text-align: center;
}
.wp-block-post-content > .hotti-hero:first-child,
.hotti-onepager > .hotti-hero:first-child { margin-block-start: 0; }
.hotti-hero::before, /* Holzboden über die volle Breite */
.hotti-hero::after { /* Holzboden passend zu den Stuhlbeinen */
	content: "";
	position: absolute;
	bottom: 0;
	height: calc(193 * var(--u));
	background: url("../images/holz.webp") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.hotti-hero::before { left: 0; right: 0; z-index: -2; }
.hotti-hero::after {
	z-index: -1;
	left: calc(50% - 698.5 * var(--u));
	width: calc(1360 * var(--u));
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.hotti-hero .hotti-stuhl {
	position: relative;
	z-index: 1;
	width: calc(535 * var(--u));
	margin: 0 auto;
}
.hotti-hero .hotti-stuhl img { display: block; width: 100%; height: auto; }

/* ---------- Wimpel (oranges Dreieck mit Text) ---------- */
.wp-block-group.is-style-hotti-wimpel {
	position: relative;
	width: calc(328 * var(--u, 1px));
	aspect-ratio: 328 / 222;
	background: url("../images/wimpel.png") center / 100% 100% no-repeat;
	color: #fff;
}
.wp-block-group.is-style-hotti-wimpel p {
	position: absolute;
	right: 14%;
	top: 29%;
	margin: 0;
	font-weight: 900;
	font-size: max(10px, calc(20 * var(--u, 1px)));
	line-height: 1.6;
	text-align: right;
	white-space: nowrap;
	transform: rotate(-15deg);
	transform-origin: right center;
}
.hotti-hero > .is-style-hotti-wimpel {
	position: absolute;
	z-index: 2;
	top: calc(20 * var(--u));
	left: calc(50% + 12.5 * var(--u));
	margin: 0;
}

/* ---------- Sprechblasen ---------- */
p.is-style-hotti-sprechblase {
	position: relative;
	z-index: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	--w: min(459px, 85vw);
	width: var(--w);
	aspect-ratio: 459 / 268;
	padding: calc(var(--w) * .222) calc(var(--w) * .02) calc(var(--w) * .057) calc(var(--w) * .1525);
	color: var(--hotti-navy);
	font-family: var(--hotti-mono);
	font-size: clamp(1rem, .4rem + 1.9vw, 2rem);
	line-height: 1.5;
	text-align: left;
	transform: rotate(6.73deg);
}
p.is-style-hotti-sprechblase::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/sprechblase.svg") center / 100% 100% no-repeat;
	transform: rotate(-6.73deg);
}
p.is-style-hotti-sprechblase-orange { /* ältere Variante, falls schon verwendet */
	width: fit-content;
	max-width: 15rem;
	padding: 1.3rem 1.7rem;
	background: var(--hotti-orange);
	color: #fff;
	font-weight: 900;
	text-align: center;
	border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
	transform: rotate(-15deg);
}

/* ---------- Zitate ---------- */
.wp-block-quote.is-style-hotti-zitat {
	--einzug: clamp(0rem, 12vw, 10rem);
	position: relative;
	max-width: 939px;
	margin-inline: auto;
	padding: clamp(4.5rem, 9vw, 6.25rem) 0 0 var(--einzug);
	border: 0;
	font-family: var(--hotti-mono);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.wp-block-quote.is-style-hotti-zitat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(64px, 10vw, 137px);
	aspect-ratio: 138 / 122;
	background: url("../images/anfuehrung.svg") no-repeat center / contain;
}
.wp-block-quote.is-style-hotti-zitat p { margin-block: 0; }
.wp-block-quote.is-style-hotti-zitat > * + * { margin-block-start: 1.5em; }
.wp-block-quote.is-style-hotti-zitat cite {
	display: block;
	margin-top: 1.5em;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: inherit;
	font-style: italic;
	text-align: right;
	color: #fff;
}

/* Langes Zitat: Foto ragt links heraus, Text läuft rechts weiter */
.hotti-zitat-lang .hotti-zitat-spalten {
	margin-left: calc(-1 * var(--einzug));
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: flex-start;
}
.hotti-zitat-lang .hotti-zitat-spalten img { display: block; width: 100%; height: auto; }

/* ---------- Einleitung mit großer Jahreszahl ---------- */
.hotti-intro mark {
	background: none !important;
	color: var(--hotti-orange);
	font-size: 4em;
	line-height: 1;
}
.hotti-intro em { font-style: italic; }

/* ---------- Fotostrecke: Galerie als Slider ----------
   Fotos mittig auf einer Linie, „1 / 11“ über jedem Foto (reines CSS, daher auch im Editor),
   auf der Website zusätzlich Pfeil-Reiter zum Blättern. */
.hotti-slider { position: relative; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider {
	--hoehe: clamp(300px, 56vw, 812px);
	counter-reset: hotti-foto hotti-gesamt 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(1rem, 2.6vw, 2.25rem);
	margin-inline: 0;
	margin-bottom: 0;
	padding: 0 var(--hotti-rand) .5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--hotti-rand);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(2):last-of-type) { counter-reset: hotti-foto hotti-gesamt 2; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(3):last-of-type) { counter-reset: hotti-foto hotti-gesamt 3; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(4):last-of-type) { counter-reset: hotti-foto hotti-gesamt 4; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(5):last-of-type) { counter-reset: hotti-foto hotti-gesamt 5; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(6):last-of-type) { counter-reset: hotti-foto hotti-gesamt 6; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(7):last-of-type) { counter-reset: hotti-foto hotti-gesamt 7; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(8):last-of-type) { counter-reset: hotti-foto hotti-gesamt 8; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(9):last-of-type) { counter-reset: hotti-foto hotti-gesamt 9; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(10):last-of-type) { counter-reset: hotti-foto hotti-gesamt 10; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(11):last-of-type) { counter-reset: hotti-foto hotti-gesamt 11; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(12):last-of-type) { counter-reset: hotti-foto hotti-gesamt 12; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(13):last-of-type) { counter-reset: hotti-foto hotti-gesamt 13; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(14):last-of-type) { counter-reset: hotti-foto hotti-gesamt 14; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(15):last-of-type) { counter-reset: hotti-foto hotti-gesamt 15; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(16):last-of-type) { counter-reset: hotti-foto hotti-gesamt 16; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(17):last-of-type) { counter-reset: hotti-foto hotti-gesamt 17; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(18):last-of-type) { counter-reset: hotti-foto hotti-gesamt 18; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(19):last-of-type) { counter-reset: hotti-foto hotti-gesamt 19; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(20):last-of-type) { counter-reset: hotti-foto hotti-gesamt 20; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(21):last-of-type) { counter-reset: hotti-foto hotti-gesamt 21; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(22):last-of-type) { counter-reset: hotti-foto hotti-gesamt 22; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(23):last-of-type) { counter-reset: hotti-foto hotti-gesamt 23; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(24):last-of-type) { counter-reset: hotti-foto hotti-gesamt 24; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(25):last-of-type) { counter-reset: hotti-foto hotti-gesamt 25; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(26):last-of-type) { counter-reset: hotti-foto hotti-gesamt 26; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(27):last-of-type) { counter-reset: hotti-foto hotti-gesamt 27; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(28):last-of-type) { counter-reset: hotti-foto hotti-gesamt 28; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(29):last-of-type) { counter-reset: hotti-foto hotti-gesamt 29; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider:has(> figure:nth-of-type(30):last-of-type) { counter-reset: hotti-foto hotti-gesamt 30; }
.wp-block-gallery.is-style-hotti-slider::-webkit-scrollbar { display: none; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image:not(#individual-image) {
	counter-increment: hotti-foto;
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: .3em;
	row-gap: .6rem;
	width: auto;
	margin: 0;
	scroll-snap-align: start;
}
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image:not(#individual-image)::before,
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image:not(#individual-image)::after {
	position: static;
	grid-row: 1;
	width: auto;
	height: auto;
	max-height: none;
	background: none;
	backdrop-filter: none;
	-webkit-mask-image: none;
	mask-image: none;
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image:not(#individual-image)::before { content: counter(hotti-foto) " /"; grid-column: 1; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image:not(#individual-image)::after { content: counter(hotti-gesamt); grid-column: 2; opacity: .6; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image:not(#individual-image) > * { grid-column: 1 / -1; grid-row: 2; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image:not(#individual-image) img {
	flex: none !important;
	width: auto !important;
	height: var(--hoehe) !important;
	max-width: none;
	object-fit: cover;
}
/* Querformat etwas niedriger, so entsteht der versetzte Look aus dem Entwurf */
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image.ist-quer:not(#individual-image) img { height: calc(var(--hoehe) * .9) !important; }
.wp-block-gallery.has-nested-images.is-style-hotti-slider.is-style-hotti-slider figure.wp-block-image figcaption { display: none; }
.hotti-slider__pfeil {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: clamp(44px, 4.5vw, 62px);
	height: clamp(64px, 6.5vw, 88px);
	padding: 0;
	border: 0;
	background: #fff url("../images/pfeil.svg") 50% 50% / 30% auto no-repeat;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s;
}
.hotti-slider__pfeil--weiter { right: 0; border-radius: 22px 0 0 22px; }
.hotti-slider__pfeil--zurueck { left: 0; border-radius: 22px 0 0 22px; transform: translateY(-50%) scaleX(-1); }
.hotti-slider__pfeil[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Video ---------- */
.hotti-video {
	position: relative;
	padding-bottom: clamp(5rem, 13vw, 11rem);
}
.hotti-video-player { position: relative; margin: 0; }
.hotti-video-player video { display: block; width: 100%; background: #000; }
.hotti-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: clamp(96px, 14vw, 194px);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: url("../images/video-play.svg") center / contain no-repeat;
	cursor: pointer;
}
.hotti-play:hover { background-color: rgba(23, 26, 45, .35); }
.hotti-play[hidden] { display: none; }
.hotti-video > .is-style-hotti-sprechblase {
	position: absolute;
	right: 8%;
	bottom: 0;
	margin: 0;
}

/* ---------- Fachkreis: Rollen als Fächer ---------- */
ul.is-style-hotti-faecher {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
	gap: 1rem;
	padding: 0;
	list-style: none;
	color: var(--hotti-orange);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	text-align: center;
}
ul.is-style-hotti-faecher li {
	padding: .9rem 1rem;
	border: 2px solid var(--hotti-orange);
	border-radius: 1.25rem;
	hyphens: auto;
	overflow-wrap: break-word;
}
ul.is-style-hotti-faecher strong { display: block; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 900; }

@media (min-width: 783px) {
	:where(body:not(.editor-styles-wrapper)) ul.is-style-hotti-faecher {
		--n: 9;
		--start: -113deg;
		--r: min(22rem, 34vw);
		--d: calc(var(--r) * .74);
		display: block;
		position: relative;
		width: calc(var(--r) * 2 + 3rem);
		max-width: 100%;
		height: calc(var(--r) * 2 + 3rem);
		margin-inline: auto;
	}
	:where(body:not(.editor-styles-wrapper)) ul.is-style-hotti-faecher li {
		--a: calc(var(--start) + var(--i, 0) * 360deg / var(--n));
		--t: 0deg; /* Textdrehung; ohne Browser-Unterstützung waagerecht */
		position: absolute;
		left: 50%;
		top: 50%;
		width: max-content;
		max-width: 12rem;
		padding: 0;
		border: 0;
		hyphens: manual;
		transform-origin: 0 0;
		transform: rotate(var(--a)) translateX(var(--d)) rotate(calc(var(--t) - var(--a))) translate(-50%, -50%);
	}
	@supports (rotate: calc(sign(cos(1deg)) * 1deg)) {
		/* Text läuft am Strahl entlang und steht nie auf dem Kopf */
		:where(body:not(.editor-styles-wrapper)) ul.is-style-hotti-faecher li {
			--t: calc(var(--a) + (1 - sign(cos(var(--a)))) * 90deg);
		}
	}
	:where(body:not(.editor-styles-wrapper)) ul.is-style-hotti-faecher li::before { /* Strahl */
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: -1;
		width: var(--r);
		height: calc(var(--r) * .569);
		transform-origin: 0 0;
		transform: rotate(calc(var(--a) - var(--t))) translateX(calc(var(--d) * -1)) rotate(-7.3deg) translateY(-25.3%);
		background: url("../images/faecher-strahl.svg") no-repeat center / 100% 100%;
		pointer-events: none;
	}
	:where(body:not(.editor-styles-wrapper)) ul.is-style-hotti-faecher strong { font-size: 1.125rem; }
	ul.is-style-hotti-faecher li:nth-child(2) { --i: 1; }
	ul.is-style-hotti-faecher li:nth-child(3) { --i: 2; }
	ul.is-style-hotti-faecher li:nth-child(4) { --i: 3; }
	ul.is-style-hotti-faecher li:nth-child(5) { --i: 4; }
	ul.is-style-hotti-faecher li:nth-child(6) { --i: 5; }
	ul.is-style-hotti-faecher li:nth-child(7) { --i: 6; }
	ul.is-style-hotti-faecher li:nth-child(8) { --i: 7; }
	ul.is-style-hotti-faecher li:nth-child(9) { --i: 8; }
	ul.is-style-hotti-faecher li:nth-child(10) { --i: 9; }
	ul.is-style-hotti-faecher li:nth-child(11) { --i: 10; }
	ul.is-style-hotti-faecher li:nth-child(12) { --i: 11; }
	ul.is-style-hotti-faecher:has(> li:nth-child(3):last-child) { --n: 3; }
	ul.is-style-hotti-faecher:has(> li:nth-child(4):last-child) { --n: 4; }
	ul.is-style-hotti-faecher:has(> li:nth-child(5):last-child) { --n: 5; }
	ul.is-style-hotti-faecher:has(> li:nth-child(6):last-child) { --n: 6; }
	ul.is-style-hotti-faecher:has(> li:nth-child(7):last-child) { --n: 7; }
	ul.is-style-hotti-faecher:has(> li:nth-child(8):last-child) { --n: 8; }
	ul.is-style-hotti-faecher:has(> li:nth-child(10):last-child) { --n: 10; }
	ul.is-style-hotti-faecher:has(> li:nth-child(11):last-child) { --n: 11; }
	ul.is-style-hotti-faecher:has(> li:nth-child(12):last-child) { --n: 12; }
}
.hotti-faecher-grafik img { display: block; width: min(100%, 911px); height: auto; }

/* ---------- Castinganmeldung (Everest Forms) ---------- */
.hotti-casting {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 7vw, 6rem);
}
.hotti-casting::before { /* schräge, hellere Fläche */
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 auto 0 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--hotti-navy);
	clip-path: polygon(0 10%, 100% 0, 100% 88%, 0 100%);
}
.hotti-casting .everest-forms,
.hotti-casting .everest-forms * { box-sizing: border-box; }
.hotti-casting .everest-forms label,
.hotti-casting .everest-forms .evf-label {
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
}
.hotti-casting .everest-forms .required {
	color: var(--hotti-orange);
	text-decoration: none;
	border: 0;
}
.hotti-casting .everest-forms .evf-field { margin: 0 0 1.5rem; }
.hotti-casting .everest-forms input[type="text"],
.hotti-casting .everest-forms input[type="email"],
.hotti-casting .everest-forms input[type="tel"],
.hotti-casting .everest-forms input[type="date"],
.hotti-casting .everest-forms select,
.hotti-casting .everest-forms textarea {
	width: 100%;
	padding: .75rem 1rem;
	border: 1px solid rgba(16, 101, 142, .5);
	border-radius: 8px;
	background: #fff;
	color: #3c3c3c;
	font: 400 1rem/1.25 var(--wp--preset--font-family--roboto);
}
.hotti-casting .everest-forms select { width: auto; min-width: 6rem; border-radius: 4px; }
.hotti-casting .everest-forms textarea { min-height: 16rem; }
.hotti-casting .everest-forms input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--hotti-orange);
}
.hotti-casting .everest-forms .evf-field-checkbox label,
.hotti-casting .everest-forms .evf-field-privacy-policy label,
.hotti-casting .everest-forms li label { font-size: 1rem; line-height: 1.25; }
.hotti-casting .everest-forms .evf-submit-container { text-align: right; }
.hotti-casting .everest-forms button[type="submit"],
.hotti-casting .everest-forms input[type="submit"] {
	min-height: 42px;
	padding: .5rem 1.25rem;
	border: 2px solid var(--hotti-navy);
	border-radius: 6px;
	background: var(--hotti-orange);
	color: #fff;
	font: 500 1.0625rem/1.4 var(--wp--preset--font-family--roboto);
	box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
	cursor: pointer;
}
.hotti-casting .everest-forms button[type="submit"]:hover,
.hotti-casting .everest-forms input[type="submit"]:hover { background: #fff; color: var(--hotti-navy); }

@media (min-width: 783px) {
	.hotti-casting .everest-forms .evf-field:is(.evf-field-text, .evf-field-first-name, .evf-field-last-name, .evf-field-email, .evf-field-phone, .evf-field-select, .evf-field-textarea, .evf-field-date-time) {
		display: grid;
		grid-template-columns: 11rem 1fr;
		column-gap: 1rem;
		align-items: center;
	}
	.hotti-casting .everest-forms .evf-field-textarea { align-items: start; }
	.hotti-casting .everest-forms .evf-field > :not(label) { grid-column: 2; }
}

/* ---------- Presse ---------- */
.hotti-presse-spalten { gap: clamp(1.5rem, 4vw, 3rem); align-items: flex-start; }
.hotti-presse-spalten img { display: block; width: 100%; height: auto; }
.hotti-presse .wp-block-quote.is-style-hotti-zitat { --einzug: 0rem; }

/* ---------- Fußbereich ---------- */
.hotti-footer {
	position: relative;
	isolation: isolate;
	margin-top: var(--hotti-abschnitt);
	padding-top: calc(18vw + 3rem);
	padding-bottom: 3rem;
	color: #fff;
}
.hotti-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hotti-orange);
	clip-path: polygon(0 18vw, 100% 0, 100% 100%, 0 100%);
}
.hotti-footer a { color: #fff; text-decoration: underline; }
.hotti-footer a:hover { color: var(--hotti-navy-dunkel); }
.hotti-footer .hotti-rechtliches a + a { margin-left: 1.5rem; }
.hotti-traeger-logo img { display: block; width: min(100%, 768px); height: auto; margin-left: auto; }

/* ---------- Unterseiten (Impressum, Datenschutz …) ---------- */
.hotti-unterseite { padding-block: 3rem 0; }
.hotti-unterseite h1 { font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* ---------- Handy ---------- */
@media (max-width: 782px) {
	.hotti-video > .is-style-hotti-sprechblase {
		position: relative;
		right: auto;
		margin: -1.5rem 0 0 auto;
	}
	.hotti-video { padding-bottom: 0; }
	.hotti-zitat-lang .hotti-zitat-spalten { margin-left: 0; }
	.hotti-traeger-logo img { margin-left: 0; }
}

/* ---------- Lange Überschriften sauber umbrechen ---------- */
h1, h2, h3 {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* Castinganmeldung: Überschrift darf wie in Figma breiter sein als der Formularbereich */
@media (min-width: 900px) {
	.hotti-casting > h2 { max-width: none; white-space: nowrap; }
}
/* Fächer-Liste: Rollen 20 px, Namen 16 px wie in Figma */
:where(body:not(.editor-styles-wrapper)) ul.is-style-hotti-faecher strong { font-size: 1.25rem; }

/* ---------- Castinganmeldung mit WPForms ---------- */
.hotti-casting .wpforms-container {
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-border-color: rgba(16, 101, 142, .5);
	--wpforms-field-border-radius: 8px;
	--wpforms-field-text-color: #3c3c3c;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-input-height: 46px;
	--wpforms-label-color: #ffffff;
	--wpforms-label-sublabel-color: rgba(255, 255, 255, .7);
	--wpforms-label-error-color: var(--hotti-orange);
	--wpforms-label-size-font-size: 24px;
	--wpforms-label-size-line-height: 1.3;
	--wpforms-label-size-sublabel-font-size: 14px;
	--wpforms-button-background-color: var(--hotti-orange);
	--wpforms-button-text-color: #ffffff;
	--wpforms-button-border-radius: 6px;
	--wpforms-button-border-color: var(--hotti-navy);
	--wpforms-button-border-size: 2px;
	--wpforms-button-border-style: solid;
	--wpforms-button-size-font-size: 17px;
	--wpforms-button-size-height: 42px;
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto);
}
.hotti-casting .wpforms-container .wpforms-field { padding: 0 0 1.5rem; }
.hotti-casting .wpforms-container .wpforms-field-label {
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
}
.hotti-casting .wpforms-container .wpforms-field-sublabel { color: rgba(255, 255, 255, .7); }
.hotti-casting .wpforms-container .wpforms-required-label { color: var(--hotti-orange); }
.hotti-casting .wpforms-container input[type="text"],
.hotti-casting .wpforms-container input[type="email"],
.hotti-casting .wpforms-container input[type="tel"],
.hotti-casting .wpforms-container input[type="number"],
.hotti-casting .wpforms-container input[type="date"],
.hotti-casting .wpforms-container select,
.hotti-casting .wpforms-container textarea {
	max-width: 100%;
	border: 1px solid rgba(16, 101, 142, .5);
	border-radius: 8px;
	background: #fff;
	color: #3c3c3c;
	font: 400 1rem/1.25 var(--wp--preset--font-family--roboto);
}
.hotti-casting .wpforms-container textarea { min-height: 16rem; }
.hotti-casting .wpforms-container input[type="checkbox"],
.hotti-casting .wpforms-container input[type="radio"] { accent-color: var(--hotti-orange); }
.hotti-casting .wpforms-container .wpforms-field-gdpr-checkbox label,
.hotti-casting .wpforms-container .wpforms-field-checkbox li label { color: #fff; font-size: 1rem; line-height: 1.4; }
.hotti-casting .wpforms-container .wpforms-field-description { color: rgba(255, 255, 255, .75); font-size: .9375rem; }
.hotti-casting .wpforms-container .wpforms-submit-container { text-align: right; }
.hotti-casting .wpforms-container button[type="submit"].wpforms-submit {
	min-height: 42px;
	padding: .5rem 1.25rem;
	border: 2px solid var(--hotti-navy);
	border-radius: 6px;
	background: var(--hotti-orange);
	color: #fff;
	font: 500 1.0625rem/1.4 var(--wp--preset--font-family--roboto);
	box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
	cursor: pointer;
}
.hotti-casting .wpforms-container button[type="submit"].wpforms-submit:hover { background: #fff; color: var(--hotti-navy); }
.hotti-casting .wpforms-confirmation-container-full {
	border: 2px solid var(--hotti-orange);
	border-radius: 8px;
	background: transparent;
	color: #fff;
}
@media (min-width: 783px) {
	/* Beschriftung links, Feld rechts – wie im Entwurf */
	.hotti-casting .wpforms-container .wpforms-field:is(.wpforms-field-text, .wpforms-field-name, .wpforms-field-email, .wpforms-field-phone, .wpforms-field-number, .wpforms-field-select, .wpforms-field-textarea, .wpforms-field-date-time) {
		display: grid;
		grid-template-columns: 11rem 1fr;
		column-gap: 1rem;
		align-items: start;
	}
	.hotti-casting .wpforms-container .wpforms-field > .wpforms-field-label { padding-top: .45rem; margin: 0; }
	.hotti-casting .wpforms-container .wpforms-field > :not(.wpforms-field-label) { grid-column: 2; }
}

/* Pflichtfeld-Sternchen in HOTTI-Orange (WPForms und Everest Forms) */
.hotti-casting .wpforms-container .wpforms-required-label,
.hotti-casting div.wpforms-container-full .wpforms-form .wpforms-required-label,
.hotti-casting .everest-forms .required,
.hotti-casting .everest-forms abbr.required {
	color: var(--hotti-orange) !important;
	text-decoration: none;
}
/* Fehlerhinweise ebenfalls in Orange statt Rot */
.hotti-casting .wpforms-container label.wpforms-error,
.hotti-casting .wpforms-container em.wpforms-error,
.hotti-casting .everest-forms .evf-error {
	color: var(--hotti-orange) !important;
}
.hotti-casting .wpforms-container .wpforms-field input.wpforms-error,
.hotti-casting .wpforms-container .wpforms-field textarea.wpforms-error,
.hotti-casting .wpforms-container .wpforms-field select.wpforms-error,
.hotti-casting .wpforms-container .wpforms-field input.user-invalid,
.hotti-casting .wpforms-container .wpforms-field textarea.user-invalid {
	border-color: var(--hotti-orange) !important;
	box-shadow: 0 0 0 1px var(--hotti-orange) !important;
}

/* Bestätigung nach dem Absenden: gut lesbar in Weiß auf Nachtblau */
.hotti-casting .wpforms-confirmation-container-full,
.hotti-casting div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message),
.hotti-casting .everest-forms-notice--success {
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 2px solid var(--hotti-orange) !important;
	border-radius: 12px !important;
	background: rgba(23, 26, 45, .6) !important;
	color: #fff !important;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}
.hotti-casting .wpforms-confirmation-container-full *,
.hotti-casting .everest-forms-notice--success * {
	color: #fff !important;
}
.hotti-casting .wpforms-confirmation-container-full p { margin: 0 0 1em; }
.hotti-casting .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }
.hotti-casting .wpforms-confirmation-container-full a { color: var(--hotti-orange) !important; }

/* ---------- Kein seitliches Wackeln auf dem Handy ----------
   Holzboden, schräge Flächen und gedrehte Sprechblasen ragen absichtlich über den Rand.
   Alles, was übersteht, wird abgeschnitten, damit die Seite nur senkrecht scrollt. */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}
.hotti-hero,
.hotti-onepager,
.wp-site-blocks > footer {
	overflow-x: hidden;
	overflow-x: clip;
}
.hotti-hero { overflow-y: visible; }