/*
Theme Name: Sunneschlössli
Theme URI: https://www.sunneschloessli.com
Author: Matthias Kienzle
Description: Eigenes Block-Theme für das Sunneschlössli, privates alpines Hideaway im Tannheimer Tal. Full Site Editing, theme.json-basiert. Phase 1: Gerüst.
Version: 0.9.179
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunneschloessli
*/

/* Globale Überlauf-Sicherung: Kein Element darf die Seite horizontal
   aufschieben (Regel Matthias 22.07.2026 — „nirgends"). clip statt hidden,
   damit position:sticky im Seiteninneren weiter funktioniert. */
/* Seitliches Ausbrechen am INHALTS-Wrapper kappen, nicht an html/body:
   overflow-x auf body macht in iOS-Safari aus position:fixed ein
   Mitscrollen — die Buchen-Leiste wanderte beim Scrollen nach oben
   (Fund Matthias, 22.08.2026). */
.wp-site-blocks { overflow-x: clip; }

/* Die Seite bleibt bewusst im hellen Marken-Design (Creme/Tannenschatten), auch
   wenn das System im Dunkelmodus ist. color-scheme: light verhindert, dass der
   Browser Formularfelder, Scrollbalken o. Ä. dunkel umfärbt. */
:root { color-scheme: light; }

/* ---------------------------------------------------------------
   Akzent-Token: KEIN Gold/Sonnenhang als Textfarbe (CI-Manual).
   Auf dunklem Grund tritt ein warmes, ruhiges Off-White an die Stelle
   der früheren gelben Akzente — edel statt billig.
   --------------------------------------------------------------- */
:root {
	--ssl-akzent-hell: rgba(244, 241, 236, 0.64); /* Label/Eyebrow auf dunkel */
	--ssl-akzent-hell-stark: rgba(244, 241, 236, 0.82);
}

/* ---------------------------------------------------------------
   Lesbarkeit: max. 70 Zeichen Zeilenlänge im Fliesstext
   --------------------------------------------------------------- */
.entry-content p {
	max-width: 70ch;
}

/* Header, Main und Footer sitzen bündig aneinander */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   Header: sticky, verdichtet sich dezent beim Scrollen
   (JS togglet .is-scrolled, siehe assets/js/header.js)
   --------------------------------------------------------------- */
/* Der gesamte Kopf (Störer + Masthead) klebt zusammen oben, der Störer bleibt
   also immer sichtbar und läuft weiter. */
header.wp-block-template-part {
	position: fixed;          /* immer schwebend/überlagernd (Brenners) */
	top: 0; left: 0; right: 0;
	z-index: 100;
}
/* Kein backdrop-filter mehr: der 12px-Blur wurde beim Scrollen in JEDEM Frame
   über dem Hero neu berechnet — gemessen 24 Frames à 50 ms genau beim
   Anscrollen (5K/Retina). Ein dichteres Creme ersetzt den Glaseffekt nahezu
   unsichtbar und kostet nichts. (Befund Matthias 25.07.2026, Scroll-Haken.) */
.site-header {
	position: relative;
	background: rgba(244, 241, 236, 0.92);
	border-bottom: 1px solid rgba(74, 55, 37, 0.10);
	transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled {
	background: rgba(244, 241, 236, 0.96);
	box-shadow: 0 1px 10px rgba(29, 48, 38, 0.10);
}
/* Responsive (Telefon/kleine Schirme): die Sticky-Leiste buendig an die
   Oberkante docken, kein durchblitzender Spalt darueber. Desktop bleibt
   bewusst schwebend. */
@media (max-width: 781px) {
	.site-header.is-scrolled .header-innen { margin-top: 0 !important; }
}

/* Startseite, ganz oben über dem Hero: voll transparent, weisse Marke und
   Elemente. Beim Scrollen kippt es ins feine Creme-Band. */
html:not(.nav-open) body.home .site-header:not(.is-scrolled) {
	background: transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}
/* Startseite ganz oben: Leisten-Logo verborgen (das grosse Hero-Logo trägt). */
html:not(.nav-open) body.home .site-header:not(.is-scrolled) .header-logo { opacity: 0; transform: translateY(8px); pointer-events: none; }
html:not(.nav-open) body.home .site-header:not(.is-scrolled) .nav-toggle,
html:not(.nav-open) body.home .site-header:not(.is-scrolled) .header-buchen { color: var(--wp--preset--color--schnee); }
html:not(.nav-open) body.home .site-header:not(.is-scrolled) .header-buchen {
	border-color: rgba(244, 241, 236, 0.75);
	/* kraeftiger, damit die Creme-Schrift auch ueber hellen Hero-Stellen
	   lesbar bleibt (WCAG-Kontrast). */
	background: rgba(20, 33, 26, 0.72);
}

/* Fixer Kopf: Unterseiten unter das Band schieben (die Startseite hat das Hero,
   das bewusst hinter dem Band weiterläuft). */
body:not(.home) #inhalt { padding-top: calc(var(--header-h, 110px) + 3.2rem) !important; }

/* Seitlicher Innenabstand für alle Inhaltsseiten (Prosa, Formulare, Suiten):
   die constrained Inhaltsspalte hatte mobil kein horizontales Padding -> Text
   klebte am Rand. Vollbild-Bänder (z. B. .kulinarik-szene mit 100vw-Ausbruch)
   korrigieren sich rechnerisch selbst und bleiben randbündig. */
body:not(.home) #inhalt {
	padding-left: clamp(1.25rem, 5vw, 2rem);
	padding-right: clamp(1.25rem, 5vw, 2rem);
}

/* Der Gutter oben gilt fuer Fliesstext. Alignfull-Inhalte (Cover-Heroes wie
   die Kapelle, Vollbild-Baender) muessen trotzdem zum Viewport-Rand ausbrechen,
   sonst standen sie 20px eingerueckt (wirkte wie ein schwebendes Bild). */
body:not(.home) #inhalt .wp-block-post-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Seitentitel der Inhaltsseiten zentriert: der constrained Block war zentriert,
   der Text darin aber linksbuendig -> kurze Titel wirkten aus der Mitte gerueckt
   (neben zentrierten Bildern/Tabellen schief). Jetzt einheitlich mittig. */
body:not(.home) #inhalt > .wp-block-post-title {
	text-align: center;
}

/* Schlanke, fixe Leiste (Brenners): Burger links, kleines Logo mittig, Buchen rechts. */
.site-header .header-innen {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 0.95rem 2rem;
	transition: padding 0.25s ease;
}
/* Rohe HTML-Elemente im Header/Nav erben kein border-box von WP */
.header-innen * { box-sizing: border-box; }

/* Kleines Leisten-Logo (tiefes Schlössli-Holz). Auf der Startseite ganz oben
   verborgen — es „wandert" beim Scrollen aus dem Hero in die Leiste hoch. */
.site-header .header-logo { display: block; transition: opacity 0.45s ease, transform 0.45s ease; }
.site-header .header-logo img { height: 48px; width: auto; }

.site-footer .footer-logo {
	width: 156px;
	height: auto;
}

/* Dezentes Menü (drei Striche + „Menü") oben rechts — auf ALLEN Breiten.
   Öffnet das ruhige Vollbild-Overlay (Brenners-Register). */
.nav-toggle {
	position: absolute;
	top: clamp(1.5rem, 3.2vh, 2.3rem);
	left: clamp(1.2rem, 3vw, 2.6rem);
	z-index: 100001;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	background: none; border: 0; cursor: pointer;
	padding: 0.4rem;
	color: var(--wp--preset--color--tannenschatten);
}
.nav-toggle-bars { display: block; width: 26px; }

/* Buchen-Pille oben rechts (Brenners „BOOK") */
.header-buchen {
	position: absolute;
	top: clamp(1.15rem, 2.9vh, 2rem);
	right: clamp(1.2rem, 3vw, 2.6rem);
	z-index: 100001;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.64rem; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap;
	color: var(--wp--preset--color--schnee);
	background: var(--wp--preset--color--tannenschatten);
	border: 1px solid var(--wp--preset--color--tannenschatten);
	padding: 0.66rem 1.2rem;
	border-radius: 999px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.header-buchen:hover {
	background: var(--wp--preset--color--schloessli-holz);
	border-color: var(--wp--preset--color--schloessli-holz);
	color: var(--wp--preset--color--schnee);
}
@media (max-width: 600px) { .header-buchen { display: none; } } /* mobil: untere Leiste */
.nav-toggle-bars span {
	display: block; height: 1.5px; margin: 6px 0;
	background: currentColor;
	transition: transform 0.28s ease, opacity 0.2s ease;
}
.nav-toggle-wort {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.66rem; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
}
@media (max-width: 600px) { .nav-toggle-wort { display: none; } }

/* Die Navigation lebt ausschliesslich im Overlay (siehe unten). */
.hauptnav { display: none; }

/* ---------------------------------------------------------------
   Buttons: dunkel und ruhig auf hellem Grund (theme.json),
   hell-outlined auf dunklen Sektionen. Kein gelbes Füllen.
   --------------------------------------------------------------- */
.st-cta .wp-block-button__link,
.st-band .wp-block-button__link,
.site-footer .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--schnee);
	border-color: rgba(244, 241, 236, 0.55);
}
.st-cta .wp-block-button__link:hover,
.st-band .wp-block-button__link:hover,
.site-footer .wp-block-button__link:hover {
	background: var(--wp--preset--color--schnee);
	color: var(--wp--preset--color--tannenschatten);
	border-color: var(--wp--preset--color--schnee);
}

/* Permanenter Buchen-Button: immer sichtbar, auf jeder Seite.
   Desktop = schwebender Button unten rechts, Mobil = fixierte Leiste unten. */
.buchen-floating,
.buchen-mobilleiste {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee);
	border: 1px solid rgba(244, 241, 236, 0.28);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.buchen-floating:hover,
.buchen-mobilleiste:hover {
	background: var(--wp--preset--color--schnee);
	color: var(--wp--preset--color--tannenschatten);
	border-color: var(--wp--preset--color--schnee);
}

/* Desktop: die Buchen-Pille lebt jetzt im Kopf (oben rechts), die schwebende
   Pille entfällt. Mobil übernimmt die fixierte Leiste unten. */
.buchen-floating { display: none; }
.buchen-mobilleiste { display: none; }

@media (max-width: 781px) {
	/* Mobil: schwebende Pille weg, dafür fixierte Vollbreiten-Leiste */
	.buchen-floating { display: none; }
	.buchen-mobilleiste {
		display: block;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 120;
		text-align: center;
		padding-top: 1.05rem;
		padding-bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(244, 241, 236, 0.16);
		box-shadow: 0 -6px 22px rgba(29, 48, 38, 0.22);
	}
	/* Schranke: der Footer endet deutlich über der fixierten Leiste,
	   damit Impressum/Datenschutz/AGB nie verdeckt werden. */
	body { padding-bottom: 4.8rem; }
	.site-footer .footer-unten { padding-bottom: 1.8rem; }
	/* Desktop-Buchen-Button im Header auf Mobil ausblenden, die Leiste übernimmt */
	.site-header .buchen-button { display: none; }
}

/* ---------------------------------------------------------------
   Footer: dunkel (Tannenschatten)
   --------------------------------------------------------------- */
.site-footer {
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee);
}

.site-footer a {
	color: var(--wp--preset--color--schnee);
}

.site-footer h2,
.site-footer h3,
.site-footer h4 {
	color: var(--wp--preset--color--schnee);
}

.site-footer .footer-meta {
	/* helleres Grau auf dunkelgruen (Mittelgrau wurde fuer Creme-Kontrast
	   abgedunkelt, das waere hier zu dunkel). */
	color: #969691;
}

/* Newsletter-Slot (Phase 3, ohne Funktion) */
.newsletter-slot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}
.newsletter-slot input[type="email"] {
	background: transparent;
	border: 1px solid var(--wp--preset--color--mittelgrau);
	color: var(--wp--preset--color--schnee);
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.9rem;
	width: 100%;
	max-width: 22rem;
}

/* ---------------------------------------------------------------
   Formular-Gerüst (Anfrage, Phase 3 ohne Versand)
   --------------------------------------------------------------- */
.anfrage-formular label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--tannenschatten);
}

.anfrage-formular input,
.anfrage-formular textarea,
.anfrage-formular select {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--hellgrau);
	background: var(--wp--preset--color--weiss);
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;
	color: var(--wp--preset--color--schloessli-holz);
}

.anfrage-formular .formular-feld {
	margin-bottom: 1.25rem;
}

/* Kleiner Hilfetext unter einem Feld (z. B. Wertgutschein-Hinweis). */
.anfrage-formular .formular-hilfe {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--wp--preset--color--tiroler-stein);
}

.anfrage-formular .dsgvo-checkbox {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.875rem;
	color: var(--wp--preset--color--tiroler-stein);
}

.anfrage-formular .dsgvo-checkbox input {
	width: auto;
	margin-top: 0.2rem;
}

.anfrage-formular button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Kapelle: Zeremonien-Akkordeon + Anfrage-Formular
   --------------------------------------------------------------- */
.zeremonien-block,
.kapelle-anfrage {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 2rem) 0;
	text-align: center;
}
.zeremonien-eyebrow { margin-bottom: 0.5rem; }
.zeremonien-titel,
.kapelle-anfrage-titel {
	margin: 0 0 1.5rem;
	font-size: clamp(1.7rem, 4.5vw, 2.4rem);
}
.zeremonien-akkordeon { text-align: left; }
.kapelle-anfrage-intro {
	max-width: 34rem;
	margin: 0 auto 1.75rem;
	color: var(--wp--preset--color--tiroler-stein);
}

/* Reveal-Toggle „Anfrage senden" */
.anfrage-toggle { text-align: left; }
.anfrage-toggle > summary {
	list-style: none;
	cursor: pointer;
	display: block;
	width: fit-content;
	margin: 0 auto;
	padding: 0.85rem 2rem;
	border: 1px solid var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--tannenschatten);
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}
.anfrage-toggle > summary::-webkit-details-marker { display: none; }
.anfrage-toggle > summary:hover {
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee);
}
.anfrage-toggle[open] > summary { margin-bottom: 1.75rem; }

/* Formular-Raster: zweispaltig auf dem Desktop, einspaltig mobil (Kapelle, Gutschein) */
.formular-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
	text-align: left;
}
.formular-grid .formular-feld-breit,
.formular-grid button,
.formular-grid .platzhalter-hinweis { grid-column: 1 / -1; }
@media (max-width: 600px) {
	.formular-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Gutschein: Motivwahl als Mustergutschein im Briefpapier-Stil
   (cremefarbenes A4-Blatt, feine Rahmenlinie, Bild nur als Kopfband,
   Wortmarke und „Gutschein" in Tann-Grün, klickbar zum Vergrössern)
   --------------------------------------------------------------- */
.gv-block { margin: 0 auto 2.75rem; }
.gv-hinweis { color: var(--wp--preset--color--tiroler-stein); font-size: 0.9rem; margin: 0.3rem 0 1.25rem; }
.gv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 46rem; margin: 0 auto; }
@media (max-width: 520px) { .gv-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }

.gv-option { display: block; cursor: pointer; }
.gv-option > input { position: absolute; opacity: 0; pointer-events: none; }

/* Das Blatt: cremefarbenes Briefpapier im A4-Hochformat */
.gv-card {
	position: relative; display: flex; flex-direction: column;
	aspect-ratio: 210 / 297;
	background: var(--wp--preset--color--schnee);
	padding: 7% 7% 6%;
	border: 1px solid var(--wp--preset--color--hellgrau);
	box-shadow: 0 6px 18px rgba(29, 48, 38, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: hidden;
}
/* Feine Innenlinie wie auf gutem Briefpapier */
.gv-card::before {
	content: ""; position: absolute; inset: 4%;
	border: 1px solid rgba(29, 48, 38, 0.16);
	pointer-events: none; z-index: 2;
}
.gv-option:hover .gv-card { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(29, 48, 38, 0.2); }
.gv-option > input:checked + .gv-card { border-color: var(--wp--preset--color--tannenschatten); }

/* Bild als ruhiges Kopfband, nicht das ganze Blatt */
.gv-photo {
	flex: 0 0 28%;
	background-size: cover; background-position: center;
	margin-bottom: 8%;
}

/* Der bedruckte Bereich auf dem Papier: die Wortmarke führt, das Siegel begleitet,
   darunter „Gutschein" in kursivem Cormorant, wie mit der Feder geschrieben. */
.gv-paper {
	flex: 1 1 auto;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	gap: 0.6rem; text-align: center;
	color: var(--wp--preset--color--tannenschatten);
}
.gv-logo { width: 54%; max-width: 150px; height: auto; margin-bottom: 0.2rem; }
.gv-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 4.2vw, 2.2rem);
	letter-spacing: 0.02em; line-height: 1.05;
}
.gv-line { width: 22%; height: 1px; background: rgba(29, 48, 38, 0.28); }
.gv-sub { font-style: italic; font-size: 0.64rem; letter-spacing: 0.03em; color: var(--wp--preset--color--tiroler-stein); max-width: 24ch; }

/* Muster-Wasserzeichen, Tann-Grün auf Creme, durchgestrichen */
.gv-muster {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	transform: rotate(-28deg);
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 600; font-size: clamp(1.3rem, 6vw, 2.4rem);
	letter-spacing: 0.32em; text-transform: uppercase;
	color: rgba(29, 48, 38, 0.15); pointer-events: none;
}
.gv-muster::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: rgba(29, 48, 38, 0.15); }
.gv-zoom {
	position: absolute; top: 7px; right: 7px; z-index: 4;
	width: 28px; height: 28px; border: 0; border-radius: 50%;
	background: rgba(29, 48, 38, 0.62); color: var(--wp--preset--color--schnee);
	cursor: pointer; font-size: 0.95rem; line-height: 1; display: grid; place-items: center;
	opacity: 0; transition: opacity 0.2s ease;
}
.gv-card:hover .gv-zoom, .gv-zoom:focus-visible { opacity: 1; }
.gv-name { display: block; font-size: 0.72rem; text-align: center; color: var(--wp--preset--color--tiroler-stein); }

/* Auswahl: sichtbarer, anklickbarer Kreis unter jeder Vorlage (nur einer pro Bestellung) */
.gv-pick { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.7rem; }
.gv-radio {
	width: 18px; height: 18px; border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--mittelgrau);
	display: grid; place-items: center;
	transition: border-color 0.2s ease;
}
.gv-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: transparent; transition: background 0.2s ease; }
.gv-option > input:checked ~ .gv-pick .gv-radio { border-color: var(--wp--preset--color--tannenschatten); }
.gv-option > input:checked ~ .gv-pick .gv-radio::after { background: var(--wp--preset--color--tannenschatten); }
.gv-option > input:focus-visible ~ .gv-pick .gv-radio { outline: 2px solid var(--wp--preset--color--tannenschatten); outline-offset: 2px; }
.gv-option:hover .gv-radio { border-color: var(--wp--preset--color--tannenschatten); }

/* Vergrösserung (A4 gross) */
.gv-modal { position: fixed; inset: 0; z-index: 100050; display: none; align-items: center; justify-content: center; background: rgba(20, 33, 26, 0.82); padding: 4vh 1rem; }
.gv-modal.is-open { display: flex; }
.gv-modal .gv-card { height: 88vh; width: auto; max-width: 94vw; cursor: default; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.gv-modal .gv-zoom { display: none; }
.gv-modal-close { position: absolute; top: 1.1rem; right: 1.4rem; background: none; border: 0; color: var(--wp--preset--color--schnee); font-size: 2.2rem; line-height: 1; cursor: pointer; }

/* Mini bleibt schlicht (Kopfband + „Gutschein" + Muster). Logo, Untertitel und
   die personalisierten Zeilen erscheinen erst in der A4-Vergrösserung. */
.gv-detail { display: none; }
.gv-modal .gv-photo { flex-basis: 30%; margin-bottom: 6%; }
.gv-modal .gv-paper { gap: 0.6rem; }
.gv-modal .gv-titel { font-size: clamp(2rem, 5vh, 3.2rem); margin-top: 0.2rem; }
.gv-modal .gv-logo { display: block; width: 52%; max-width: 250px; height: auto; margin-bottom: 0.4rem; }
.gv-modal .gv-line { display: block; width: 18%; height: 1px; background: rgba(29, 48, 38, 0.3); margin: 0.3rem 0 0.4rem; }
.gv-modal .gv-sub { display: block; font-size: clamp(0.85rem, 1.6vh, 1.05rem); }
.gv-modal .gv-fields { display: flex; flex-direction: column; gap: 1.5rem; width: 74%; margin-top: 2rem; text-align: left; }
.gv-modal .gv-field { display: flex; flex-direction: column; gap: 0.4rem; }
.gv-modal .gv-field small { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tiroler-stein); }
.gv-modal .gv-blank { width: 100%; height: 1px; background: rgba(29, 48, 38, 0.3); }
/* Ausgestellt am / Gültig bis: zwei dezente Felder im Stil der Wertzeilen.
   „Gültig bis" trägt das nach der Regel erzeugte Datum (Ausstellungsjahr + 5). */
.gv-modal .gv-datum { display: flex; gap: 1.5rem; width: 74%; margin-top: auto; padding-top: 1.6rem; text-align: left; }
.gv-modal .gv-datum .gv-field { flex: 1; }
.gv-modal .gv-blank-wert { height: auto; background: none; border-bottom: 1px solid rgba(29, 48, 38, 0.3); padding-bottom: 0.2rem; font-size: 0.84rem; letter-spacing: 0.02em; color: var(--wp--preset--color--tiroler-stein); }
.gv-modal .gv-fussnote { display: block; width: 74%; margin-top: 0.7rem; font-style: italic; font-size: 0.66rem; line-height: 1.4; letter-spacing: 0.01em; color: var(--wp--preset--color--tiroler-stein); text-align: left; }
.gv-modal .gv-nr { display: flex; align-items: center; gap: 0.7rem; width: 74%; padding-top: 1.1rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--tiroler-stein); }
.gv-modal .gv-nr .gv-blank-kurz { flex: 1; height: 1px; background: rgba(29, 48, 38, 0.3); }
.gv-modal .gv-foot { display: block; margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--wp--preset--color--tiroler-stein); }

/* ---------------------------------------------------------------
   Platzhalter-Kennzeichnung (Phase 1, fliegt in Phase 2 raus)
   --------------------------------------------------------------- */
.platzhalter-hinweis {
	border: 1px dashed var(--wp--preset--color--mittelgrau);
	background: var(--wp--preset--color--hellgrau);
	color: var(--wp--preset--color--tiroler-stein);
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
}

/* ---------------------------------------------------------------
   Suiten-Grid: 1:1-Thumbnails, ruhig
   --------------------------------------------------------------- */
.suiten-grid .wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* Mobil stapeln sich die 7 Suiten untereinander — ohne Trennung ist
 * nicht klar, ob ein Bild zur Suite darüber oder darunter gehört
 * (Matthias, 20.08.2026). Feine Linie + Luft zwischen den Karten,
 * nur wenn das Grid einspaltig ist. */
@media (max-width: 781px) {
	.suiten-grid > .wp-block-group + .wp-block-group {
		border-top: 1px solid var(--wp--preset--color--mittelgrau);
		padding-top: 2.25rem;
		margin-top: 2.25rem;
	}
}

/* Eckdaten-Zeile auf Suiten-Detailseiten */
.suite-eckdaten {
	font-size: 0.875rem;
	color: var(--wp--preset--color--tiroler-stein);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Eckdaten je Suite: ruhige Label/Wert-Liste mit feinen Linien */
.suite-fakten {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	max-width: 34rem;
}
.suite-fakt {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 1.5rem;
	padding: 0.7rem 0;
	border-top: 1px solid var(--wp--preset--color--hellgrau);
}
.suite-fakt:last-child {
	border-bottom: 1px solid var(--wp--preset--color--hellgrau);
}
.suite-fakt-label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein);
	padding-top: 0.15em;
}
.suite-fakt-wert {
	color: var(--wp--preset--color--tannenschatten);
}
@media (max-width: 600px) {
	.suite-fakt {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

/* Belegung wie in der Suiten-Broschüre: goldene Eckdatenzeile, feine Trennlinie,
   darunter Schlafzimmer und Schlafsofa mit Icons (Walnuss) und Klartext. */
.suite-belegung {
	margin: 2.5rem 0 0;
	text-align: center;
}
.suite-belegung-eck {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(1.05rem, 2.4vw, 1.4rem);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* war Sonnenhang-Gold: scheitert am WCAG-Kontrast UND widerspricht dem
	   Prinzip "kein Gold als Textfarbe". Walnuss, markenkonform + lesbar. */
	color: var(--wp--preset--color--schloessli-holz);
}
.suite-belegung-strich {
	display: block;
	width: 3rem;
	height: 1px;
	margin: 0.9rem auto;
	background: var(--wp--preset--color--sonnenhang);
}
.suite-belegung-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 1.4rem;
	margin: 0;
}
.belegung-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.belegung-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
}
.belegung-label {
	font-size: 0.95rem;
	color: var(--wp--preset--color--schloessli-holz);
}
.belegung-punkt {
	color: var(--wp--preset--color--sonnenhang);
}
@media (max-width: 600px) {
	.suite-belegung-zeile { flex-direction: column; gap: 0.6rem; }
	.belegung-punkt { display: none; }
}

/* Einmalige, ruhige Legende auf der Suiten-Übersicht. */
.suite-legende {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.6rem;
	max-width: 42rem;
	margin: 1.8rem auto 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--tiroler-stein);
}
.suite-legende .belegung-label {
	font-size: 0.9rem;
	color: var(--wp--preset--color--tiroler-stein);
}

/* Grundriss-Abschnitt der Suiten: gross, ruhig, zentriert, dezent gerahmt */
.grundriss-block {
	margin: clamp(2.75rem, 6vw, 4.5rem) auto 0;
	max-width: 60rem;
	text-align: center;
}
.grundriss-titel {
	margin: 0 0 1.4rem;
}
.grundriss-figur {
	margin: 0;
}
/* Mittelachsensatz für die Bar-Familie (Orient Express, Honesty Bar, Fumoir):
   zeremonieller, salonartiger Satz — kurze Absätze, schmaleres Maß.
   Fließtext-Seiten bleiben linksbündig (Lesbarkeit). */
.seite-hausbar .entry-content > p,
.seite-orient-express .entry-content > p,
.seite-honesty-bar .entry-content > p,
.seite-fumoir .entry-content > p,
.seite-hausbar .entry-content h1,
.seite-orient-express .entry-content h1,
.seite-honesty-bar .entry-content h1,
.seite-fumoir .entry-content h1 {
	text-align: center;
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}

/* Winter-Hero: Das Schlössli liegt unten im Drohnenbild — der Cover-Zuschnitt
   verankert deshalb unten (sonst zeigen breite Screens nur Wald und Dachkante). */
.st-hero-winter .wp-block-cover__image-background { object-position: 50% 82%; }

/* Gästestimmen: ruhiges Zitat-Band (echte Google-Bewertungen, Pattern gaestestimmen) */
.gaestestimmen-band { padding: 4.5rem 1.5rem; background: var(--wp--preset--color--schnee); }
.gaestestimmen { max-width: 70rem; margin: 0 auto; text-align: center; }
.gaestestimmen-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 1rem; }
@media (max-width: 781px) { .gaestestimmen-reihe { grid-template-columns: 1fr; gap: 2rem; } }
.gaestestimme { margin: 0; padding: 0; border: 0; }
.gaestestimme p {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.25rem;
	line-height: 1.55;
	margin: 0 0 0.9rem;
}
.gaestestimme cite {
	font-family: var(--wp--preset--font-family--mulish);
	font-style: normal;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
}
.gaestestimmen-quelle {
	margin: 2.2rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--mittelgrau);
}

/* Preisanker + Anfrage-Zeile auf den Suitenseiten (Shortcodes, Render-Zeit) */
.suite-preisanker {
	text-align: center;
	margin: 2.5rem 0 0.25rem;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.3rem;
}
.suite-preisanker a { font-size: 0.85em; }
.suite-anfrage-zeile {
	text-align: center;
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--mittelgrau);
}

.grundriss-legende {
	margin-top: 0.9rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--wp--preset--color--tannenschatten);
	opacity: 0.75;
}
.grundriss-figur img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 54rem;
	height: auto;
	margin: 0 auto;
	cursor: zoom-in;
	border: 1px solid var(--wp--preset--color--hellgrau);
}

/* Einzelnes Marken-Icon als ruhiges, sympathisches Zeichen */
.icon-zeichen {
	text-align: center;
	margin: 0.5rem auto 1.5rem;
}
.icon-zeichen img,
.icon-zeichen svg {
	width: 58px;
	height: auto;
	display: inline-block;
	opacity: 0.85;
}

/* Hochformat-Bild dezent begrenzt (z. B. Familienporträt Gastgeber) */
.bild-portrait {
	max-width: 22rem;
	margin-left: auto;
	margin-right: auto;
}

/* Landschafts-Variante: zentriert und ruhig, als 3:2-Ausschnitt statt grossem
   Quadrat (Winterseite), damit die Bilder nicht erdruecken. */
.bild-landschaft { max-width: 46rem; margin-left: auto; margin-right: auto; }
.bild-landschaft img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* Hausbar-Eroeffnungsbild (Tuer-Blick): groesseres, zentriertes Portrait,
   auf Mobil volle Breite. Fuehrt die Orient-Express-Bildstrecke an. */
.hausbar-lead { max-width: min(30rem, 100%); margin-inline: auto; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.hausbar-lead img { width: 100%; height: auto; display: block; }

/* Kulinarik: grosses Bild im Hintergrund, die Seite als Panel davor */
.kulinarik-szene {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(2.5rem, 7vw, 6rem) 1.25rem;
	background-position: center;
	background-size: cover;
	/* fixed zwang beim Scrollen zum Neuzeichnen der ganzen Szene (Jank);
	   scroll ist auf allen Geraeten fluessig. */
	background-attachment: scroll;
}
/* WP-Constrained-Layout setzt auf Nicht-alignfull-Kinder auto-Margins und
   überschreibt damit (gleiche Spezifität, später in der Quelle) den Ausbruch.
   Höhere Spezifität + beidseitig, sonst läuft die 100vw-Szene rechts über. */
.kulinarik-szene.kulinarik-szene {
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.kulinarik-szene::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(29, 48, 38, 0.34);
}
.kulinarik-panel {
	position: relative;
	z-index: 1;
	max-width: 53rem;
	margin: 0 auto;
	padding: clamp(1.75rem, 5vw, 3.75rem);
	background: rgba(244, 241, 236, 0.96);
	box-shadow: 0 30px 80px rgba(29, 48, 38, 0.28);
}
.kul-lead {
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 auto 0.5rem;
	max-width: 44rem;
	text-align: center;
}
.kul-schluss {
	margin: 2.5rem auto 0;
	max-width: 40rem;
	text-align: center;
	color: var(--wp--preset--color--tiroler-stein);
}
.kulinarik-panel .merkmale-zahlen { margin-top: 2rem; margin-bottom: 0.5rem; }

/* Zwei kleine, versetzte Gastgeber-Fotos (Editorial-Stil, wie die schwebenden
   Bilder der Startseiten-Bänder): Gesichter vor der Adressliste. */
.kul-duo {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(1.2rem, 4vw, 2.6rem);
	margin: clamp(2.2rem, 5vw, 3.2rem) auto clamp(1rem, 2.5vw, 1.6rem);
	max-width: 40rem;
}
.kul-duo figure {
	margin: 0;
	flex: 0 1 min(46%, 280px);
	background: var(--wp--preset--color--weiss);
	box-shadow: 0 18px 44px rgba(29, 48, 38, 0.16);
}
.kul-duo figure + figure { margin-top: clamp(1.8rem, 5vw, 3rem); } /* der Versatz */
.kul-duo img { display: block; width: 100%; height: auto; }
.kul-duo figcaption {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--mittelgrau);
	padding: 0.55rem 0.75rem 0.7rem;
}
@media (max-width: 768px) {
	.kulinarik-szene { background-attachment: scroll; }
}

/* Empfehlungen mit Kontaktdaten */
.kulinarik-liste {
	margin: 2.5rem 0 0;
}
.kulinarik-liste .kul-gruppe {
	margin: 2.75rem 0 1.25rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--wp--preset--color--hellgrau);
}
.kul-ort {
	margin: 0 0 1.75rem;
}
.kul-ort .kul-name {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--schloessli-holz);
}
.kul-ort .kul-satz {
	margin: 0 0 0.5rem;
	max-width: 42rem;
}
.kul-kontakt {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--tiroler-stein);
	letter-spacing: 0.01em;
}
.kul-kontakt a {
	color: var(--wp--preset--color--walnuss);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
.kul-kontakt a:hover {
	border-bottom-color: currentColor;
}
.kul-kontakt .kul-sep {
	margin: 0 0.5rem;
	color: var(--wp--preset--color--mittelgrau);
}
@media (max-width: 600px) {
	.kul-kontakt .kul-sep { display: none; }
	.kul-kontakt a { display: inline-block; margin-top: 0.2rem; }
}

/* ---------------------------------------------------------------
   Barrierefreiheit: sichtbarer Fokus
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--tannenschatten);
	outline-offset: 2px;
}

/* Skip-Link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--weiss);
	padding: 0.75rem 1.25rem;
}

.skip-link:focus {
	left: 0;
}

/* ===============================================================
   STARTSEITE — State of the Art, editorial, im CI
   =============================================================== */

/* Reveal-on-scroll. Ohne JS (kein .reveal-on auf <html>) bleibt alles sichtbar,
   das Einblenden ist nur Veredelung. reveal.js setzt .reveal-on und .is-visible. */
.reveal-on .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
/* Nach dem Einblenden die Compositor-Ebene wieder freigeben: dauerhaftes
   will-change auf Dutzenden Elementen machte das Scrollen auf grossen
   Screens (5K-iMac) stotterig — jede Ebene kostet bei jedem Frame. */
.reveal-on .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .reveal-on .reveal { opacity: 1; transform: none; transition: none; } }

/* Eyebrow / Kicker */
.eyebrow {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	margin: 0 0 1.25rem;
}
/* Vorangestellte Haarlinie (aus der Reisebüro-Präsentation) */
.eyebrow::before {
	content: "";
	display: inline-block;
	width: 2.6em;
	height: 1px;
	margin-right: 0.95em;
	background: currentColor;
	vertical-align: middle;
	opacity: 0.55;
}
.eyebrow.auf-dunkel { color: var(--ssl-akzent-hell-stark); }

/* Grosse stille Cormorant-Statements (Light, kursiv, das edle Register) */
.st-statement h2,
.st-statement .wp-block-heading {
	font-weight: 300;
	font-style: italic;
	font-size: clamp(2.1rem, 5.2vw, 3.5rem);
	line-height: 1.14;
	letter-spacing: 0;
	max-width: 24ch;
}

/* ---------------------------------------------------------------
   Hero mit Bildauflage (Crossfade, Klickpunkte, Logo, SEO-H1)
   --------------------------------------------------------------- */
.st-hero-wrap { margin: 0; }

/* Kapellen-Cover-Hero: Titel ist jetzt H2 (eine H1 pro Seite = der Post-Title).
   Grösse bleibt die der H1, damit der Hero optisch unverändert wirkt. */
.st-hero-page .wp-block-heading {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.12;
}
/* Letter-Spacing-Ausgleich: der nachlaufende Abstand hinter dem letzten
   Buchstaben schiebt zentrierte Caps-Zeilen minimal nach links (sichtbar bei
   umbrechenden Eyebrows wie "... · NESSELWÄNGLE"). padding-left in Hoehe des
   Letter-Spacings verschiebt den zentrierten Inhalt um die Haelfte zurueck. */
.st-hero-page .eyebrow {
	padding-left: 0.2em;
}
/* Im zentrierten Cover-Eyebrow stoert die vorangestellte Haarlinie die Mitte
   (sie sitzt nur links) -> hier weglassen, reiner zentrierter Text. */
.st-hero-page .eyebrow::before {
	display: none;
}
.st-hero {
	position: relative;
	display: flex;
	min-height: 100svh;
	overflow: hidden;
	background: var(--wp--preset--color--tannenschatten);
}
.hero-slides { position: absolute; inset: 0; }
/* Art-directed Lead-Slide (<picture>): Wrapper aus dem Layout nehmen, das innere
   img bleibt absolut positioniert wie die anderen Slides. */
.hero-slides .hero-lead { display: contents; }
.hero-slide {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

.hero-scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(20,33,26,.5) 0%, rgba(20,33,26,.1) 30%, rgba(20,33,26,.12) 60%, rgba(20,33,26,.72) 100%);
}
/* Logo lebt jetzt im Masthead; das Hero zeigt nur eine ruhige Zeile unten. */
.st-hero { align-items: flex-end; }
.hero-inner {
	position: relative; z-index: 2;
	margin: auto auto 6.5rem; /* unten, Bild atmet */
	max-width: 44rem; padding: 0 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--schnee);
}
/* Grosses, weisses Hero-Logo, leicht über der Mitte. Beim Scrollen blendet es
   aus und „wandert" als kleines Logo in die Leiste (siehe header.js: html.scrolled). */
.hero-logo-wrap {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	padding-bottom: 10vh;
	pointer-events: none;
}
/* Weicher, gezielter Schleier hinter dem Siegel, damit die feine Linienzeichnung
   liest — die Fotos bleiben an den Rändern voll lebendig. */
.hero-logo-wrap::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse 52% 46% at 50% 39%, rgba(20, 33, 26, 0.56), rgba(20, 33, 26, 0) 72%);
}
.hero-logo {
	position: relative;
	width: clamp(230px, 30vw, 420px);
	height: auto;
	filter: drop-shadow(0 3px 22px rgba(0, 0, 0, 0.55));
	transition: opacity 0.5s ease, transform 0.5s ease;
}
html.scrolled .hero-logo { opacity: 0; transform: translateY(-28px) scale(0.94); }
@media (prefers-reduced-motion: reduce) { .hero-logo { transition: none; } }
.hero-meta {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	opacity: 0.9; margin: 0 0 1rem;
}
.hero-sub {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300; font-style: italic;
	font-size: clamp(1.2rem, 2.5vw, 1.65rem); line-height: 1.5;
	opacity: 0.96; margin: 0 auto; max-width: 34rem;
	text-shadow: 0 1px 24px rgba(0,0,0,.5);
}
.hero-dots {
	position: absolute; left: 0; right: 0; bottom: 4.2rem;
	z-index: 3; display: flex; gap: 0; justify-content: center;
}
/* Sichtbarer Punkt bleibt zierlich (9px), die Trefferflaeche misst aber
   40x40px (nahe Apple-HIG 44pt, deutlich ueber WCAG-Minimum) -- Punkt per ::before. */
.hero-dot {
	width: 40px; height: 40px; padding: 0; border: 0; background: transparent;
	display: grid; place-items: center; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.hero-dot::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	border: 1px solid rgba(244,241,236,.7); background: transparent;
	transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.hero-dot:hover::before { background: rgba(244,241,236,.5); }
.hero-dot.is-active::before { background: var(--wp--preset--color--schnee); border-color: var(--wp--preset--color--schnee); transform: scale(1.2); }

.hero-cue {
	position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
	z-index: 3; color: var(--wp--preset--color--schnee); opacity: .8;
	animation: heroCue 2.4s ease-in-out infinite;
}
@keyframes heroCue { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }
@media (prefers-reduced-motion: reduce) { .hero-cue { animation: none; } }

/* Screenreader-only (SEO-H1 sichtbar im DOM, optisch verborgen) */
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 781px) {
	.st-hero { min-height: 100svh; }
	.hero-dots { bottom: 3.4rem; }
}

/* ---------------------------------------------------------------
   Sektions-Rhythmus
   --------------------------------------------------------------- */
.st-section {
	padding-block: clamp(3.2rem, 6.5vw, 6rem);
	/* Seitlicher Gutter: unter der Wide-Breite (76rem) klebte der Inhalt sonst
	   am Rand. Am Desktop schluckt die Wide-Zentrierung das Padding. */
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.st-section--tight { padding-block: clamp(2.4rem, 5vw, 4rem); }

/* ---------------------------------------------------------------
   Bild-Hover (langsames Zoom) für editorial-Figuren
   --------------------------------------------------------------- */
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 1.2s cubic-bezier(.2,.6,.2,1); display: block; width: 100%; }
.hover-zoom:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .hover-zoom img { transition: none; } .hover-zoom:hover img { transform: none; } }

/* ---------------------------------------------------------------
   Suiten-Vorschau (3 ausgewählte, editorial)
   --------------------------------------------------------------- */
.suiten-vorschau .wp-block-column { position: relative; }
.suiten-vorschau figure { margin: 0 0 1rem; }
.suiten-vorschau img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.suiten-vorschau h3 { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 700; font-size: 1.6rem; margin: 0 0 .15rem; }
.suiten-vorschau h3 a { text-decoration: none; }
.suiten-vorschau .suite-meta { font-size: .8rem; letter-spacing: .04em; color: var(--wp--preset--color--tiroler-stein); text-transform: uppercase; }

/* ---------------------------------------------------------------
   Editorial Media-Text (Morgen)
   --------------------------------------------------------------- */
.st-media h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.12; }
.st-media .wp-block-media-text__content { padding-inline: clamp(1rem, 4vw, 3.5rem); }
/* Gastgeber-Band + Halle-Band: Hochformat-Foto (4:5) ganz zeigen, kein Beschnitt. */
.st-gastgeber .wp-block-media-text__media,
.st-halle .wp-block-media-text__media { aspect-ratio: 4 / 5 !important; min-height: 0 !important; height: auto !important; }

/* Editorial-Versatz (Brenners-Ruhe, unsere bodenständige Seele): Bilder schweben
   mit Weißraum, weichem Schatten und klarem Höhenversatz zum Text. */
.st-intro .wp-block-media-text__media,
.st-halle .wp-block-media-text__media,
.st-gastgeber .wp-block-media-text__media { box-shadow: 0 22px 54px rgba(29, 48, 38, 0.17); }

/* Mobil: Bilder einrücken statt randbündig + mehr Luft -> luftiger, editorialer. */
@media (max-width: 781px) {
	.st-intro .wp-block-media-text__media,
	.st-halle .wp-block-media-text__media,
	.st-gastgeber .wp-block-media-text__media { margin: 0 1.1rem; width: auto; }
	.st-intro.wp-block-media-text,
	.st-halle.wp-block-media-text,
	.st-gastgeber.wp-block-media-text { padding-block: clamp(2.8rem, 10vw, 4rem); }
}

@media (min-width: 782px) {
	/* Schmaleres, schwebendes Bild = viel Weißraum daneben + mehr Luft oben/unten. */
	.st-intro.wp-block-media-text,
	.st-halle.wp-block-media-text { grid-template-columns: 40% auto !important; }
	.st-gastgeber.wp-block-media-text { grid-template-columns: auto 40% !important; }
	.st-intro.wp-block-media-text,
	.st-halle.wp-block-media-text,
	.st-gastgeber.wp-block-media-text { align-items: start; padding-block: clamp(3rem, 5vw, 5rem); }
	.st-intro .wp-block-media-text__media,
	.st-halle .wp-block-media-text__media,
	.st-gastgeber .wp-block-media-text__media {
		aspect-ratio: 4 / 5;
		align-self: start;
		margin-block: clamp(1.25rem, 2.5vw, 2rem);
	}
	.st-intro .wp-block-media-text__media,
	.st-halle .wp-block-media-text__media { margin-inline-start: clamp(2rem, 6vw, 5.5rem); }
	.st-gastgeber .wp-block-media-text__media { margin-inline-end: clamp(2rem, 6vw, 5.5rem); }
	.st-intro .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; }
	/* Text klar tiefer als das oben beginnende Bild = deutlicher Versatz. */
	.st-intro .wp-block-media-text__content,
	.st-halle .wp-block-media-text__content,
	.st-gastgeber .wp-block-media-text__content { align-self: start; padding-block-start: clamp(2.5rem, 5vw, 4.5rem); }

}

/* Sehr breite Schirme (grosse iMacs/Studio Displays): Die Editorial-Bänder
   nicht endlos aufspannen — Inhalt auf max. 100rem mittig, Text rückt näher
   ans Bild statt am linken Rand der riesigen Spalte zu kleben. Der bewusste
   Weissraum bleibt, aber Bild und Text bleiben ein Paar. */
@media (min-width: 1600px) {
	.st-intro.wp-block-media-text,
	.st-halle.wp-block-media-text,
	.st-gastgeber.wp-block-media-text {
		max-width: 100rem;
		margin-inline: auto;
	}
	.st-intro .wp-block-media-text__content,
	.st-halle .wp-block-media-text__content,
	.st-gastgeber .wp-block-media-text__content { padding-inline: clamp(3.5rem, 5vw, 6.5rem); }
}

/* ---------------------------------------------------------------
   Leitsatz-Band (Atempause): ruhige Kursiv-Zeile auf Creme
   --------------------------------------------------------------- */
.leitsatz-band { background: var(--wp--preset--color--schnee); }
.leitsatz {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
	padding-block: clamp(3.6rem, 9vw, 7.5rem);
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.leitsatz-mark {
	display: block;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(3rem, 7vw, 4.5rem);
	line-height: 0.4;
	color: var(--wp--preset--color--schloessli-holz);
	opacity: 0.4;
	margin-bottom: 1.1rem;
}
.leitsatz-text {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.55rem, 3.4vw, 2.5rem);
	line-height: 1.34;
	color: var(--wp--preset--color--tannenschatten);
	margin: 0;
	border: 0;
	padding: 0;
}
.leitsatz-quelle {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.76rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	margin: 1.6rem 0 0;
}

/* Meisterkurse-Teaser: stille Vorankündigung, mittig, viel Weissraum */
.meisterkurse-teaser { background: var(--wp--preset--color--schnee); scroll-margin-top: 5rem; }
/* Anker-Überschriften (#privat, #geschaeftlich, #meisterkurse) nicht unterm fixen Header verstecken */
.wp-block-heading[id] { scroll-margin-top: 5.5rem; }
.mk-teaser-hinweis a { color: inherit; text-underline-offset: 3px; }
.mk-teaser {
	max-width: 44rem;
	margin: 0 auto;
	text-align: center;
	padding-block: clamp(3.6rem, 9vw, 7rem);
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.mk-teaser-icon { display: block; margin: 0 auto 1.6rem; }
.mk-icon { display: block; width: 2.7rem; height: 2.7rem; margin: 0 auto; }
.mk-teaser .eyebrow { justify-content: center; display: inline-flex; align-items: center; }
.mk-teaser-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.18;
	color: var(--wp--preset--color--tannenschatten);
	margin: 0;
}
.mk-teaser-sub {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.2rem, 2.6vw, 1.65rem);
	line-height: 1.4;
	color: var(--wp--preset--color--schloessli-holz);
	margin: 1rem 0 0;
}
.mk-teaser-text {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--schloessli-holz);
	max-width: 34rem;
	margin: 1.5rem auto 0;
}
.mk-teaser-hinweis {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--mittelgrau);
	margin: 1.9rem 0 0;
}
/* Meisterkurs-Partner (Logo + Fach) unter dem Teaser */
.mk-partner { margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.mk-partner-label {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	margin: 0 0 1.3rem;
}
.mk-partner-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(1.6rem, 4vw, 3rem);
}
.mk-partner-item { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.mk-partner-logo { height: clamp(2.2rem, 4.5vw, 2.7rem); width: auto; }
.mk-partner-craft {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
}

/* ---------------------------------------------------------------
   Haus-Trio (Kapelle, Hausbar, Wellness)
   --------------------------------------------------------------- */
.haus-trio figure { margin: 0 0 .9rem; }
.haus-trio img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.haus-trio h3 { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 700; font-size: 1.5rem; margin: 0 0 .15rem; }
.haus-trio h3 a { text-decoration: none; }
.haus-trio p { font-size: .92rem; }

/* ---------------------------------------------------------------
   Voll-Bild-Band (Tal) mit Text
   --------------------------------------------------------------- */
.st-band.wp-block-cover { min-height: 78vh; }
.st-band h2 { font-weight: 400; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }
.st-band::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to right, rgba(29,48,38,.5), rgba(29,48,38,0) 60%);
	pointer-events: none;
}
.st-band .wp-block-cover__inner-container { position: relative; z-index: 1; }

/* Edler Textlink auf dunklen Bändern (ersetzt das frühere Gold) */
.textlink-hell {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--schnee);
	text-decoration: none;
	border-bottom: 1px solid rgba(244, 241, 236, 0.5);
	padding: 0.55rem 0 4px;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}
.textlink-hell:hover { border-bottom-color: var(--wp--preset--color--schnee); opacity: 0.85; }

/* ---------------------------------------------------------------
   Abschluss-CTA
   --------------------------------------------------------------- */
.st-cta { background: var(--wp--preset--color--tannenschatten); color: var(--wp--preset--color--schnee); }
.st-cta h2 { color: var(--wp--preset--color--schnee); font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 3rem); }
.st-cta .eyebrow { color: var(--ssl-akzent-hell-stark); }
/* Abschluss-CTA und Footer sind beide Tannenschatten und stossen aneinander.
   Ihre Paddings stapelten sich zu einer grossen Leere. Untere CTA-Polsterung
   gezielt kuerzen (nur Startseite), der Footer-Kopf traegt den Rest. */
.st-section.st-cta { padding-block-end: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ===============================================================
   RESPONSIVE & MOBILES MENÜ
   =============================================================== */

/* ===============================================================
   NAVIGATIONS-OVERLAY — ruhig, zentriert (Brenners-Register), ALLE Breiten
   =============================================================== */
html.nav-open, html.nav-open body { overflow: hidden; }

/* backdrop-filter am Header erzeugt sonst einen Containing-Block und sperrt das
   fixed-Overlay in die Kopfhöhe ein – beim Öffnen abschalten. */
html.nav-open .site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Beim Öffnen weichen Leisten-Burger und -Logo dem Overlay (X liegt links im Menü) */
html.nav-open .nav-toggle, html.nav-open .header-logo { opacity: 0; pointer-events: none; }

html.nav-open .hauptnav {
	display: block;
	position: fixed; inset: 0; z-index: 100000;
	/* Sauberes Brenners-Register: ruhiger, voller Creme-Grund, klare Spalten,
	   das Bild rechts voll und unangeschnitten. */
	background: var(--wp--preset--color--schnee);
	overflow-y: auto;
	animation: navFade 0.4s ease;
}
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.nav-open .hauptnav { animation: none; } }

/* Drei-Spalten-Raster (Brenners): Tagesreise | Unterpunkte | Bild */
.nav-grid {
	display: grid;
	/* Navigation links, Unterpunkte dicht daneben (schmal), grosse Bildbühne rechts. */
	grid-template-columns: clamp(16rem, 21vw, 20rem) clamp(14rem, 18vw, 17rem) 1fr;
	min-height: 100vh; min-height: 100svh;
}

/* LINKS: Marke (Name trägt), Tagesreise, Sekundär, Kontakt */
.nav-col-main {
	grid-column: 1 / 2; grid-row: 1;
	box-sizing: border-box;
	position: relative; z-index: 3;
	display: flex; flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.8rem, 3.5vw, 3.4rem) clamp(1.8rem, 3vw, 2.6rem);
}
.nav-col-main * { box-sizing: border-box; }
.nav-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: clamp(1.2rem, 3vh, 2.4rem); }
.nav-brand img { height: 50px; width: auto; display: block; }
.nav-close {
	background: none; border: 0; cursor: pointer; padding: 0.4rem; margin: -0.2rem -0.3rem 0 0;
	color: var(--wp--preset--color--tiroler-stein);
	transition: color 0.2s ease, transform 0.3s ease;
}
.nav-close:hover { color: var(--wp--preset--color--tannenschatten); transform: rotate(90deg); }

.nav-overlay-eyebrow {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau); margin: 0 0 0.8rem;
}

/* Zusaetzlicher Buchen-CTA als oberster Punkt im Menue-Overlay (Pille wie .header-buchen) */
.nav-buchen {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap;
	color: var(--wp--preset--color--schnee);
	background: var(--wp--preset--color--tannenschatten);
	border: 1px solid var(--wp--preset--color--tannenschatten);
	padding: 0.7rem 1.4rem; border-radius: 999px;
	margin: 0 0 0.7rem;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.nav-buchen:hover {
	background: var(--wp--preset--color--schloessli-holz);
	border-color: var(--wp--preset--color--schloessli-holz);
	color: var(--wp--preset--color--schnee);
}
.nav-buchen-links {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; letter-spacing: 0.01em;
	color: var(--wp--preset--color--tiroler-stein);
	margin: 0 0 clamp(1.4rem, 3vh, 2.2rem);
}
.nav-buchen-links a {
	color: var(--wp--preset--color--tannenschatten); text-decoration: none;
	border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.nav-buchen-links a:hover { border-bottom-color: currentColor; }

.nav-tag { list-style: none; margin: 0 0 auto; padding: 0; }
.nav-tag-item { border-top: 1px solid var(--wp--preset--color--hellgrau); }
.nav-tag-item:last-child { border-bottom: 1px solid var(--wp--preset--color--hellgrau); }
.nav-tag-row { position: relative; display: flex; align-items: center; }
.nav-tag-thumb { display: none; }
.nav-tag-link { display: block; text-decoration: none; padding: clamp(0.45rem, 1.3vh, 0.78rem) 0; flex: 1; }
.nav-kicker {
	display: block; font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.56rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau); margin-bottom: 0.18rem;
	transition: color 0.2s ease;
}
.nav-name {
	display: inline-block; font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300; line-height: 1.05; font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	color: var(--wp--preset--color--schloessli-holz);
	border-bottom: 1px solid transparent; padding-bottom: 2px;
	transition: color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.nav-tag-item.is-active .nav-kicker { color: var(--wp--preset--color--tannenschatten); }
.nav-tag-item.is-active .nav-name { border-bottom-color: var(--wp--preset--color--schloessli-holz); }
.nav-tag-link:hover .nav-name { opacity: 0.6; }

.nav-sub-toggle {
	background: none; border: 0; cursor: pointer; padding: 0.5rem;
	color: var(--wp--preset--color--tiroler-stein);
	transition: transform 0.3s ease, color 0.2s ease;
}
.nav-sub-toggle:hover { color: var(--wp--preset--color--tannenschatten); }
.nav-sub { list-style: none; margin: 0; padding: 0 0 0.8rem; }
.nav-sub a {
	display: block; text-decoration: none; font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; letter-spacing: 0.05em; color: var(--wp--preset--color--tiroler-stein);
	padding: 0.36rem 0; transition: color 0.2s ease;
}
.nav-sub a:hover { color: var(--wp--preset--color--tannenschatten); }

.nav-mehr {
	list-style: none; margin: clamp(1.5rem, 3vh, 2.2rem) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; column-gap: 1.4rem; row-gap: 0.6rem;
}
.nav-mehr a {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.64rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein); text-decoration: none; transition: color 0.2s ease;
}
.nav-mehr a:hover { color: var(--wp--preset--color--tannenschatten); }

.nav-overlay-kontakt {
	margin: 1.3rem 0 0; padding-top: 1.2rem;
	border-top: 1px solid var(--wp--preset--color--hellgrau);
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem; letter-spacing: 0.06em; color: var(--wp--preset--color--tiroler-stein);
}
.nav-overlay-kontakt a { color: var(--wp--preset--color--tiroler-stein); text-decoration: none; }
.nav-overlay-kontakt a:hover { color: var(--wp--preset--color--tannenschatten); }
.nav-overlay-kontakt span { margin: 0 0.5rem; opacity: 0.5; }

/* MITTE: Unterpunkte/Beschreibung des aktiven Reiters.
   Leer (beim Öffnen) blendet die Spalte mit dem Schnee-Grund — es ist erst nur
   die linke Rubrik sichtbar; Mitte + Bild erscheinen beim Drüberfahren. */
.nav-col-panel {
	grid-column: 2 / 3; grid-row: 1;
	position: relative; z-index: 2;
	/* Sanfter Schnee-Schleier: links satt (Anschluss an die Navigation), nach rechts
	   leichter, sodass das Bild dahinter dezent durchschimmert. */
	background: linear-gradient( to right, rgba(244,241,236,0.95) 0%, rgba(244,241,236,0.86) 55%, rgba(244,241,236,0.62) 100% );
	display: flex; align-items: flex-start; /* Inhalt oben; JS setzt padding-top = Reiterhöhe */
	padding: clamp(1.6rem, 3vh, 2.6rem) clamp(0.9rem, 1.6vw, 1.6rem);
}
.nav-panel { display: none; }
/* Zweite Ebene erscheint erst beim Hover, ruhig auf dem Creme-Grund (gut lesbar,
   keine Karte, kein Frost). */
.nav-panel.is-active { display: block; animation: navFade 0.4s ease; }
.nav-panel-head {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--wp--preset--color--tannenschatten); margin: 0 0 1.1rem;
}
.nav-panel-links { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.nav-panel-links a {
	display: block; text-decoration: none; white-space: normal;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300; font-size: 0.96rem; line-height: 1.25;
	color: var(--wp--preset--color--schloessli-holz);
	padding: 0.22rem 0; transition: opacity 0.2s ease;
}
.nav-panel-links a:hover { opacity: 0.55; }
.nav-panel-text {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300; font-style: italic; font-size: 1.1rem; line-height: 1.4;
	color: var(--wp--preset--color--schloessli-holz); margin: 0 0 1.4rem;
}
.nav-panel-discover {
	display: inline-block; text-decoration: none;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.58rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--tannenschatten);
	border-bottom: 1px solid var(--wp--preset--color--tannenschatten); padding-bottom: 4px;
	transition: opacity 0.2s ease;
}
.nav-panel-discover:hover { opacity: 0.6; }

/* RECHTS: Bildbühne — Bild zum Reiter, bei Suiten als langsame Bilderfolge */
.nav-col-image { grid-column: 2 / 4; grid-row: 1; z-index: 0; display: block; position: relative; overflow: hidden; background: transparent; cursor: pointer; }
.nav-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; }
.nav-stage-img.is-active { opacity: 1; }

/* Desktop: Akkordeon-Pfeil und Inline-Unterliste entfallen (Suiten leben in der Mitte) */
@media (min-width: 901px) {
	.nav-sub, .nav-sub-toggle { display: none; }
	/* Reiter mit Unterpunkten dezent kennzeichnen: kleiner Winkel hinter dem Namen */
	/* Winkel mit geschütztem Leerzeichen ans letzte Wort gebunden — bricht nie
	   allein in die nächste Zeile um (war bei "St. Antonius" der Fall). */
	.nav-tag-item.has-children .nav-name::after {
		content: '\00a0\00a0›';
		color: var(--wp--preset--color--schloessli-holz);
		opacity: 0.55;
		transition: opacity 0.2s ease;
	}
	.nav-tag-item.has-children.is-active .nav-name::after { opacity: 1; }
}

/* Mobil: eine Spalte, Mitte + Bild aus, Untermenü als Akkordeon */
@media (max-width: 900px) {
	.nav-grid { grid-template-columns: 1fr; min-height: auto; }
	.nav-col-panel, .nav-col-image { display: none; }
	.nav-col-main { min-height: 100svh; padding: clamp(1.4rem,4vw,2rem) clamp(1.6rem,6vw,2.4rem) calc(2.5rem + env(safe-area-inset-bottom,0px)); }
	/* Schrift nahtlos an die Desktop-Groesse (floort bei ~1.7rem) anschliessen,
	   statt am 900px-Breakpoint auf 2.4rem hochzuspringen -- sonst wirkt das Menue
	   beim Verkleinern des Desktop-Fensters ploetzlich plump. */
	.nav-name { font-size: clamp(1.55rem, 5vw, 1.8rem); }
	.nav-tag-item.is-sub-open .nav-sub-toggle { transform: rotate(180deg); }
	/* Mobil: jeder Menuepunkt bekommt ein kleines Vorschaubild daneben
	   (Desktop nutzt die Hover-Bildbuehne, die hier ausgeblendet ist). */
	.nav-tag-thumb {
		display: block;
		flex: none;
		width: 3.6rem;
		height: 2.7rem;
		margin-right: 1rem;
		border-radius: 3px;
		overflow: hidden;
		background: var(--wp--preset--color--hellgrau);
	}
	.nav-tag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* Kompakte Schirme: noch etwas kleineres Leisten-Logo */
@media (max-width: 600px) {
	.site-header .header-logo img { height: 42px; }
}

/* Hero: svh gegen mobile Browserleisten, etwas niedriger auf kleinen Schirmen */
.st-hero.wp-block-cover { min-height: 90svh; }
.st-band.wp-block-cover { min-height: 78svh; }
@media (max-width: 781px) {
	.st-hero.wp-block-cover { min-height: 82svh; }
	.st-hero h1 { font-size: clamp(2.3rem, 9vw, 3.1rem); }
	.st-hero .hero-sub { font-size: 0.98rem; }
	.st-band.wp-block-cover { min-height: 60svh; }
	.st-band h2 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
}

/* Sektions-Rhythmus + grosse Statements auf Mobil knapper */
@media (max-width: 600px) {
	/* Einheitlicher, knapper Sektions-Rhythmus auf Mobil. Vorher stapelten sich
	   an jeder Naht zwei Paddings + ein Block-Abstand zu ~100px Leere; media-text
	   floatete sein Bild zusaetzlich in Luft. Jetzt: gleiche, knappe Polsterung
	   fuer alle Sektionen und kein doppelter Abstand zwischen ihnen. */
	.st-section,
	.st-media.wp-block-media-text { padding-block: clamp(1.9rem, 6.5vw, 2.9rem); }
	body.home #inhalt > .wp-block-post-content > * { margin-block-start: 0; }
	/* "Das Haus"-Galerie: erste Karte mittig unter der zentrierten Ueberschrift.
	   Section-Padding (~20px) + Spur-Padding (~16px) stapelten sich links, rechts
	   blieben nur ~23px Peek -> Bild wirkte nach rechts versetzt. Section-Inline-
	   Padding raus, Spur-Padding = halbe Rest-Breite (links = rechts = 8vw). */
	.st-section:has( .hscroll ) { padding-inline: 0; }
	.st-section .hscroll-block { --hscroll-pad: 8vw; }
	.st-statement h2,
	.st-statement .wp-block-heading { font-size: clamp(1.9rem, 8.5vw, 2.5rem); max-width: 18ch; }
	.st-media h2,
	.suiten-vorschau ~ * h2,
	.haus-trio h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
}

/* Morgen-Media-Text: Bildhöhe beim Stapeln, Textpolster */
@media (max-width: 781px) {
	.st-media.wp-block-media-text { grid-template-columns: 1fr !important; }
	.st-media.wp-block-media-text .wp-block-media-text__media { min-height: 64vw; grid-row: 1; }
	.st-media .wp-block-media-text__content { padding: 2.5rem 1.4rem 0.5rem; }
}

/* Landscape-Phones (breit, aber kurz): Media-Text sauber stapeln (Flex statt Grid,
   damit die Inhaltsspalte nicht auf 0 gequetscht und das Bild auf die hohe Zeile
   gestreckt wird) und die Bildhoehe an den (kurzen) Viewport koppeln. */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
	.st-media.wp-block-media-text { display: flex !important; flex-direction: column; }
	.st-media.wp-block-media-text > .wp-block-media-text__media { height: 50svh !important; min-height: 0 !important; }

	/* Querformat-Telefon: zu wenig Höhe -> Logo sass auf Meta/Untertitel.
	   Logo schrumpfen, Abstände stauchen, Scroll-Pfeil weg. */
	.hero-logo { width: clamp(108px, 17vw, 150px); }
	.hero-logo-wrap { padding-bottom: 6vh; }
	.hero-inner { margin-bottom: 1.8rem; }
	.hero-meta { font-size: 0.72rem; margin-bottom: 0.45rem; }
	.hero-sub { font-size: 1rem; line-height: 1.4; max-width: 30rem; }
	.hero-dots { bottom: 1rem; }
	.hero-cue { display: none; }
}

/* Editorial-Spalten (Suiten-Vorschau, Haus-Trio): mehr Abstand beim Stapeln */
@media (max-width: 781px) {
	.suiten-vorschau.wp-block-columns,
	.haus-trio.wp-block-columns { gap: 2.5rem; }
	.suiten-vorschau img { aspect-ratio: 3 / 2; }
	.haus-trio img { aspect-ratio: 3 / 2; }
}

/* ===============================================================
   FAKTEN-BAND, TABLET-RESPONSIVE
   =============================================================== */

/* Fakten-Band auf Tannenschatten (Das Haus auf einen Blick) */
.st-fakten { background: var(--wp--preset--color--tannenschatten); }
.st-fakten h2 { color: var(--wp--preset--color--schnee); font-weight: 300; font-size: clamp(2rem, 4vw, 2.9rem); }
.fakten-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.6rem 3.5rem;
	margin-top: clamp(2.2rem, 4vw, 3.4rem);
	/* Ohne alignwide erbt der Block die schmale contentSize (44rem) — auf
	   grossen Schirmen huschten die sechs Fakten in einer 700px-Insel im
	   dunklen Vollbreite-Band. Auf Wide-Breite ziehen, wie die Überschrift. */
	max-width: var(--wp--style--global--wide-size, 76rem);
	margin-inline: auto;
}
.fakt { border-top: 1px solid rgba(244, 241, 236, 0.26); padding-top: 1.1rem; }
.fakt-num {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300; line-height: 1;
	font-size: clamp(2.3rem, 4vw, 3.1rem);
	color: var(--wp--preset--color--schnee);
}
.fakt-lab {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem; line-height: 1.55;
	color: rgba(244, 241, 236, 0.74);
	margin-top: 0.7rem;
}
@media (max-width: 781px) { .fakten-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.4rem; } }

/* Tablet: 3-spaltige Editorial-Sektionen auf 2 Spalten brechen (statt gequetscht) */
@media (max-width: 980px) and (min-width: 782px) {
	.suiten-vorschau.wp-block-columns,
	.haus-trio.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.suiten-vorschau.wp-block-columns > .wp-block-column,
	.haus-trio.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 1rem) !important;
		flex-grow: 1;
	}
}

/* ===============================================================
   MASTHEAD MOBIL: Logo zentriert, Hamburger oben rechts
   =============================================================== */
@media (max-width: 781px) {
	.site-header .header-innen { padding: 0.9rem 1.1rem; }
}

/* ===============================================================
   COOKIE-CONSENT (markenkonform, DSGVO/ePrivacy)
   =============================================================== */
.cc-banner {
	position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
	z-index: 200;
	max-width: 64rem; margin: 0 auto;
	background: var(--wp--preset--color--schnee);
	color: var(--wp--preset--color--tiroler-stein);
	border: 1px solid var(--wp--preset--color--hellgrau);
	box-shadow: 0 12px 40px rgba(29, 48, 38, 0.22);
}
.cc-inner {
	display: flex; align-items: center; gap: 1.6rem;
	padding: 1.4rem 1.6rem;
}
.cc-title {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: 1.4rem; line-height: 1.1;
	color: var(--wp--preset--color--schloessli-holz);
	margin: 0 0 0.3rem;
}
.cc-body { font-size: 0.86rem; line-height: 1.55; margin: 0; max-width: 42rem; }
.cc-actions { display: flex; gap: 0.6rem; flex-shrink: 0; flex-wrap: wrap; }
.cc-actions-modal { margin-top: 1.6rem; justify-content: flex-end; }

.cc-btn {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
	padding: 0.8rem 1.3rem; border-radius: 0; cursor: pointer;
	border: 1px solid var(--wp--preset--color--tannenschatten);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}
.cc-ghost { background: transparent; color: var(--wp--preset--color--tannenschatten); }
.cc-ghost:hover { background: var(--wp--preset--color--hellgrau); }
.cc-solid { background: var(--wp--preset--color--tannenschatten); color: var(--wp--preset--color--schnee); }
.cc-solid:hover { background: var(--wp--preset--color--schloessli-holz); border-color: var(--wp--preset--color--schloessli-holz); }

/* Modal (hidden-Attribut hat Vorrang, sonst läge es unsichtbar über der Seite) */
.cc-banner[hidden], .cc-modal[hidden] { display: none !important; }
.cc-modal { position: fixed; inset: 0; z-index: 210; align-items: center; justify-content: center; padding: 1.2rem; }
.cc-modal:not([hidden]) { display: flex; }
.cc-backdrop { position: absolute; inset: 0; background: rgba(20, 33, 26, 0.5); }
.cc-card {
	position: relative; z-index: 1;
	width: 100%; max-width: 34rem; max-height: 88vh; overflow-y: auto;
	background: var(--wp--preset--color--schnee);
	padding: 2rem 1.9rem;
	box-shadow: 0 18px 50px rgba(29, 48, 38, 0.32);
}
.cc-sub { font-size: 0.86rem; line-height: 1.55; margin: 0.4rem 0 1.4rem; color: var(--wp--preset--color--tiroler-stein); }
.cc-cat {
	display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
	padding: 1rem 0; border-top: 1px solid var(--wp--preset--color--hellgrau);
	cursor: pointer;
}
.cc-cat:last-of-type { border-bottom: 1px solid var(--wp--preset--color--hellgrau); }
.cc-cat-text strong { display: block; font-size: 0.95rem; color: var(--wp--preset--color--tannenschatten); font-weight: 600; }
.cc-cat-text span { display: block; font-size: 0.8rem; line-height: 1.5; color: var(--wp--preset--color--tiroler-stein); margin-top: 0.2rem; }
.cc-check { position: absolute; opacity: 0; pointer-events: none; }

/* Schalter */
.cc-switch {
	flex-shrink: 0; width: 42px; height: 24px; border-radius: 999px;
	background: var(--wp--preset--color--mittelgrau); position: relative;
	transition: background 0.2s ease;
}
.cc-switch::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--wp--preset--color--schnee); transition: transform 0.2s ease;
}
.cc-check:checked ~ .cc-switch { background: var(--wp--preset--color--tannenschatten); }
.cc-check:checked ~ .cc-switch::after { transform: translateX(18px); }
.cc-check:focus-visible ~ .cc-switch { outline: 2px solid var(--wp--preset--color--tannenschatten); outline-offset: 2px; }
.cc-switch.is-on { background: var(--wp--preset--color--tannenschatten); }
.cc-switch.is-on::after { transform: translateX(18px); }
.cc-switch.is-locked { opacity: 0.6; }

html.cc-modal-open { overflow: hidden; }

@media (max-width: 700px) {
	.cc-inner { flex-direction: column; align-items: stretch; gap: 1.1rem; }
	.cc-actions { justify-content: stretch; }
	.cc-btn { flex: 1; text-align: center; }
	.cc-banner { left: 0; right: 0; bottom: 0; }
}

/* ===============================================================
   SMOOTH SCROLL (Lenis) — fliessendes Scrollgefühl
   =============================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Anker springen nicht hart, wo Lenis nicht greift */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ===============================================================
   HORIZONTALE SCROLL-GALERIE (Apple-Stil) — Suiten & Haus
   =============================================================== */
/* Galerie spannt über die ganze Seite (kleine Randzone, full-bleed-Wirkung) */
.hscroll-block { --hscroll-pad: clamp(1.2rem, 4vw, 3rem); }
.hscroll-head {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
	padding-inline: var(--hscroll-pad);
	margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.hscroll-head .eyebrow { margin-bottom: 1rem; }
.hscroll-intro { font-size: 0.95rem; line-height: 1.6; color: var(--wp--preset--color--tiroler-stein); margin: 0.9rem 0 0; max-width: 48ch; }
.hscroll-head h2 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	color: var(--wp--preset--color--schloessli-holz);
	font-weight: 300; line-height: 1.1; margin: 0;
	font-size: clamp(1.9rem, 4vw, 2.8rem);
}
.hscroll-nav { display: flex; gap: 0.6rem; flex-shrink: 0; }
.hscroll-arrow {
	width: 48px; height: 48px; border-radius: 50%;
	border: 1px solid rgba(74, 55, 40, 0.22); background: transparent;
	color: var(--wp--preset--color--schloessli-holz); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
/* Pfeil-Chevrons im Marken-Linienstil: gerundet, etwas kräftiger, Walnussfarbe. */
.hscroll-arrow svg { stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.hscroll-arrow:hover { background: var(--wp--preset--color--schloessli-holz); color: var(--wp--preset--color--schnee); border-color: var(--wp--preset--color--schloessli-holz); }
.hscroll-arrow[disabled] { opacity: 0.3; cursor: default; }
.hscroll-arrow[disabled]:hover { background: transparent; color: var(--wp--preset--color--schloessli-holz); border-color: rgba(74, 55, 40, 0.22); }

/* Suiten-Karten: Bett-/Couch-Icon neben m² (weiß im Bild-Overlay). */
.ed-carousel .hscroll-card-feat { display: flex; align-items: center; gap: 0.7rem; margin: 0.2rem 0 0; }
.ed-carousel .hscroll-card-feat .hscroll-card-meta { margin: 0; }
.ed-carousel .card-belegung { display: inline-flex; align-items: center; gap: 0.4rem; }
.ed-carousel .card-ic { width: 21px; height: 21px; display: block; }
.ed-carousel .card-ic, .ed-carousel .card-ic * { stroke: var(--wp--preset--color--schnee); }

.hscroll {
	display: flex; gap: 1.4rem;
	overflow-x: auto;
	/* proximity statt mandatory + KEIN scroll-behavior:smooth: mandatory rastet
	   bei jedem Rad-/Trackpad-Tick zwangsweise ein und smooth animiert jede
	   kleine Bewegung obendrauf — zusammen ergab das Stottern beim freien
	   Scrollen. Die Pfeile animieren weiterhin über hscroll.js. */
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: none; -ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding-inline: var(--hscroll-pad);
	scroll-padding-inline: var(--hscroll-pad);
}
/* Maus/Trackpad (feiner Zeiger): ganz ohne Snap-Magnet — auch proximity zieht
   beim freien Rechts-Scrollen spuerbar in Stufen (Befund Matthias 25.07.2026).
   Am Touch-Geraet bleibt das Einrasten, dort fuehlt es sich richtig an;
   die Pfeile richten Karten ohnehin per JS aus. */
@media (hover: hover) and (pointer: fine) {
	.hscroll { scroll-snap-type: none; }
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll-card {
	flex: 0 0 clamp(300px, 40vw, 580px);
	scroll-snap-align: start;
	text-decoration: none; color: inherit;
	display: flex; flex-direction: column;
}
.hscroll-card-img { display: block; overflow: hidden; aspect-ratio: 4 / 5; }
.hscroll-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hscroll-card-name {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: 1.5rem; line-height: 1.15;
	color: var(--wp--preset--color--schloessli-holz);
	margin-top: 1rem;
}
.hscroll-card:hover .hscroll-card-name { color: var(--wp--preset--color--tannenschatten); }
.hscroll-card-meta {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein); margin-top: 0.3rem;
}
.hscroll-foot { padding-inline: var(--hscroll-pad); margin-top: clamp(1.8rem, 3vw, 2.4rem); }

@media (max-width: 781px) {
	.hscroll-nav { display: none; } /* mobil: nativ wischen */
	.hscroll-card { flex-basis: 84vw; }
	.hscroll-card-meta { white-space: normal; }
}

/* ---- Suiten-Vorschau im Brenners-Schema: Titelblock links, große hohe Karten
   rechts, Suitenname unten im Bild. Gescoped auf .ed-carousel. ---- */
.ed-head { padding-inline: var(--hscroll-pad); }
.ed-head .eyebrow { margin-bottom: 1rem; }
.ed-head h2 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	color: var(--wp--preset--color--schloessli-holz);
	font-weight: 300; line-height: 1.06; margin: 0;
	font-size: clamp(2.2rem, 4.6vw, 3.5rem);
}
.ed-head .hscroll-nav { margin: 1.5rem 0 0; }
.ed-head .hscroll-intro { margin: 1.4rem 0 0; max-width: 36ch; }
.ed-head .hscroll-foot { padding: 0; margin-top: 1.6rem; }
.ed-head .hscroll-foot a { text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--wp--preset--font-family--mulish); font-size: 0.8rem; border-bottom: 1px solid var(--wp--preset--color--hellgrau); padding-bottom: 0.35rem; }

/* Karten höher + Name im Bild (statt darunter). */
.ed-carousel .hscroll-card-img { position: relative; aspect-ratio: 3 / 4; }
.ed-carousel .hscroll-card-cap {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: 1.5rem 1.4rem 1.3rem;
	background: linear-gradient(transparent, rgba(20, 33, 26, 0.62));
	display: flex; flex-direction: column; gap: 0.1rem;
	pointer-events: none;
}
.ed-carousel .hscroll-card-name {
	color: var(--wp--preset--color--schnee); margin: 0;
	font-size: clamp(1.45rem, 1.9vw, 2rem); font-weight: 400;
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}
.ed-carousel .hscroll-card:hover .hscroll-card-name { color: var(--wp--preset--color--schnee); }
.ed-carousel .hscroll-card-meta {
	color: rgba(244, 241, 236, 0.85); margin: 0.15rem 0 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* Desktop: zweispaltig — Titel links, Karussell rechts (bleed nach rechts). */
@media (min-width: 900px) {
	.ed-carousel {
		display: grid;
		grid-template-columns: minmax(13rem, 28%) 1fr;
		align-items: center;
		gap: clamp(1.5rem, 3vw, 3.5rem);
	}
	.ed-head { padding-left: clamp(1.5rem, 5vw, 4rem); padding-right: 0; }
	.ed-carousel .hscroll { --hscroll-pad: 0; padding-inline: 0; }
	.ed-carousel .hscroll-card { flex-basis: clamp(300px, 30vw, 460px); }
}

/* ===============================================================
   GALERIE-BLÖCKE RESPONSIV: auf dem Handy 1 Spalte (grosse Bilder
   statt gequetschter Mini-Kacheln), auf Tablet 2 Spalten.
   =============================================================== */
@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.columns-2 .wp-block-image,
	.wp-block-gallery.has-nested-images.columns-3 .wp-block-image,
	.wp-block-gallery.has-nested-images.columns-4 .wp-block-image {
		width: 100% !important;
	}
}
@media (min-width: 601px) and (max-width: 900px) {
	.wp-block-gallery.has-nested-images.columns-3 .wp-block-image,
	.wp-block-gallery.has-nested-images.columns-4 .wp-block-image {
		width: calc(50% - var(--wp--style--gallery-gap-default, 16px)) !important;
	}
}

/* ===============================================================
   BILD-LIGHTBOX (Galerie) — ruhig, dezente weisse Pfeile
   =============================================================== */
.ssl-lightbox {
	position: fixed; inset: 0; z-index: 300;
	display: flex; align-items: center; justify-content: center;
	gap: clamp(0.4rem, 3vw, 2rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(20, 33, 26, 0.94);
	animation: navFade 0.3s ease;
}
.ssl-lightbox[hidden] { display: none; }
html.ssl-lb-open { overflow: hidden; }
.ssl-lb-stage {
	margin: 0; display: flex; flex-direction: column; align-items: center;
	max-width: min(92vw, 1180px); max-height: 88vh;
}
.ssl-lb-stage img {
	max-width: 100%; max-height: 82vh; object-fit: contain; display: block;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.ssl-lb-cap {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.5;
	color: rgba(244, 241, 236, 0.78); margin-top: 1rem; text-align: center; max-width: 60ch;
}
.ssl-lb-arrow, .ssl-lb-close {
	background: none; border: 0; color: var(--wp--preset--color--schnee);
	cursor: pointer; opacity: 0.66; line-height: 1;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.ssl-lb-arrow:hover, .ssl-lb-close:hover { opacity: 1; }
.ssl-lb-arrow { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 300; flex-shrink: 0; padding: 0.4rem 0.6rem; }
.ssl-lb-arrow:hover { transform: scale(1.08); }
.ssl-lb-close { position: absolute; top: 1.1rem; right: 1.4rem; font-size: 2.3rem; font-weight: 300; }
@media (max-width: 600px) {
	.ssl-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
	.ssl-lb-prev { left: 0.2rem; }
	.ssl-lb-next { right: 0.2rem; }
	.ssl-lb-arrow:hover { transform: translateY(-50%); }
}

/* ===============================================================
   BROSCHÜRE — Buchladen-Register (online ansehen / PDF laden)
   =============================================================== */
.broschuere {
	display: grid; grid-template-columns: minmax(220px, 320px) 1fr;
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
	max-width: 60rem; margin: 2rem auto;
}
/* Mehrere Broschüren untereinander, dezent getrennt */
.broschuere-liste .broschuere + .broschuere {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: clamp(2.5rem, 6vw, 4rem);
	border-top: 1px solid var(--wp--preset--color--hellgrau);
}
/* Gestaltetes Buchcover: Wortmarke auf Tannenschatten, kein Foto (wirkt edel statt altbacken) */
.broschuere-cover {
	position: relative; text-decoration: none;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(1.6rem, 4vw, 2.6rem);
	aspect-ratio: 3 / 4; padding: 2rem;
	background: var(--wp--preset--color--tannenschatten);
	box-shadow: 0 18px 50px rgba(29, 48, 38, 0.28);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.broschuere-cover:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(29, 48, 38, 0.34); }
.broschuere-cover-logo { width: 68%; max-width: 230px; height: auto; }
.broschuere-cover-label {
	display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--ssl-akzent-hell); text-align: center;
}
.broschuere-cover-label span { font-size: 0.78rem; letter-spacing: 0.34em; color: var(--wp--preset--color--schnee); }
.broschuere-titel { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 0.6rem; color: var(--wp--preset--color--schloessli-holz); }
.broschuere-sub { font-size: 0.98rem; line-height: 1.6; margin: 0 0 1.6rem; max-width: 40ch; }
.broschuere-aktionen { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.broschuere-btn {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	text-decoration: none; padding: 0.85rem 1.5rem; border: 1px solid var(--wp--preset--color--tannenschatten);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.broschuere-btn--solid { background: var(--wp--preset--color--tannenschatten); color: var(--wp--preset--color--schnee); }
.broschuere-btn--solid:hover { background: var(--wp--preset--color--schloessli-holz); border-color: var(--wp--preset--color--schloessli-holz); }
.broschuere-btn--ghost { background: transparent; color: var(--wp--preset--color--tannenschatten); }
.broschuere-btn--ghost:hover { background: var(--wp--preset--color--tannenschatten); color: var(--wp--preset--color--schnee); }
@media (max-width: 600px) {
	.broschuere { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.broschuere-cover { max-width: 260px; }
	.broschuere-sub { margin-left: auto; margin-right: auto; }
	.broschuere-aktionen { justify-content: center; }
}

/* ===============================================================
   RECHTSTEXTE (Impressum, Datenschutz, AGB) — ruhig, gut lesbar
   =============================================================== */
.rechtstext { max-width: 52rem; margin: 0 auto; }
.rechtstext h2 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.2;
	color: var(--wp--preset--color--schloessli-holz);
	margin: 2.4rem 0 0.8rem;
}
.rechtstext h3 {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
	color: var(--wp--preset--color--tannenschatten); margin: 1.4rem 0 0.4rem;
}
.rechtstext p { font-size: 0.94rem; line-height: 1.7; color: var(--wp--preset--color--tiroler-stein); margin: 0 0 0.9rem; max-width: 68ch; }
.rechtstext a { color: var(--wp--preset--color--tannenschatten); }
.rechtstext-stand { font-size: 0.8rem !important; letter-spacing: 0.04em; color: var(--wp--preset--color--mittelgrau) !important; }
.rechtstext-anschrift { font-style: normal; font-size: 0.95rem; line-height: 1.7; color: var(--wp--preset--color--tiroler-stein); margin: 0 0 1.6rem; }
.rechtstext-anschrift a { color: var(--wp--preset--color--tannenschatten); text-decoration: none; }
.rechtstext-fakten { display: grid; grid-template-columns: minmax(11rem, 16rem) 1fr; gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; font-size: 0.9rem; }
.rechtstext-fakten dt { font-family: var(--wp--preset--font-family--mulish); font-weight: 600; color: var(--wp--preset--color--tannenschatten); }
.rechtstext-fakten dd { margin: 0; color: var(--wp--preset--color--tiroler-stein); line-height: 1.55; }
.rechtstext-tabelle { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1.2rem; font-size: 0.92rem; }
.rechtstext-tabelle th, .rechtstext-tabelle td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--wp--preset--color--hellgrau); }
.rechtstext-tabelle th { font-family: var(--wp--preset--font-family--mulish); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--tannenschatten); }
@media (max-width: 560px) {
	.rechtstext-fakten { grid-template-columns: 1fr; gap: 0.15rem 0; }
	.rechtstext-fakten dd { margin: 0 0 0.7rem; }
}

/* ===============================================================
   PREISE — Saison-Bestpreise pro Suite (elegant, responsiv)
   =============================================================== */
.preise { max-width: 56rem; margin: 1rem auto; }
.preise-saisons {
	display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem;
	padding-bottom: 1.5rem; margin-bottom: 1.6rem;
	border-bottom: 1px solid var(--wp--preset--color--hellgrau);
}
.preise-saison { display: flex; flex-direction: column; gap: 0.2rem; }
.preise-saison-name { font-family: var(--wp--preset--font-family--mulish); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--tannenschatten); }
.preise-saison-zeit { font-size: 0.84rem; color: var(--wp--preset--color--tiroler-stein); }

.preise-liste { list-style: none; margin: 0; padding: 0; }
.preise-suite { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: 1.35rem 0; border-top: 1px solid var(--wp--preset--color--hellgrau); }
.preise-suite:last-child { border-bottom: 1px solid var(--wp--preset--color--hellgrau); }
.preise-suite-kopf { display: flex; flex-direction: column; gap: 0.22rem; flex: 1; min-width: 0; }
.preise-suite-name { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.1; color: var(--wp--preset--color--schloessli-holz); }
.preise-suite-meta { font-family: var(--wp--preset--font-family--mulish); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--tiroler-stein); }
.preise-suite-werte { display: flex; gap: clamp(1rem, 2.6vw, 2.6rem); flex-shrink: 0; }
.preise-wert { display: flex; flex-direction: column; gap: 0.22rem; text-align: right; }
.preise-wert-label { font-family: var(--wp--preset--font-family--mulish); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--mittelgrau); }
.preise-wert-zahl { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 400; font-size: 1.18rem; color: var(--wp--preset--color--tannenschatten); white-space: nowrap; }
.preise-hinweise { margin-top: 2rem; }
.preise-hinweise p { font-size: 0.9rem; line-height: 1.65; color: var(--wp--preset--color--tiroler-stein); max-width: 62ch; margin: 0 0 0.8rem; }

@media (max-width: 720px) {
	.preise-suite { flex-direction: column; gap: 0.9rem; align-items: stretch; }
	.preise-suite-werte { justify-content: space-between; gap: 1rem; }
	.preise-wert { flex: 1; text-align: left; }
}
@media (max-width: 430px) {
	.preise-suite-werte { flex-direction: column; gap: 0.5rem; }
	.preise-wert { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

/* ===============================================================
   MARKEN-ICONS (Linien-Set) als Merkmal-Reihe
   =============================================================== */
.merkmale {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 60rem; margin: clamp(2rem, 4vw, 3.5rem) auto;
	text-align: center;
}
.merkmal-icon { width: clamp(46px, 6vw, 66px); height: auto; margin: 0 auto 0.9rem; display: block; }
.merkmal-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.4rem;
	color: var(--wp--preset--color--schloessli-holz);
}
.merkmal-text { font-size: 0.9rem; line-height: 1.55; margin: 0 auto; color: var(--wp--preset--color--tiroler-stein); max-width: 24ch; }
@media (max-width: 600px) { .merkmale { grid-template-columns: 1fr; gap: 2rem; } }

/* Duo-Variante: genau zwei Merkmale nebeneinander, mittig zentriert (z. B. Frühstück) */
.merkmale-duo { grid-template-columns: repeat(2, minmax(0, 17rem)); justify-content: center; }

/* Zahlen-Variante: grosse Kennzahlen mit Icon (Aktivitäten, Kulinarik-Übersicht) */
.merkmale-zahlen .merkmal-icon { width: clamp(40px, 5vw, 56px); margin-bottom: 0.7rem; opacity: 0.9; }
.merkmale-zahlen .merkmal-titel {
	font-size: clamp(2.2rem, 5vw, 3.1rem);
	line-height: 1; margin: 0 0 0.3rem;
	color: var(--wp--preset--color--tannenschatten);
}
.merkmale-zahlen .merkmal-text {
	font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein); max-width: 18ch;
}
/* Steht die letzte Kachel allein in der Schlusszeile (z. B. die 10., Golf),
   rückt sie in die Mittelspalte, damit die Zeile bündig wirkt. */
.merkmale-zahlen > .merkmal:last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 600px) {
	.merkmale-zahlen { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
	.merkmale-zahlen .merkmal-text { text-transform: none; letter-spacing: 0; }
}

/* ===============================================================
   FAQ — ruhiges Akkordeon (natives details/summary)
   =============================================================== */
.faq { max-width: 46rem; margin: 1.5rem auto; }
.faq-item { border-top: 1px solid var(--wp--preset--color--hellgrau); }
.faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--hellgrau); }
.faq-frage {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	cursor: pointer; list-style: none; padding: 1.3rem 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.2;
	color: var(--wp--preset--color--schloessli-holz);
}
.faq-frage::-webkit-details-marker { display: none; }
.faq-frage::marker { content: ""; }
.faq-item[open] .faq-frage { color: var(--wp--preset--color--tannenschatten); }
.faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after {
	content: ""; position: absolute; background: var(--wp--preset--color--tannenschatten);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-icon::after { opacity: 0; }
.faq-antwort { padding: 0 0 1.4rem; max-width: 60ch; }
.faq-antwort p { font-size: 0.96rem; line-height: 1.65; margin: 0; color: var(--wp--preset--color--tiroler-stein); }
.faq-antwort a { color: var(--wp--preset--color--tannenschatten); }

/* ===============================================================
   FOOTER — edel (Hideaway-Register), ohne Aufzählungspunkte
   =============================================================== */
/* Footer-Kopf: Logo zentriert + feiner Claim (ersetzt die linke Brand-Spalte) */
.footer-top {
	box-sizing: border-box;
	text-align: center;
	max-width: 76rem; margin: 0 auto;
	padding: clamp(2.5rem, 4.5vw, 3.5rem) 1.6rem clamp(2rem, 3vw, 2.8rem);
	border-bottom: 1px solid rgba(244, 241, 236, 0.12);
}
.site-footer .footer-logo { width: 204px; height: auto; margin: 0 auto 1rem; display: block; }
.footer-claim {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.8rem; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ssl-akzent-hell);
	margin: 0;
}

.site-footer .footer-inner {
	box-sizing: border-box;
	max-width: 76rem; margin: 0 auto;
	padding: clamp(3rem, 5vw, 4.5rem) 1.6rem clamp(2.5rem, 4vw, 3.6rem);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
}
.site-footer .footer-inner * { box-sizing: border-box; }
.footer-adresse {
	font-style: normal; font-size: 0.85rem; line-height: 1.75;
	color: rgba(244, 241, 236, 0.78);
}
.footer-adresse a { color: rgba(244, 241, 236, 0.78); text-decoration: none; }
.footer-adresse a:hover { color: var(--wp--preset--color--schnee); }

.footer-label {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ssl-akzent-hell);
	margin: 0 0 1.3rem;
}
.footer-col { margin: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.88rem; font-weight: 400; line-height: 1.35; letter-spacing: 0.01em;
	color: rgba(244, 241, 236, 0.82); text-decoration: none;
	transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--wp--preset--color--schnee); }

.footer-news-text { font-size: 0.85rem; line-height: 1.6; color: rgba(244, 241, 236, 0.78); margin: 0 0 1rem; }
.footer-news-btn {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
	text-decoration: none; padding: 0.75rem 1.3rem;
	border: 1px solid rgba(244, 241, 236, 0.55); color: var(--wp--preset--color--schnee);
	transition: background 0.2s ease, color 0.2s ease;
}
.footer-news-btn:hover { background: var(--wp--preset--color--schnee); color: var(--wp--preset--color--tannenschatten); }
.footer-social { margin-top: 1.3rem; }
.footer-social a { font-size: 0.85rem; letter-spacing: 0.02em; }

.footer-unten {
	box-sizing: border-box;
	max-width: 76rem; margin: 0 auto;
	padding: 1.5rem 1.6rem;
	border-top: 1px solid rgba(244, 241, 236, 0.16);
	display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.footer-unten .footer-meta { font-size: 0.78rem; color: #969691; margin: 0; }
.footer-legal { font-size: 0.78rem; margin: 0; color: rgba(244, 241, 236, 0.6); }
.footer-legal a { color: rgba(244, 241, 236, 0.72); text-decoration: none; }
.footer-legal a:hover { color: var(--wp--preset--color--schnee); }

@media (max-width: 781px) {
	/* Footer auf Mobil mittig statt linksbündig */
	.site-footer .footer-inner {
		grid-template-columns: 1fr 1fr;
		text-align: center;
		justify-items: center;
		gap: 2.6rem 2rem;
	}
	.footer-news { grid-column: 1 / -1; }
	.newsletter-slot { align-items: center; }
	.footer-unten {
		flex-direction: column; align-items: center; text-align: center;
		gap: 0.6rem;
	}
	/* Mobile-first: komfortable Touch-Flächen (Apple/WCAG) statt enger Textzeilen */
	.footer-links li { margin-bottom: 0.1rem; }
	.footer-links a { display: inline-block; padding: 0.6rem 0.7rem; }
	.footer-adresse { line-height: 2; }
	.footer-adresse a, .footer-legal a { display: inline-block; padding: 0.35rem 0.4rem; }
	.footer-legal { line-height: 2.2; }
}
@media (max-width: 480px) {
	/* Nicht alles untereinander: zwei Spalten. Kontakt (lange Adresse/E-Mail)
	   oben ueber beide, dann "Das Haus" | "Tal & Gaeste" nebeneinander. */
	.site-footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.4rem; }
	.site-footer .footer-inner > .footer-col:first-child { grid-column: 1 / -1; }
}

/* ===============================================================
   MOBILE BÜNDIGKEIT: Sektions-Köpfe mittig (ruhiger auf schmalem Schirm)
   =============================================================== */
@media (max-width: 600px) {
	.st-fakten .reveal { text-align: center; }
	.hscroll-head { justify-content: center; text-align: center; }
	.hscroll-foot { text-align: center; }
	/* Eyebrow-Haarlinie zentriert sich mit dem Text */
	.st-fakten .eyebrow, .hscroll-head .eyebrow { display: block; }
}

/* ============================================================
   Fluent Forms im Markenkleid (Anfrage / Kapelle / Gutschein)
   Verfeinerte Kaesten: Mulish, scharfe 0px-Kanten, feine Hairline
   statt weisser Bloecke, Eyebrow-Labels, gedaempftes Pflichtzeichen,
   Tann-Gruen im Fokus, Marken-Button. (Default-FF-CSS war off-brand:
   Systemschrift, 7px Radius, grelles Weiss, lachsrote Sternchen.)
   ============================================================ */
.frm-fluent-form { --ff-border: var(--wp--preset--color--hellgrau); }

.frm-fluent-form .ff-el-group { margin-bottom: 1rem; }

/* Kompakter: markierte Felder (Datum, Personen, Suite/Preis) 2-spaltig
   (inline-block, elternunabhängig). Aufeinanderfolgende Halbfelder stehen zu zweit. */
.frm-fluent-form .ff-el-group.ssl-half { display: inline-block; width: 48%; vertical-align: top; }
@media (max-width: 480px) { .frm-fluent-form .ff-el-group.ssl-half { display: block; width: 100%; } }

/* Pro Kind ein kleines Alters-Feld (dynamisch je nach Kinderzahl). */
.ssl-kinder-alter { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; }
.ssl-kind {
	display: flex; flex-direction: column; gap: 0.25rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein);
}
.frm-fluent-form .ssl-kind-input { width: 5.5rem; }

/* Labels als ruhige Mulish-Eyebrows */
.frm-fluent-form .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--schloessli-holz);
	margin-bottom: 0.35rem;
}
/* Pflichtzeichen gedaempft statt grellrot (FF-Default ueberschreiben) */
.frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.frm-fluent-form .ff-el-is-required.asterisk-left label:before,
.frm-fluent-form .ff-el-is-required.asterisk-right:after,
.frm-fluent-form .ff-el-input--label.ff-el-is-required label:after {
	color: var(--wp--preset--color--mittelgrau) !important;
	font-weight: 400;
}

/* Eingabefelder, Textarea, Select */
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form input[type="number"],
.frm-fluent-form input[type="date"],
.frm-fluent-form textarea,
.frm-fluent-form select,
.frm-fluent-form .ff-el-form-control {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem;            /* >=16px: kein iOS-Zoom beim Fokus */
	line-height: 1.5;
	color: var(--wp--preset--color--tannenschatten);
	background-color: #FCFBF9;  /* Hauch waermer als Reinweiss, ruht auf Creme */
	border: 1px solid var(--ff-border);
	border-radius: 0;
	padding: 0.85rem 1rem;
	box-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.frm-fluent-form textarea { min-height: 9rem; padding: 1rem; resize: vertical; }

.frm-fluent-form ::placeholder { color: var(--wp--preset--color--mittelgrau); opacity: 1; }

/* Fokus: Tann-Gruen, ruhiger Ring */
.frm-fluent-form input:focus,
.frm-fluent-form textarea:focus,
.frm-fluent-form select:focus,
.frm-fluent-form .ff-el-form-control:focus {
	outline: none;
	background-color: #FFFFFF;
	/* FF-Default-Fokus ueberschreiben -> verbindlich Tann-Gruen */
	border-color: var(--wp--preset--color--tannenschatten) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--tannenschatten) !important;
}

/* Select: eigener feiner Pfeil in Walnuss */
.frm-fluent-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A3728' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.6rem;
}

/* DSGVO-Checkbox + Satz (kein Eyebrow, normaler Fliesstext) */
.frm-fluent-form input[type="checkbox"] {
	accent-color: var(--wp--preset--color--tannenschatten);
	width: 1.05rem;
	height: 1.05rem;
}
.frm-fluent-form .ff-el-form-check label,
.frm-fluent-form .ff-el-form-check-label {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--tiroler-stein);
}

/* Radio-Optionen als Buttons nebeneinander (Container-Klasse ssl-radio-buttons,
   z. B. Zustellung im Gutschein). Ausgewaehlt = gefuellt in Tann-Gruen. */
.frm-fluent-form .ssl-radio-buttons .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.frm-fluent-form .ssl-radio-buttons .ff-el-form-check { margin: 0; padding: 0; }
.frm-fluent-form .ssl-radio-buttons .ff-el-form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.frm-fluent-form .ssl-radio-buttons .ff-el-form-check-label {
	display: inline-flex; align-items: center; cursor: pointer; margin: 0;
	padding: 0.7rem 1.3rem;
	border: 1px solid var(--wp--preset--color--tannenschatten);
	border-radius: 999px;
	color: var(--wp--preset--color--tannenschatten);
	transition: background 0.2s ease, color 0.2s ease;
}
.frm-fluent-form .ssl-radio-buttons .ff-el-form-check-label:hover { background: rgba(29, 48, 38, 0.06); }
.frm-fluent-form .ssl-radio-buttons .ff-el-form-check-label:has(input:checked) {
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee);
}

/* Submit-Button zentrieren (FF-Default war im Wrapper linksbuendig). */
.frm-fluent-form .ff_submit_btn_wrapper,
.frm-fluent-form .ff-el-group:has(.ff-btn-submit) {
	text-align: center;
}

/* Submit = Marken-Button statt FF-Blau */
.frm-fluent-form .ff-btn-submit {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	/* Letter-Spacing-Ausgleich: ohne text-indent sitzt die Beschriftung ~1px
	   links im Button (nachlaufender Abstand hinter dem letzten Buchstaben). */
	text-indent: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--schnee);
	background-color: var(--wp--preset--color--tannenschatten);
	border: 1px solid var(--wp--preset--color--tannenschatten);
	border-radius: 0;
	padding: 0.95rem 2.4rem;
	box-shadow: none;
	/* Button selbst zentrieren (robust, unabhaengig vom Wrapper-text-align,
	   falls FF dort ff-text-left durchsetzt). */
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0.5rem auto 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.frm-fluent-form .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--schloessli-holz);
	border-color: var(--wp--preset--color--schloessli-holz);
}

/* ============================================================
   Vollbild-Foto-Band mit Text darueber (Heritage-Detail, z. B. die
   geschnitzte Eingangstuer als Hintergrund in der Hausgeschichte).
   Bricht aus dem constrained Layout zum Viewport-Rand aus.
   ============================================================ */
.foto-band {
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(3.5rem, 9vw, 7rem) 1.25rem;
	background-position: center;
	background-size: cover;
}
/* WP-Constrained-Layout setzt auto-Margins + max-width -> ueberschreiben. */
.foto-band.foto-band {
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.foto-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(34, 24, 16, 0.52); /* warmes Walnuss-Dunkel, Holz bleibt warm */
}
.foto-band-text {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
	color: var(--wp--preset--color--schnee);
}
.foto-band-zeile {
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 300;
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	line-height: 1.2;
	color: var(--wp--preset--color--schnee);
}

/* Mobil: Abschnitts-Ueberschriften und ihre Eyebrows auf Inhaltsseiten
   zentriert (am Desktop bleiben sie linksbuendig wie gehabt). Auf schmalem
   Schirm wirkt linksbuendiger Editorial-Satz schief, mittig ruhiger. */
@media (max-width: 600px) {
	body:not(.home) #inhalt h2.wp-block-heading,
	body:not(.home) #inhalt p.eyebrow {
		text-align: center;
	}
}

/* Permanenter Buchen-Button (Suiten, Preise) zentriert statt linksbuendig
   (passt zum zentrierten Seitensatz). */
.wp-block-buttons.buchen-button {
	justify-content: center;
}

/* ===============================================================
   ANGEBOTE: Last-Minute-Band + 2-spaltiges Arrangement-Raster
   =============================================================== */
.angebote-lastminute {
	max-width: 60rem;
	margin: clamp(1.5rem, 4vw, 2.5rem) auto clamp(2.5rem, 6vw, 4rem);
	border: 1px solid var(--wp--preset--color--hellgrau);
	border-radius: 3px;
	background: var(--wp--preset--color--schnee);
}
.angebote-lastminute-kopf {
	list-style: none; cursor: pointer;
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
	padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.4rem, 4vw, 2.6rem);
}
.angebote-lastminute-kopf::-webkit-details-marker { display: none; }
.angebote-lastminute-titel {
	display: block;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; line-height: 1.1;
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	color: var(--wp--preset--color--schloessli-holz);
	margin-top: 0.2rem;
}
.angebote-lastminute-preis {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; letter-spacing: 0.03em;
	color: var(--wp--preset--color--tannenschatten);
	margin-left: auto;
}
.angebote-lastminute-pfeil {
	width: 0.6rem; height: 0.6rem; flex: none;
	border-right: 1.5px solid var(--wp--preset--color--schloessli-holz);
	border-bottom: 1.5px solid var(--wp--preset--color--schloessli-holz);
	transform: rotate(45deg); transition: transform 0.25s ease;
}
.angebote-lastminute[open] .angebote-lastminute-pfeil { transform: rotate(-135deg); }
.angebote-lastminute-inhalt {
	padding: 0 clamp(1.4rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.2rem);
}
.angebote-lastminute-intro {
	color: var(--wp--preset--color--tiroler-stein);
	margin: 0 0 1rem; max-width: 60ch;
}
.lastminute-liste { list-style: none; margin: 0; padding: 0; }
.lastminute-zeile {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
	padding: 0.8rem 0;
	border-top: 1px solid var(--wp--preset--color--hellgrau);
}
.lastminute-zeile:last-child { border-bottom: 1px solid var(--wp--preset--color--hellgrau); }
.lastminute-datum {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.2rem; color: var(--wp--preset--color--tannenschatten);
	flex: 1 1 14rem;
}
.lastminute-meta {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein); flex: 1 1 12rem;
}
.lastminute-preis {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.85rem; color: var(--wp--preset--color--schloessli-holz);
	flex: 0 0 auto; white-space: nowrap;
}
.lastminute-link {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--schloessli-holz); text-decoration: none;
	margin-left: auto; white-space: nowrap;
}
.lastminute-link:hover { color: var(--wp--preset--color--tannenschatten); }
/* Persönliche Zeile ohne berechnete Fenster: bricht normal um, kein Versal-Stil */
.lastminute-persoenlich {
	color: var(--wp--preset--color--schloessli-holz);
	text-decoration: underline; text-underline-offset: 3px;
}
.lastminute-persoenlich:hover { color: var(--wp--preset--color--tannenschatten); }

.angebote-grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.4rem, 3.5vw, 2.6rem);
	max-width: 64rem; margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
}
.angebot-kachel {
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
}
.angebot-bild { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 2px; }
.angebot-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.angebot-kicker {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein); margin-top: 1rem;
}
.angebot-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.angebot-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: 1.55rem; line-height: 1.12;
	color: var(--wp--preset--color--schloessli-holz); margin-top: 0.25rem;
}
.angebot-link:hover .angebot-titel { color: var(--wp--preset--color--tannenschatten); }
.angebot-text {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.95rem; line-height: 1.6;
	color: var(--wp--preset--color--tannenschatten); margin-top: 0.5rem;
}
.angebot-termin {
	display: block;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; line-height: 1.5;
	color: var(--wp--preset--color--tiroler-stein);
	margin-top: 0.6rem;
}
.angebot-termin-link { color: var(--wp--preset--color--schloessli-holz); white-space: nowrap; }
.angebot-preis {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.9rem; letter-spacing: 0.01em;
	color: var(--wp--preset--color--schloessli-holz);
	margin-top: 0.7rem;
}
.angebot-cta {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--schloessli-holz); margin-top: 0.8rem;
}
.angebot-kachel:hover .angebot-cta { color: var(--wp--preset--color--tannenschatten); }

/* Freie Termine je Package (aufklappbar in der Kachel) */
.angebot-termine { margin-top: 0.9rem; border-top: 1px solid var(--wp--preset--color--hellgrau); }
.angebot-termine summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
	padding: 0.7rem 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--schloessli-holz);
}
.angebot-termine summary::-webkit-details-marker { display: none; }
.angebot-termine summary:hover { color: var(--wp--preset--color--tannenschatten); }
.at-pfeil {
	width: 0.5rem; height: 0.5rem; flex: none;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform 0.25s ease;
}
.angebot-termine[open] .at-pfeil { transform: rotate(-135deg); }
.at-liste { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.at-zeile {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem;
	padding: 0.55rem 0; border-top: 1px solid var(--wp--preset--color--hellgrau);
}
.at-datum {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.1rem; color: var(--wp--preset--color--tannenschatten);
	flex: 1 1 8rem;
}
.at-meta {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.74rem; letter-spacing: 0.03em;
	color: var(--wp--preset--color--tiroler-stein); flex: 1 1 9rem;
}
.at-link {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--schloessli-holz); text-decoration: none;
	margin-left: auto; white-space: nowrap;
}
.at-link:hover { color: var(--wp--preset--color--tannenschatten); }

/* Verfügbarkeitskalender je Package (IBE-Optik, freie Tage in Tann-Grün) */
.pkg-cal { margin-top: 0.9rem; }
.pkg-cal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.pkg-cal-hint {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1.5;
	color: var(--wp--preset--color--tiroler-stein); margin: 0 0 0.7rem; max-width: 38ch;
}
.pkg-cal-nav { display: flex; gap: 0.3rem; flex: none; }
.pkg-cal-nav button {
	width: 1.7rem; height: 1.7rem; border-radius: 50%; padding: 0;
	border: 1px solid var(--wp--preset--color--hellgrau);
	background: var(--wp--preset--color--schnee);
	color: var(--wp--preset--color--schloessli-holz);
	font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.pkg-cal-nav button:disabled { opacity: 0.3; cursor: default; }
.pkg-cal-nav button:not(:disabled):hover { background: var(--wp--preset--color--tannenschatten); color: var(--wp--preset--color--schnee); border-color: var(--wp--preset--color--tannenschatten); }
.pkg-cal-monate { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.8rem; }
.pkg-cal-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: 1.2rem; line-height: 1;
	color: var(--wp--preset--color--schloessli-holz);
	margin: 0 0 0.6rem; text-align: center;
}
.pkg-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pkg-cal-wd {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein);
	text-align: center; padding-bottom: 0.2rem;
}
.pkg-cal-tag {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1; border-radius: 4px;
	color: var(--wp--preset--color--tiroler-stein);
	text-decoration: none;
}
.pkg-cal-tag.is-leer { background: none; }
.pkg-cal-tag.is-aus,
.pkg-cal-tag.is-zu { color: rgba(74, 55, 37, 0.22); }
.pkg-cal-tag.is-belegt { color: rgba(74, 55, 37, 0.34); text-decoration: line-through; text-decoration-thickness: 1px; }
.pkg-cal-tag.is-frei {
	background: rgba(29, 48, 38, 0.30);
	color: var(--wp--preset--color--tannenschatten);
	font-weight: 600; cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.pkg-cal-tag.is-frei:hover,
.pkg-cal-tag.is-end-ok:hover {
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee);
}
/* Range-Auswahl: Basis-Nächte (bis MLOS) grün, Zusatznächte orange, Abreise als Rahmen. */
.pkg-cal-tag.is-end-ok { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(29, 48, 38, 0.45); color: var(--wp--preset--color--tannenschatten); }
.pkg-cal-tag.is-end-ok, .pkg-cal-tag.is-sel, .pkg-cal-tag.is-extra, .pkg-cal-tag.is-start, .pkg-cal-tag.is-end { text-decoration: none; }
.pkg-cal-tag.is-start,
.pkg-cal-tag.is-sel {
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee); font-weight: 600;
}
.pkg-cal-tag.is-extra { background: #c07a33; color: #fff; font-weight: 600; }
.pkg-cal-tag.is-end {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--schnee);
	font-weight: 600;
}
/* MLOS: Nächte zu kurz für eine Abreise -> gesperrt, nicht klickbar. */
.pkg-cal-tag.is-blocked {
	background: none; box-shadow: none; pointer-events: none; cursor: default;
	color: rgba( 74, 55, 37, 0.20 ); font-weight: 400; text-decoration: none;
}
.pkg-cal-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1rem;
	margin-top: 1rem; padding: 0.9rem 1rem;
	background: var(--wp--preset--color--schnee);
	border: 1px solid var(--wp--preset--color--hellgrau); border-radius: 3px;
}
.pkg-cal-bar-info { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.pkg-cal-sel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.15rem; color: var(--wp--preset--color--tannenschatten);
}
.pkg-cal-suiten { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pkg-cal-suite {
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.76rem;
	border: 1px solid var(--wp--preset--color--hellgrau); background: #fff;
	color: var(--wp--preset--color--tannenschatten);
	border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pkg-cal-suite:hover { border-color: var(--wp--preset--color--tannenschatten); }
.pkg-cal-suite.is-aktiv {
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee); border-color: var(--wp--preset--color--tannenschatten);
}
.pkg-cal-suite-hinweis { font-family: var(--wp--preset--font-family--mulish); font-size: 0.78rem; color: var(--wp--preset--color--tiroler-stein); }
.pkg-cal-kapazitaet {
	display: flex; align-items: center; gap: 0.3rem;
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.78rem;
	color: var(--wp--preset--color--tiroler-stein);
}
.pkg-cal-kapazitaet:empty { display: none; }
.pkg-cal-kapazitaet .kap-icon { width: 18px; height: 18px; opacity: 0.7; vertical-align: middle; }
.pkg-cal-kapazitaet .kap-max { margin-left: 0.3rem; }
.pkg-cal-hund {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.78rem;
	color: var(--wp--preset--color--tannenschatten); cursor: pointer;
}
.pkg-cal-hund-cb, .pkg-cal-fruehstueck-cb, .pkg-cal-parken-cb { accent-color: var(--wp--preset--color--tannenschatten); width: 1rem; height: 1rem; margin: 0; }
.pkg-cal-hund-preis { color: var(--wp--preset--color--tiroler-stein); }
.pkg-cal-hund-sel {
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.78rem;
	color: var(--wp--preset--color--tannenschatten);
	border: 1px solid var(--wp--preset--color--tiroler-stein);
	border-radius: 4px; padding: 0.15rem 1.4rem 0.15rem 0.5rem; background-color: transparent; cursor: pointer;
}
.pkg-cal-fr-incl { font-style: italic; cursor: default; }
.pkg-cal-anfragen {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--schnee); text-decoration: none;
	background: var(--wp--preset--color--tannenschatten);
	padding: 0.55rem 1.1rem; border-radius: 2px; white-space: nowrap;
}
.pkg-cal-anfragen:hover { color: var(--wp--preset--color--schnee); opacity: 0.92; }
.pkg-cal-legende {
	display: flex; align-items: center; gap: 0.4rem 1.2rem; flex-wrap: wrap;
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.68rem; letter-spacing: 0.03em;
	color: var(--wp--preset--color--tiroler-stein);
}
.pkg-cal-legende .lg { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 3px; vertical-align: middle; margin-right: 0.25rem; }
.pkg-cal-legende .lg-frei { background: rgba(29, 48, 38, 0.30); }
.pkg-cal-legende .lg-gewaehlt { background: var(--wp--preset--color--tannenschatten); }
.pkg-cal-legende .lg-extra { background: #c07a33; }
.pkg-cal-legende .lg-belegt { background: rgba(74, 55, 37, 0.16); }
.pkg-cal-fallback {
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem; line-height: 1.5; color: var(--wp--preset--color--tiroler-stein);
}
.pkg-cal-fallback a { color: var(--wp--preset--color--schloessli-holz); text-decoration: underline; }
.pkg-cal-fallback a:hover { color: var(--wp--preset--color--tannenschatten); }
/* Immer 2 Monate nebeneinander, auf kleinen Schirmen nur enger/kleiner. */
@media (max-width: 600px) {
	.pkg-cal-monate { gap: 0.8rem; }
	.pkg-cal-grid { gap: 2px; }
	.pkg-cal-tag { font-size: 0.66rem; border-radius: 3px; }
	.pkg-cal-wd { font-size: 0.5rem; }
	.pkg-cal-titel { font-size: 1rem; }
}

/* Zeitraum-Finder (Wunschzeitraum -> passende Packages) */
.angebote-finder {
	max-width: 46rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0;
	padding: clamp(1.6rem, 4vw, 2.4rem); text-align: center;
	background: var(--wp--preset--color--schnee);
	border: 1px solid var(--wp--preset--color--hellgrau); border-radius: 3px;
}
.angebote-finder .eyebrow { justify-content: center; }
.angebote-finder-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; line-height: 1.1; font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	color: var(--wp--preset--color--schloessli-holz); margin: 0.3rem 0 0.4rem;
}
.angebote-finder-intro { color: var(--wp--preset--color--tannenschatten); max-width: 40ch; margin: 0 auto 1.4rem; }
.finder-felder { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; justify-content: center; }
.finder-feld {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--tiroler-stein);
}
.finder-feld input {
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.95rem;
	padding: 0.55rem 0.7rem; border: 1px solid var(--wp--preset--color--hellgrau);
	border-radius: 2px; background: #fff; color: var(--wp--preset--color--tannenschatten);
}
.finder-go {
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.8rem;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--schnee); background: var(--wp--preset--color--tannenschatten);
	border: none; border-radius: 2px; padding: 0.72rem 1.3rem; cursor: pointer;
}
.finder-go:hover { opacity: 0.92; }
.finder-feld-btn {
	cursor: pointer; text-align: left;
	background: #fff; border: 1px solid var(--wp--preset--color--hellgrau);
	border-radius: 2px; padding: 0.42rem 0.7rem; min-width: 11rem;
	transition: border-color 0.2s ease;
}
.finder-feld-btn:hover { border-color: var(--wp--preset--color--tannenschatten); }
.finder-feld-wert {
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.95rem;
	letter-spacing: 0; text-transform: none;
	color: var(--wp--preset--color--tannenschatten);
}
.finder-cal {
	max-width: 360px; margin: 1.1rem auto 0; padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--hellgrau); border-radius: 4px;
	background: #fff;
}
.finder-ergebnis { margin-top: 1.3rem; }
.finder-treffer-titel, .finder-hinweis {
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.85rem;
	color: var(--wp--preset--color--tannenschatten); margin: 0 0 0.6rem;
}
.finder-liste { list-style: none; margin: 0; padding: 0; }
.finder-liste li { margin: 0.35rem 0; }
.finder-liste a {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.25rem; color: var(--wp--preset--color--schloessli-holz); text-decoration: none;
}
.finder-liste a:hover { color: var(--wp--preset--color--tannenschatten); }
.finder-ibe {
	font-family: var(--wp--preset--font-family--mulish); font-size: 0.85rem;
	color: var(--wp--preset--color--tiroler-stein); margin: 0.9rem 0 0;
}
.finder-ibe a { color: var(--wp--preset--color--schloessli-holz); text-decoration: underline; }

/* Preis-Basis-Hinweis unter dem Anfrageformular */
.preis-basis-hinweis {
	font-size: 0.8rem !important; line-height: 1.5;
	color: var(--wp--preset--color--tiroler-stein);
	max-width: 60ch; margin-top: 1.4rem;
}

@media (max-width: 700px) {
	.angebote-grid { grid-template-columns: 1fr; }
	.lastminute-link { margin-left: 0; flex-basis: 100%; }
	.angebote-lastminute-preis { flex-basis: 100%; margin-left: 0; }
}

/* Angebote-Leiste auf der Startseite (schlanke, einladende Leiste) */
.angebote-leiste {
	text-align: center;
	padding: clamp(2.4rem, 6vw, 4rem) clamp(1.2rem, 4vw, 2rem);
	background: var(--wp--preset--color--schnee);
}
.angebote-leiste .eyebrow { justify-content: center; }
.angebote-leiste h2 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; line-height: 1.1;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--wp--preset--color--schloessli-holz);
	margin: 0.4rem 0 0.6rem;
}
.angebote-leiste p {
	color: var(--wp--preset--color--tannenschatten);
	max-width: 46ch; margin: 0 auto 1.4rem;
}
.angebote-leiste-link {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--schloessli-holz); text-decoration: none;
	border-bottom: 1px solid currentColor; padding-bottom: 0.2rem;
}
.angebote-leiste-link:hover { color: var(--wp--preset--color--tannenschatten); }

/* Störer: kleiner schwebender Knopf, der auf die kurzfristigen Angebote verweist.
   Erscheint erst beim Runterscrollen (JS togglet .is-visible), damit der Hero
   ungestoert bleibt. */
.stoerer-wrap {
	position: fixed; right: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.8rem, 2vw, 1.6rem);
	z-index: 90;
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.stoerer-wrap.is-visible { opacity: 1; visibility: visible; transform: none; }
.stoerer {
	position: relative;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	width: 6.4rem; height: 6.4rem; border-radius: 50%;
	background: var(--wp--preset--color--tannenschatten);
	color: var(--wp--preset--color--schnee); text-decoration: none;
	text-align: center; line-height: 1.2;
	box-shadow: 0 6px 20px rgba(20, 33, 26, 0.28);
	transition: transform 0.25s ease;
}
.stoerer:hover { transform: scale(1.05); color: var(--wp--preset--color--schnee); }
.stoerer-x {
	position: absolute; top: -0.3rem; right: -0.3rem;
	width: 1.5rem; height: 1.5rem; border-radius: 50%;
	border: none; cursor: pointer;
	background: var(--wp--preset--color--schnee);
	color: var(--wp--preset--color--tannenschatten);
	font-size: 1rem; line-height: 1; padding: 0;
	box-shadow: 0 2px 6px rgba(20, 33, 26, 0.25);
}
.stoerer-x:hover { background: #fff; }
.stoerer-klein {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
	opacity: 0.85;
}
.stoerer-gross {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1rem; line-height: 1.05; margin-top: 0.15rem;
}
/* Mobil: ueber die fixe Buchen-Leiste heben, sonst verdeckt sie den Stoerer */
@media (max-width: 781px) {
	.stoerer { width: 5rem; height: 5rem; }
	.stoerer-klein { font-size: 0.54rem; }
	.stoerer-gross { font-size: 0.9rem; }
	.stoerer-wrap {
		right: 0.9rem;
		bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
	}
}
@media (prefers-reduced-motion: reduce) { .stoerer { transition: none; } }

/* -------------------------------------------------------------------------
 * Film-Band (Startseite). Zurückhaltend, Klick zum Starten, kein Autoplay.
 * Ruhiger heller Abschnitt; gerahmtes 16:9-Element statt full-bleed-Marketing.
 * ---------------------------------------------------------------------- */
.film-band {
	background: var(--wp--preset--color--schnee);
	text-align: center;
	padding-block: clamp(3.2rem, 6.5vw, 6rem);
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.film-band .eyebrow { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.film-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	color: var(--wp--preset--color--tannenschatten);
	margin: 0 0 0.6rem;
}
.film-intro {
	max-width: 34rem;
	margin: 0 auto clamp(1.8rem, 4vw, 2.6rem);
	color: var(--wp--preset--color--mittelgrau);
}
.film-figure {
	position: relative;
	max-width: 64rem;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(29, 48, 38, 0.18);
}
.film-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
}
.film-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.24));
	z-index: 1;
}
.film-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.1rem, 2.6vw, 1.9rem);
	pointer-events: none;
}
.film-logo {
	width: clamp(12rem, 30%, 18rem);
	height: auto;
	filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.45));
}
.film-play-ring {
	width: 74px;
	height: 74px;
	border: 1.5px solid rgba(244, 241, 236, 0.95);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(29, 48, 38, 0.46);
	box-shadow: 0 2px 22px rgba(0, 0, 0, 0.38);
	transition: transform 0.3s ease, background 0.3s ease;
}
.film-play:hover .film-play-ring,
.film-play:focus-visible .film-play-ring { transform: scale(1.07); background: rgba(29, 48, 38, 0.62); }
.film-play:focus-visible { outline: 2px solid var(--wp--preset--color--sonnenhang); outline-offset: 3px; }
.film-play-ring svg { width: 26px; height: 26px; margin-left: 3px; fill: var(--wp--preset--color--schnee); }
.film-video { width: 100%; height: 100%; display: block; background: #000; }
@media (max-width: 600px) {
	.film-play-ring { width: 58px; height: 58px; }
	.film-play-ring svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) { .film-play-ring { transition: none; } }

/* -------------------------------------------------------------------------
 * 360-Grad-Rundgang (Galerie). Dunkler Feature-Abschnitt, Klick zum Laden.
 * ---------------------------------------------------------------------- */
.tour360 {
	background: var(--wp--preset--color--tannenschatten);
	text-align: center;
	padding-block: clamp(3.2rem, 6.5vw, 6rem);
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.tour360 .eyebrow { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.tour360-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	color: var(--wp--preset--color--schnee);
	font-weight: 300;
	margin: 0 0 0.6rem;
}
.tour360-intro {
	max-width: 34rem;
	margin: 0 auto clamp(1.8rem, 4vw, 2.6rem);
	color: rgba(244, 241, 236, 0.78);
}
.tour360-figure {
	position: relative;
	max-width: 64rem;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
.tour360-open {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
}
.tour360-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour360-open::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
	z-index: 1;
}
.tour360-badge {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 86px;
	height: 86px;
	border: 1.5px solid rgba(244, 241, 236, 0.95);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(29, 48, 38, 0.46);
	box-shadow: 0 2px 22px rgba(0, 0, 0, 0.4);
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--schnee);
	transition: transform 0.3s ease, background 0.3s ease;
}
.tour360-hint {
	position: absolute;
	left: 50%;
	top: calc(50% + 64px);
	transform: translateX(-50%);
	z-index: 2;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(244, 241, 236, 0.9);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
	white-space: nowrap;
}
.tour360-open:hover .tour360-badge,
.tour360-open:focus-visible .tour360-badge { transform: translate(-50%, -50%) scale(1.07); background: rgba(29, 48, 38, 0.62); }
.tour360-open:focus-visible { outline: 2px solid var(--wp--preset--color--sonnenhang); outline-offset: 3px; }
.tour360-frame { width: 100%; height: 100%; border: 0; display: block; }
.tour360-note { color: rgba(244, 241, 236, 0.75); font-size: 0.72rem; margin: 1rem auto 0; } /* >=4,5:1 auf Tannenschatten (WCAG AA) */
@media (max-width: 600px) {
	.tour360-badge { width: 70px; height: 70px; font-size: 0.92rem; }
	.tour360-hint { top: calc(50% + 54px); }
}
@media (prefers-reduced-motion: reduce) { .tour360-badge { transition: none; } }

/* Sprachumschalter (DE / EN) im Menü-Overlay. */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.2rem 0 1.6rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.lang-switch-item { color: var(--wp--preset--color--mittelgrau); text-decoration: none; transition: color 0.25s ease; }
.lang-switch-item:hover { color: var(--wp--preset--color--tannenschatten); }
.lang-switch-item.is-active { color: var(--wp--preset--color--tannenschatten); font-weight: 700; }
.lang-switch-sep { color: var(--wp--preset--color--hellgrau); }

/* ---- Instagram-Band: zentriert (Brenners-Insta-Stil), quadratische Karten ---- */
.insta-band { text-align: center; }
.insta-head { padding-inline: var(--hscroll-pad); margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.insta-head .eyebrow { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; }
.insta-head h2 {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	color: var(--wp--preset--color--schloessli-holz);
	font-weight: 300; line-height: 1.06; margin: 0;
	font-size: clamp(2.1rem, 4.4vw, 3.3rem);
}
.insta-band .hscroll-card { flex-basis: clamp(210px, 23vw, 320px); }
.insta-band .hscroll-card-img { aspect-ratio: 1 / 1; }
.insta-nav { display: flex; justify-content: center; gap: 0.7rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.insta-foot { margin-top: 1.2rem; margin-inline: auto; text-align: center; }
.insta-foot a {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
	text-decoration: none; color: var(--wp--preset--color--tannenschatten);
	border-bottom: 1px solid var(--wp--preset--color--hellgrau); padding-bottom: 0.3rem;
}
.insta-tags { margin-top: 0.85rem; margin-inline: auto; text-align: center; color: var(--wp--preset--color--mittelgrau); }
.insta-tags a {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.78rem; letter-spacing: 0.1em;
	text-decoration: none; color: var(--wp--preset--color--mittelgrau);
}
.insta-tags a:hover { color: var(--wp--preset--color--tannenschatten); }

/* Intro-Band: kleines, versetztes Zweitbild füllt den Weißraum (Brenners groß+klein). */
.intro-zweit { margin: 0; }
.intro-zweit img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 20px 50px rgba(29, 48, 38, 0.18); }
@media (min-width: 782px) {
	.st-intro .wp-block-media-text__content { display: flex; flex-direction: column; }
	.intro-zweit {
		width: clamp(15rem, 56%, 21rem);
		margin: clamp(2.4rem, 5vw, 4.5rem) 0 0; /* sauber, ohne Überlappung */
		align-self: flex-end;
	}
}
@media (max-width: 781px) {
	.intro-zweit { margin: 1.4rem 1.1rem 0; }
}

/* Gastgeber-Seite im Brenners-Schema: großes Porträt links, Text rechts,
   kleines versetztes Oskar-Bild (groß + klein). */
.gastgeber-ed-wrap { padding-block: clamp(1.5rem, 5vw, 3.5rem); padding-inline: clamp(1.25rem, 5vw, 2rem); }
.gastgeber-ed { max-width: 72rem; margin: 0 auto; }
.gastgeber-ed-gross img { display: block; width: 100%; }
.gastgeber-ed-klein img { display: block; width: 100%; box-shadow: 0 18px 44px rgba(29, 48, 38, 0.16); }
.gastgeber-ed-text p { margin: 0 0 1.1rem; }
.gastgeber-traktor {
	max-width: clamp(16rem, 50%, 22rem);
	margin: clamp(2.5rem, 6vw, 4.5rem) auto;
	text-align: center;
}
.gastgeber-traktor img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 18px 44px rgba(29, 48, 38, 0.16);
}
.gastgeber-traktor figcaption {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.85rem;
	color: var(--wp--preset--color--mittelgrau);
	margin-top: 0.85rem;
}
@media (min-width: 782px) {
	.gastgeber-ed { display: grid; grid-template-columns: 40% auto; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
	.gastgeber-ed-gross img { aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 22px 54px rgba(29, 48, 38, 0.17); }
	.gastgeber-ed-text { display: flex; flex-direction: column; padding-top: clamp(1.5rem, 5vw, 4rem); }
	.gastgeber-ed-klein { width: clamp(14rem, 56%, 20rem); margin: clamp(2rem, 4vw, 3.5rem) 0 0 clamp(-5rem, -7vw, -2.5rem); align-self: flex-start; }
	.gastgeber-ed-klein img { aspect-ratio: 3 / 2; object-fit: cover; }
}
@media (max-width: 781px) {
	.gastgeber-ed-gross { margin: 0 1.1rem 1.6rem; }
	.gastgeber-ed-klein { margin: 1.4rem 1.1rem 0; }
}

/* Aktuelle Talmeldungen in der Gästemappe (Shortcode [gm_hinweise]).
   Bewusst auffällig, aber nicht schreiend: warmes Signalband statt Rot,
   damit es zur Marke passt und trotzdem zuerst gelesen wird. */
.gm-hinweise {
	margin: 0 0 1.4rem;
	padding: 1rem 1.1rem 1.05rem;
	background: #fdf6e9;
	border-left: 4px solid var(--wp--preset--color--schloessli-holz);
	border-radius: 6px;
}
.gm-hinweise-label {
	margin: 0 0 .55rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--schloessli-holz);
}
.gm-hinweis + .gm-hinweis { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid rgba(74,55,37,.14); }
.gm-hinweis-t { margin: 0 0 .2rem; font-weight: 700; font-size: .97rem; line-height: 1.3; }
.gm-hinweis-x { margin: 0; font-size: .92rem; line-height: 1.5; }
.gm-hinweis-q { margin: .3rem 0 0; font-size: .76rem; color: var(--wp--preset--color--mittelgrau); }
.gm-tcard-hinweis {
	margin: .4rem 0 0;
	padding: .45rem .6rem;
	background: #fdf6e9;
	border-radius: 5px;
	font-size: .86rem;
	line-height: 1.45;
}

/* ---------------------------------------------------------------
   Weihnachten im Schlössli (/weihnachten/, /en/christmas/)
   Warm, nicht festlich-kitschig: Holzton statt Rot, viel Weissraum,
   der Tagesablauf als ruhige Liste statt als Tabelle.
   --------------------------------------------------------------- */

/* Der Hero zeigt die Kapelle im Schnee — Motiv etwas tiefer setzen,
   damit der Turm nicht am Textblock klebt. */
.wh-hero img.wp-block-cover__image-background { object-position: center 42%; }

/* Neun Tage als Liste: links wann, rechts was. */
.wh-tage {
	list-style: none; margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; padding: 0;
	border-top: 1px solid var(--wp--preset--color--hellgrau);
}
.wh-tag {
	display: grid;
	grid-template-columns: 12.5rem 1fr;
	gap: 0 clamp(1.2rem, 3vw, 2.4rem);
	padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--hellgrau);
}
.wh-tag-wann { display: flex; flex-direction: column; gap: 0.15rem; }
.wh-tag-datum {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	padding-top: 0.4rem;
}
.wh-tag-zeit {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.5rem; line-height: 1.1;
	color: var(--wp--preset--color--schloessli-holz);
}
.wh-tag-was { display: flex; flex-direction: column; gap: 0.35rem; }
.wh-tag-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.15;
	color: var(--wp--preset--color--tannenschatten);
}
.wh-tag-text {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.95rem; line-height: 1.65;
	color: var(--wp--preset--color--tannenschatten);
	max-width: 46ch;
}
/* Die bewusst leeren Tage: leiser gesetzt, damit die Ruhe sichtbar wird. */
.wh-tag--still .wh-tag-titel,
.wh-tag--still .wh-tag-text { color: var(--wp--preset--color--tiroler-stein); }
.wh-tag--still .wh-tag-titel { font-style: italic; }

/* Preise: keine Gitterlinien, nur Grundlinien — wie eine Karte, nicht wie Excel. */
.wh-preise { margin: clamp(1.4rem, 3.5vw, 2.2rem) 0 0.6rem; overflow-x: auto; }
.wh-preise table { width: 100%; border-collapse: collapse; }
.wh-preise th {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	text-align: left; padding: 0 1.2rem 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hellgrau);
	white-space: nowrap;
}
.wh-preise th:not(:first-child), .wh-preise td:not(:first-child) { text-align: right; padding-right: 0; }
.wh-preise th:nth-child(2), .wh-preise td:nth-child(2) { padding-right: clamp(1.2rem, 4vw, 3rem); }
.wh-preise td {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.98rem;
	color: var(--wp--preset--color--tannenschatten);
	padding: 0.85rem 1.2rem 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hellgrau);
	white-space: nowrap;
}
.wh-preise td:first-child {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.25rem; color: var(--wp--preset--color--schloessli-holz);
	white-space: normal;
}
.wh-preise tr:last-child td { border-bottom: 0; }

/* Die drei ehrlichen Hinweise: derselbe Zweispalter wie der Tagesablauf,
   damit die Seite EINE Ordnung hat. Drei Spalten nebeneinander waren im
   schmalen Textmass zu eng (Titel brachen ueber drei Zeilen). */
.wh-hinweise { margin: clamp(1.4rem, 3.5vw, 2.6rem) 0 0; border-top: 1px solid var(--wp--preset--color--hellgrau); }
.wh-hinweis {
	display: grid;
	grid-template-columns: 12.5rem 1fr;
	gap: 0 clamp(1.2rem, 3vw, 2.4rem);
	padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--hellgrau);
}
.wh-hinweis-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.32rem; line-height: 1.18;
	color: var(--wp--preset--color--schloessli-holz);
	margin: 0;
}
.wh-hinweis-text {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.95rem; line-height: 1.65;
	color: var(--wp--preset--color--tannenschatten);
	margin: 0; max-width: 46ch;
}


@media (max-width: 720px) {
	.wh-tag, .wh-hinweis { grid-template-columns: 1fr; gap: 0.45rem; }
	.wh-tag-wann { flex-direction: row; align-items: baseline; gap: 0.7rem; }
	.wh-tag-datum { padding-top: 0; }
	.wh-tag-zeit { font-size: 1.2rem; }
	.wh-preise td:first-child { font-size: 1.1rem; }
	.wh-preise th, .wh-preise td { font-size: 0.9rem; }
}

/* --- Weihnachts-Auswahl: Zeitraum, Suite, Personen, Preis ---------------
   Kein zweites Design, sondern die Formsprache des Package-Kalenders in
   klein: helle Flaeche, dunkle Auswahl, keine Farbe ausser Tannenschatten. */
.wh-pick {
	margin: clamp(1.6rem, 4vw, 2.6rem) 0 0;
	padding: clamp(1.3rem, 3vw, 2rem);
	background: var(--wp--preset--color--schnee);
	border-radius: 3px;
}
.wh-pick-frage {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.15;
	color: var(--wp--preset--color--tannenschatten);
	margin: 0;
}
.wh-pick-hilfe, .wh-pick-fuss, .wh-pick-pax-hinweis {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.85rem; line-height: 1.6;
	color: var(--wp--preset--color--tiroler-stein);
	margin: 0.35rem 0 0;
}
.wh-pick-tage {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
}
.wh-pick-tag {
	flex: 1 1 3.1rem; min-width: 3.1rem;
	display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
	padding: 0.5rem 0.2rem;
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--hellgrau);
	border-radius: 2px; cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wh-pick-wd {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
}
.wh-pick-nr {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.3rem; line-height: 1;
	color: var(--wp--preset--color--tannenschatten);
}
.wh-pick-tag:hover { border-color: var(--wp--preset--color--tannenschatten); }
.wh-pick-tag.is-drin { background: var(--wp--preset--color--hellgrau); }
.wh-pick-tag.is-an, .wh-pick-tag.is-ab {
	background: var(--wp--preset--color--tannenschatten);
	border-color: var(--wp--preset--color--tannenschatten);
}
.wh-pick-tag.is-an .wh-pick-nr, .wh-pick-tag.is-ab .wh-pick-nr,
.wh-pick-tag.is-an .wh-pick-wd, .wh-pick-tag.is-ab .wh-pick-wd { color: var(--wp--preset--color--schnee); }
.wh-pick-tag.is-aus { opacity: 0.34; cursor: default; }
.wh-pick-zeitraum {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.9rem; color: var(--wp--preset--color--tannenschatten);
	margin: 0.8rem 0 0; min-height: 1.4em;
}
.wh-pick-untertitel {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--mittelgrau);
	margin: clamp(0.9rem, 2vw, 1.2rem) 0 0.5rem;
}
.wh-pick-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.wh-pick-suite {
	width: 100%;
	display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
	padding: 0.7rem 0.9rem; text-align: left;
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--hellgrau);
	border-radius: 2px; cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wh-pick-suite:hover { border-color: var(--wp--preset--color--tannenschatten); }
.wh-pick-suite-name {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.2rem; color: var(--wp--preset--color--schloessli-holz);
}
.wh-pick-suite-preis {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.85rem; color: var(--wp--preset--color--tiroler-stein);
	white-space: nowrap;
}
.wh-pick-suite.is-gewaehlt {
	background: var(--wp--preset--color--tannenschatten);
	border-color: var(--wp--preset--color--tannenschatten);
}
.wh-pick-suite.is-gewaehlt .wh-pick-suite-name,
.wh-pick-suite.is-gewaehlt .wh-pick-suite-preis { color: var(--wp--preset--color--schnee); }
.wh-pick-pax {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
	margin: clamp(0.9rem, 2vw, 1.2rem) 0 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.9rem; color: var(--wp--preset--color--tannenschatten);
}
.wh-pick-pax select {
	font-family: inherit; font-size: 0.9rem;
	padding: 0.3rem 0.5rem; margin-left: 0.3rem;
	border: 1px solid var(--wp--preset--color--hellgrau);
	background: var(--wp--preset--color--weiss);
	border-radius: 2px;
}
.wh-pick-pax[hidden] { display: none; }
.wh-pick-pax-hinweis { margin: 0; }
.wh-pick-summe {
	margin: clamp(1rem, 2.4vw, 1.4rem) 0 0;
	padding-top: clamp(0.9rem, 2vw, 1.2rem);
	border-top: 1px solid var(--wp--preset--color--hellgrau);
}
.wh-pick-summe-zeile {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.92rem; line-height: 1.6;
	color: var(--wp--preset--color--tannenschatten);
	margin: 0;
}
.wh-pick-summe-zeile strong {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: 1.5rem;
	color: var(--wp--preset--color--schloessli-holz);
}
.wh-pick-cta {
	display: inline-block; margin-top: 0.8rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--schnee);
	background: var(--wp--preset--color--tannenschatten);
	border: 1px solid var(--wp--preset--color--tannenschatten);
	padding: 0.72rem 1.4rem; border-radius: 999px;
	transition: background 0.25s ease, border-color 0.25s ease;
}
.wh-pick-cta:hover {
	background: var(--wp--preset--color--schloessli-holz);
	border-color: var(--wp--preset--color--schloessli-holz);
}
.wh-pick-fuss { margin-top: 0.9rem; }

/* --- Weihnachten: die feierliche Schicht ------------------------------
   Kein Rot, kein Glitzer — Kerzenlicht. Warmes Licht im Hero, ein Kerzen-
   Teiler zwischen den Abschnitten und ein dunkler Abend am Seitenende.
   (Matthias, 28.08.: "wir brauchen optisch das Thema Weihnachten".) */

/* Kerzenschein von unten in den winterblauen Hero */
.wh-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.wh-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
	background: linear-gradient(to top, rgba(74, 55, 40, 0.55) 0%, rgba(74, 55, 40, 0.16) 45%, rgba(74, 55, 40, 0) 100%);
	pointer-events: none; z-index: 1;
}

/* Teiler: Haarlinie, Kerze, Haarlinie */
.wh-teiler {
	display: flex; align-items: center; gap: 1.1rem;
	margin: clamp(2.4rem, 6vw, 3.8rem) 0 clamp(1.4rem, 3vw, 2rem);
}
.wh-teiler::before, .wh-teiler::after {
	content: ""; flex: 1 1 auto; height: 1px;
	background: var(--wp--preset--color--hellgrau);
}
.wh-teiler-kerze { width: 26px; height: 26px; flex: 0 0 auto; opacity: 0.75; }
.wh-teiler-kerze [stroke] { stroke: var(--wp--preset--color--schloessli-holz); }

/* Der Abend: dunkles Band ueber die volle Breite, Kerzen darueber */
/* Endet die Seite mit dem Band, faellt die Unterkante des Templates weg —
   sonst bleibt ein leerer Cremestreifen zwischen Band und Fusszeile.
   (calc(-1 * var(--…--spacing--60)) geht nicht: die Variable ist ein clamp().) */
main:has( .wh-abend ) { padding-bottom: 0 !important; } /* !important, weil page.html das padding inline setzt */
/* Das Band liegt auf dem echten Kerzenfoto aus dem Haus (29.08.2026) —
   das ersetzt den frueher gezeichneten Schein und die Kerzen-Icons. */
.wh-abend {
	margin-top: clamp(2.6rem, 6vw, 4.2rem);
	padding: clamp(3rem, 8vw, 5.4rem) clamp(1.2rem, 5vw, 2rem);
	background: #18110C url("assets/img/media/weihnachten-kerzen.webp") center 62% / cover no-repeat;
	position: relative; overflow: hidden;
}
/* Schleier, damit der Text auf dem Foto ruhig steht */
.wh-abend::before {
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient(rgba(24, 17, 12, 0.86), rgba(24, 17, 12, 0.68) 48%, rgba(24, 17, 12, 0.86));
	pointer-events: none;
}
.wh-abend-innen { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; text-align: center; }
.wh-abend-titel {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 2.7rem); line-height: 1.12;
	color: var(--wp--preset--color--schnee);
	margin: 0 0 1rem;
}
.wh-abend-text {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 1rem; line-height: 1.75;
	color: var(--ssl-akzent-hell-stark);
	margin: 0 0 1rem;
}
.wh-abend-schluss { color: var(--wp--preset--color--schnee); }
.wh-abend-namen {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-style: italic; font-size: 1.35rem;
	color: var(--wp--preset--color--schnee);
	margin: 1.6rem 0 0;
}
/* Knopf im dunklen Band: hell umrissen, wie in den st-cta-Sektionen */
.wh-abend-knopf { margin: 1.8rem 0 0; }
.wh-abend-knopf a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.72rem; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--schnee);
	background: transparent;
	border: 1px solid rgba(244, 241, 236, 0.55);
	padding: 0.78rem 1.6rem; border-radius: 999px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wh-abend-knopf a:hover {
	background: var(--wp--preset--color--schnee);
	color: var(--wp--preset--color--tannenschatten);
	border-color: var(--wp--preset--color--schnee);
}

/* Tages-Icon in der Wann-Spalte: klein, ruhig, ueber dem Datum */
.wh-tag-icon { width: 32px; height: 32px; display: block; margin-bottom: 0.5rem; opacity: 0.85; }
.wh-tag-icon [stroke] { stroke: var(--wp--preset--color--schloessli-holz); }
.wh-tag--still .wh-tag-icon { opacity: 0.42; }
@media (max-width: 720px) {
	.wh-tag-wann { flex-wrap: wrap; }
	.wh-tag-icon { width: 24px; height: 24px; margin-bottom: 0; }
}

/* Der Christbaum darf breiter stehen als ein gewoehnliches Hochformat —
   er ist das Bild der Seite. */
.wh-baum.bild-portrait { max-width: 30rem; }

/* Christbaum-Option in der Weihnachts-Auswahl — wie die Personenzeile */
.wh-pick-baum {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
	margin: 0.7rem 0 0;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 0.9rem; color: var(--wp--preset--color--tannenschatten);
}
.wh-pick-baum[hidden] { display: none; }
.wh-pick-baum select {
	font-family: inherit; font-size: 0.9rem;
	padding: 0.3rem 0.5rem; margin-left: 0.3rem;
	border: 1px solid var(--wp--preset--color--hellgrau);
	background: var(--wp--preset--color--weiss);
	border-radius: 2px;
}

/* Das Gesicht zum Text: die Gastgeber klein und rund im Abendband —
   "so sympathisch, dass die Gäste uns kennenlernen möchten" (29.08.2026). */
.wh-abend-gesicht {
	width: 92px; height: 92px; border-radius: 50%;
	object-fit: cover; object-position: center 30%;
	border: 2px solid rgba(244, 241, 236, 0.6);
	margin: 0 auto 1.1rem; display: block;
}