/* =====================================================================
   Künstler-Hof Unkenbach – Child-Theme von Jupiter X
   ---------------------------------------------------------------------
   Die Handschrift der alten Website – Schwarz auf Weiß, das kräftige Rot,
   der Balken als Motiv – übersetzt in ein zeitgemäßes Layout: große,
   ruhige Typografie, viel Weißraum, klare Raster, zurückhaltende
   Bewegung. Mobil zuerst, alle Breakpoints erweitern nach oben.
   ===================================================================== */

:root {
	--kuh-rot: #c8102e;
	--kuh-rot-dunkel: #9d0c24;
	--kuh-tinte: #16150f;
	--kuh-grau: #6b675e;
	--kuh-linie: #e2ded6;
	--kuh-sand: #f7f4ef;
	--kuh-weiss: #fff;

	--kuh-schrift: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--kuh-schrift-akzent: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	--kuh-mass: 46rem;        /* Lesebreite */
	--kuh-mass-breit: 78rem;  /* Raster, Galerien, Kursliste */
	--kuh-rand: clamp(1.25rem, 5vw, 4rem);

	/* wird vom Kurs-Plugin gelesen */
	--kuh-akzent: var(--kuh-rot);
	--kuh-text: var(--kuh-tinte);
}

/* ------------------------------------------------------------ Grundlagen */

body {
	font-family: var(--kuh-schrift);
	color: var(--kuh-tinte);
	background: var(--kuh-weiss);
	font-size: clamp(1rem, .97rem + .15vw, 1.09rem);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--kuh-rot);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}

a:hover,
a:focus {
	color: var(--kuh-tinte);
}

:focus-visible {
	outline: 3px solid var(--kuh-rot);
	outline-offset: 3px;
}

::selection {
	background: var(--kuh-rot);
	color: #fff;
}

/* ------------------------------------------------------------ Typografie */

h1, h2, h3, h4,
.entry-title,
.wp-block-heading {
	font-family: var(--kuh-schrift);
	color: var(--kuh-tinte);
	font-weight: 700;
	letter-spacing: -.022em;
	line-height: 1.08;
	text-wrap: balance;
}

h1, .entry-title {
	font-size: clamp(2.1rem, 1.2rem + 4vw, 4rem);
	margin-bottom: .5em;
}

h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
	margin: 3.2em 0 .7em;
	padding-top: 1.1rem;
	border-top: 1px solid var(--kuh-linie);
	position: relative;
}

/* Der rote Balken der alten Seite – jetzt als feine Marke über jedem Abschnitt. */
h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 3.5rem;
	height: 3px;
	background: var(--kuh-rot);
}

h3 {
	font-size: clamp(1.12rem, 1rem + .6vw, 1.4rem);
	margin: 2.2em 0 .5em;
}

p, li {
	max-width: 40em;
}

blockquote,
.entry-content em {
	font-family: var(--kuh-schrift-akzent);
}

/* --------------------------------------------------------------- Raster */

.jupiterx-main-content,
.entry-content {
	max-width: 100%;
	padding-inline: 0;
}

.entry-content > * {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--kuh-mass);
	padding-inline: var(--kuh-rand);
	box-sizing: border-box;
}

.entry-content > .wp-block-gallery,
.entry-content > .wp-block-table,
.entry-content > .kuh-kursliste,
.entry-content > .kuh-karten,
.entry-content > .kuh-zahlen,
.entry-content > .kuh-hero,
.entry-content > .kuh-anfrage {
	max-width: var(--kuh-mass-breit);
}

/* ----------------------------------------------------------------- Hero */

.kuh-hero {
	padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
	border-bottom: 1px solid var(--kuh-linie);
	margin-bottom: 0;
}

.kuh-hero__auge {
	margin: 0 0 1.4rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--kuh-rot);
	max-width: none;
}

.kuh-hero__titel {
	margin: 0 0 1.2rem;
	font-size: clamp(2.6rem, 1rem + 9vw, 7rem);
	line-height: .95;
	letter-spacing: -.035em;
}

.kuh-hero__titel em {
	font-style: normal;
	color: var(--kuh-rot);
}

.kuh-hero__text {
	font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
	max-width: 34em;
	color: #3a372f;
	margin: 0 0 2rem;
}

.kuh-hero__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	max-width: none;
	margin: 0;
}

.kuh-pfeil {
	font-weight: 700;
	color: var(--kuh-tinte);
	text-decoration: none;
	border-bottom: 2px solid var(--kuh-rot);
	padding-bottom: 2px;
}

.kuh-pfeil::after {
	content: " →";
	color: var(--kuh-rot);
}

.kuh-pfeil:hover,
.kuh-pfeil:focus {
	color: var(--kuh-rot);
}

/* ---------------------------------------------------------- Kennzahlen */

.kuh-zahlen {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--kuh-linie);
	border-bottom: 1px solid var(--kuh-linie);
	padding: 0 !important;
	margin-bottom: 1rem;
}

@media (min-width: 48em) {
	.kuh-zahlen {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kuh-zahlen > div {
	background: var(--kuh-weiss);
	padding: 1.4rem clamp(1rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.kuh-zahlen b {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	line-height: 1;
	letter-spacing: -.03em;
}

.kuh-zahlen span {
	font-size: .82rem;
	letter-spacing: .04em;
	color: var(--kuh-grau);
}

/* -------------------------------------------------------------- Karten */

.kuh-karten {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin: 2rem auto 3rem;
}

@media (min-width: 46em) {
	.kuh-karten {
		grid-template-columns: 1fr 1fr;
	}
}

.kuh-karte {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--kuh-sand);
	color: var(--kuh-tinte);
	text-decoration: none;
	border-left: 3px solid var(--kuh-rot);
	transition: transform .2s ease, background .2s ease;
}

.kuh-karte:hover,
.kuh-karte:focus {
	background: var(--kuh-tinte);
	color: #fff;
	transform: translateY(-3px);
}

.kuh-karte:hover .kuh-karte__auge,
.kuh-karte:focus .kuh-karte__auge {
	color: #fff;
}

.kuh-karte__auge {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kuh-rot);
}

.kuh-karte__titel {
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.kuh-karte__text {
	font-size: .95rem;
	opacity: .85;
}

/* ------------------------------------------------------------- Galerien */
/* Ohne JavaScript ein Raster, mit JavaScript ein Slider mit Wischgeste.
   So funktioniert die Seite in jedem Fall. */

.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: .75rem;
	margin: 2rem auto 3rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	margin: 0 !important;
	width: 100% !important;
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--kuh-sand);
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
	cursor: zoom-in;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.03);
}

/* --- Slider --- */

.kuh-slider {
	display: block !important;
	position: relative;
	padding: 0 !important;
	margin: 2.5rem auto 3.5rem;
}

.kuh-slider__spur {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .25rem;
}

.kuh-slider__spur::-webkit-scrollbar {
	display: none;
}

.kuh-slider .kuh-slider__spur figure.wp-block-image {
	flex: 0 0 min(86%, 26rem);
	scroll-snap-align: center;
}

@media (min-width: 46em) {
	.kuh-slider .kuh-slider__spur figure.wp-block-image {
		flex: 0 0 calc(50% - .375rem);
	}
}

@media (min-width: 68em) {
	.kuh-slider .kuh-slider__spur figure.wp-block-image {
		flex: 0 0 calc(33.333% - .5rem);
	}
}

.kuh-slider .kuh-slider__spur figure.wp-block-image img {
	aspect-ratio: 3 / 2;
	height: auto;
}

.kuh-slider__steuerung {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}

.kuh-slider__knopf {
	width: 44px;
	height: 44px;
	flex: none;
	border: 1px solid var(--kuh-linie);
	background: #fff;
	color: var(--kuh-tinte);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.kuh-slider__knopf:hover:not(:disabled) {
	background: var(--kuh-tinte);
	border-color: var(--kuh-tinte);
	color: #fff;
}

.kuh-slider__knopf:disabled {
	opacity: .3;
	cursor: default;
}

.kuh-slider__punkte {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	justify-content: center;
}

.kuh-slider__punkt {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kuh-linie);
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.kuh-slider__punkt.ist-aktiv {
	background: var(--kuh-rot);
	transform: scale(1.3);
}

.kuh-slider:focus-visible {
	outline: 3px solid var(--kuh-rot);
	outline-offset: 6px;
}

.wp-block-gallery figcaption,
.wp-element-caption {
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--kuh-grau);
	text-align: left;
	padding-top: .45rem;
	background: none !important;
	position: static !important;
}

/* Lightbox (eigenes, schlankes Skript im Child-Theme) */

.kuh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(16, 15, 10, .94);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease;
}

.kuh-lightbox[hidden] {
	display: none;
}

.kuh-lightbox.ist-offen {
	opacity: 1;
	pointer-events: auto;
}

.kuh-lightbox img {
	max-width: min(96vw, 1100px);
	max-height: 84vh;
	object-fit: contain;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.kuh-lightbox__bild {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	align-items: center;
}

.kuh-lightbox__text {
	color: #ddd7cc;
	font-size: .85rem;
	letter-spacing: .04em;
	margin: 0;
	text-align: center;
}

.kuh-lightbox__zu,
.kuh-lightbox__nav {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	padding: .6rem .9rem;
	cursor: pointer;
	opacity: .75;
}

.kuh-lightbox__zu:hover,
.kuh-lightbox__nav:hover {
	opacity: 1;
	color: var(--kuh-rot);
}

.kuh-lightbox__zu { top: .5rem; right: .8rem; font-size: 2.4rem; }
.kuh-lightbox__nav--zurueck { left: .3rem; top: 50%; transform: translateY(-50%); }
.kuh-lightbox__nav--vor     { right: .3rem; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ Kopfzeile */

.jupiterx-header {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(1.4) blur(6px);
	border-bottom: 1px solid var(--kuh-linie);
	position: sticky;
	top: 0;
	z-index: 500;
	transition: box-shadow .2s ease, padding .2s ease;
}

.jupiterx-header.ist-gescrollt {
	box-shadow: 0 1px 0 var(--kuh-linie), 0 10px 30px rgba(0, 0, 0, .06);
}

/* Roter Balken unter der Kopfzeile – Zitat der alten Seite */
.jupiterx-header::after {
	content: "";
	display: block;
	height: 3px;
	background: var(--kuh-rot);
}

.jupiterx-navbar-brand-link {
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--kuh-tinte) !important;
	display: inline-flex;
	align-items: center;
}

.jupiterx-navbar-brand-link img {
	max-height: 76px;
	width: auto;
}

@media (max-width: 46em) {
	.jupiterx-navbar-brand-link img {
		max-height: 72px;
	}
}

.jupiterx-navbar-description {
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kuh-grau);
	display: block;
}

@media (max-width: 46em) {
	.jupiterx-navbar-description {
		display: none;
	}
}

/* Navigation dichter ans Logo rücken (Desktop) */

@media (min-width: 62.001em) {
	.jupiterx-site-navbar .container {
		display: flex;
		align-items: center;
		gap: 2rem;
	}

	.jupiterx-navbar-brand {
		margin-right: 0;
		flex: none;
	}

	.jupiterx-site-navbar .navbar-collapse {
		flex: 1 1 auto;
		justify-content: flex-start;
	}

	.jupiterx-site-navbar .jupiterx-nav-menu,
	.jupiterx-site-navbar .navbar-nav {
		margin-left: 0;
		margin-right: auto;
	}

	.jupiterx-site-navbar .jupiterx-nav-menu > li:first-child > a,
	.jupiterx-site-navbar .navbar-nav > li:first-child > a {
		padding-left: 0;
	}
}

/* Navigation */

.jupiterx-nav-menu > li > a,
.navbar-nav > li > a {
	white-space: nowrap;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--kuh-tinte);
	position: relative;
}

.jupiterx-nav-menu > li > a::after,
.navbar-nav > li > a::after {
	content: "";
	position: absolute;
	left: .5rem;
	right: .5rem;
	bottom: .25rem;
	height: 2px;
	background: var(--kuh-rot);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.jupiterx-nav-menu > li > a:hover::after,
.jupiterx-nav-menu > li.current-menu-item > a::after,
.jupiterx-nav-menu > li.current-menu-parent > a::after,
.navbar-nav > li > a:hover::after {
	transform: scaleX(1);
}

/* Mobiles Menü: große Trefferflächen */

.jupiterx-navbar-toggler,
.navbar-toggler {
	min-width: 46px;
	min-height: 46px;
	border: 1px solid var(--kuh-linie);
	border-radius: 0;
}

@media (max-width: 62em) {
	.navbar-collapse {
		padding-bottom: 1rem;
	}

	.jupiterx-nav-menu > li > a,
	.navbar-nav > li > a {
		display: block;
		padding: .85rem .25rem;
		border-bottom: 1px solid var(--kuh-linie);
		font-size: 1.05rem;
	}

	.jupiterx-nav-menu .sub-menu a {
		padding-left: 1.25rem;
		font-size: .95rem;
		color: var(--kuh-grau);
	}
}

/* ------------------------------------------------------------- Tabellen */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	max-width: 38rem;
	font-size: .97rem;
}

.wp-block-table th,
.wp-block-table td {
	text-align: left;
	padding: .7rem .9rem .7rem 0;
	border: 0;
	border-bottom: 1px solid var(--kuh-linie);
}

.wp-block-table thead th {
	border-bottom: 2px solid var(--kuh-rot);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kuh-grau);
}

/* Rechtsbuendig und ohne Umbruch nur, wenn in der letzten Spalte wirklich
   Zahlen stehen (Preise, Entfernungen). Bei Text – etwa "4 Einzelbetten
   (Durchgangszimmer)" – erzwang das sonst eine zu breite Tabelle, die auf dem
   Telefon abgeschnitten wurde. */
.wp-block-table td:last-child {
	font-weight: 600;
}

.wp-block-table.kuh-tabelle--zahlen td:last-child {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* --------------------------------------------------------------- Listen */

.entry-content ul,
.entry-content ol {
	padding-left: 1.15rem;
}

.entry-content li {
	margin-bottom: .3rem;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--kuh-linie);
	max-width: var(--kuh-mass);
	margin: 3.5rem auto;
}

/* ------------------------------------------------------------- Fußzeile */

.jupiterx-footer,
.jupiterx-subfooter {
	background: var(--kuh-tinte);
	color: #cfc9bd;
	border-top: 3px solid var(--kuh-rot);
	font-size: .9rem;
}

.jupiterx-footer a,
.jupiterx-subfooter a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.jupiterx-footer a:hover,
.jupiterx-subfooter a:hover {
	color: var(--kuh-rot);
	border-color: var(--kuh-rot);
}

/* Platz fuer die Schaltflaeche "Zurueck nach oben", damit sie am Seitenende
   nicht auf der Zeile mit dem Urheberrechtshinweis liegt. */
@media (max-width: 46em) {
	.jupiterx-subfooter {
		padding-bottom: 4.5rem;
	}
}

/* ------------------------------------------------------- Sanftes Einblenden */

.kuh-auftritt {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

.kuh-auftritt.ist-sichtbar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.kuh-auftritt {
		opacity: 1 !important;
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------- Kontaktblock */

.kuh-kontaktblock {
	padding: 1.4rem 1.6rem;
	background: var(--kuh-sand);
	border-left: 3px solid var(--kuh-rot);
}

/* -------------------------------------------------------------- Buttons */
/* Auch hier definiert (nicht nur im Kurs-Plugin), damit Buttons auf allen
   Seiten funktionieren – das Plugin-Stylesheet lädt nur bei Kursinhalten. */

.kuh-button,
.entry-content a.kuh-button {
	display: inline-block;
	padding: .8rem 1.7rem;
	background: var(--kuh-tinte);
	color: #fff;
	border: 0;
	border-radius: 0;
	font: inherit;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.kuh-button:hover,
.kuh-button:focus,
.entry-content a.kuh-button:hover,
.entry-content a.kuh-button:focus {
	background: var(--kuh-rot);
	color: #fff;
	transform: translateY(-1px);
}

.kuh-button--gross,
.entry-content a.kuh-button--gross {
	padding: 1rem 2.2rem;
	font-size: 1.05rem;
}

/* --------------------------------------------------------- Airbnb-Button */

.kuh-buchen,
.entry-content a.kuh-buchen {
	display: inline-block;
	padding: .9rem 1.9rem;
	background: var(--kuh-tinte);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.kuh-buchen:hover,
.kuh-buchen:focus {
	background: var(--kuh-rot);
	color: #fff;
}

/* ------------------------------------------------------------------ Druck */

@media print {
	.jupiterx-header,
	.jupiterx-footer,
	.jupiterx-subfooter,
	.kuh-hero__aktionen,
	nav {
		display: none !important;
	}

	body {
		font-size: 10.5pt;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		color: #666;
	}
}

/* ------------------------------------------------- Mobiles Menü (eigener Umschalter) */

@media (max-width: 62em) {
	.navbar-collapse.collapse:not(.show) {
		display: none;
	}

	.navbar-collapse.show {
		display: block;
		animation: kuh-aufklappen .22s ease;
	}

	.jupiterx-navbar-toggler.ist-offen,
	.navbar-toggler.ist-offen {
		background: var(--kuh-tinte);
		border-color: var(--kuh-tinte);
	}

	.jupiterx-navbar-toggler.ist-offen .navbar-toggler-icon,
	.navbar-toggler.ist-offen .navbar-toggler-icon {
		filter: invert(1);
	}
}

@keyframes kuh-aufklappen {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------- Navigation: Farben & Untermenüs */
/* Bootstrap setzt die Linkfarbe auf halbtransparentes Schwarz – überschreiben. */

.navbar-light .navbar-nav .nav-link,
.jupiterx-nav-menu .nav-link,
#jupiterxSiteNavbar a {
	color: var(--kuh-tinte);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .active > .nav-link,
#jupiterxSiteNavbar a:hover {
	color: var(--kuh-rot);
}

/* Der eingebaute Pfeil von Jupiter X wird durch unseren Knopf ersetzt. */
.dropdown-toggle-icon,
.jupiterx-nav-menu .dropdown-toggle::after {
	display: none !important;
}

.kuh-untermenue-knopf {
	background: none;
	border: 1px solid var(--kuh-linie);
	color: var(--kuh-tinte);
	font-size: 1.25rem;
	line-height: 1;
	width: 40px;
	height: 40px;
	cursor: pointer;
	flex: none;
}

.kuh-untermenue-knopf.ist-offen {
	background: var(--kuh-tinte);
	border-color: var(--kuh-tinte);
	color: #fff;
}

.kuh-untermenue-knopf.ist-offen span::before {
	content: "–";
}

.kuh-untermenue-knopf.ist-offen span {
	font-size: 0;
}

.kuh-untermenue-knopf.ist-offen span::before {
	font-size: 1.25rem;
}

/* Mobil: Menüpunkt und Knopf nebeneinander, Untermenü klappt darunter auf */

@media (max-width: 62em) {
	.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: .5rem;
	}

	.menu-item-has-children > a {
		flex: 1;
	}

	.menu-item-has-children > ul {
		flex-basis: 100%;
		display: none;
		list-style: none;
		padding-left: 1rem;
		margin: 0 0 .5rem;
		border-left: 2px solid var(--kuh-rot);
	}

	.menu-item-has-children > ul.ist-offen {
		display: block;
	}

	.menu-item-has-children > ul a {
		padding: .6rem .25rem;
		font-size: .98rem;
		border-bottom: 1px solid var(--kuh-linie);
	}
}

/* Desktop: Untermenü als Klappfeld bei Hover und Tastaturfokus */

@media (min-width: 62.001em) {
	.kuh-untermenue-knopf {
		display: none;
	}

	.jupiterx-nav-menu .menu-item-has-children {
		position: relative;
	}

	.jupiterx-nav-menu .menu-item-has-children > ul {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 600;
		min-width: 14rem;
		margin: 0;
		padding: .4rem 0;
		list-style: none;
		background: #fff;
		border: 1px solid var(--kuh-linie);
		border-top: 3px solid var(--kuh-rot);
		box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s ease, transform .15s ease, visibility .15s;
	}

	.jupiterx-nav-menu .menu-item-has-children:hover > ul,
	.jupiterx-nav-menu .menu-item-has-children:focus-within > ul {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.jupiterx-nav-menu .menu-item-has-children > ul a {
		display: block;
		padding: .55rem 1rem;
		font-size: .92rem;
		white-space: nowrap;
	}

	.jupiterx-nav-menu .menu-item-has-children > ul a:hover {
		background: var(--kuh-sand);
		color: var(--kuh-rot);
	}
}

/* ------------------------------------------------- Hero mit Bild */

@media (min-width: 56em) {
	.kuh-hero {
		display: grid;
		grid-template-columns: 1.05fr .95fr;
		gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
	}
}

.kuh-hero__bild {
	margin: 2rem 0 0;
	position: relative;
}

@media (min-width: 56em) {
	.kuh-hero__bild {
		margin: 0;
	}
}

.kuh-hero__bild img {
	display: block;
	width: 100%;
	/* Die Aufnahme ist 16:9 – so wird nichts abgeschnitten. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Der rote Balken als Ecke am Bild – Zitat der alten Seite */
.kuh-hero__bild::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 5rem;
	height: 6px;
	background: var(--kuh-rot);
}

/* --------------------------------------------- Kopf der Unterkunftsseiten */

.kuh-unterkunft-kopf {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 2.5rem;
}

@media (min-width: 52em) {
	.kuh-unterkunft-kopf {
		grid-template-columns: 1.4fr 1fr;
		align-items: center;
		gap: 2.5rem;
	}
}

.kuh-unterkunft-kopf__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kuh-eckdaten {
	list-style: none;
	margin: 0;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--kuh-linie);
	border: 1px solid var(--kuh-linie);
}

.kuh-eckdaten li {
	background: #fff;
	margin: 0;
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	max-width: none;
}

.kuh-eckdaten b {
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: -.03em;
}

.kuh-eckdaten span {
	font-size: .8rem;
	letter-spacing: .05em;
	color: var(--kuh-grau);
	margin-top: .2rem;
}

.kuh-buchen-zeile {
	max-width: none;
	margin: 1.5rem 0;
}

/* ================================================ Ablauf in drei Schritten */

.kuh-ablauf {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	background: var(--kuh-linie);
	border: 1px solid var(--kuh-linie);
	margin: 2.5rem auto 3rem;
	padding: 0 !important;
	max-width: var(--kuh-mass-breit);
}

@media (min-width: 46em) {
	.kuh-ablauf {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kuh-ablauf > div {
	background: #fff;
	padding: 1.5rem;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.kuh-ablauf b {
	flex: none;
	width: 2.2rem;
	height: 2.2rem;
	display: grid;
	place-items: center;
	background: var(--kuh-rot);
	color: #fff;
	font-size: 1.05rem;
	border-radius: 50%;
}

.kuh-ablauf span {
	font-size: .95rem;
	line-height: 1.5;
}

/* ============================================================== Download */

.kuh-download {
	margin: 1.5rem auto 2.5rem;
	max-width: var(--kuh-mass-breit);
}

/* ==================================================== Lesefortschritt */

.kuh-fortschritt {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--kuh-rot);
	transform: scaleX(0);
	transform-origin: left;
	z-index: 900;
	pointer-events: none;
}

/* ====================================================== Nach oben */

.kuh-hoch {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	/* Von Anfang an rot. Vorher war die Grundfarbe dunkel und wurde erst
	   ueber :hover rot – auf dem Telefon also erst nach der ersten Beruehrung. */
	background: var(--kuh-rot);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, background .15s ease;
	z-index: 800;
}

.kuh-hoch svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kuh-hoch.ist-sichtbar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.kuh-hoch:hover,
.kuh-hoch:focus-visible {
	background: var(--kuh-tinte);
}

/* ============================== Mobiles Menü: großzügig und ruhig */

@media (max-width: 62em) {
	.navbar-collapse.show {
		display: block;
		width: 100%;
		background: #fff;
		padding: .5rem 0 1.5rem;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
		border-top: 1px solid var(--kuh-linie);
		margin-top: .75rem;
	}

	.navbar-collapse.show .jupiterx-nav-menu > li > a,
	.navbar-collapse.show .navbar-nav > li > a {
		font-size: 1.25rem;
		padding: 1rem .25rem;
		font-weight: 700;
		letter-spacing: -.01em;
	}
}

/* Aktiver Menüpunkt deutlich markieren */

.jupiterx-nav-menu > li.current-menu-item > a,
.navbar-nav > li.current-menu-item > a {
	color: var(--kuh-rot);
}

/* ============================================ Lightbox mit Bildunterschrift */

.kuh-lightbox__bild {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	align-items: center;
}

.kuh-lightbox__text {
	color: #ded8cd;
	font-size: .85rem;
	letter-spacing: .04em;
	margin: 0;
	text-align: center;
	max-width: 40em;
}