/*
Theme Name: Auenhotel
Theme URI: https://www.auenhotel.at
Author: Mirco Pfohl
Description: Custom Block Theme für das Auenhotel Tux im Zillertal. Natives Gutenberg (FSE), kein Page-Builder, lokale Fonts (DSGVO), Design nach abgestimmtem Prototyp. Buchung läuft extern über Seekda.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: auenhotel
Tags: full-site-editing, block-patterns, custom-colors, editor-style, translation-ready
*/

/*
 * Das meiste Styling kommt aus theme.json (Farben, Typografie, Spacing).
 * Hier stehen nur Dinge, die theme.json (noch) nicht abbildet:
 * Fakten-Laufband (Marquee), Hover-Feinheiten, mobile Sticky-Aktionsleiste.
 * Regel aus dem Briefing: keine Scroll-/Fade-Animationen, nur dezente Hover-States.
 */

/* Formularelemente: Polster/Rahmen immer in die Breite einrechnen.
   Android nutzt bei Datumsfeldern sonst content-box -> Felder ragen aus Karten heraus. */
input, select, textarea, button {
	box-sizing: border-box;
	max-width: 100%;
}

/* Barrierefreiheit: sichtbarer Fokusrahmen in CTA-Farbe */
:where(a, button, input, select, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--cta);
	outline-offset: 3px;
}
html[data-theme="dark"] :where(a, button, input, select, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* Skip-Link: nur bei Tastatur-Fokus sichtbar */
.skip-link {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	border-radius: 0 0 10px 10px;
	font-weight: 600;
	text-decoration: none;
	transition: top .18s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }

/* Bewegung reduzieren: alle Animationen/Transitions aus (Briefing-Regel) */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1 !important; translate: none !important; }
}

/* ---------- Scroll-Inszenierung (Klassen setzt reveal.js) ---------- */
.reveal {
	opacity: 0;
	translate: 0 26px;
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1), translate .7s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, translate;
}
.reveal.is-visible {
	opacity: 1;
	translate: 0 0;
	will-change: auto;
}

/* Weiches Überblenden beim Seitenwechsel (natives Cross-Document View Transition) */
@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .28s;
}

/* ============================================================
   HERO-CHOREOGRAFIE
   Intro beim Laden (Foto sanft rein, dann Text/Widget gestaffelt)
   + ruhige Scroll-Parallax (Foto langsamer, Inhalt setzt sich ab).
   Nur transform/opacity (via Einzel-Properties scale/translate ->
   kein Konflikt). Höhe reserviert = kein CLS. reduced-motion und
   fehlender animation-timeline-Support => alles sofort sichtbar.
   ============================================================ */

/* Intro: läuft in ALLEN Browsern (kein animation-timeline nötig).
   Nur der Scroll-Parallax braucht Support bzw. den JS-Fallback in hero.js. */
@media (prefers-reduced-motion: no-preference) {
	.hero { overflow: hidden; }
	.hero .hero-label, .hero .hero-title, .hero .hero-lead, .hero .bookbar {
		animation: auen-hero-rise 850ms cubic-bezier(.22, .61, .36, 1) both;
	}
	.hero .hero-label { animation-delay: 900ms; }
	.hero .hero-title { animation-delay: 1030ms; }
	.hero .hero-lead  { animation-delay: 1170ms; }
	.hero .bookbar    { animation-delay: 1350ms; }
	@keyframes auen-hero-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
	.hero .wp-block-cover__background { animation: auen-hero-fade 1200ms ease-out 150ms both; }
	@keyframes auen-hero-fade { from { opacity: 0; } to { opacity: 1; } }

	/* Foto-Intro (Fade + dezenter Scale). Mobil: Scale endet auf 1.0. */
	.hero .wp-block-cover__image-background {
		animation: auen-hero-photo 1700ms cubic-bezier(.16, .84, .30, 1) both;
	}
	@keyframes auen-hero-photo { from { opacity: .4; scale: 1.06; } to { opacity: 1; scale: 1; } }
}
/* Desktop: Overscan (Scale 1.08), damit die Parallax nie den Rand zeigt. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
	.hero .wp-block-cover__image-background {
		animation: auen-hero-photo-d 1700ms cubic-bezier(.16, .84, .30, 1) both;
	}
	@keyframes auen-hero-photo-d { from { opacity: .4; scale: 1.14; } to { opacity: 1; scale: 1.08; } }
	@keyframes auen-hero-par { from { translate: 0 0; } to { translate: 0 8%; } }
}
/* Scroll-Parallax nativ, wo der Browser es kann (Chrome/Edge). Firefox: hero.js. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
		.hero .wp-block-cover__image-background {
			animation: auen-hero-photo-d 1700ms cubic-bezier(.16, .84, .30, 1) both,
			           auen-hero-par linear both;
			animation-timeline: auto, view();
			animation-range: normal, exit 0% exit 100%;
		}
		.hero .wp-block-cover__inner-container {
			animation: auen-hero-settle linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 92%;
		}
		@keyframes auen-hero-settle { to { translate: 0 -5%; opacity: 0; } }
	}
}

/* ---------- Topbar ---------- */
.topbar a { text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar-lang { text-align: right; }

/* Polylang-Sprachumschalter in der Topbar */
.topbar-lang ul {
	list-style: none;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	font-size: 13px;
}
.topbar-lang .lang-item:not(:last-child)::after {
	content: "|";
	padding-left: 4px;
	opacity: .5;
}
.topbar-lang .current-lang a { font-weight: 700; color: #fff; }

/* ---------- Sticky Header ---------- */
/* Der Template-Part-Wrapper ist exakt so hoch wie der Header selbst –
   darin kann sticky nie greifen. display:contents nimmt die Hülle aus
   dem Layout, der Header klebt dann am Viewport. */
.wp-site-blocks > .wp-block-template-part:first-child {
	display: contents;
}
/* Achtung: backdrop-filter NICHT direkt auf .site-header legen –
   es macht den Header zum Containing Block und sperrt das
   mobile Navigations-Overlay (position:fixed) in die Kopfleiste ein.
   Deshalb liegt der Blur auf einem ::before dahinter. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: transparent;
	transition: box-shadow .25s ease, padding .25s ease;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--au-header-glass, rgba(250, 246, 239, .92));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
/* Beim Scrollen leicht verdichten (Klasse setzt reveal.js) */
.site-header.is-scrolled {
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 10px 30px rgba(36, 21, 18, .06);
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* Mobiles Menü-Overlay: ruhige Creme-Fläche, große Ziele.
   !important, weil das Navigations-Overlay sonst WordPress' weiße
   Default-Fläche behält -> im Dunkelmodus helle Schrift auf Weiß. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--cream) !important;
	padding: 92px 28px 36px;
}
.is-menu-open .wp-block-navigation-item__content,
.is-menu-open .wp-block-navigation__responsive-container-content a {
	color: var(--wp--preset--color--ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 21px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	padding: 10px 0;
	border: none;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--brand);
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Navigation: dezente Unterstreichung beim Hover (kein Fade) */
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	color: var(--wp--preset--color--ink);
}
.site-header .wp-block-navigation a:hover .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* ---------- Footer ---------- */
footer.site-footer { color: #b3ada7; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-list { list-style: none; padding-left: 0; margin: 0; }
.site-footer .footer-list li { padding: 3px 0; }
.foot-note { color: #8f8983; }
.foot-note a { color: #8f8983; }
.proto-badge {
	border: 1px solid rgba(255, 255, 255, .35);
	color: #faf6ef;
	border-radius: 3px;
	padding: 1px 10px;
}

/* Platzhalter im Editor/Frontend klar kennzeichnen (Briefing-Regel) */
.placeholder-note {
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 8px 12px;
}

/* ---------- Apple-Formsprache: weiche, durchgängige Radien ---------- */
.wp-element-button { border-radius: 10px !important; }
.consent-embed__btn, .newsletter .btn { border-radius: 10px; }
.tile, .pkg, .contact-card, .consent-embed, .welcome-figure img, .welcome-figure figcaption {
	border-radius: 12px;
}
/* ---------- Pauschalen: Bild auf Karte, Gruppen, Detailseite ---------- */
.pkg .pkg-img { display: block; margin: 0 0 12px; border-radius: 10px; overflow: hidden; }
.pkg .pkg-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-radius: 10px;
	transition: scale .5s cubic-bezier(.22, .61, .36, 1);
}
.pkg:hover .pkg-img img { scale: 1.03; }
.pkg { overflow: hidden; }
.pkg-group { margin-bottom: 40px; }
.pkg-group-label { margin-bottom: 14px; }
.pkg-detail-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	margin-top: 4px;
}
.pkg-detail-price small {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--wp--preset--color--ink-soft);
	margin-left: 8px;
	letter-spacing: .02em;
}
.leistungen {
	list-style: none;
	padding: 0;
	margin: 0;
}
.leistungen li {
	padding: 11px 0 11px 32px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: relative;
}
.leistungen li:last-child { border-bottom: none; }
.leistungen li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 15px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='%236b2a23' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Preistabellen (Kinderpreise): Hairlines, ruhige Zeilen */
.preis-tabelle table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
	border: none;
}
.preis-tabelle th, .preis-tabelle td {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 10px 12px;
	text-align: left;
}
.preis-tabelle th {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.preis-tabelle td:last-child, .preis-tabelle td:nth-child(2):not(:last-child) {
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	white-space: nowrap;
}
.preis-tabelle tr:hover td { background: var(--wp--preset--color--paper); }

/* Quick-Row-Varianten (1 oder 2 zentrierte Karten) */
.quick-row-single { grid-template-columns: minmax(0, 420px); justify-content: center; }
.quick-row-two { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
@media (max-width: 740px) {
	.quick-row-single, .quick-row-two { grid-template-columns: 1fr; }
}

/* ---------- Foto-Slider (Scroll-Snap, Wischen nativ) ---------- */
.room-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 22px;
	margin-bottom: 26px;
}
.room-card h3 { margin-bottom: 2px; }
.room-slider {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border-radius: 12px;
	margin: 12px 0 0;
	/* Slider-Wischen nicht auf die Seite durchreichen */
	overscroll-behavior-x: contain;
}
.room-slider::-webkit-scrollbar { display: none; }
.room-slider > .wp-block-image,
.room-slider > figure {
	flex: 0 0 82%;
	margin: 0;
	scroll-snap-align: center;
	/* Bremse: pro Wisch genau ein Bild, kein Durchrutschen mit Schwung */
	scroll-snap-stop: always;
}
.room-slider img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
@media (min-width: 741px) {
	.room-slider > .wp-block-image,
	.room-slider > figure { flex-basis: 46%; }
}
.room-slider-nav {
	display: flex;
	justify-content: center;
	gap: 7px;
	padding: 12px 0 2px;
}
.room-slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: var(--wp--preset--color--line);
	cursor: pointer;
	transition: background .2s ease, scale .2s ease;
}
.room-slider-dot.is-active {
	background: var(--wp--preset--color--brand);
	scale: 1.25;
}
.room-card .room-desc { margin-top: 12px; color: var(--wp--preset--color--ink-soft); font-size: 15px; }
.room-card .tile-go { margin-top: 8px; }
.room-card .tile-go a { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--brand); text-decoration: none; }
.room-card .tile-go a:hover { color: var(--wp--preset--color--cta-hover); }

/* ---------- Service-Seite ---------- */
.quick-row {
	grid-template-columns: repeat(3, 1fr);
	margin: 26px 0 34px;
}
.quick-tile { align-items: center; text-align: center; gap: 6px; }
.quick-tile .icon { width: 30px; height: 30px; }
.quick-tile .quick-label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.quick-tile .quick-value, .quick-tile .quick-value a { overflow-wrap: anywhere; }
.quick-tile .quick-value a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}
.quick-tile .quick-value a:hover { color: var(--wp--preset--color--cta-hover); }
.service-tiles { grid-template-columns: repeat(3, 1fr); }
.service-banner {
	margin-top: 56px;
	padding: 56px 24px;
	text-align: center;
	border-radius: 0;
}
.service-banner h2 { margin-bottom: 22px; }
.service-banner .wp-block-buttons { justify-content: center; }
@media (max-width: 1000px) {
	.service-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 740px) {
	.quick-row { grid-template-columns: 1fr; margin: 22px 0 40px; }
	.service-tiles { grid-template-columns: 1fr; }
	.service-banner { margin-top: 40px; padding: 40px 20px; }
}

/* Galerien: weiche Kacheln, dezenter Hover-Zoom */
.wp-block-gallery .wp-block-image img {
	border-radius: 12px;
	transition: scale .5s cubic-bezier(.22, .61, .36, 1);
}
.wp-block-gallery .wp-block-image { overflow: hidden; border-radius: 12px; }
.wp-block-gallery .wp-block-image:hover img { scale: 1.04; }

/* ---------- Utility: Eyebrow-Label & Linienicons ---------- */
.label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.icon {
	width: 26px;
	height: 26px;
	stroke: var(--wp--preset--color--brand);
	stroke-width: 1.4;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Hero ---------- */
.hero .wp-block-cover__inner-container {
	padding-top: 130px;
	padding-bottom: 54px;
}
.hero .hero-label { color: var(--wp--preset--color--cream); }
.hero .hero-title {
	max-width: 16ch;
	margin: 14px 0 10px;
	line-height: 1.08;
}
.hero .hero-title em { font-style: italic; font-weight: 400; }
.hero .hero-lead {
	max-width: 56ch;
	color: #f2eee7;
	margin-bottom: 30px;
}

/* Buchungsleiste (Seekda-Deep-Link) – ruhige Frosted-Glass-Karte */
.bookbar {
	background: var(--au-glass-bg, rgba(255, 253, 249, .86));
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--au-glass-border, rgba(255, 255, 255, .55));
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(20, 12, 10, .14);
	padding: 22px;
	display: grid;
	grid-template-columns: 1fr 1fr .9fr auto;
	gap: 14px;
	align-items: end;
	max-width: 900px;
}
.bookbar label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 6px;
}
.bookbar input,
.bookbar select {
	width: 100%;
	min-width: 0;
	height: 48px;
	border: 1px solid var(--au-field-border, rgba(40, 32, 28, .12));
	border-radius: 10px;
	padding: 0 14px;
	font: inherit;
	font-size: 16px;
	background: var(--au-field-bg, #fff);
	color: var(--wp--preset--color--ink);
	transition: border-color .2s ease, box-shadow .2s ease;
	/* Native Widget-Deko der Browser vereinheitlichen */
	-webkit-appearance: none;
	appearance: none;
	line-height: 46px;
}
.bookbar input[type="date"] {
	display: block;
	text-align: left;
}
.bookbar input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: .55;
}
/* Select: eigener, feiner Chevron statt Browser-Pfeil */
.bookbar select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e615a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}
/* Weicher Apple-Fokus statt hartem Outline-Ring */
.bookbar input:focus-visible,
.bookbar select:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 4px rgba(107, 42, 35, .14);
}
.bookbar .btn-book {
	background: var(--wp--preset--color--cta);
	color: #fff;
	border: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	height: 48px;
	padding: 0 28px;
	border-radius: 10px;
	white-space: nowrap;
	transition: background .15s ease;
}
.bookbar .btn-book:hover { background: var(--wp--preset--color--cta-hover); }
.wp-element-button, .bookbar .btn-book, .consent-embed__btn { transition: background .2s ease, translate .15s ease; }
.wp-element-button:active, .bookbar .btn-book:active, .consent-embed__btn:active { translate: 0 1px; }
.bookbar small {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--ink-soft);
	font-size: 12.5px;
	letter-spacing: .02em;
}

/* ---------- Fakten-Laufband ---------- */
.ticker {
	color: #f5f1ea;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.ticker .ticker-track {
	display: flex;
	width: max-content;
	animation: auen-tick 46s linear infinite;
	padding: 13px 0;
}
.ticker span {
	white-space: nowrap;
	font-size: 13.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 0 34px;
	position: relative;
}
.ticker span::after {
	content: "·";
	position: absolute;
	right: -4px;
	color: rgba(255, 255, 255, .55);
}
@keyframes auen-tick {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- Willkommen ---------- */
.gold-note {
	border-left: 2px solid var(--wp--preset--color--gold);
	padding: 6px 0 6px 20px;
	margin-top: 22px;
	font-size: 15px;
}
.gold-note strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}
.welcome-figure { overflow: visible; }
.welcome-figure img {
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(36, 21, 18, .14);
	transition: scale .6s cubic-bezier(.22, .61, .36, 1);
}
.welcome-figure:hover img { scale: 1.03; }
.welcome-figure figcaption {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	padding: 14px 18px;
	margin-top: 0;
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
	text-align: left;
}
.welcome-figure figcaption strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	display: block;
}

/* ---------- Sektionsköpfe & Pauschalen-Raster ---------- */
.sec-head { margin-bottom: 44px; }
.more-link a {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold);
	padding-bottom: 3px;
	white-space: nowrap;
}
.more-link a:hover { color: var(--wp--preset--color--cta); }

.pkg-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px 40px;
}
.pkg {
	padding: 30px 26px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--paper);
	transition: background .15s ease, translate .2s ease, box-shadow .2s ease;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.pkg:hover {
	translate: 0 -3px;
	box-shadow: 0 12px 28px rgba(36, 21, 18, .07);
}
.pkg > * { margin: 0; }
.pkg:hover { background: var(--wp--preset--color--cream); }
.pkg .pkg-price strong { transition: color .2s ease; }
.pkg:hover .pkg-price strong { color: var(--wp--preset--color--cta-hover); }
.pkg .season {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.pkg h3 { font-size: 24px; font-weight: 600; }
.pkg h3 a { color: inherit; text-decoration: none; }
.pkg h3 a:hover { color: var(--wp--preset--color--cta); }
.pkg .pkg-desc {
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
	flex: 1;
}
.pkg .pkg-price {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.pkg .pkg-price small {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.pkg .pkg-price strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}
/* Zeitraum-Zeile (Gültigkeit) */
.pkg .pkg-zeitraum {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--wp--preset--color--gold);
	margin: 2px 0 0;
}
/* Staffelpreis: 5 und 7 Nächte nebeneinander */
.pkg .pkg-price--staffel {
	display: flex;
	gap: 26px;
}
.pkg .pkg-price--staffel span { display: block; }
.pkg .pkg-price--staffel strong { font-size: 22px; display: block; }
@media (max-width: 400px) { .pkg .pkg-price--staffel { gap: 18px; } }

/* ---------- Service-Kacheln ---------- */
.tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.tile {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color .2s ease, translate .2s ease, box-shadow .2s ease;
	overflow: hidden;
	min-width: 0;
}
.tile p, .tile h3, .pkg p, .pkg h3 { overflow-wrap: break-word; }
.tile > * { margin: 0; }
.tile:hover {
	border-color: var(--wp--preset--color--brand);
	translate: 0 -3px;
	box-shadow: 0 12px 28px rgba(36, 21, 18, .07);
}
.tile h3 { font-size: 22px; font-weight: 600; }
.tile .tile-desc { font-size: 14px; color: var(--wp--preset--color--ink-soft); }
/* Zimmerkarten: Bild oben, Fakten-Zeile */

.tile .wp-block-image { margin: 0 0 6px; }
.tile .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}
.tile .room-facts {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}
.tile .tile-go { margin-top: auto; padding-top: 12px; }
.tile .tile-go a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}
.tile:hover .tile-go a { color: var(--wp--preset--color--cta); }

/* ---------- Karten-Raster: garantiert gleiche Kartenhöhe ----------
   Behebt "erste Karte größer als der Rest": grid-auto-rows 1fr gibt jeder
   Reihe (und gestapelt jeder Karte) die gleiche Höhe; die Karten strecken
   sich per height:100%. Bild-Crop greift zusätzlich auch bei <img>, die
   nicht in figure.wp-block-image stecken (sonst rendern Ultrawide-Header flach). */
.tiles, .pkg-grid, .room-tiles, .service-tiles { grid-auto-rows: 1fr; }
.tiles > .tile, .pkg-grid > .pkg, .room-tiles > .tile, .service-tiles > .tile { height: 100%; }
.tile img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

/* ---------- Ganze Karte klickbar (stretched link) ----------
   Zimmer-Übersicht & Anfrage-Karten: die komplette Karte führt zum Ziel,
   nicht nur der kleine Link. Weitere Buttons bleiben per z-index bedienbar. */
.room-tiles .tile, .service-tiles .tile, .quick-tile { position: relative; cursor: pointer; }
.room-tiles .tile .tile-go a::after,
.service-tiles .tile .tile-go a::after,
.quick-tile .quick-value a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.room-tiles .tile a:not(.tile-go a),
.service-tiles .tile a:not(.tile-go a),
.quick-tile a:not(.quick-value a) { position: relative; z-index: 2; }
.room-tiles .tile:hover, .service-tiles .tile:hover, .quick-tile:hover {
	border-color: var(--wp--preset--color--brand);
	translate: 0 -3px;
	box-shadow: 0 12px 28px rgba(36, 21, 18, .07);
}
.service-tiles .tile:hover .tile-go a { color: var(--wp--preset--color--cta); }

/* Schlanke Rechtszeile (Impressum · Datenschutz) statt großer Kacheln */
.legal-row { margin-top: 4px; font-size: 13.5px; color: var(--wp--preset--color--ink-soft); }
.legal-row a { color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.legal-row a:hover { color: var(--wp--preset--color--brand); }

/* ---------- Newsletter-Band (vollbreit) ---------- */
.newsletter-band {
	background: var(--wp--preset--color--cream);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 66px 24px;
	margin-block: 8px;
}
.newsletter-band .newsletter-lead {
	max-width: 560px;
	margin-inline: auto;
	margin-top: 6px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 16px;
}
.newsletter-band .wp-block-buttons { margin-top: 26px; }

/* ---------- Anreise & Kontakt (dunkel) ---------- */
.contact-section { color: #ece8e3; }
.contact-section .label { color: var(--wp--preset--color--cream); }
.contact-section .contact-copy { color: #c9c3bd; }
.contact-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 4px;
	padding: 34px;
}
.contact-card h3 { margin-bottom: 18px; }
.contact-card .contact-row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 22px;
	font-size: 15px;
	margin: 0 0 9px;
}
.contact-card .contact-row span { color: #a5a09b; }
.contact-card .contact-row a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.contact-card .contact-row a:hover { border-color: #fff; }
.is-style-outline.btn-line-light > .wp-block-button__link,
.btn-line-light .wp-block-button__link {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
	background: transparent;
}
.is-style-outline.btn-line-light > .wp-block-button__link:hover,
.btn-line-light .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--dark);
}

/* Outline-Button (helle Flächen) */
.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--brand);
	background: transparent;
}
.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand);
	color: #fff;
}

/* ---------- Mobile Aktionsleiste ---------- */
.actionbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	background: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 -8px 24px rgba(36, 21, 18, .12);
}
.actionbar a {
	flex: 1;
	text-align: center;
	padding: 15px 6px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--brand);
}
.actionbar a.primary {
	background: var(--wp--preset--color--cta);
	color: #fff;
}

/* ---------- Mobile-Grundhygiene ---------- */
/* Nie seitlich scrollen – ein einzelnes zu breites Element darf das Layout nicht verschieben */
html, body { overflow-x: clip; }
/* Lange (deutsche) Wörter sauber umbrechen statt über den Rand laufen */
h1, h2, h3, p, li, dd, figcaption { overflow-wrap: break-word; }
/* Keine automatische Silbentrennung: zerlegt Namen wie "Stock-Rieder" (Apple trennt auch nicht) */
/* E-Mail-Adressen/URLs in Fließtext (Impressum, Datenschutz, Kontakt) */
.wp-block-post-content a { word-break: break-word; }

/* ---------- Marken-Lockup im Header (statt langem Site-Titel) ---------- */
.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.brand-logo {
	height: 56px;
	width: auto;
	display: block;
}
@media (max-width: 740px) {
	.brand-logo { height: 44px; }
}
.brand-word {
	font-weight: 600;
	font-size: 19px;
	letter-spacing: .3em;
	color: var(--wp--preset--color--brand);
}
.brand-sub {
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

/* Buchungsleiste: Grid-Kinder dürfen schrumpfen, iOS zoomt nicht rein (16px) */
.bookbar > div { min-width: 0; }
.bookbar input, .bookbar select { font-size: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.pkg-grid { grid-template-columns: 1fr 1fr; }
	.tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 740px) {
	/* Hero: Querformat-Foto nicht in die Höhe zwingen, ruhiger abdunkeln */
	.hero { min-height: 520px !important; }
	.hero .wp-block-cover__image-background { object-position: 50% 32%; }
	.hero .wp-block-cover__background { opacity: .62 !important; }
	.hero .wp-block-cover__inner-container { padding-top: 72px; padding-bottom: 28px; }
	.hero .hero-lead { font-size: 15.5px; }

	/* Alle Felder untereinander in voller Breite: native Datums-Widgets
	   rendern nebeneinander uneinheitlich (Samsung/Chrome) */
	.bookbar { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
	.bookbar small { text-align: center; }

	.pkg-grid, .tiles { grid-template-columns: 1fr; }
	.actionbar { display: flex; }
	body { padding-bottom: 52px; }
	.header-book { display: none; }

	/* Sektionsabstände verdichten (inline 96px aus den Patterns übersteuern) */
	.block-section, .offers-section, .contact-section {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
	.sec-head { margin-bottom: 28px; }
	.hero .wp-block-cover__inner-container { padding-top: 90px; padding-bottom: 40px; }
	.contact-card { padding: 22px; }
	.brand-word { font-size: 16px; letter-spacing: .22em; }
	.brand-sub { font-size: 9.5px; }
}
@media (max-width: 560px) {
	/* Topbar entzerren: E-Mail ausblenden, Rest kompakt */
	.topbar-mail { display: none; }
	.topbar p { margin: 0; }
	/* Kolumnen-Innenabstände der dunklen Karte */
	.contact-card .contact-row { grid-template-columns: 78px 1fr; gap: 12px; }
}

/* Zimmerkarten: 3 Spalten Desktop, 1 Spalte mobil (erbt .tiles-Verhalten) */
@media (min-width: 1001px) {
	.room-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   THEMING: Hell/Dunkel + Akzent-Paletten (Variablen-gesteuert)
   ============================================================ */

/* Hilfsvariablen (Hell-Werte) – im Dark-Block überschrieben. */
:root {
	--au-header-glass: rgba(250, 246, 239, .92);
	--au-glass-bg: rgba(255, 253, 249, .86);
	--au-glass-border: rgba(255, 255, 255, .55);
	--au-field-bg: #fff;
	--au-field-border: rgba(40, 32, 28, .12);
	color-scheme: light;
}

/* ---------- DUNKELMODUS: warmes Espresso, kein kaltes Grau ---------- */
html[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--cream: #17110f;
	--wp--preset--color--paper: #201815;
	--wp--preset--color--dark: #0f0b0a;
	--wp--preset--color--ink: #f2ebe3;
	--wp--preset--color--ink-soft: #b3a89e;
	--wp--preset--color--line: #3a2e28;
	--wp--preset--color--white: #f2ebe3;
	--wp--preset--color--brand: #c46a5e;
	--wp--preset--color--brand-soft: #d98a7e;
	--wp--preset--color--gold: #c46a5e;
	--wp--preset--color--cta: #a23c30;
	--wp--preset--color--cta-hover: #b85446;
	--au-header-glass: rgba(23, 17, 15, .9);
	--au-glass-bg: rgba(32, 24, 21, .82);
	--au-glass-border: rgba(255, 255, 255, .12);
	--au-field-bg: #2a201c;
	--au-field-border: rgba(255, 255, 255, .18);
}
/* Karten im Dunkeln: Schatten verpuffen -> Hairline trägt die Abgrenzung */
html[data-theme="dark"] .pkg,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .welcome-figure img {
	box-shadow: none;
}

/* ---------- Toggle-Button (Topbar) ---------- */
.theme-toggle {
	background: none;
	border: 0;
	padding: 4px;
	margin: 0;
	line-height: 0;
	color: inherit;
	cursor: pointer;
	opacity: .85;
	transition: opacity .2s ease;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: inline; }
.topbar-lang { align-items: center; gap: 12px; }

/* ============================================================
   ELEVATION: cinematischer Hero, Mikrointeraktionen, Feinschliff
   ============================================================ */

/* Hero: statt flachem Dim ein bottom-heavy Verlauf -> Berg oben sichtbar,
   Text unten trägt sauber. Wirkt sofort hochwertiger/„editorial". */
.hero .wp-block-cover__background {
	background: linear-gradient(to top,
		rgba(20, 13, 11, .82) 0%,
		rgba(20, 13, 11, .34) 42%,
		rgba(20, 13, 11, .12) 68%,
		rgba(20, 13, 11, .38) 100%) !important;
	opacity: 1 !important;
}
.hero .hero-label { color: var(--wp--preset--color--cream); }
.hero .hero-lead { color: var(--wp--preset--color--cream); }
/* Feine Goldlinie vor dem Hero-Eyebrow (editorial) */
.hero .hero-label::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 1px;
	margin: 0 12px 5px 0;
	background: currentColor;
	vertical-align: middle;
	opacity: .7;
}

/* Animierte Unterlinie für Text-Links (edler als statischer border-bottom) */
.more-link a, .pkg h3 a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left 100%;
	background-size: 0% 1px;
	transition: background-size .35s cubic-bezier(.22, .61, .36, 1), color .2s ease;
	padding-bottom: 1px;
}
.more-link a:hover, .pkg h3 a:hover { background-size: 100% 1px; }

/* Große Headlines editorial verdichten */
.wp-block-heading { letter-spacing: -.01em; }
.sec-head h2 { line-height: 1.05; }

/* Karten-Hover einheitlich weicher + Bild-Zoom ruhiger */
.tile:hover, .pkg:hover { box-shadow: 0 14px 34px rgba(36, 21, 18, .09); }

/* Ticker im Dunkeln: das grelle Terrakotta-Band auf tiefes Espresso dämpfen */
html[data-theme="dark"] .ticker {
	background: #2a1a16 !important;
	border-top-color: rgba(255, 255, 255, .08);
}

/* Willkommen: Bild leicht aus dem Raster ragen lassen (editorial overlap) */
@media (min-width: 782px) {
	.welcome-figure { margin-block: -18px; }
	.welcome-figure figcaption {
		margin-top: -34px;
		margin-left: 22px;
		width: max-content;
		max-width: 90%;
		position: relative;
		z-index: 2;
	}
}

/* Logo im Dunkeln hell darstellen (Bordeaux waere auf Dunkel unlesbar) */
html[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); opacity: .92; }

/* ============================================================
   KARTEN v2: alle Hub-Karten ganz klickbar + Hero-Lesbarkeit
   ============================================================ */
/* Jede Kachel mit einem "mehr"-Link (.tile-go) wird komplett klickbar. */
.tiles .tile { position: relative; }
.tiles .tile:has(.tile-go a) { cursor: pointer; }
.tiles .tile .tile-go a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.tiles .tile a:not(.tile-go a),
.tiles .tile .wp-block-button { position: relative; z-index: 2; }
.tiles .tile:has(.tile-go a):hover {
	border-color: var(--wp--preset--color--brand);
	translate: 0 -3px;
	box-shadow: 0 14px 34px rgba(36, 21, 18, .09);
}

/* Hero: Eyebrow + Lead etwas prominenter/lesbarer */
.hero .hero-label { font-size: 13px; letter-spacing: .22em; }
.hero .hero-lead { font-size: 17px; line-height: 1.6; }

/* 2-spaltiges Karten-Raster (Hotel-Hub u.a.) – große Bild-Karten */
.tiles-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 28px; }
.tiles-2 .tile .wp-block-image img,
.tiles-2 .tile img { aspect-ratio: 16 / 10; }
@media (max-width: 600px) {
	.tiles-2 { grid-template-columns: 1fr !important; }
}

/* ============================================================
   KARTEN-BÜNDIGKEIT: WordPress-Flow-Margin auf Grid-Items killen
   ------------------------------------------------------------
   .is-layout-flow injiziert margin-block-start auf jedes Kind außer
   dem ersten. In unseren Grid-Rastern schiebt das Karte 2..n nach unten
   -> "erste Karte verschoben". Hier neutralisiert = alle Karten bündig.
   ============================================================ */
.tiles > *,
.tiles-2 > *,
.pkg-grid > *,
.room-tiles > *,
.service-tiles > *,
.quick-row > * { margin-block-start: 0 !important; }

/* ============================================================
   FINAL-POLISH (v0.9.7): editorial-luxury Feinschliff
   ============================================================ */

/* Radien-Token: die vier auseinanderlaufenden Radien vereinheitlichen */
:root { --r-s: 10px; --r-m: 14px; }
.contact-card { border-radius: var(--r-m); }
.welcome-figure figcaption { border-radius: var(--r-s); }

/* Kursive Cormorant-Akzente leichter & etwas größer = Luxus-Anmutung
   (statt schwer im 500/600-Gewicht der Headline mitzulaufen) */
.wp-block-heading em,
.hero-title em { font-style: italic; font-weight: 400; font-size: 1.03em; }

/* Große Displaygrößen etwas kräftiger + minimal negatives Tracking
   (Cormorant wirkt bei 500 auf Bordeaux/Creme sonst dünn) */
.hero-title, .sec-head h2 { font-weight: 600; letter-spacing: -.015em; }

/* Karten: dezenter Ruhe-Schatten (auf Touch ohne Hover nicht mehr "flach"),
   Hover verstärkt. Im Dark bleibt es bei Hairline (weiter oben abgeschaltet). */
.tile, .pkg { box-shadow: 0 1px 3px rgba(36, 21, 18, .05); }
.tile:hover, .pkg:hover,
.tiles .tile:has(.tile-go a):hover { box-shadow: 0 16px 36px rgba(36, 21, 18, .10); }
html[data-theme="dark"] .tile,
html[data-theme="dark"] .pkg { box-shadow: none; }

/* Bild-Karten: Foto randlos oben (bündig mit Kartenkante), Text mit
   sauberem Innenabstand. Einheitlich für Hotel/Aktiv (tiles-2),
   Service (service-tiles) UND Zimmer-Übersicht (room-tiles).
   .tile ist Flex-Column mit gap -> vertikaler Abstand kommt daher,
   hier fehlt nur der horizontale Innenabstand + unten. */
:is(.tiles-2, .service-tiles, .room-tiles) > .tile {
	padding: 0 0 24px;
	overflow: hidden;
}
/* Bild volle Breite, keine Rundung (Karte rundet außen) */
:is(.tiles-2, .service-tiles, .room-tiles) > .tile > .tile-media,
:is(.tiles-2, .service-tiles, .room-tiles) > .tile > .wp-block-image {
	margin: 0 0 8px;
}
:is(.tiles-2, .service-tiles, .room-tiles) > .tile img { border-radius: 0; }
/* alle Nicht-Bild-Kinder bekommen den Innenabstand */
:is(.tiles-2, .service-tiles, .room-tiles) > .tile > :not(.tile-media):not(.wp-block-image) {
	padding-left: 24px;
	padding-right: 24px;
}

/* Einheitliche wachsende Unterlinie auch für Karten-CTAs (.tile-go) */
.tile-go a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left 100%;
	background-size: 0% 1px;
	transition: background-size .35s cubic-bezier(.22, .61, .36, 1), color .2s ease;
	padding-bottom: 1px;
}
.tile:hover .tile-go a, .tile-go a:hover { background-size: 100% 1px; }

/* Primär-CTA: zeitgemäßes Hover-Signal (weicher farbiger Schatten) */
.wp-element-button:hover {
	box-shadow: 0 8px 20px rgba(107, 42, 35, .26);
	transition: box-shadow .2s ease, background-color .2s ease;
}
html[data-theme="dark"] .wp-element-button:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }

/* Fließtext-Zeilenlänge fürs Luxus-Lesegefühl begrenzen */
.block-section > p, .story p { max-width: 68ch; }

/* ============================================================
   FIX-RUNDE (v0.9.9): Hero-Text komplett weiß, saubere Details
   ============================================================ */
/* Hero: alle Copy in reinem Weiß = maximale Lesbarkeit auf dem Foto */
.hero .hero-label, .hero .hero-lead, .hero .hero-title { color: #fff; }
/* etwas stärkere Grund-Abdunklung, damit Weiß auf hellen Bildpartien (Schnee) trägt */
.hero .wp-block-cover__background {
	background: linear-gradient(to top,
		rgba(20, 13, 11, .86) 0%,
		rgba(20, 13, 11, .44) 42%,
		rgba(20, 13, 11, .24) 68%,
		rgba(20, 13, 11, .46) 100%) !important;
	opacity: 1 !important;
}

/* ============================================================
   FIX-RUNDE (v1.0.0): Buchungsfelder Dark + Toggle im Header
   ============================================================ */
/* Gäste-Select: Chevron im Dunkelmodus hell (sonst unsichtbar auf dunklem Feld) */
html[data-theme="dark"] .bookbar select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d8cfc6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Datums-Picker-Icon im Dunkelmodus aufhellen */
html[data-theme="dark"] .bookbar input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: .7;
}

/* Theme-Toggle im Sticky-Header: immer sichtbar, klarer Kontrast in beiden Modi */
.theme-toggle--header {
	color: var(--wp--preset--color--brand);
	margin: 0 2px;
	opacity: 1;
}
.theme-toggle--header svg { display: block; }
.theme-toggle--header:hover { color: var(--wp--preset--color--cta); opacity: 1; }

/* ============================================================
   FIX-RUNDE (v1.0.1): Dark-Kontrast auf immer-dunklen Flächen
   ------------------------------------------------------------
   Topbar/Footer/Kontakt/Banner haben IMMER dunklen Grund (nutzen --dark),
   ihr heller Text läuft aber über --cream -> das flippt im Dunkelmodus
   ins Dunkle = unsichtbar. Lösung: --cream INNERHALB dieser Sektionen im
   Dark auf eine feste helle Farbe umbiegen (der Hintergrund bleibt --dark).
   ============================================================ */
html[data-theme="dark"] :is(.topbar, .site-footer, .contact-section, .service-banner) {
	--wp--preset--color--cream: #ece7df;
}
/* Footer-Body/Fußnote nutzen feste Grautöne -> im Dark aufhellen */
html[data-theme="dark"] footer.site-footer { color: #b6ada4; }
html[data-theme="dark"] .foot-note,
html[data-theme="dark"] .foot-note a { color: #9b938b; }

/* Pauschalen-Teaser auf der Startseite (kurzer Block statt voller Liste) */
.pausch-teaser { max-width: 560px; margin: 0 auto 4px; color: var(--wp--preset--color--ink-soft); font-size: 16px; }

/* Pauschalen-Karten (.pkg) randlos wie die Hub-Bild-Karten:
   Foto bündig oben, Text mit Innenabstand, unten Luft. */
.pkg { padding: 0 0 26px; }
.pkg .pkg-img { margin: 0 0 14px; border-radius: 0; }
.pkg .pkg-img img { border-radius: 0; }
.pkg > :not(.pkg-img) { padding-left: 26px; padding-right: 26px; }

/* ---------- Bild-Lightbox (Zimmer-Slider) ---------- */
.auen-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(12, 8, 7, .94);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.auen-lightbox.is-open { display: flex; }
.auen-lb-stage { margin: 0; }
.auen-lb-stage img {
	max-width: 92vw;
	max-height: 84vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.auen-lb-close, .auen-lb-prev, .auen-lb-next {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	border: 0;
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 30px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}
.auen-lb-close:hover, .auen-lb-prev:hover, .auen-lb-next:hover { background: rgba(255, 255, 255, .26); }
.auen-lb-close { top: 20px; right: 20px; font-size: 22px; }
.auen-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.auen-lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.auen-lb-count {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	letter-spacing: .12em;
}
@media (max-width: 600px) {
	.auen-lightbox { padding: 16px; }
	.auen-lb-prev, .auen-lb-next { width: 44px; height: 44px; font-size: 26px; }
	.auen-lb-prev { left: 10px; }
	.auen-lb-next { right: 10px; }
}

/* ---------- Zimmer-Detailseiten: Buchungs-Link als richtiger Button ---------- */
.room-card .tile-go { margin-top: 6px; }
.room-card .tile-go a {
	display: inline-block;
	background: var(--wp--preset--color--cta);
	color: var(--wp--preset--color--white);
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	background-image: none;
	transition: background-color .2s ease, box-shadow .2s ease;
}
.room-card .tile-go a:hover {
	background: var(--wp--preset--color--cta-hover);
	color: var(--wp--preset--color--white);
	box-shadow: 0 8px 20px rgba(107, 42, 35, .26);
}

/* ---------- Gästestimmen / Bewertungen ---------- */
.review-trust {
	text-align: center;
	font-size: 14px;
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: .01em;
	margin: 0 auto 36px;
	max-width: 620px;
}
.review-trust strong { color: var(--wp--preset--color--brand); font-weight: 600; }
/* Pflegbares Bewertungs-Element (auenhotel/rating) */
.au-rating { text-align: center; margin: 0 auto 40px; max-width: 640px; }
.au-rating__main {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}
.au-rating__score {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(38px, 5vw, 52px);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--brand);
}
.au-rating__score small { font-size: .42em; font-weight: 600; color: var(--wp--preset--color--ink-soft); }
.au-rating__text { font-size: 15px; color: var(--wp--preset--color--ink-soft); text-align: left; max-width: 24ch; }
.au-rating__text strong { color: var(--wp--preset--color--brand); font-weight: 600; }
.au-rating__second { font-size: 13.5px; color: var(--wp--preset--color--ink-soft); margin: 12px 0 0; }
@media (max-width: 540px) { .au-rating__text { text-align: center; } }
.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.review-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 1px 3px rgba(36, 21, 18, .05);
}
.review-stars { display: flex; gap: 3px; color: var(--wp--preset--color--brand); }
.review-stars svg { width: 17px; height: 17px; fill: currentColor; }
.review-quote {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	line-height: 1.45;
	font-style: italic;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.review-author {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wp--preset--color--ink-soft);
	margin-top: auto;
}
.review-author span { color: var(--wp--preset--color--brand); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MODERN-FEINSCHLIFF (v1.1.0) – aus dem Art-Director-Panel
   ============================================================ */
/* Typo: Kerning/Ligaturen + ausgewogene Zeilenumbrüche in Headlines */
.wp-block-heading, .hero-title, .review-quote, .pkg h3, .tile h3 {
	font-kerning: normal;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	text-wrap: balance;
}
.block-section > p, .story p, .review-quote { text-wrap: pretty; }
.pkg .pkg-price strong, .pkg-detail-price { font-variant-numeric: lining-nums tabular-nums; }

/* Bild-Karten: edleres Hover – dezenter Bottom-Verlauf hebt sich, Bild leicht klarer */
:is(.tiles-2, .room-tiles, .service-tiles) > .tile > .wp-block-image,
:is(.tiles-2, .room-tiles, .service-tiles) > .tile > .tile-media { position: relative; }
:is(.tiles-2, .room-tiles, .service-tiles) > .tile > .wp-block-image::after,
:is(.tiles-2, .room-tiles, .service-tiles) > .tile > .tile-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(20, 13, 11, .26), transparent 55%);
	opacity: .5;
	transition: opacity .4s ease;
}
:is(.tiles-2, .room-tiles, .service-tiles) > .tile:hover > .wp-block-image::after,
:is(.tiles-2, .room-tiles, .service-tiles) > .tile:hover > .tile-media::after { opacity: .15; }
:is(.tiles-2, .room-tiles, .service-tiles) > .tile img { filter: saturate(.97); transition: scale .5s cubic-bezier(.22,.61,.36,1), filter .4s ease; }
:is(.tiles-2, .room-tiles, .service-tiles) > .tile:hover img { filter: saturate(1.04); scale: 1.04; }

/* Bewertungen: dezentes großes Anführungszeichen als Editorial-Ornament */
.review-card { position: relative; overflow: hidden; }
.review-card::before {
	content: "\201C";
	position: absolute;
	top: -18px;
	right: 16px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 120px;
	line-height: 1;
	color: var(--wp--preset--color--brand);
	opacity: .08;
	pointer-events: none;
}

/* Weicher Übergang von heller Sektion in die dunkle Kontakt-Sektion */
.contact-section { position: relative; }
.contact-section::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -48px;
	height: 48px;
	background: linear-gradient(var(--wp--preset--color--cream), var(--wp--preset--color--dark));
	pointer-events: none;
}

/* ---------- Interstitial: vollflächiges Bildband als Sektions-Trenner ---------- */
.interstitial { min-height: clamp(320px, 50vh, 540px); }
.interstitial .wp-block-cover__inner-container { max-width: 46ch; margin-inline: auto; text-align: center; }
.interstitial .label { color: var(--wp--preset--color--cream); }
.interstitial .interstitial-quote {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(26px, 3.6vw, 44px);
	line-height: 1.3;
	color: #fff;
	text-wrap: balance;
	margin-top: 10px;
}
.interstitial .wp-block-cover__background {
	background: linear-gradient(rgba(20, 13, 11, .32), rgba(20, 13, 11, .5)) !important;
	opacity: 1 !important;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
		.interstitial { overflow: hidden; }
		.interstitial .wp-block-cover__image-background {
			scale: 1.14;
			animation: auen-hero-par linear both;
			animation-timeline: view();
			animation-range: cover;
		}
	}
}

/* ---------- Zahlen-/Fakten-Band ---------- */
.facts-band {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
	padding: clamp(40px, 6vw, 68px) 24px;
	border-block: 1px solid var(--wp--preset--color--line);
}
.facts-band > div:not(:last-child) { border-right: 1px solid var(--wp--preset--color--line); }
.facts-band .fact-num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1;
	color: var(--wp--preset--color--brand);
	font-variant-numeric: lining-nums tabular-nums;
}
.facts-band .fact-label {
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 740px) {
	.facts-band { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
	.facts-band > div { border-right: none; padding: 18px 0; }
	.facts-band > div:nth-child(odd) { border-right: 1px solid var(--wp--preset--color--line); }
}

/* ============================================================
   SEITEN-HEADER (Unterseiten) – editorial, rein typografisch.
   Eyebrow (Rubrik) + Cormorant-Titel + feine Hairline. Kein Foto
   (bleibt Startseite exklusiv). Nur Theme-Variablen => Hell/Dunkel ok.
   ============================================================ */
.page-header {
	padding-top: clamp(46px, 6.5vw, 96px);
	padding-bottom: clamp(28px, 3.4vw, 46px);
	margin-bottom: clamp(34px, 4vw, 58px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.page-header .page-eyebrow {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--gold);
}
.page-header .page-eyebrow::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1px;
	margin: 0 12px 4px 0;
	background: currentColor;
	vertical-align: middle;
	opacity: .7;
}
.page-header .wp-block-post-title {
	max-width: 20ch;
	margin: 12px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--brand);
	font-size: clamp(34px, 5vw, 60px);
}
.page-header .wp-block-post-title em { font-style: italic; font-weight: 400; font-size: 1.03em; }
.page-header .page-lead {
	max-width: 62ch;
	margin: 18px 0 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: clamp(16px, 1.4vw, 18.5px);
	line-height: 1.6;
}
.page-header .page-lead:empty { display: none; }
@media (max-width: 782px) {
	.page-header { padding-top: clamp(34px, 11vw, 64px); margin-bottom: 30px; }
	.page-header .wp-block-post-title { max-width: 100%; }
}

/* H1/H2-Dopplung entschärfen: erster Content-H2 sitzt jetzt unter einem
   vollwertigen Seiten-Header -> als ruhiger Sektionskopf statt zweiter
   Schlagzeile (kein manueller Eingriff pro Seite). */
.wp-block-post-content > h2.wp-block-heading:first-of-type,
.wp-block-post-content > .wp-block-heading:first-child {
	font-size: clamp(26px, 2.8vw, 36px);
	color: var(--wp--preset--color--ink);
	margin-top: 0;
	letter-spacing: -.01em;
}

/* Dark-Fix: Häkchen der Leistungs-Listen im Dunkelmodus aufhellen
   (SVG-Stroke war hart Bordeaux -> dunkel auf dunkel). */
html[data-theme="dark"] .leistungen li::before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='%23c46a5e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Konsistenter Sektions-Rhythmus mobil: neue Bänder mit einbeziehen */
@media (max-width: 740px) {
	.interstitial, .newsletter-band, .facts-section { padding-top: 56px !important; padding-bottom: 56px !important; }
	.facts-band { padding: 36px 20px; }
}
/* Karten-Radien vereinheitlichen (--r-m = 14px) */
.review-card { border-radius: var(--r-m, 14px); }

/* Fakten-Kacheln (z. B. Saunen): Name + kurze Faktenzeile */
.quick-tile .quick-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--brand);
	margin: 2px 0 0;
}
.quick-tile .quick-fact {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* Intro-Lead innerhalb des Seiteninhalts (größer, ruhiger) */
.wp-block-post-content > .lead,
.entry-content > .lead {
	max-width: 68ch;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 0;
}

/* Wallbox-Hinweis: dezente zentrierte Notiz */
.wallbox-note {
	font-size: 14.5px;
	color: var(--wp--preset--color--ink-soft);
	margin: 18px 0 8px;
}
.wallbox-note::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: 0 8px -2px 0;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08b4f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Gastgeber-Statement: ruhiges, editoriales Zitat-Band */
.host-statement {
	max-width: 22ch;
	margin: clamp(30px, 5vw, 60px) auto;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 3.4vw, 40px);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--brand);
	text-wrap: balance;
}
.host-statement em { font-style: italic; font-weight: 400; }
.host-statement::before {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	margin: 0 auto clamp(18px, 2.4vw, 30px);
	background: var(--wp--preset--color--gold);
}

/* Video-Grid: 2-spaltig statt monotoner Einzelspalte */
.video-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin: 10px 0;
}
.video-grid .consent-embed { margin: 0; }
@media (max-width: 740px) {
	.video-grid { grid-template-columns: 1fr; }
}

/* Akkordeon (core/details): ruhige Info-Karten für Richtlinien */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--r-m, 14px);
	background: var(--wp--preset--color--paper);
	padding: 4px 22px;
	margin: 12px 0;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.wp-block-details[open] {
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 55%, var(--wp--preset--color--line));
	box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .35);
}
.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 34px 16px 0;
	position: relative;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(17px, 1.7vw, 20px);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	outline: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--wp--preset--color--gold);
	border-bottom: 2px solid var(--wp--preset--color--gold);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.wp-block-details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.wp-block-details summary:focus-visible { color: var(--wp--preset--color--cta); }
.wp-block-details > *:not(summary) {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}
.wp-block-details[open] summary { margin-bottom: 4px; }

/* Direktbuchungs-Vorteile unter der Bookbar */
.bookbar .book-perks {
	grid-column: 1 / -1;
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	font-size: 12.5px;
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: .01em;
}
.bookbar .book-perks li { position: relative; padding-left: 19px; }
.bookbar .book-perks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 13px;
	height: 13px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='%236b2a23' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
html[data-theme="dark"] .bookbar .book-perks li::before { filter: brightness(1.7); }
@media (max-width: 740px) { .bookbar .book-perks { justify-content: center; } }

/* ---------- Newsletter-Anmeldeformular (auenhotel/newsletter-form) ---------- */
.au-nl { max-width: 620px; margin: 8px 0 0; }
.au-nl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-nl__field { display: block; }
.au-nl__label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 5px;
}
.au-nl input[type="email"],
.au-nl input[type="text"] {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--au-field-border, var(--wp--preset--color--line));
	border-radius: 10px;
	background: var(--au-field-bg, #fff);
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	font-family: inherit;
}
.au-nl__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}
.au-nl__consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--wp--preset--color--brand); }
.au-nl__consent a { color: var(--wp--preset--color--brand); }
.au-nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.au-nl__btn {
	margin-top: 18px;
	background: var(--wp--preset--color--cta);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px 30px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .2s ease, translate .15s ease;
}
.au-nl__btn:hover { background: var(--wp--preset--color--cta-hover); }
.au-nl__btn:active { translate: 0 1px; }
.au-nl__btn:disabled { opacity: .6; cursor: default; }
.au-nl__msg { margin: 14px 0 0; font-size: 14.5px; min-height: 1.2em; }
.au-nl__msg.is-ok { color: var(--wp--preset--color--brand); font-weight: 600; }
.au-nl__msg.is-error { color: var(--wp--preset--color--cta); font-weight: 600; }
.au-nl__notice {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 35%, var(--wp--preset--color--line));
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 22px;
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}
@media (max-width: 560px) { .au-nl__row { grid-template-columns: 1fr; } }

/* ---------- Anfrageformular (auenhotel/enquiry-form) ---------- */
.au-enq { max-width: 720px; margin: 8px 0 0; }
.au-enq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.au-enq__col2 { grid-column: 1 / -1; }
.au-enq__field { display: block; }
.au-enq__label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 5px;
}
.au-enq input, .au-enq select, .au-enq textarea {
	width: 100%;
	border: 1px solid var(--au-field-border, var(--wp--preset--color--line));
	border-radius: 10px;
	background: var(--au-field-bg, #fff);
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	font-family: inherit;
}
.au-enq input, .au-enq select { height: 48px; padding: 0 14px; }
.au-enq textarea { padding: 12px 14px; line-height: 1.55; resize: vertical; }
.au-enq__preview { margin: 16px 0 4px; }
.au-enq__preview img {
	display: block;
	width: 100%;
	max-height: 300px;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--line);
}
.au-enq__preview figcaption {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	color: var(--wp--preset--color--brand);
	margin-top: 8px;
}
.au-enq__consent {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 16px 0 0; font-size: 14px; line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}
.au-enq__consent input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--wp--preset--color--brand); }
.au-enq__consent a { color: var(--wp--preset--color--brand); }
.au-enq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.au-enq__btn {
	margin-top: 18px;
	background: var(--wp--preset--color--cta);
	color: #fff; border: none; border-radius: 10px;
	padding: 14px 34px; font-size: 15px; font-weight: 600; font-family: inherit;
	cursor: pointer; transition: background .2s ease, translate .15s ease;
}
.au-enq__btn:hover { background: var(--wp--preset--color--cta-hover); }
.au-enq__btn:active { translate: 0 1px; }
.au-enq__btn:disabled { opacity: .6; cursor: default; }
.au-enq__msg { margin: 14px 0 0; font-size: 14.5px; min-height: 1.2em; }
.au-enq__msg.is-ok { color: var(--wp--preset--color--brand); font-weight: 600; }
.au-enq__msg.is-error { color: var(--wp--preset--color--cta); font-weight: 600; }
@media (max-width: 560px) { .au-enq__grid { grid-template-columns: 1fr; } }

/* Kompaktes Newsletter-Formular im Footer */
.au-nl--compact { max-width: 100%; margin-top: 8px; }
.au-nl__inline { display: flex; gap: 8px; }
.au-nl__inline input[type="email"] {
	flex: 1; min-width: 0; height: 44px; padding: 0 12px;
	border: 1px solid rgba(255,255,255,.2); border-radius: 10px;
	background: rgba(255,255,255,.95); color: var(--wp--preset--color--ink);
	font-size: 15px; font-family: inherit;
}
.au-nl--compact .au-nl__btn { margin-top: 0; height: 44px; padding: 0 18px; white-space: nowrap; }
.au-nl--compact .au-nl__consent { font-size: 12px; line-height: 1.45; color: var(--wp--preset--color--cream); margin-top: 10px; }
.au-nl--compact .au-nl__consent a { color: #fff; text-decoration: underline; }
.au-nl--compact .au-nl__consent input { accent-color: var(--wp--preset--color--cta); }
.au-nl--compact .au-nl__msg { font-size: 13px; color: var(--wp--preset--color--cream); }
.au-nl--compact .au-nl__msg.is-ok { color: #fff; }

/* ============================================================
   FINAL-PASS v1.4.0: Desktop-Typografie, Karten-Konsistenz,
   Farbrhythmus (3 Design-Agenten, konsolidiert)
   ============================================================ */

/* ---------- Abstands-Token: einheitlicher Sektionsabstand ---------- */
:root { --au-sec: clamp(56px, 6vw, 88px); }

/* ---------- 1. Typografie: skaliert jetzt bis 1920px ---------- */
.page-header .wp-block-post-title { font-size: clamp(36px, 4vw, 76px); }
.page-header .page-lead { font-size: clamp(16px, 1.4vw, 21px); }

/* De-dupe-H2 (erste Content-Überschrift) mitwachsen lassen */
.wp-block-post-content > h2.wp-block-heading:first-of-type,
.wp-block-post-content > .wp-block-heading:first-child {
	font-size: clamp(28px, 2.6vw, 46px);
}

/* Fließtext: Lesebreite begrenzen (größter Lesbarkeitsgewinn am PC) */
.wp-block-post-content > p { max-width: 72ch; }

/* Karten-Titel: eine gemeinsame fluide Größe statt fixer px */
:root { --au-card-title: clamp(22px, 1.4vw, 27px); }
.tile h3, .pkg h3 { font-size: var(--au-card-title); }
.pkg .pkg-price strong { font-size: clamp(26px, 1.6vw, 31px); }
.quick-tile .quick-name { font-size: clamp(20px, 1.25vw, 24px); }
.quick-tile .quick-fact { font-size: 15px; }
.room-card h3, .contact-card h3 { font-size: clamp(30px, 2.2vw, 42px); }

/* Conversion-Bänder: Überschriften auf Sektionsniveau heben */
.service-banner h2, .newsletter-band h2 { font-size: clamp(32px, 2.6vw, 50px) !important; }

/* ---------- 2. Karten: Raster füllt die Breite (3er nicht mehr linksbündig) ---------- */
.tiles.quick-row { grid-template-columns: repeat(3, 1fr); }
.tiles.service-tiles { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .tiles.service-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 740px) {
	.tiles.quick-row { grid-template-columns: 1fr; }
	.tiles.service-tiles { grid-template-columns: 1fr; }
}
/* Waisen-Karte (7. Service-Kachel) mittig statt links */
.service-tiles > .tile:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 1000px) { .service-tiles > .tile:last-child:nth-child(3n + 1) { grid-column: auto; } }

/* ---------- 3. Hover: Klickbarkeit steuert die Bewegung ---------- */
/* Info-Karten ohne Link: ruhig (kein Lift, kein Marken-Rand, kein Pointer) */
:is(.tile, .quick-tile):not(:has(a)):hover {
	translate: 0 0;
	border-color: var(--wp--preset--color--line);
	box-shadow: 0 1px 3px rgba(36, 21, 18, .05);
}
:is(.tile, .quick-tile):not(:has(a)) { cursor: default; }
:is(.tile, .quick-tile):not(:has(a)):hover img { scale: 1; }

/* Klickbare Karten: überall identischer Schatten (schlägt schwächere Varianten) */
:is(.tiles, .tiles-2, .service-tiles, .room-tiles) .tile:has(a):hover,
.quick-tile:has(a):hover {
	box-shadow: 0 16px 36px rgba(36, 21, 18, .10);
}

/* Pauschalen-Karten: ganz klickbar + gleicher Hover wie Hub-Karten */
.pkg { position: relative; cursor: pointer; }
.pkg h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pkg:hover { border-color: var(--wp--preset--color--brand); box-shadow: 0 16px 36px rgba(36, 21, 18, .10); }
.pkg:hover .pkg-img img { scale: 1.04; }

/* Akkordeon: dezente Hover-Affordance */
.wp-block-details:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 35%, var(--wp--preset--color--line));
}

/* ---------- 4. Farbrhythmus: getöntes Zwischen-Band für Innenseiten ---------- */
.zone-tint {
	background: var(--wp--preset--color--paper);
	border-block: 1px solid var(--wp--preset--color--line);
	padding-block: var(--au-sec);
	margin-block: var(--au-sec);
}
/* Paper-Karten im Paper-Band invertieren, sonst Ton in Ton */
.zone-tint :is(.tile, .quick-tile, .pkg, .wp-block-details, .room-card) {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
}
.zone-tint .wp-block-details { border: 1px solid var(--wp--preset--color--line); }

/* Newsletter-Band sichtbar machen (war cream auf cream) + Token-Abstand */
.newsletter-band {
	background: var(--wp--preset--color--paper) !important;
	margin-block: var(--au-sec) !important;
}

/* Abschlussbanner: einheitlicher Abstand davor */
.service-banner { margin-top: var(--au-sec); }

/* TVB-Bilder: Kuh-Ausschnitt (steht rechts im Original) + sichtbare Credits */
.wp-block-gallery img[src*="kuh.jpg"] { object-position: 82% 50%; }
/* Dezenter Foto-Credit am Hero (Pflicht-Quellenangabe TVB, sichtbar) */
.hero { position: relative; }
.hero::after {
	content: "Foto: Archiv TVB Tux-Finkenberg · Johannes Sautner";
	position: absolute;
	right: 14px;
	bottom: 10px;
	z-index: 2;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: rgba(255, 253, 249, .55);
	pointer-events: none;
}
@media (max-width: 740px) { .hero::after { font-size: 9.5px; right: 10px; bottom: 6px; } }
/* Galerie-Bildunterschrift (Credit) dezent */
.wp-block-gallery .wp-block-image figcaption {
	font-size: 11.5px;
	color: #fffdf9;
	background: linear-gradient(transparent, rgba(20, 13, 11, .65));
}

/* ============================================================
   FINAL-PASS 2 v1.5.0: Sektionsköpfe, Mobile-Verdichtung,
   Bandsprache hell+dunkel, Touch (3 Audit-Agenten)
   ============================================================ */

/* ---------- Sektionskopf-System (repariert 8 Seiten auf einmal) ---------- */
/* Labels nicht von der 72ch-Regel einrücken lassen */
.wp-block-post-content > p.label { max-width: none; margin-top: 64px; }
.wp-block-post-content > p.label:first-child { margin-top: 0; }
/* fester Abstand Label -> H2 (statt 0px/69px-Springen) */
.wp-block-post-content > .label + h2 { margin-top: 12px; }
/* Gold-Hairline vor Content-Labels (gleiche Handschrift wie Seitenkopf) */
.wp-block-post-content > p.label::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1px;
	margin: 0 12px 4px 0;
	background: currentColor;
	vertical-align: middle;
	opacity: .7;
}

/* ---------- Bandsprache: Hairlines auf allen Tonflächen ---------- */
.offers-section, .newsletter-band { border-block: 1px solid var(--wp--preset--color--line); }
/* Dark: Bänder eine Stufe heller, damit der Rhythmus sichtbar bleibt */
html[data-theme="dark"] :is(.zone-tint, .offers-section, .newsletter-band) {
	background: #241b17 !important;
	border-color: #3f322b;
}

/* ---------- Abstands-Feinschliff ---------- */
.wp-block-post-content > .tiles, .wp-block-post-content > .pkg-grid { margin-bottom: 0; }
.consent-embed--16-9 { margin-block: 48px; }
.consent-embed--map { margin-top: 20px; background: var(--wp--preset--color--paper); }
/* Im Tint-Band wäre der Karten-Platzhalter ton-in-ton unsichtbar */
.zone-tint .consent-embed--map { background: var(--wp--preset--color--cream); border: 1px solid var(--wp--preset--color--line); }
.legal-row { margin-top: 24px; }
.video-grid { margin-top: 26px; }

/* ---------- Touch: größere Trefferflächen ohne Layoutänderung ---------- */
.topbar a, .site-footer a { display: inline-block; padding-block: 6px; }
.quick-tile .quick-value a { display: inline-block; padding-block: 8px; }
.room-slider-dot { position: relative; }
.room-slider-dot::after { content: ""; position: absolute; inset: -14px; }

/* ---------- Formular-Dopplung: Footer-Newsletter auf Newsletter-Seiten aus ---------- */
.page-id-28 .site-footer .au-nl--compact,
.page-id-67 .site-footer .au-nl--compact { display: none; }

/* ============================================================
   MOBILE-VERDICHTUNG (bewusster Unterschied zum Desktop)
   ============================================================ */
@media (max-width: 740px) {
	/* Galerien: 1 Bild pro Zeile, echtes Motiv statt Mini-Kachel,
	   Caption ruhig unters Bild */
	.wp-block-gallery.has-nested-images { gap: 12px !important; }
	.wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; }
	.wp-block-gallery.has-nested-images figure.wp-block-image img {
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.wp-block-gallery .wp-block-image figcaption {
		position: static;
		background: none;
		color: var(--wp--preset--color--ink-soft);
		font-size: 11.5px;
		padding: 4px 2px 0;
	}

	/* Fakten-Kacheln: kompakte Zeile (Icon links, Text rechts) statt Karte */
	.quick-tile {
		display: grid;
		grid-template-columns: 44px 1fr;
		align-items: center;
		gap: 2px 12px;
		text-align: left;
		padding: 14px 16px;
	}
	.quick-tile .icon { grid-row: 1 / span 4; width: 28px; height: 28px; }
	.quick-tile > *:not(.icon):not(svg) { grid-column: 2; }
	.quick-tile svg { grid-row: 1 / span 4; }
	.quick-row { gap: 10px; }

	/* Icon-Kachel-Raster: 2 Spalten statt langer Stapel */
	.tiles:not(.tiles-2):not(.service-tiles):not(.room-tiles):not(.quick-row) { grid-template-columns: 1fr 1fr; gap: 12px; }
	.tiles:not(.tiles-2):not(.service-tiles):not(.room-tiles):not(.quick-row) > .tile:not(.quick-tile) { padding: 18px 14px; }
	.tiles.quick-row { grid-template-columns: 1fr; }
	/* Service-Bildkarten: 2er-Grid statt 5600px Stapel */
	.tiles.service-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
	.service-tiles .tile h3 { font-size: 17px; }

	/* Bookbar kompakter: Datumsfelder nebeneinander, nur 1 Vorteils-Punkt */
	.bookbar { grid-template-columns: 1fr 1fr; }
	.bookbar > div:nth-child(3), .bookbar .btn-book { grid-column: 1 / -1; }
	.bookbar .book-perks li:nth-child(n+2) { display: none; }
	/* Hero-Eyebrow: enger, damit er einzeilig bleibt */
	.hero .hero-label { letter-spacing: .16em; font-size: 11px; }

	/* Reviews: 2 statt 3 Karten */
	.reviews-grid .review-card:nth-child(3) { display: none; }

	/* Video-Datenschutzhinweis nicht 7x wiederholen */
	.consent-embed__hint { display: none; }

	/* Footer: Linkspalten als 2er-Grid statt langem Stapel */
	.site-footer .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 4px 24px;
	}
	.site-footer .wp-block-column:first-child { grid-column: 1 / -1; }
	.site-footer .wp-block-column { flex-basis: auto !important; }
}

/* Seekda-KBE-Widget auf der Buchen-Seite.
   Das Widget wird auf allen Geräten direkt eingebettet und startet mit dem
   Seitenaufbau. min-height hält den Platz frei, damit der Text darunter beim
   Erscheinen des Widgets nicht springt. */
.kbe-embed { margin: 34px 0 10px; min-height: 420px; }
.kbe-embed > div { margin-bottom: 26px; }

/* Solange das Widget noch nicht gerendert hat: Hinweis statt weißer Fläche */
.kbe-embed [data-kbe-searchbar]:empty {
	display: grid;
	place-items: center;
	min-height: 120px;
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 12px;
}
.kbe-embed [data-kbe-searchbar]:empty::before {
	content: "Das Buchungssystem wird geladen …";
	font-size: 15px;
	color: var(--wp--preset--color--ink-soft);
	animation: kbe-load-pulse 1.6s ease-in-out infinite;
}
html[lang^="en"] .kbe-embed [data-kbe-searchbar]:empty::before {
	content: "Loading the booking system …";
}
@keyframes kbe-load-pulse {
	50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
	.kbe-embed [data-kbe-searchbar]:empty::before { animation: none; }
}
/* Fehlerbox, wenn das Buchungssystem nicht lädt (Watchdog nach 12 s) */
.kbe-fail {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--paper);
	padding: 26px 22px;
	text-align: center;
}
.kbe-fail p { margin: 0 0 16px; font-size: 15.5px; }
.kbe-fail .kbe-fail-diag {
	font-size: 11px;
	color: var(--wp--preset--color--ink-soft);
	word-break: break-word;
	margin-bottom: 14px;
}
.kbe-fail button {
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--cta);
	color: #fff;
	font: inherit;
	font-weight: 600;
	padding: 12px 22px;
	cursor: pointer;
}
/* Diagnose-Overlay (?kbe-debug=1), nur fürs Debugging am echten Gerät */
.kbe-debug {
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: 76px;
	z-index: 9999;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(20, 16, 14, .92);
	color: #9fe89f;
	font-size: 11.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	pointer-events: none;
}
.kbe-note { font-size: 14.5px; color: var(--wp--preset--color--ink-soft); margin-top: 26px; }

/* Leiste bei Zimmer-Vorauswahl (?zimmer=CODE), kbe-tabs.js blendet sie ein */
.kbe-filter-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--paper);
	padding: 12px 16px;
	font-size: 14.5px;
	color: var(--wp--preset--color--ink-soft);
}
.kbe-filter-note[hidden] { display: none; }
.kbe-filter-reset {
	display: inline-block;
	border-radius: 10px;
	background: var(--wp--preset--color--cta);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 9px 16px;
	text-decoration: none;
	white-space: nowrap;
}
.kbe-filter-reset:hover { background: var(--wp--preset--color--cta-hover); color: #fff; }
.kbe-fail .kbe-fail-tipp { font-size: 13px; color: var(--wp--preset--color--ink-soft); }

/* Buchen-Button im Sticky-Header (nur Desktop, mobil gibt es die Actionbar) */
.header-book-btn {
	display: none;
	background: var(--wp--preset--color--cta);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 10px;
	margin-left: 14px;
	white-space: nowrap;
	transition: background .2s ease, translate .15s ease;
}
.header-book-btn:hover { background: var(--wp--preset--color--cta-hover); }
.header-book-btn:active { translate: 0 1px; }
@media (min-width: 1000px) { .header-book-btn { display: inline-block; } }

/* ============================================================
   Buchen-Seite: Widget-Feinschliff (v1.5.3)
   ============================================================ */
/* Suchleiste: Bordeaux-Band, Labels weiß und größer */
.kbe-embed .kbe-booking-params-wrapper {
	background: var(--wp--preset--color--brand);
	border-radius: 14px;
	padding: 18px 20px;
}
.kbe-embed .bf-search-bar-item-label {
	color: #fffdf9 !important;
	font-size: 14.5px !important;
	font-weight: 600;
	letter-spacing: .04em;
}
.kbe-embed .bf-date-range-picker-input,
.kbe-embed .bf-search-bar-content input,
.kbe-embed .bf-search-bar-content select {
	font-size: 15px !important;
}

/* Buttons im Widget: beim Drüberfahren weiß mit Bordeaux-Schrift und -Rand */
.kbe-embed .kbe-card-button,
.kbe-embed .bf-button-primary {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
	border: 1px solid transparent !important;
}
.kbe-embed .kbe-card-button:hover,
.kbe-embed .bf-button-primary:hover {
	background-color: #ffffff !important;
	color: var(--wp--preset--color--brand) !important;
	border-color: var(--wp--preset--color--brand) !important;
}
/* Gleiche Hover-Sprache für den Hero-Buchungsbutton */
.bookbar .btn-book:hover {
	background: #ffffff !important;
	color: var(--wp--preset--color--brand) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand);
}

/* Angebots-/Zimmerkarten: Buttons bündig auf gleicher Höhe */
.kbe-embed .kbe-card { display: flex; flex-direction: column; height: 100%; }
.kbe-embed .kbe-card > .kbe-room-card { display: flex; flex-direction: column; flex: 1; }
.kbe-embed .kbe-room-card > *:last-child { margin-top: auto; }

/* Tabs Zimmer | Pauschalen über dem Widget */
.kbe-tabs {
	display: flex;
	gap: 10px;
	margin: 26px 0 22px;
}
.kbe-tab {
	flex: 1;
	max-width: 260px;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--brand);
	background: transparent;
	color: var(--wp--preset--color--brand);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.kbe-tab.is-active {
	background: var(--wp--preset--color--brand);
	color: #fffdf9;
}
.kbe-tab:hover:not(.is-active) { background: rgba(107, 42, 35, .08); }
html[data-theme="dark"] .kbe-tab { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
html[data-theme="dark"] .kbe-tab.is-active { background: var(--wp--preset--color--gold); color: #17110f; }

/* Suchen-Button: helleres Buchungs-Rot (wie Seekda-Styling), hebt sich vom Band ab */
.kbe-embed .bf-button-primary {
	background-color: #b8452f !important;
	color: #fffdf9 !important;
	font-weight: 600 !important;
}
.kbe-embed .bf-button-primary:disabled { opacity: .75 !important; }

/* ============================================================
   Buchen-Seite Runde 2 (v1.5.4): Tabs groß, Zimmer-Listenlayout,
   Pauschalen-3er-Grid, Belegung-Label + Hover
   ============================================================ */
/* Tabs: volle Breite, links/rechts, deutlich größer */
.kbe-tabs { gap: 12px; }
.kbe-tab { flex: 1; max-width: none; padding: 16px 20px; font-size: 16.5px; }

/* Zimmer-Deeplink (?skd-scroll-to-room=): kbe-scroll.js scrollt zur Karte
   und hebt sie kurz hervor; scroll-margin hält sie unterm Sticky-Header frei */
.kbe-embed .kbe-room-card { scroll-margin-top: 96px; }
.kbe-embed .kbe-room-hit {
	box-shadow: 0 0 0 3px #b8452f;
	border-radius: 12px;
	transition: box-shadow .5s ease;
}

/* Zimmerkarten: Bild links (scharf statt breitgezogen), Text rechts,
   Preis + Verfügbarkeit-Button unten über volle Breite */
.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) {
	display: grid !important;
	grid-template-columns: 320px 1fr;
	gap: 6px 26px;
	align-items: start;
}
.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) .kbe-room-card-image {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
}
.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) .kbe-room-card-image img {
	width: 100%;
	height: 215px;
	object-fit: cover;
	border-radius: 10px;
}
.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) .kbe-room-card-main-info-wrapper {
	grid-column: 2;
	grid-row: 1;
}
.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) .kbe-room-card-price-and-selection-wrapper {
	grid-column: 1 / -1;
	grid-row: 2;
}
@media (max-width: 740px) {
	.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) { grid-template-columns: 1fr; }
	.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) .kbe-room-card-main-info-wrapper { grid-column: 1; grid-row: 2; }
	.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) .kbe-room-card-price-and-selection-wrapper { grid-column: 1; grid-row: 3; }
	.kbe-embed [data-kbe-rates] .kbe-room-card:not(.kbe-offer-card) .kbe-room-card-image img { height: 200px; }
}

/* Pauschalen: 3er-Karten-Grid (Widget misst versteckten Tab falsch, daher erzwingen) */
.kbe-embed [data-kbe-offers] .kbe-rooms-list-wrapper {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
}
.kbe-embed [data-kbe-offers] .kbe-card-image-wrapper img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (max-width: 1000px) { .kbe-embed [data-kbe-offers] .kbe-rooms-list-wrapper { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) { .kbe-embed [data-kbe-offers] .kbe-rooms-list-wrapper { grid-template-columns: 1fr !important; } }

/* Belegung-Label: gleiche Optik wie Anreise/Abreise (kbe-Klasse statt bf-Klasse) */
.kbe-embed .kbe-search-bar-item-label,
.kbe-embed .kbe-search-bar-item-label span {
	color: #fffdf9 !important;
	font-size: 14.5px !important;
	font-weight: 600;
	letter-spacing: .04em;
	opacity: 1 !important;
}

/* Belegung-Feld: Hover-Rahmen bündig ums weiße Feld (keine weißen Lücken) */
.kbe-embed .kbe-header-occupancy-selector {
	border-radius: 10px;
	overflow: hidden;
}
.kbe-embed .kbe-header-occupancy-selector *:hover { outline: none !important; }
.kbe-embed .kbe-header-occupancy-selector:hover { box-shadow: 0 0 0 2px #b8452f; }

/* Datums-Labels: volle Deckkraft (Widget dimmt sie sonst) */
.kbe-embed .bf-search-bar-item-label { opacity: 1 !important; }

/* ============================================================
   Feedback-Runde v1.6.0
   ============================================================ */
/* Ausrichtung: Fließtext bündig links unter dem Sektionskopf (kein Versatz mehr) */
.wp-block-post-content > p:not(.has-text-align-center) { margin-left: 0 !important; }
/* Sektions-Labels größer (waren zu klein) */
.label { font-size: 13.5px; }
/* Dark: heller Verlaufssaum vor der Kontakt-Sektion neutralisieren */
html[data-theme="dark"] .contact-section::before { display: none; }
/* Hero direkt an den Header (kein Creme-Spalt über dem großen Bild) */
.hero { margin-top: 0 !important; }
main > .wp-block-post-content > .hero:first-child { margin-top: 0 !important; }
/* Content-Bilder deckeln (Pauschalen-Details, Aktiv: Bilder waren zu hoch) */
.wp-block-post-content > figure.wp-block-image img,
.wp-block-post-content figure.wp-block-image.alignwide img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
}

/* Kein WP-blockGap zwischen Header und Seiteninhalt (Spalt überm Hero) */
body main.wp-block-group { margin-block-start: 0 !important; }

/* Fakten-Kacheln: immer gleich hoch in der Reihe */
.tiles.quick-row { grid-auto-rows: 1fr; align-items: stretch; }
.tiles.quick-row > .quick-tile { height: 100%; box-sizing: border-box; }

/* Kuh-Band Kulinarik: Credit dezent IM Bild (wie Hero), mobil größerer Ausschnitt */
.kuli-band { position: relative; margin-block: var(--au-sec); }
/* Tonwechsel passiert MIT der Kuh: Bild sitzt bündig auf dem Tint-Band darunter */
.kuli-band:has(+ .zone-tint) { margin-block-end: 0; }
.kuli-band + .zone-tint { margin-block-start: 0 !important; border-top: 0; }
.kuli-band img { width: 100%; max-height: 560px; object-fit: cover; display: block; }
.kuli-band figcaption {
	position: absolute;
	right: 14px;
	bottom: 10px;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: rgba(255, 253, 249, .6);
}
@media (max-width: 740px) {
	.kuli-band img { height: 340px; max-height: none; object-position: 72% 50%; }
}

/* Info-Karten (tiles-2): Überschrift mit Luft nach oben und zum Inhalt */
.tiles-2 > .tile > h3:first-child { padding-top: 24px; margin-bottom: 12px; }

/* Karten-Titel: lange Einzelwörter (Verwöhnpension) NIE über den Rand laufen lassen */
.tile h3, .pkg h3, .quick-tile .quick-name {
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	max-width: 100%;
	min-width: 0;
}
.tile, .pkg { overflow: hidden; }
/* Schmale 2er-Kacheln mobil: Titel eine Stufe kleiner, bricht sauber */
@media (max-width: 740px) {
	.tiles:not(.tiles-2):not(.service-tiles):not(.room-tiles):not(.quick-row) > .tile h3 { font-size: 19px; }
	.service-tiles .tile h3 { font-size: 16.5px; }
}

/* Kulinarik: Einblicke mit Küchen- und Räume-Video (22.10.2026) */
.kuli-einblick .video-grid { margin: 26px 0 22px; }
.kuli-einblick .wp-block-video { margin: 0; }
.kuli-einblick .wp-block-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: block; background: #1b1716; }
.kuli-einblick .wp-block-video figcaption { font-size: 14px; margin-top: 8px; text-align: left; }
.kuli-einblick .wp-block-gallery .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 740px) {
	.kuli-einblick .wp-block-gallery.has-nested-images { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
	.kuli-einblick .wp-block-gallery.has-nested-images figure.wp-block-image:not(#x) { width: auto !important; margin: 0 !important; }
}
.hotel-eingang { margin-block: 28px 40px; }
.hotel-eingang img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 12px; }

/* ============================================================
   Feedback-Runde 22.10.: Fließtext und Labels bündig an der Inhaltsspalte
   (ersetzt margin-left:0 aus v1.6.0, das Text bis an den Bildschirmrand schob)
   ============================================================ */
.is-layout-constrained > p:not(.has-text-align-center):not(.alignwide):not(.alignfull),
.wp-block-post-content > p:not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.wp-block-post-content > p.label,
.is-layout-constrained > p.label { max-width: var(--wp--style--global--content-size); }
/* Seitenkopf: Titel und Einleitung bündig unter dem Label (wurden durch die Breitenbegrenzung zentriert) */
.page-header.is-layout-constrained > .wp-block-post-title,
.page-header.is-layout-constrained > .page-lead {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
/* Labels in Abschnitten und Spalten: gleiche Hairline und gleicher Abstand zur H2 wie im Fließtext */
.wp-block-post-content :is(.wp-block-group, .wp-block-column) > p.label::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1px;
	margin: 0 12px 4px 0;
	background: currentColor;
	vertical-align: middle;
	opacity: .7;
}
.wp-block-post-content :is(.wp-block-group, .wp-block-column) > p.label + h2 { margin-top: 12px; }
.wp-block-post-content .wp-block-column > p.label { margin-bottom: 0; }
/* Beginnt der Inhalt mit einer Tonfläche, schließt sie direkt an den Seitenkopf an */
.page-header:has(+ .wp-block-post-content > .zone-tint:first-child) { margin-bottom: 0; border-bottom: 0; }
.wp-block-post-content > .zone-tint:first-child { margin-top: 0 !important; }
/* Steht vor dem ersten H2 schon ein eigener Abschnitt (Hotel: Gastgeber), ist er ein normaler Sektionskopf */
.wp-block-post-content > .zone-tint:first-child ~ h2.wp-block-heading:first-of-type {
	font-size: var(--wp--preset--font-size--huge);
	color: var(--wp--preset--color--brand);
}

/* ---------- Startseite 22.10.: Bilder zu Pauschalen, Einblicken und Story ---------- */
.home-split { gap: clamp(32px, 5vw, 72px) !important; }
.home-split .home-side-img { margin: 0; }
.home-split .home-side-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(36, 21, 18, .10);
	display: block;
}
.pausch-split .pausch-teaser { max-width: 52ch; margin-top: 18px; }
.pausch-split .wp-block-buttons { margin-top: 26px; }
.home-split .wp-block-column > p.label + h2 { margin-top: 12px; }
/* Einblick-Karten mit Foto: Bild bündig oben, Text mit Innenabstand */
.photo-tiles > .tile { padding: 0 0 24px; }
.photo-tiles > .tile > .tile-photo { margin: 0 0 10px; }
.photo-tiles > .tile > .tile-photo img { border-radius: 0; aspect-ratio: 4 / 3; }
.photo-tiles > .tile > :not(.tile-photo) { padding-left: 22px; padding-right: 22px; }
.photo-tiles > .tile:hover .tile-photo img { scale: 1.04; }
.photo-tiles > .tile .tile-photo { overflow: hidden; }
.photo-tiles > .tile .tile-photo img { transition: scale .5s cubic-bezier(.22, .61, .36, 1); }
@media (max-width: 781px) {
	.home-split .home-side-img img { aspect-ratio: 3 / 2; }
	.story-split > .wp-block-column:last-child { order: -1; }
}

/* ---------- Kulinarik 22.10.: ruhige Videos ---------- */
/* Kino-Band über die volle Breite: Ausschnitt wandert langsam auf und ab */
.video-band {
	position: relative;
	margin: clamp(56px, 7vw, 96px) 0 0;
	height: clamp(320px, 44vw, 620px);
	overflow: hidden;
	background: var(--wp--preset--color--dark, #1b1411);
}
.video-band video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	display: block;
	animation: auen-video-pan 34s ease-in-out infinite alternate;
	filter: saturate(.95);
}
@keyframes auen-video-pan {
	from { object-position: 50% 20%; scale: 1.04; }
	to   { object-position: 50% 80%; scale: 1; }
}
.video-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 12, 9, .62) 0%, rgba(20, 12, 9, .12) 42%, rgba(20, 12, 9, 0) 70%);
	pointer-events: none;
}
.video-band__cap {
	position: absolute;
	z-index: 1;
	left: max(var(--wp--style--root--padding-left, 24px), calc((100% - var(--wp--style--global--content-size)) / 2));
	bottom: clamp(26px, 4vw, 52px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	color: #fff;
}
.video-band__cap .label { color: var(--wp--preset--color--cream); margin: 0; }
.video-band__cap .label::before {
	content: ""; display: inline-block; width: 30px; height: 1px; margin: 0 12px 4px 0;
	background: currentColor; vertical-align: middle; opacity: .7;
}
.video-band__line {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(26px, 3.2vw, 44px);
	line-height: 1.1;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
/* Video im eigenen Abschnitt: ruhiger Rahmen statt Player */
.video-frame {
	position: relative;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 18px 40px rgba(36, 21, 18, .10);
	background: var(--wp--preset--color--dark, #1b1411);
}
.video-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: auen-video-drift 30s ease-in-out infinite alternate;
}
@keyframes auen-video-drift {
	from { object-position: 30% 50%; }
	to   { object-position: 70% 50%; }
}
.raeume-split { margin-top: clamp(56px, 7vw, 96px) !important; }
/* Pause-Knopf: klein und dezent unten rechts */
.video-calm__btn {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 16px;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	background: rgba(20, 12, 9, .35) center / 14px no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 2h3v10H3zM8 2h3v10H8z' fill='%23fff'/%3E%3C/svg%3E");
	backdrop-filter: blur(4px);
	cursor: pointer;
	opacity: .75;
	transition: opacity .2s ease;
}
.video-calm__btn:hover, .video-calm__btn:focus-visible { opacity: 1; }
.video-calm__btn.is-paused {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1.5l9 5.5-9 5.5z' fill='%23fff'/%3E%3C/svg%3E");
}
.video-calm.is-paused video { animation-play-state: paused; }
.video-band .video-calm__btn { right: max(16px, calc((100% - var(--wp--style--global--content-size)) / 2)); bottom: clamp(26px, 4vw, 52px); }
@media (max-width: 781px) {
	.video-band { height: auto; aspect-ratio: 4 / 5; max-height: 72vh; }
	@keyframes auen-video-pan {
		from { object-position: 30% 50%; }
		to   { object-position: 70% 50%; }
	}
	.video-frame { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
	.video-band video, .video-frame video { animation: none; }
}
.video-band + .kuli-einblick { margin-top: clamp(56px, 7vw, 96px) !important; }
.raeume-split + p { margin-top: clamp(48px, 6vw, 80px) !important; }
@media (max-width: 740px) {
	/* Einblick-Karten am Handy als Querkarten: Foto links, Text rechts */
	.tiles.photo-tiles { grid-template-columns: 1fr !important; grid-auto-rows: auto; gap: 14px; }
	.tiles.photo-tiles > .tile:not(.quick-tile) {
		padding: 0 !important;
		display: grid;
		grid-template-columns: 38% 1fr;
		grid-template-rows: auto auto 1fr;
		column-gap: 16px;
		row-gap: 4px;
		height: auto;
	}
	.photo-tiles > .tile > .tile-photo { grid-row: 1 / span 3; margin: 0; height: 100%; }
	.photo-tiles > .tile > .tile-photo img { height: 100%; min-height: 132px; aspect-ratio: auto; }
	.tiles.photo-tiles > .tile > :not(.tile-photo) { padding: 0 14px 0 0 !important; text-align: left; }
	.tiles.photo-tiles > .tile > h3 { padding-top: 14px !important; font-size: 20px; }
	.tiles.photo-tiles > .tile > .tile-go { padding: 6px 14px 14px 0 !important; }
	/* Küchenband: Pause-Knopf nach oben, damit er die Zeile nicht überdeckt */
	.video-band .video-calm__btn { top: 16px; bottom: auto; right: 16px; }
	.video-band__cap { right: 24px; }
}
@media (max-width: 740px) {
	.tiles.photo-tiles { grid-auto-rows: auto !important; }
	.tiles.photo-tiles > .tile { height: auto !important; }
	.photo-tiles > .tile > .tile-photo { position: relative; min-height: 132px; }
	.photo-tiles > .tile > .tile-photo img { position: absolute; inset: 0; width: 100%; height: 100% !important; min-height: 0; }
}
@media (max-width: 740px) {
	.tiles.photo-tiles > .tile > .tile-photo { width: 100%; grid-column: 1; }
	.tiles.photo-tiles > .tile > h3 { text-align: left !important; }
}
@media (max-width: 740px) {
	.tiles.photo-tiles > .tile > :not(.tile-photo) { margin-left: 0 !important; margin-right: 0 !important; width: auto; max-width: none; }
	.tiles.photo-tiles > .tile > h3.wp-block-heading { padding-top: 14px !important; text-align: left !important; }
}

/* ---------- Startseiten-Hero 22.10.: bewusst ganz links (als einziger Bereich der Seite),
   Label, Titel, Text und Buchungsleiste auf einer Linie ---------- */
.hero .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- Hotelseite 22.10.: Banner, größeres Gastgeberbild, Ankommen mit Inhalt ---------- */
.page-header:has(+ .wp-block-post-content > .hotel-banner:first-child) { margin-bottom: 0; border-bottom: 0; }
.wp-block-post-content > .hotel-banner { margin-top: 0 !important; margin-bottom: 0 !important; }
.hotel-banner img {
	width: 100%;
	height: clamp(260px, 38vw, 560px);
	object-fit: cover;
	object-position: 50% 55%;
	display: block;
}
.hotel-banner + .zone-tint { margin-top: 0 !important; }
.hosts-zone .welcome-figure img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.ankommen-cols { margin-top: clamp(28px, 3vw, 40px) !important; gap: clamp(32px, 5vw, 64px) !important; }
.ankommen-cols .hotel-eingang img { max-height: none; aspect-ratio: 4 / 3; }
.ankommen-cols .leistungen { margin-top: 18px; }
.wp-block-post-content > .hotel-banner:first-child ~ h2.wp-block-heading:first-of-type {
	font-size: var(--wp--preset--font-size--huge);
	color: var(--wp--preset--color--brand);
}
.hosts-zone .welcome-figure figcaption { position: static !important; transform: none !important; margin: 14px 0 0 !important; display: inline-block; }

/* ---------- Gastgeberseite 22.10.: Motto als zentrales Element ---------- */
.statement-band {
	margin-top: clamp(56px, 7vw, 96px) !important;
	padding-top: clamp(64px, 8vw, 120px);
	padding-bottom: clamp(64px, 8vw, 120px);
	background: var(--wp--preset--color--paper);
	border-block: 1px solid var(--wp--preset--color--line);
	text-align: center;
}
.statement-band .label { margin: 0 auto !important; max-width: none; }
.statement-band .label::before { display: none !important; }
.statement-band .host-statement {
	max-width: 18ch;
	margin: 22px auto 0 !important;
	font-size: clamp(34px, 5.4vw, 68px);
	line-height: 1.12;
}
.statement-band .host-statement::before { display: none; }
.statement-band .host-statement::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: clamp(22px, 3vw, 34px) auto 0;
	background: var(--wp--preset--color--gold);
}
.statement-band .statement-sign {
	margin: 18px auto 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(18px, 1.6vw, 22px);
	color: var(--wp--preset--color--ink-soft);
}
.statement-band + .zone-tint { margin-top: 0 !important; border-top: 0; }
.hosts-gallery { margin-top: clamp(24px, 3vw, 36px) !important; }
.hosts-gallery .wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Erster H2 nach einem vollbreiten Abschnitt ist ein normaler Sektionskopf */
.wp-block-post-content > .alignfull ~ h2.wp-block-heading:first-of-type {
	font-size: var(--wp--preset--font-size--huge);
	color: var(--wp--preset--color--brand);
}

/* ---------- Kulinarik 22.10. Runde 2 ---------- */
/* Tageskarten mit Foto: Bild bündig oben, Text linksbündig */
.day-row > .tile.quick-tile { padding: 0 0 26px; align-items: stretch; text-align: left; gap: 6px; }
.day-row > .tile > .tile-photo { margin: 0 0 12px; overflow: hidden; }
.day-row > .tile > .tile-photo img { aspect-ratio: 3 / 2; border-radius: 0; transition: scale .5s cubic-bezier(.22, .61, .36, 1); }
.day-row > .tile:hover > .tile-photo img { scale: 1.04; }
.day-row > .tile > :not(.tile-photo) { padding-left: 24px; padding-right: 24px; margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.day-row .quick-label { color: var(--wp--preset--color--gold); }
.day-row .quick-name { font-size: var(--au-card-title, 24px); }
/* Küchenvideo im eigenen Abschnitt: 16:9, ruhig, ohne Schwenk */
.video-frame.video-wide { aspect-ratio: 16 / 9; }
.video-frame.video-wide video { animation: none; object-position: 50% 50%; }
.kueche-split, .herkunft-split { gap: clamp(32px, 5vw, 64px) !important; }
.kueche-split { margin-top: clamp(56px, 7vw, 96px) !important; }
.kueche-split + .kuli-einblick { margin-top: clamp(56px, 7vw, 96px) !important; }
/* Herkunft: Bild neben dem Text, Karten mit klarer Überschrift */
.herkunft-img { margin: 0; }
.herkunft-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 40px rgba(36, 21, 18, .10); display: block; }
.sub-head {
	margin-top: clamp(44px, 5vw, 64px) !important;
	margin-bottom: 18px !important;
	font-size: clamp(24px, 2.2vw, 30px);
	color: var(--wp--preset--color--brand);
}
.sub-head + .tiles-2 > .tile { border-top: 3px solid var(--wp--preset--color--gold); }
.sub-head + .tiles-2 > .tile > h3 { text-align: left; }
@media (max-width: 781px) {
	.kueche-split > .wp-block-column:first-child { order: 1; }
}
@media (max-width: 781px) {
	.tiles.day-row > .tile.quick-tile { display: flex !important; flex-direction: column; padding: 0 0 22px !important; grid-template-columns: none !important; }
	.tiles.day-row > .tile > .tile-photo { width: 100%; grid-column: auto !important; grid-row: auto !important; }
	.tiles.day-row > .tile > :not(.tile-photo) { grid-column: auto !important; padding-left: 20px !important; padding-right: 20px !important; }
}