/*
Theme Name:   Haus Lannachberg
Theme URI:    https://haus-lannachberg.at/
Description:  Childthema für GeneratePress – Konzept C „Ruhig & klar“. Schriften lokal (keine Verbindung zu Google Fonts).
Author:       Tiefrot.design
Template:     generatepress
Version:      1.6.0
Requires at least: 6.5
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  haus-lannachberg
*/

/* =========================================================
   1. Schriften (lokal, DSGVO-freundlich)
   ========================================================= */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }

/* =========================================================
   2. Design-Tokens
   ========================================================= */
:root {
	--hl-bg: #F4F3EF;
	--hl-surface: #FFFFFF;
	--hl-ink: #1C1C1A;
	--hl-text: #45433D;
	--hl-muted: #5E5E58;
	--hl-line: #E2E0D9;
	--hl-border: #CFCDC5;
	--hl-accent: #2F4B63;
	--hl-accent-dark: #1C3247;
	--hl-tint: #D5DEE6;
	--hl-radius: 6px;
	--hl-radius-sm: 4px;
	--hl-max: 1240px;
	--hl-gutter: 32px;
	--hl-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--hl-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hl-shadow: 0 8px 30px rgba(28, 28, 26, 0.10);
}
@media (max-width: 768px) {
	:root { --hl-gutter: 20px; }
}

/* =========================================================
   3. Grundlagen (überschreibt GeneratePress)
   ========================================================= */
body {
	background-color: var(--hl-bg);
	color: var(--hl-ink);
	font-family: var(--hl-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--hl-accent); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--hl-accent-dark); }
:focus-visible { outline: 2px solid var(--hl-accent); outline-offset: 3px; }

h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3 {
	font-family: var(--hl-serif);
	font-weight: 400;
	line-height: 1.05;
	color: var(--hl-ink);
	letter-spacing: 0;
	margin-bottom: 0.4em;
}
h1 { font-size: clamp(44px, 6vw, 72px); }
h2 { font-size: clamp(34px, 4vw, 52px); }
h3 { font-size: clamp(26px, 3vw, 36px); }
h4 { font-family: var(--hl-sans); font-weight: 600; font-size: 18px; line-height: 1.3; }

.site, .site-content, .inside-article,
.separate-containers .inside-article,
.one-container .container { background-color: transparent; }

/* =========================================================
   4. Header + Navigation
   ========================================================= */
.site-header { background-color: transparent; }
.inside-header {
	max-width: var(--hl-max);
	padding: 22px var(--hl-gutter);
}
.main-title { font-family: var(--hl-serif); font-size: 30px; font-weight: 400; line-height: 1.1; }
.main-title a, .main-title a:hover { color: var(--hl-ink); text-decoration: none; }
.site-description { display: none; }
.main-title a { display: inline-flex; align-items: center; gap: 12px; }
.hl-hirsch { height: 46px; width: auto; flex: none; color: var(--hl-accent); }
.main-title a:hover .hl-hirsch { color: var(--hl-accent-dark); }
@media (max-width: 768px) {
	.main-title { font-size: 26px; }
	.hl-hirsch { height: 38px; }
}

.main-navigation,
.main-navigation ul ul { background-color: transparent; }
.main-navigation .main-nav ul li a {
	color: var(--hl-ink);
	font-size: 15px;
	padding-left: 14px;
	padding-right: 14px;
	line-height: 48px;
}
.main-navigation .main-nav ul li:not(.hl-cta) a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"]:not(.hl-cta) > a {
	color: var(--hl-ink);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 6px;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a { font-weight: 600; }

/* Sprachumschalter (Polylang: Menüeintrag „Sprachumschalter“) */
.main-navigation .main-nav ul li.lang-item a { color: var(--hl-muted); font-size: 14px; padding-left: 8px; padding-right: 8px; }

/* Button im Menü: Menüeintrag mit CSS-Klasse „hl-cta“ */
.main-navigation .main-nav ul li.hl-cta { margin-left: 12px; display: flex; align-items: center; }
.main-navigation .main-nav ul li.hl-cta > a {
	background: var(--hl-accent);
	color: #fff;
	border-radius: var(--hl-radius-sm);
	font-weight: 600;
	line-height: 44px;
	padding: 0 20px;
}
.main-navigation .main-nav ul li.hl-cta > a:hover,
.main-navigation .main-nav ul li.hl-cta[class*="current-menu-"] > a { background: var(--hl-accent-dark); color: #fff; text-decoration: none; }

/* Mobile Menü */
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: var(--hl-ink); background: transparent; }
@media (max-width: 768px) {
	.main-navigation.toggled .main-nav ul li a { line-height: 48px; }
	.main-navigation.toggled .main-nav > ul { background: var(--hl-surface); border-radius: var(--hl-radius); padding: 8px 0; }
	.main-navigation .main-nav ul li.hl-cta { margin: 8px 14px; }
	.main-navigation .main-nav ul li.hl-cta > a { text-align: center; width: 100%; }
}

/* =========================================================
   5. Seitenlayout: volle Breite für Seiten (Klasse hl-full via functions.php)
   ========================================================= */
.hl-full .site.grid-container { max-width: none; }
.hl-full .site-content,
.hl-full.one-container .site-content,
.hl-full.separate-containers .site-content { padding: 0; }
.hl-full .inside-article,
.hl-full.separate-containers .inside-article { padding: 0; margin: 0; }
.hl-full .entry-content:not(:first-child) { margin-top: 0; }
.hl-full .entry-header {
	max-width: var(--hl-max);
	margin: 0 auto;
	padding: 40px var(--hl-gutter) 8px;
	box-sizing: border-box;
}
.hl-full .entry-content > *:not(.hl-section):not(.alignfull) {
	max-width: calc(var(--hl-max) - 2 * var(--hl-gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hl-gutter);
	padding-right: var(--hl-gutter);
	box-sizing: content-box;
}
.hl-full .entry-content > .hl-section { margin-top: 0; margin-bottom: 0; }

/* Normale Inhalte (Impressum, Datenschutz …) */
body:not(.hl-full) .site.grid-container { max-width: var(--hl-max); }

/* =========================================================
   6. Sektionen
   ========================================================= */
.hl-section {
	padding-top: 88px;
	padding-bottom: 88px;
	padding-left: max(var(--hl-gutter), calc((100% - var(--hl-max)) / 2 + var(--hl-gutter)));
	padding-right: max(var(--hl-gutter), calc((100% - var(--hl-max)) / 2 + var(--hl-gutter)));
	box-sizing: border-box;
}
.hl-section > * { margin-top: 0; }
.hl-section > * + * { margin-top: 20px; }
.hl-section--white { background: var(--hl-surface); }
.hl-section--flush-top { padding-top: 0; }
.hl-section--tight { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 768px) {
	.hl-section { padding-top: 56px; padding-bottom: 56px; }
	.hl-section--flush-top { padding-top: 0; }
}

.hl-kicker { font-size: 14px; font-weight: 600; color: var(--hl-muted); margin-bottom: 6px; }
.hl-lead { font-size: 18px; color: var(--hl-text); max-width: 640px; }
.hl-small { font-size: 14px; color: var(--hl-muted); }
.hl-more a, a.hl-more { font-weight: 600; text-decoration: none; }
.hl-more a:hover { text-decoration: underline; }

/* =========================================================
   7. Hero (Cover-Block mit Klasse hl-hero)
   ========================================================= */
.wp-block-cover.hl-hero {
	border-radius: var(--hl-radius);
	overflow: hidden;
	padding: 48px 48px 92px;
	min-height: 560px;
}
.wp-block-cover.hl-hero .wp-block-cover__inner-container { width: 100%; max-width: 820px; margin: 0; color: #fff; }
.wp-block-cover.hl-hero h1 {
	color: #fff;
	font-size: clamp(44px, 7vw, 80px);
	line-height: 1;
	margin: 0;
}
.wp-block-cover.hl-hero p { color: #fff; max-width: 640px; margin: 16px 0 0; font-size: 19px; }
@media (max-width: 768px) {
	.wp-block-cover.hl-hero { padding: 24px 24px 72px; min-height: 420px; }
}

/* Buchungsleiste unter dem Hero (HTML-Block) */
.hl-bookbar {
	position: relative;
	z-index: 2;
	margin: -44px 24px 0;
	background: var(--hl-surface);
	border-radius: var(--hl-radius);
	box-shadow: var(--hl-shadow);
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
}
.hl-section > .hl-bookbar { margin-top: -44px; }
.hl-field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; }
.hl-field--small { flex-basis: 120px; }
.hl-field label { font-size: 13px; font-weight: 600; color: var(--hl-muted); }
.hl-field input, .hl-field select, .hl-field textarea {
	font: inherit;
	font-size: 16px;
	color: var(--hl-ink);
	padding: 12px;
	border: 1px solid var(--hl-border);
	border-radius: var(--hl-radius-sm);
	background: var(--hl-surface);
	width: 100%;
	box-sizing: border-box;
	height: 50px;
}
.hl-btn,
.hl-bookbar button {
	font: inherit;
	font-weight: 600;
	font-size: 16px;
	background: var(--hl-accent);
	color: #fff;
	border: 0;
	border-radius: var(--hl-radius-sm);
	padding: 14px 28px;
	min-height: 48px;
	cursor: pointer;
}
.hl-btn:hover, .hl-bookbar button:hover, .hl-bookbar button:focus { background: var(--hl-accent-dark); color: #fff; }
@media (max-width: 768px) {
	.hl-bookbar { margin-left: 0; margin-right: 0; }
	.hl-bookbar button { width: 100%; }
}

/* =========================================================
   8. Ausstattung mit Icons (Liste mit Klasse hl-facts)
   Reihenfolge der Icons = Reihenfolge der Punkte:
   1 Personen · 2 Wohnung · 3 Terrasse · 4 Küche · 5 WLAN · 6 Heizung · 7 Auto · 8 Nichtraucher
   ========================================================= */
.wp-block-list.hl-facts,
ul.hl-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px 40px;
}
.hl-facts li {
	position: relative;
	padding-left: 44px;
	margin: 0;
	color: var(--hl-muted);
	font-size: 15px;
	line-height: 1.55;
}
.hl-facts li strong { display: block; color: var(--hl-ink); font-size: 16px; font-weight: 600; }
.hl-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	background-color: var(--hl-accent);
	-webkit-mask: var(--hl-icon) center / contain no-repeat;
	mask: var(--hl-icon) center / contain no-repeat;
}
.hl-facts li:nth-child(1) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M15 20c0-2 .8-3.8 2-4.6 2.2.3 4 2.2 4 4.6'/%3E%3C/svg%3E"); }
.hl-facts li:nth-child(2) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.hl-facts li:nth-child(3) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.hl-facts li:nth-child(4) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3Cpath d='M8 6h.01M11 6h.01'/%3E%3C/svg%3E"); }
.hl-facts li:nth-child(5) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E"); }
.hl-facts li:nth-child(6) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M6 16c1.5-1.5 1.5-3.5 0-5s-1.5-3.5 0-5M12 16c1.5-1.5 1.5-3.5 0-5s-1.5-3.5 0-5M18 16c1.5-1.5 1.5-3.5 0-5s-1.5-3.5 0-5'/%3E%3C/svg%3E"); }
.hl-facts li:nth-child(7) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14l-1.5-6h-11z'/%3E%3Cpath d='M7 11l1.5-4h7L17 11'/%3E%3Ccircle cx='8' cy='18' r='1.5'/%3E%3Ccircle cx='16' cy='18' r='1.5'/%3E%3C/svg%3E"); }
.hl-facts li:nth-child(8) { --hl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); }

/* =========================================================
   9. Galerie (Gruppe mit Klasse hl-gallery, darin Bild-Blöcke)
   ========================================================= */
.hl-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.hl-gallery > * { margin: 0 !important; }
.hl-gallery .wp-block-image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: var(--hl-radius);
	display: block;
}
.hl-gallery .wp-block-image figcaption { font-size: 13px; color: var(--hl-muted); margin-top: 6px; }

/* =========================================================
   10. Spalten, Listen, Zitate
   ========================================================= */
.wp-block-columns.hl-trio { gap: 48px; margin-bottom: 0; }
.hl-trio h2 { font-size: 40px; line-height: 1.1; }
.hl-trio p { color: var(--hl-text); }

.wp-block-list.hl-meta-list,
ul.hl-meta-list { list-style: none; margin: 0 0 16px; padding: 0; color: var(--hl-text); }
.hl-meta-list li { padding: 9px 0; border-bottom: 1px solid var(--hl-line); margin: 0; }
.hl-meta-list li:last-child { border-bottom: 0; }

.hl-quote { font-family: var(--hl-serif); font-size: 24px; line-height: 1.3; color: var(--hl-ink) !important; margin-bottom: 8px; }
.hl-cite { font-size: 14px; color: var(--hl-muted) !important; }
.hl-cite + .hl-quote { margin-top: 28px; }

/* =========================================================
   11. Buttons (Button-Block)
   ========================================================= */
.wp-block-button__link,
.wp-element-button {
	background: var(--hl-accent);
	color: #fff;
	border-radius: var(--hl-radius-sm);
	font-family: var(--hl-sans);
	font-weight: 600;
	font-size: 16px;
	padding: 16px 28px;
	text-decoration: none;
	line-height: 1.2;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus { background: var(--hl-accent-dark); color: #fff; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--hl-ink);
	border: 1.5px solid var(--hl-ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--hl-ink); color: #fff; }

/* CTA-Karte (Gruppe mit Klasse hl-cta-card) */
.hl-cta-card {
	background: var(--hl-surface);
	border-radius: var(--hl-radius);
	padding: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}
.hl-cta-card > * { margin: 0 !important; }
.hl-cta-card > .wp-block-group { flex: 1 1 420px; min-width: 0; }
.hl-cta-card h2 { font-size: 40px; line-height: 1.1; margin-bottom: 6px; }
.hl-cta-card p { color: var(--hl-muted); margin: 0; }
.hl-section--white .hl-cta-card { background: var(--hl-bg); }

/* =========================================================
   12. Footer
   ========================================================= */
.site-footer, .site-info { background: transparent; color: var(--hl-muted); }
.site-info { border-top: 1px solid var(--hl-line); }
.inside-site-info { max-width: var(--hl-max); padding: 32px var(--hl-gutter); }
.site-info .copyright-bar { width: 100%; text-align: left; }
.hl-footer { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; font-size: 14px; }
.hl-footer a { color: var(--hl-accent); }
.hl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hl-footer li { margin: 0; }

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}

/* =========================================================
   13. Bewertungen (Gruppe hl-reviews mit Gruppen hl-review)
   ========================================================= */
.hl-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.hl-reviews > * { margin: 0 !important; }
.hl-review {
	background: var(--hl-bg);
	border-radius: var(--hl-radius);
	padding: 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}
.hl-review > * { margin: 0 !important; }
.hl-review .hl-quote { font-size: 22px; }
.hl-review .hl-cite { line-height: 1.5; }
.hl-review .hl-cite strong { color: var(--hl-ink); font-weight: 600; }
.wp-block-columns.hl-duo { gap: 64px; }

/* =========================================================
   14. Klassische Themes: WordPress setzt in Gruppen-Blöcke einen
   zusätzlichen .wp-block-group__inner-container, und GeneratePress
   gibt ihm max-width + 40px Padding. Raster/Flex daher auf diesen
   inneren Container legen und das Padding neutralisieren.
   ========================================================= */
.hl-gallery:has(> .wp-block-group__inner-container),
.hl-reviews:has(> .wp-block-group__inner-container),
.hl-review:has(> .wp-block-group__inner-container),
.hl-cta-card:has(> .wp-block-group__inner-container) { display: block; }

.hl-section > .wp-block-group__inner-container,
.hl-gallery > .wp-block-group__inner-container,
.hl-reviews > .wp-block-group__inner-container,
.hl-review > .wp-block-group__inner-container,
.hl-cta-card > .wp-block-group__inner-container,
.hl-cta-card .wp-block-group > .wp-block-group__inner-container {
	max-width: none;
	padding: 0;
	margin: 0;
}
.hl-section > .wp-block-group__inner-container > * { margin-top: 0; }
.hl-section > .wp-block-group__inner-container > * + * { margin-top: 20px; }
.hl-section > .wp-block-group__inner-container > .hl-bookbar { margin-top: -44px; }

.hl-gallery > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.hl-reviews > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.hl-review > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
}
.hl-cta-card > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}
.hl-cta-card > .wp-block-group__inner-container > .wp-block-group { flex: 1 1 420px; min-width: 0; }
.hl-gallery > .wp-block-group__inner-container > *,
.hl-reviews > .wp-block-group__inner-container > *,
.hl-review > .wp-block-group__inner-container > *,
.hl-cta-card > .wp-block-group__inner-container > * { margin: 0 !important; }

/* =========================================================
   15. Unterseiten: Intro, Fotos, Räume, Checkliste, Tabellen, Schritte
   ========================================================= */
.hl-section--intro { padding-top: 40px; padding-bottom: 48px; }
.hl-section--intro h1 { margin-bottom: 16px; }
.hl-section--intro .wp-block-buttons { margin-top: 28px; }

/* Fotogalerie (Galerie-Block mit Klasse hl-photos) */
/* Eigenes Raster statt WP-Flex-Galerie: gleich in jedem Theme, 3 Spalten am Desktop */
.wp-block-gallery.hl-photos {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
}
.wp-block-gallery.hl-photos > .wp-block-image,
.wp-block-gallery.hl-photos.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: auto !important;
	margin: 0 !important;
	flex: none;
}
.wp-block-gallery.hl-photos .wp-block-image img {
	width: 100%;
	height: 100% !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hl-radius);
	display: block;
}

/* Räume */
.hl-rooms,
.hl-rooms > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px 28px;
}
.hl-rooms:has(> .wp-block-group__inner-container) { display: block; }
.hl-rooms > .wp-block-group__inner-container,
.hl-room > .wp-block-group__inner-container,
.hl-steps > .wp-block-group__inner-container,
.hl-step > .wp-block-group__inner-container { max-width: none; padding: 0; margin: 0; }
.hl-rooms > *, .hl-rooms > .wp-block-group__inner-container > * { margin: 0 !important; }
.hl-room .wp-block-image { margin: 0 0 14px; }
.hl-room .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hl-radius); display: block; }
.hl-room h3 { font-family: var(--hl-sans); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.hl-room p { margin: 0; color: var(--hl-text); }

/* Checkliste (Liste mit Klasse hl-checklist) */
.wp-block-list.hl-checklist,
ul.hl-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 40px;
}
.hl-checklist li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 32px;
	border-bottom: 1px solid var(--hl-line);
}
.hl-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 15px;
	width: 18px;
	height: 18px;
	background-color: var(--hl-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tabellen (Tabellen-Block mit Klasse hl-table) */
.wp-block-table.hl-table { margin: 0 0 16px; }
.wp-block-table.hl-table table { border-collapse: collapse; width: 100%; font-size: 16px; }
.wp-block-table.hl-table th,
.wp-block-table.hl-table td {
	border: 0;
	border-bottom: 1px solid var(--hl-line);
	padding: 12px 0;
	text-align: left;
	vertical-align: top;
}
.wp-block-table.hl-table th { font-weight: 600; padding-right: 24px; width: 42%; }
.wp-block-table.hl-table td { color: var(--hl-text); }
.hl-duo h2 { font-size: clamp(32px, 3.5vw, 44px); }
.hl-duo h4 { margin: 20px 0 4px; }
.hl-duo h4:first-of-type { margin-top: 4px; }

/* Schritte */
.hl-steps,
.hl-steps > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
}
.hl-steps:has(> .wp-block-group__inner-container) { display: block; }
.hl-steps > *, .hl-steps > .wp-block-group__inner-container > * { margin: 0 !important; }
.hl-step h3 { font-family: var(--hl-sans); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 6px 0 4px; }
.hl-step p { margin: 0; color: var(--hl-muted); }
.hl-step .hl-step-nr { font-family: var(--hl-serif); font-size: 44px; line-height: 1; color: var(--hl-accent); }

.hl-address { font-size: 18px; line-height: 1.55; }

/* =========================================================
   16. Korrekturen 1.4.0: Buttons (GP-Grau) und Mobil
   ========================================================= */
/* GeneratePress färbt a.wp-block-button__link:not(.has-background) grau – gleich spezifisch überschreiben */
a.wp-block-button__link:not(.has-background),
.wp-block-button a.wp-block-button__link:not(.has-background) {
	background-color: var(--hl-accent);
	color: #fff;
}
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus {
	background-color: var(--hl-accent-dark);
	color: #fff;
}
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background) {
	background-color: transparent;
	color: var(--hl-ink);
	border: 1.5px solid var(--hl-ink);
}
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background):focus {
	background-color: var(--hl-ink);
	color: #fff;
}

@media (max-width: 600px) {
	/* Fotos: 2 Spalten statt 1 – Startseite (hl-gallery) und Ferienwohnung (hl-photos) */
	.hl-gallery > .wp-block-group__inner-container,
	.hl-gallery:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.hl-gallery .wp-block-image img { height: auto; aspect-ratio: 1 / 1; }
	.wp-block-gallery.hl-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.wp-block-gallery.hl-photos .wp-block-image img { aspect-ratio: 1 / 1; }
	/* ungerade Anzahl: letztes Foto über die ganze Breite */
	.wp-block-gallery.hl-photos > .wp-block-image:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.wp-block-gallery.hl-photos > .wp-block-image:last-child:nth-child(odd) img { aspect-ratio: 2 / 1; }

	/* Räume: Bild links, Text rechts */
	.hl-rooms > .wp-block-group__inner-container,
	.hl-rooms:not(:has(> .wp-block-group__inner-container)) { gap: 20px; }
	.hl-room > .wp-block-group__inner-container,
	.hl-room:not(:has(> .wp-block-group__inner-container)) {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 14px;
		align-items: start;
	}
	.hl-room .wp-block-image { grid-row: 1 / span 2; margin: 0; }
	.hl-room .wp-block-image img { aspect-ratio: 1 / 1; }
	.hl-room h3 { margin: 2px 0 2px; font-size: 16px; }
	.hl-room p { font-size: 15px; line-height: 1.5; }

	/* Tabellen: Bezeichnung über dem Wert, damit nichts mitten im Wort umbricht */
	.wp-block-table.hl-table th,
	.wp-block-table.hl-table td { display: block; width: auto; padding: 0; border: 0; }
	.wp-block-table.hl-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--hl-line); }
	.wp-block-table.hl-table th { font-size: 14px; color: var(--hl-muted); font-weight: 600; }

	/* Karten und Abstände */
	.hl-cta-card { padding: 24px; }
	.hl-cta-card h2 { font-size: 30px; }
	.hl-review { padding: 22px; }
	.hl-review .hl-quote { font-size: 20px; }
	.hl-facts li { font-size: 14px; padding-left: 38px; }
	.hl-facts li::before { width: 24px; height: 24px; }
	.wp-block-columns.hl-trio, .wp-block-columns.hl-duo { gap: 40px; }
	.hl-section--intro .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.hl-section--intro .wp-block-button { width: 100%; }
	.hl-section--intro .wp-block-button__link { display: block; text-align: center; }
	.wp-block-cover.hl-hero { min-height: 380px !important; }
	.wp-block-cover.hl-hero .hl-lead { font-size: 16px; }
}

/* =========================================================
   17. Rechtstexte (Gruppe mit Klasse hl-legal): Impressum, Datenschutz, AGB
   ========================================================= */
.hl-legal,
.hl-legal > .wp-block-group__inner-container { max-width: 760px; padding: 0; margin: 0; }
.hl-legal h2 { font-size: 28px; line-height: 1.2; margin: 40px 0 10px; }
.hl-legal h2:first-child,
.hl-legal > .wp-block-group__inner-container > h2:first-child { margin-top: 0; }
.hl-legal p, .hl-legal li { color: var(--hl-text); }
.hl-legal p { margin: 0 0 14px; }
.hl-legal ul { margin: 0 0 16px 1.2em; padding: 0; }
.hl-legal li { margin: 0 0 8px; }
.hl-legal .hl-lead { color: var(--hl-ink); margin-bottom: 28px; }
.hl-legal .wp-block-table.hl-table { margin: 4px 0 16px; }
.hl-legal .wp-block-table.hl-table th { width: 55%; }
@media (max-width: 600px) {
	.hl-legal .wp-block-table.hl-table th { width: auto; }
	.hl-legal h2 { font-size: 24px; margin-top: 32px; }
}

/* =========================================================
   18. Umgebung / Über uns: Bild+Text (hl-feature), Ausflugskarten (hl-trips)
   ========================================================= */
.hl-feature:has(> .wp-block-group__inner-container),
.hl-trips:has(> .wp-block-group__inner-container),
.hl-feature__text:has(> .wp-block-group__inner-container),
.hl-trip:has(> .wp-block-group__inner-container) { display: block; }
.hl-feature > .wp-block-group__inner-container,
.hl-feature__text > .wp-block-group__inner-container,
.hl-trips > .wp-block-group__inner-container,
.hl-trip > .wp-block-group__inner-container,
.hl-review--single > .wp-block-group__inner-container { max-width: none; padding: 0; margin: 0; }

.hl-feature,
.hl-feature > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 56px;
	align-items: center;
}
.hl-feature + .hl-feature { margin-top: 56px !important; }
.hl-feature > *, .hl-feature > .wp-block-group__inner-container > * { margin: 0 !important; }
.hl-feature--reverse > .wp-block-image,
.hl-feature--reverse > .wp-block-group__inner-container > .wp-block-image { order: 2; }
.hl-feature .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hl-radius); display: block; }
.hl-feature h3 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; }
.hl-feature p, .hl-feature li { color: var(--hl-text); }
.hl-feature ul { margin: 0 0 0 1.1em; padding: 0; }
.hl-feature li { margin-bottom: 10px; }

.hl-trips,
.hl-trips > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
.hl-trips > *, .hl-trips > .wp-block-group__inner-container > * { margin: 0 !important; }
.hl-trip { background: var(--hl-bg); border-radius: var(--hl-radius); padding: 22px 22px 18px; }
.hl-trip h3 { font-family: var(--hl-sans); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 2px; }
.hl-trip .hl-trip__dist { font-size: 13px; font-weight: 600; color: var(--hl-accent); margin: 0 0 8px; }
.hl-trip p { margin: 0; font-size: 15px; color: var(--hl-text); }

.hl-duo--center { align-items: center; }
.hl-duo .wp-block-image img { border-radius: var(--hl-radius); width: 100%; height: auto; display: block; }
.wp-block-table.hl-table--dist th { width: auto; }
.wp-block-table.hl-table--dist td { text-align: right; white-space: nowrap; }
.hl-review--single { margin-top: 56px !important; max-width: 760px; background: var(--hl-bg); }
.hl-section--white .hl-review--single { background: var(--hl-bg); }

@media (max-width: 760px) {
	.hl-feature,
	.hl-feature > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 18px; }
	.hl-feature:has(> .wp-block-group__inner-container) { display: block; }
	.hl-feature--reverse > .wp-block-image,
	.hl-feature--reverse > .wp-block-group__inner-container > .wp-block-image { order: 0; }
	.hl-feature + .hl-feature { margin-top: 40px !important; }
	.wp-block-table.hl-table--dist tr { display: flex; justify-content: space-between; gap: 12px; }
	.wp-block-table.hl-table--dist td { text-align: right; color: var(--hl-ink); }
}

/* =========================================================
   19. Farbset 1.6.0 – Ivoor, Bosgroen, Limoengroen, Framboos, Zandbeige
   Kontraste (WCAG): Buttontext #1F2A1C auf Limoengrün 6,8:1, auf Hover 4,6:1 ·
   Framboos-Links auf Ivoor 5,0:1, auf Zandbeige dunkler (#943F67) 5,1:1
   ========================================================= */
:root {
	--hl-bg: #FAF8F2;          /* Algemene achtergrond – warm ivoor */
	--hl-alt: #EAE1D2;         /* Afwisselende secties – zandbeige */
	--hl-surface: #FFFFFF;     /* Formulare, Kalender, Karten */
	--hl-heading: #354D38;     /* Koppen en logo – bosgroen */
	--hl-ink: #303632;         /* Gewone tekst – donker antraciet */
	--hl-text: #3F4641;
	--hl-muted: #565D57;
	--hl-line: #DDD3C2;
	--hl-border: #C9BEAA;
	--hl-accent: #354D38;      /* UI-Zustände: Kalenderauswahl, Fokus */
	--hl-accent-dark: #26382A;
	--hl-tint: #DCE8BF;        /* Kalender: gewählter Zeitraum */
	--hl-cta: #94BD32;         /* Primaire boekingsknoppen – limoengroen */
	--hl-cta-hover: #789A25;   /* Hover – donker limoengroen */
	--hl-cta-text: #1F2A1C;
	--hl-link: #A64D76;        /* Links en decoratieve details – framboos */
	--hl-link-hover: #8A3D61;
	--hl-link-alt: #943F67;    /* Links auf Zandbeige */
}

body { background-color: var(--hl-bg); color: var(--hl-ink); }
a { color: var(--hl-link); }
a:hover, a:focus { color: var(--hl-link-hover); }
.hl-section--white a:not(.wp-block-button__link) { color: var(--hl-link-alt); }
:focus-visible { outline-color: var(--hl-heading); }

h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { color: var(--hl-heading); }
.wp-block-cover.hl-hero h1, .wp-block-cover.hl-hero p { color: #fff; }
.main-title a, .main-title a:hover { color: var(--hl-heading); }
.hl-hirsch, .main-title a:hover .hl-hirsch { color: var(--hl-heading); }

/* Abwechselnde Sektionen */
.hl-section--white { background: var(--hl-alt); }
.hl-section--white .hl-cta-card,
.hl-section--white .hl-review,
.hl-section--white .hl-trip { background: var(--hl-bg); }
.hl-cta-card { background: var(--hl-surface); }

/* Primäre Buchungsknöpfe */
a.wp-block-button__link:not(.has-background),
.wp-block-button a.wp-block-button__link:not(.has-background),
.hl-bookbar button,
.hl-btn,
.main-navigation .main-nav ul li.hl-cta > a {
	background-color: var(--hl-cta);
	color: var(--hl-cta-text);
}
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus,
.hl-bookbar button:hover, .hl-bookbar button:focus,
.hl-btn:hover, .hl-btn:focus,
.main-navigation .main-nav ul li.hl-cta > a:hover,
.main-navigation .main-nav ul li.hl-cta[class*="current-menu-"] > a {
	background-color: var(--hl-cta-hover);
	color: var(--hl-cta-text);
}
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background) {
	background-color: transparent;
	color: var(--hl-heading);
	border-color: var(--hl-heading);
}
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > a.wp-block-button__link:not(.has-background):focus {
	background-color: var(--hl-heading);
	color: #fff;
}

/* Dekorative Details in Framboos */
.hl-facts li::before,
.hl-checklist li::before { background-color: var(--hl-link); }
.hl-step .hl-step-nr,
.hl-trip .hl-trip__dist,
.hl-kicker { color: var(--hl-link); }
.hl-section--white .hl-step .hl-step-nr,
.hl-section--white .hl-kicker { color: var(--hl-link-alt); }
.main-navigation .main-nav ul li:not(.hl-cta) a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"]:not(.hl-cta) > a { text-decoration-color: var(--hl-link); }

/* Footer */
.site-info { border-top-color: var(--hl-line); }