/* Projektspezifisches CSS – wird von YOOtheme Pro automatisch geladen. */

/* ===================================================================
* FONTS
* =================================================================== */

/* satisfy-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Satisfy';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/satisfy-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ===================================================================
* NAVBAR
* =================================================================== */

.uk-icon.uk-navbar-toggle-icon svg {
    width: 30px; /* Standardwert ist meist kleiner, z.B. 20px */
}

/* ===================================================================
* BILDER
* =================================================================== */

img.uk-border-rounded {
	border-radius: 10px;
}

/* ===================================================================
* HERO
* =================================================================== */

.hero--written-typo {
	font-family: 'Satisfy', serif;
	font-size: 4.6rem;
	color: #F8F2E5;
}

/* ===================================================================
* Teaser-Zeilen
* =================================================================== */

.numbered-verticale-tile .primary-lead-number {
	font-family: 'Fraunces';
	font-size: 46px;
	font-weight: 300;
	color: #6E9356;
}

@media (min-width: 1200px) {
	.numbered-verticale-tile .uk-first-column {
		max-width: 160px !important;
	}
}


/* ===================================================================
* Overlay Bildergalerie
* =================================================================== */

.overlay-primary--number-left-col {
	display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.overlay-primary--number {
	display: flex;
	flex-direction: column;
	font-weight: 800;
}

/* -------- Abrundung der Bilder -------- */

.overlay-primary--number .uk-transition-toggle.uk-inline-clip {
	border-radius: 10px;
}

/* -------- Nummern -------- */

.overlay-primary--number.-number-bottom-left,
.overlay-primary--number.-number-bottom-right {
	align-items: flex-start;
}

.overlay-primary--number.-number-top-right {
	align-items: flex-end;
	gap: 10px;
}

/* -------- Linien -------- */

.overlay-primary--number.-number-bottom-left::before,
.overlay-primary--number.-number-bottom-right::before,
.overlay-primary--number.-number-top-right::after {
	content: "";
	display: block;
	width: 42px;
	height: 1px;
	margin-bottom: 10px;
	background: #1B2B20;
}

/* -------- Mobil -------- */

@media (max-width: 959px) {
	.overlay-primary--number {
		width: 100%;
	}
	.overlay-primary--number.-number-bottom-left,
	.overlay-primary--number.-number-bottom-right,
	.overlay-primary--number.-number-top-right {
		margin-bottom: 40px !important;
	}
}

/* -------- Desktop (@m) -------- */

@media (min-width: 960px) {
	.overlay-primary--number.-number-bottom-left {
		position: absolute;
	}

	.overlay-primary--number.-number-bottom-right {
		align-items: flex-end;
	}

	.overlay-primary--number.-number-top-right {
		margin-bottom: 10px !important;
	}
}

/* -------- Höhe & Breite für die Overlay-Bilder -------- */

:root {
	--gersthof-width-large: 420px;
	--gersthof-width-xlarge: 450px;

	--gersthof-height-reference: 230px;
	--gersthof-height-mobile: 380px;
}

/* -------- Breite für die Bilder -------- */

@media (min-width: 960px) {
	.overlay-primary--number.-image-width-large {
		width: var(--gersthof-width-large);
	}

	.overlay-primary--number.-image-width-xlarge {
		width: var(--gersthof-width-xlarge);
	}

	.overlay-primary--number.-image-width-2xlarge {
		width: 100%;
	}
}


/* -------- Höhe für die Bilder -------- */

.overlay-primary--number.-image-height-small img,
	.overlay-primary--number.-image-height-medium img,
	.overlay-primary--number.-image-height-large img,
	.overlay-primary--number.-image-height-xlarge img {
		height: var(--gersthof-height-mobile);
		object-fit: cover;
}

@media (min-width: 960px) {
	.overlay-primary--number.-image-height-small img {
		height: var(--gersthof-height-reference);
	}

	.overlay-primary--number.-image-height-medium img {
		height: calc(var(--gersthof-height-reference) * 1.6);
	}

	.overlay-primary--number.-image-height-large img {
		height: calc(var(--gersthof-height-reference) * 2);
	}

	.overlay-primary--number.-image-height-xlarge img {
		height: calc(var(--gersthof-height-reference) * 2.4);
	}
}


/* ===================================================================
* Divider
* =================================================================== */

.divider--small-bold::after {
	border: 1px solid #F3EEE3 !important;
}


/* ===================================================================
* Logo (Kreis)
* =================================================================== */

@media (min-width: 1200px) {
	.kreis-logo {
		position: absolute !important;
		top: -310px;
	}
}

/* ===================================================================
* FLEX
* =================================================================== */

@media (min-width: 1200px) {
	.gersthof-flex {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}

	.gersthof-flex.-right-aligned {
		justify-content: flex-end;
	}
}

/* ===================================================================
* SLIDER
* =================================================================== */

.gh-slider .el-meta {
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	gap: 10px;
}

.gh-slider .el-meta::after {
	content: "";
	display: block;
	width: 42px;
	height: 1px;
	background: white; /* #1B2B20 */
}

/* ===================================================================
* PANEL DEFAULT
* =================================================================== */

.gh-panel-default .el-title::after {
	content: "";
	display: block;
	width: 42px;
	height: 1px;
	margin-top: 10px;
	background: #1B2B20;
}


.gh-panel-default.-absolute {
	position: relative;
}


.gh-panel-default.-with-image .uk-grid {
	display: flex;
}

@media (max-width: 1200px) {
	.gh-panel-default.-with-image .uk-grid {
		flex-direction: column;
	}

	.gh-panel-default.-with-image .el-title::after {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 1200px) {
	.gh-panel-default.-absolute {
		position: absolute;
		left: -220px;
		top: -220px;
	}
}


/* ===================================================================
* PANEL PRIMARY
* =================================================================== */

.gh-panel-primary .el-title::after,
.gh-panel-secondary .el-title::after {
	content: "";
	display: block;
	width: 42px;
	height: 1px;
	margin-top: 10px;
	background: #F3EEE3;
}

@media (max-width: 1200px) {
	.gh-panel-primary.-with-image .el-title::after,
	.gh-panel-secondary.-with-image .el-title::after {
		margin-left: auto;
		margin-right: auto;
	}
}


/* ===================================================================
* COLUMN
* =================================================================== */

.gh-col-fixed-height-800 {
	height: 800px;
}

/* ===================================================================
* FOOTER
* =================================================================== */

.footer--written-typo {
	font-family: 'Satisfy', serif;
	font-size: 2.4rem;
	color: #A3BF85;
}

.footer--headline {
	font-family: 'Mulish', sans-serif;
	color: #A3BF85 !important;
	text-transform: uppercase;
	font-size: 1rem;
}

/* === ic-yoo-mcp:start — verwaltet, NICHT manuell editieren === */
/* ===================================================================
* MOBILE-KORREKTUREN
* Ergänzt die Regeln oberhalb. Desktop bleibt unverändert:
* der Hero erreicht ab ca. 836px Viewport-Breite wieder exakt 4.6rem.
* =================================================================== */

/* -------------------------------------------------------------------
* HERO – Schreibschrift-Wort skaliert mit dem Viewport
*
* Vorher: font-size fest 4.6rem = 92px. Damit war "Biolandwirtschaft"
* 621px, "Ferienwohnungen" 613px und "Murnau-Werdenfelser-Rinder" 489px
* breit. Da body{overflow-x:clip} gesetzt ist, wurde der Überstand auf
* jedem Telefon ersatzlos abgeschnitten.
*
* hyphens:none, weil ein Trennstrich in der Satisfy-Schreibschrift
* falsch aussieht ("Umge-bung"). Die clamp()-Größe sorgt dafür, dass
* jedes aktuelle Hero-Wort bis hinunter zu 320px in eine Zeile passt.
* ------------------------------------------------------------------- */

.hero--written-typo {
	font-size: clamp(2rem, 11vw, 4.6rem);
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: break-word;
}

@media (max-width: 959px) {

	/* 1.4 (geerbt von .uk-heading-medium) ergab bei 92px eine
	   Zeilenhöhe von 129px und drückte die Buttons aus dem Bild. */
	.hero--written-typo {
		line-height: 1.15;
	}
}

/* -------------------------------------------------------------------
* ÜBERSCHRIFTEN – nur da trennen, wo ein ­ steht
*
* Wo eine Überschrift umbricht, entscheidet allein der weiche
* Trennstrich im Text – so wie bei "Kinder­geburtstage" und
* "Wohn­mobilpark" schon vorher. Kein hyphens:auto: das trennt in
* Browsern mit deutschem Trennwörterbuch automatisch und an Stellen,
* die niemand ausgesucht hat.
*
* overflow-wrap ist nur das Sicherheitsnetz gegen abgeschnittenen
* Text bei neuen Inhalten ohne ­ und greift erst unter 420px, wo
* es nachweislich nötig wird – oberhalb passt jede Überschrift.
* ------------------------------------------------------------------- */

@media (max-width: 419px) {

	h1, h2, h3,
	.uk-h1, .uk-h2, .uk-h3,
	.uk-heading-small,
	.uk-heading-medium,
	.uk-heading-large,
	.uk-heading-xlarge,
	.uk-heading-2xlarge,
	.uk-heading-3xlarge {
		overflow-wrap: break-word;
	}
}

/* -------------------------------------------------------------------
* .bacon – bricht nie innerhalb eines Wortes um
*
* Zum selbst Verteilen: im Builder unter "Erweitert > Klassen" an ein
* Element hängen. Gilt auf allen Breiten und wirkt auch auf alles,
* was in dem Element steckt (z. B. das Schreibschrift-Wort im Hero).
*
* Schaltet ab: automatische Silbentrennung, weiche Trennstriche
* (­) und den harten Umbruch unter 420px. Das Wort bleibt in
* einer Zeile.
*
* Achtung: damit ist auch der Überlaufschutz weg. Ein Wort, das
* breiter ist als der Platz, wird abgeschnitten, weil body auf
* overflow-x:clip steht.
* ------------------------------------------------------------------- */

.bacon,
.bacon * {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

/* -------------------------------------------------------------------
* SPALTE MIT FESTER HÖHE – darf Inhalt nicht abschneiden
*
* .gh-col-fixed-height-800 gehört zu uk-width-3-5@l, wirkte aber
* unbeschränkt. Aus height wird min-height: gleiches Bild, aber die
* Spalte kann mitwachsen, wenn der Text auf schmalen Displays länger
* umbricht.
* ------------------------------------------------------------------- */

.gh-col-fixed-height-800 {
	height: auto;
	min-height: 800px;
}

/* -------------------------------------------------------------------
* SPALTE MIT uk-padding-large – Gutter zurückgeben
*
* .uk-padding-large auf einer Grid-Spalte überschreibt das
* padding-left: 30px, mit dem UIkit den negativen margin-left des
* Grids ausgleicht. Die Spalte sitzt dadurch 30px zu weit links; die
* "Fragen?"-Karte auf "Mein Beet" stand links 10px und rechts 40px
* vom Rand. Die Hälfte des Gutters wird links dazugegeben und rechts
* abgezogen, damit die Karte mittig sitzt und ihre Breite behält.
* Ab 1200px ist die Karte absolut positioniert, dort ändert sich
* nichts.
* ------------------------------------------------------------------- */

@media (max-width: 1199px) {

	.uk-grid > .uk-padding-large {
		padding-left: 55px;
		padding-right: 25px;
	}
}

/* >>> therme-erding */
/* ===================================================================
* THERME ERDING – Der Weg (Panoramaweg-Linie Hof → Therme)
* Eigenes Element (html): animierte Wegelinie mit Läufer + 300-m-Badge.
* =================================================================== */

.gh-weg {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
}

.gh-weg__end {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	min-width: 120px;
}

.gh-weg__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #6E9356;
	box-shadow: 0 0 0 6px rgba(110, 147, 86, 0.18);
}

.gh-weg__end--therme .gh-weg__dot {
	background: #1B2B20;
	box-shadow: 0 0 0 6px rgba(27, 43, 32, 0.12);
}

.gh-weg__label {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	color: #1B2B20;
	margin-top: 6px;
}

.gh-weg__sub {
	font-family: 'Mulish', sans-serif;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6B6457;
}

.gh-weg__track {
	position: relative;
	height: 120px;
}

.gh-weg__track svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.gh-weg__path-bg,
.gh-weg__path {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.gh-weg__path-bg {
	stroke: rgba(27, 43, 32, 0.14);
	stroke-dasharray: 2 10;
}

.gh-weg__path {
	stroke: #6E9356;
}

.gh-weg__badge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 26px 12px;
	background: #F3EEE3;
	border-radius: 100px;
	box-shadow: 0 14px 40px rgba(27, 43, 32, 0.12);
	white-space: nowrap;
	will-change: left, top;
}

.gh-weg__badge-num {
	font-family: 'Fraunces', serif;
	font-weight: 300;
	font-size: 2.6rem;
	line-height: 1;
	color: #6E9356;
}

.gh-weg__badge-unit {
	font-family: 'Mulish', sans-serif;
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #1B2B20;
	margin-top: 4px;
}

.gh-weg__badge-txt {
	font-family: 'Mulish', sans-serif;
	font-size: 0.75rem;
	color: #6B6457;
	margin-top: 2px;
}

/* Gezeichneter Anteil der Linie wird in custom.js per SVG-Clip an der Plakette abgeschnitten. */

/* Ankunft an der Therme (custom.js setzt .is-arrived): Punkt wird grün und sendet
   zwei Wellenringe aus, das Label hüpft kurz, die Plakette macht einen kleinen Bump. */
.gh-weg__end--therme .gh-weg__dot {
	position: relative;
	transition: background .4s ease, box-shadow .4s ease;
}

.gh-weg__end--therme .gh-weg__dot::before,
.gh-weg__end--therme .gh-weg__dot::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid #6E9356;
	opacity: 0;
	pointer-events: none;
}

.gh-weg.is-arrived .gh-weg__end--therme .gh-weg__dot {
	background: #6E9356;
	box-shadow: 0 0 0 6px rgba(110, 147, 86, 0.22);
}

.gh-weg.is-arrived .gh-weg__end--therme .gh-weg__dot::before {
	animation: gh-weg-ripple 1.4s ease-out 0s 2;
}

.gh-weg.is-arrived .gh-weg__end--therme .gh-weg__dot::after {
	animation: gh-weg-ripple 1.4s ease-out .45s 2;
}

.gh-weg.is-arrived .gh-weg__end--therme .gh-weg__label {
	animation: gh-weg-hop .6s cubic-bezier(.3, 1.4, .5, 1) .1s 1;
}

.gh-weg.is-arrived .gh-weg__badge {
	animation: gh-weg-bump .55s cubic-bezier(.3, 1.4, .5, 1) 0s 1;
}

@keyframes gh-weg-ripple {
	0%   { transform: scale(1);   opacity: .8; }
	100% { transform: scale(3.2); opacity: 0; }
}

@keyframes gh-weg-hop {
	0%   { transform: translateY(0); }
	40%  { transform: translateY(-8px); }
	100% { transform: translateY(0); }
}

@keyframes gh-weg-bump {
	0%   { transform: translate(-50%, -50%) scale(1); }
	45%  { transform: translate(-50%, -50%) scale(1.08); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.gh-weg.is-arrived .gh-weg__end--therme .gh-weg__dot::before,
	.gh-weg.is-arrived .gh-weg__end--therme .gh-weg__dot::after,
	.gh-weg.is-arrived .gh-weg__end--therme .gh-weg__label,
	.gh-weg.is-arrived .gh-weg__badge { animation: none; }
}

@media (max-width: 959px) {
	.gh-weg {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.gh-weg__track {
		height: 120px;
	}
	.gh-weg__end {
		flex-direction: row;
		gap: 12px;
		min-width: 0;
	}
	.gh-weg__label { margin-top: 0; }
	.gh-weg__sub { display: none; }
	.gh-weg__badge { padding: 10px 18px 8px; }
	.gh-weg__badge-num { font-size: 2rem; }
}

/* ===================================================================
* THERME ERDING – Kennzahlen (300 / 5 / 0)
* =================================================================== */

.gh-stats .gh-stat__num {
	font-family: 'Fraunces', serif;
	font-weight: 300;
	font-size: 4.2rem;
	line-height: 1;
	color: #6E9356;
	margin: 0;
}

.gh-stats .gh-stat__unit {
	margin-top: 8px;
	color: #1B2B20;
}

.gh-stats .gh-stat__txt {
	color: #6B6457;
	max-width: 32ch;
}

/* ===================================================================
* THERME ERDING – Thermentag (Uhrzeit-Spalten)
* =================================================================== */

.gh-tag .gh-tag__time::before {
	content: "";
	display: block;
	width: 42px;
	height: 1px;
	margin-bottom: 18px;
	background: #1B2B20;
}

.gh-tag .gh-tag__time {
	font-family: 'Fraunces', serif;
	font-weight: 300;
	font-size: 2.4rem;
	line-height: 1;
	color: #6E9356;
	margin: 0;
}

/* Startseite: Kennzahlen-Zeile im Therme-Teaser */
.gh-teaser-stats .gh-stat__num {
	font-size: 2.6rem;
}
/* ===================================================================
* STARTSEITE – Hero-Badge „300 Meter bis zur Therme" (rotierender Textring)
* =================================================================== */

.gh-hero-badge-wrap {
	position: absolute;
	right: 5vw;
	bottom: 11vh;
	z-index: 3;
	width: auto !important;
	margin: 0 !important;
}

.gh-hero-badge {
	position: relative;
	display: block;
	width: 240px;
	height: 240px;
	text-decoration: none;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.gh-hero-badge:hover,
.gh-hero-badge:focus-visible {
	transform: scale(1.06) rotate(-4deg);
	text-decoration: none;
}

.gh-hero-badge__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: gh-badge-spin 24s linear infinite;
}

.gh-hero-badge__ring text {
	font-family: 'Mulish', sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	fill: #F8F2E5;
}

.gh-hero-badge__core {
	position: absolute;
	inset: 40px;
	padding: 18px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #F3EEE3;
	color: #1B2B20;
	box-shadow: 0 18px 50px rgba(27, 43, 32, 0.35);
	transform: rotate(-8deg);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.gh-hero-badge:hover .gh-hero-badge__core {
	transform: rotate(0deg);
}

.gh-hero-badge__num {
	font-family: 'Fraunces', serif;
	font-weight: 300;
	font-size: 2.4rem;
	line-height: 1;
	color: #6E9356;
}

.gh-hero-badge__unit {
	font-family: 'Mulish', sans-serif;
	font-weight: 800;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: 3px;
}

.gh-hero-badge__txt {
	font-family: 'Mulish', sans-serif;
	font-size: 0.74rem;
	color: #6B6457;
	margin-top: 2px;
}

.gh-hero-badge__arrow {
	font-size: 0.9rem;
	line-height: 1;
	margin-top: 4px;
	color: #6E9356;
	transition: transform .4s ease;
}

.gh-hero-badge:hover .gh-hero-badge__arrow {
	transform: translateX(4px);
}

@keyframes gh-badge-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gh-hero-badge__ring { animation: none; }
}

@media (max-width: 959px) {
	.gh-hero-badge-wrap {
		right: 16px;
		bottom: auto;
		top: 12vh;
	}
	.gh-hero-badge {
		width: 170px;
		height: 170px;
	}
	.gh-hero-badge__ring text { font-size: 13px; letter-spacing: 0.08em; }
	.gh-hero-badge__core { inset: 29px; padding: 10px; }
	.gh-hero-badge__num { font-size: 1.5rem; }
	.gh-hero-badge__unit { font-size: 0.5rem; margin-top: 2px; }
	.gh-hero-badge__txt { font-size: 0.5rem; }
	.gh-hero-badge__arrow { display: none; }
}
/* <<< therme-erding */

/* >>> mein-beet-fragen-karte */
/* -------------------------------------------------------------------
* "FRAGEN?"-KARTE (Mein Beet) – Breite und Überstand ab 1200px
*
* Die Karte ragt absolut positioniert nach links über das Bild.
* uk-width-xlarge deckelt sie aber auf die Spaltenbreite
* (max-width:100%); zwischen 1200 und 1500px blieben für den Text
* nur 85–250px, der Button brach zweizeilig um. Der Überstand zählt
* jetzt zur erlaubten Breite.
*
* Der Überstand selbst war fest 220px und verdeckte unter 1280px den
* Fließtext links (bis 23px). Er wächst jetzt mit dem Viewport von
* 157px (1200) auf 220px (ab 1410) und hält 40px Abstand zum Text.
*
* Bei exakt 1200px griffen "max-width:1200px" (gestapelt) und
* "min-width:1200px" (absolut) gleichzeitig – ab 1200 gilt die Zeile.
* ------------------------------------------------------------------- */

@media (min-width: 1200px) {

	.gh-panel-default.-absolute {
		--gh-overlap: clamp(150px, calc(30vw - 203px), 220px);
		left: calc(-1 * var(--gh-overlap));
		max-width: calc(100% + var(--gh-overlap));
	}

	.gh-panel-default.-with-image .uk-grid {
		flex-direction: row;
	}

	.gh-panel-default.-with-image .el-title::after,
	.gh-panel-primary.-with-image .el-title::after,
	.gh-panel-secondary.-with-image .el-title::after {
		margin-left: 0;
		margin-right: 0;
	}
}
/* <<< mein-beet-fragen-karte */
/* === ic-yoo-mcp:end === */