/* Sunnhäusl Core – Block-Styles. Farben/Schriften aus theme.json (Fallbacks für andere Themes). */
:root {
	--sh-braun: var(--wp--preset--color--braun, #6f2a0c);
	--sh-braun-dunkel: var(--wp--preset--color--braun-dunkel, #4a1b06);
	--sh-sonne: var(--wp--preset--color--sonne, #eea12a);
	--sh-sonne-hell: var(--wp--preset--color--sonne-hell, #fbefc8);
	--sh-gruen-dunkel: var(--wp--preset--color--gruen-dunkel, #3e5e14);
	--sh-apfel: var(--wp--preset--color--apfel, #8db33a);
	--sh-apfel-hell: var(--wp--preset--color--apfel-hell, #eef4de);
	--sh-creme: var(--wp--preset--color--creme, #fbf7f0);
	--sh-leinen: var(--wp--preset--color--leinen, #f3eadb);
	--sh-text: var(--wp--preset--color--anthrazit, #2e2622);
	--sh-weiss: var(--wp--preset--color--weiss, #fff);
	--sh-linie: color-mix(in srgb, var(--sh-braun) 18%, transparent);
	--sh-radius: 14px;
	--sh-schatten: 0 1px 2px rgb(74 27 6 / 6%), 0 8px 24px rgb(74 27 6 / 8%);
	--sh-serif: var(--wp--preset--font-family--lora, Georgia, serif);
}

.sh-icon { width: 1.35em; height: 1.35em; flex: none; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* ---------- Fakten-Liste ---------- */
.sh-facts { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.sh-facts li { display: inline-flex; align-items: center; gap: .4rem; }
.sh-facts .sh-icon { color: var(--sh-braun); }
.sh-facts--large { font-size: 1.05rem; gap: .6rem 1.6rem; }

/* ---------- Zimmer-Karten ---------- */
.sh-rooms {
	display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); list-style: none; padding: 0; margin-bottom: 0;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.sh-room-card {
	position: relative; display: flex; flex-direction: column; background: var(--sh-weiss);
	border-radius: var(--sh-radius); overflow: hidden; box-shadow: var(--sh-schatten);
	transition: transform .2s ease, box-shadow .2s ease;
}
.sh-room-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(74 27 6 / 8%), 0 16px 36px rgb(74 27 6 / 14%); }
.sh-room-card:focus-within { outline: 3px solid var(--sh-braun); outline-offset: 3px; }
.sh-room-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sh-leinen); }
.sh-room-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-room-card__placeholder { display: grid; place-items: center; height: 100%; color: var(--sh-braun); font-size: 3rem; }
.sh-room-card__badge {
	position: absolute; left: .75rem; top: .75rem; background: var(--sh-sonne); color: var(--sh-braun-dunkel);
	font-weight: 600; font-size: .85rem; padding: .2rem .65rem; border-radius: 999px;
}
.sh-room-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.sh-room-card__title { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.sh-room-card__title a { color: var(--sh-braun); text-decoration: none; }
.sh-room-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sh-room-card__title a:focus { outline: none; }
.sh-room-card__text { margin: 0; font-size: .98rem; }
.sh-room-card__more { margin-top: auto; font-weight: 600; color: var(--sh-braun); font-size: .95rem; }

.sh-price-from { margin: .25rem 0 0; color: var(--sh-text); font-size: .95rem; line-height: 1.3; }
.sh-price-from strong { font-family: var(--sh-serif); font-size: 1.5em; color: var(--sh-braun); font-weight: 600; }
.sh-price-from__unit { display: block; font-size: .88em; opacity: .85; }
.sh-price-from--large { font-size: 1.1rem; }

/* ---------- Tabs ---------- */
.sh-tabs__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.sh-tabs__tab {
	display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
	font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
	padding: .7rem 1.2rem; border-radius: 999px; min-height: 44px;
	border: 2px solid var(--sh-braun); background: transparent; color: var(--sh-braun);
}
.sh-tabs__tab[aria-selected="true"] { background: var(--sh-braun); color: var(--sh-weiss); }
.sh-tabs__tab:hover:not([aria-selected="true"]) { background: var(--sh-sonne-hell); }
.sh-tabs__tab:focus-visible, .sh-tabs__panel:focus-visible { outline: 3px solid var(--sh-sonne); outline-offset: 3px; }
.sh-season-switch.is-enhanced .sh-season__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Preistabellen ---------- */
.sh-prices__block { overflow-x: auto; margin-bottom: 2rem; border-radius: var(--sh-radius); background: var(--sh-weiss); box-shadow: var(--sh-schatten); }
.sh-prices__table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 30rem; }
.sh-prices__table caption { text-align: left; padding: 1.2rem 1.25rem .6rem; }
.sh-prices__caption { display: block; font-family: var(--sh-serif); font-size: 1.3rem; font-weight: 600; color: var(--sh-braun); }
.sh-prices__hint { display: block; font-size: .92rem; margin-top: .2rem; }
.sh-prices__table th, .sh-prices__table td { padding: .7rem 1.25rem; text-align: left; vertical-align: top; border-top: 1px solid var(--sh-linie); }
.sh-prices__table thead th { background: var(--sh-sonne-hell); color: var(--sh-braun-dunkel); font-weight: 700; border-top: 0; }
.sh-prices__table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-prices__table thead th:not(:first-child) { text-align: right; }
.sh-prices__table tbody th { font-weight: 500; }
.sh-prices__period { display: block; font-weight: 400; font-size: .85rem; margin-top: .2rem; }
.sh-prices__ab { font-size: .85em; opacity: .8; }
.sh-prices__note { font-size: .95rem; max-width: 60ch; }

.sh-prices__detail { font-size: .85em; font-weight: 400; opacity: .8; }
.sh-prices__periods { display: none; }

/* Mobil: jede Zeile als Block (Bezeichnung oben, Neben-/Hauptsaison nebeneinander) – kein horizontales Scrollen */
@media (max-width: 599px) {
	.sh-prices__periods {
		display: grid; gap: .35rem; margin: 0 0 1.25rem; padding: .85rem 1rem; font-size: .9rem;
		background: var(--sh-sonne-hell); border-radius: var(--sh-radius); color: var(--sh-braun-dunkel);
	}
	.sh-prices__periods div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }
	.sh-prices__periods dt { font-weight: 700; }
	.sh-prices__periods dd { margin: 0; }
	.sh-prices__block { overflow: visible; }
	.sh-prices__table { min-width: 0; display: block; }
	.sh-prices__table caption { display: block; padding: 1.1rem 1rem .5rem; }
	.sh-prices__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sh-prices__table tbody { display: block; }
	.sh-prices__table tbody tr {
		display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem;
		padding: .75rem 1rem; border-top: 1px solid var(--sh-linie);
	}
	.sh-prices__table tbody th { grid-column: 1 / -1; padding: 0 0 .35rem; border: 0; font-weight: 600; line-height: 1.3; }
	.sh-prices__detail { display: block; margin-top: .1rem; }
	.sh-prices__table td { padding: 0; border: 0; text-align: left; white-space: nowrap; line-height: 1.3; }
	.sh-prices__table td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; color: var(--sh-braun); opacity: .85; }
}

/* ---------- Storno ---------- */
.sh-terms__steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: .5rem; }
.sh-terms__steps li {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
	background: var(--sh-weiss); border-left: 4px solid var(--sh-sonne); padding: .75rem 1rem; border-radius: 6px;
}
.sh-terms__what { color: var(--sh-braun); }

/* ---------- Zimmer-Fakten ---------- */
.sh-room-facts { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .sh-room-facts { grid-template-columns: 1fr 22rem; gap: 3rem; } }
.sh-room-facts__title { font-size: 1.5rem; margin: 2rem 0 1rem; }
.sh-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.sh-checklist li { display: flex; gap: .5rem; align-items: flex-start; }
.sh-checklist .sh-icon { color: var(--sh-gruen-dunkel); margin-top: .1em; }
.sh-room-facts__box {
	background: var(--sh-weiss); border-radius: var(--sh-radius); box-shadow: var(--sh-schatten);
	padding: 1.5rem; border-top: 6px solid var(--sh-sonne); position: sticky; top: 6.5rem;
}
.sh-room-facts__box .wp-block-buttons { display: grid; gap: .6rem; margin: 1.2rem 0; }
.sh-room-facts__box .wp-block-button__link { width: 100%; }
.sh-room-facts__phone { margin: 0; font-size: .95rem; }

/* ---------- USP ---------- */
.sh-usp {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.sh-usp__item { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center; }
.sh-usp__icon {
	grid-row: span 2; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%;
	background: var(--sh-sonne); color: var(--sh-braun-dunkel); font-size: 1.15rem;
}
.sh-usp__title { font-weight: 700; line-height: 1.25; }
.sh-usp__text { font-size: .92rem; line-height: 1.35; opacity: .9; }

/* ---------- Schnellsuche ---------- */
.sh-quicksearch {
	display: grid; gap: .75rem; align-items: end; background: var(--sh-weiss); color: var(--sh-text);
	padding: 1rem; border-radius: var(--sh-radius); box-shadow: 0 10px 40px rgb(0 0 0 / 22%);
	grid-template-columns: 1fr 1fr;
}
@media (min-width: 782px) { .sh-quicksearch { grid-template-columns: 1fr 1fr .6fr .6fr auto; padding: 1.1rem 1.25rem; } }
.sh-quicksearch__field { display: grid; gap: .25rem; }
.sh-quicksearch label { font-size: .85rem; font-weight: 600; color: var(--sh-braun); }
.sh-quicksearch input { width: 100%; }
.sh-quicksearch__submit { grid-column: 1 / -1; }
@media (min-width: 782px) { .sh-quicksearch__submit { grid-column: auto; } }
.sh-quicksearch__submit .wp-block-button__link { width: 100%; min-height: 48px; }

/* ---------- Formular ---------- */
.sh-form input:not([type="checkbox"]):not([type="radio"]), .sh-form select, .sh-form textarea,
.sh-quicksearch input {
	font: inherit; font-size: 1rem; color: var(--sh-text); background: var(--sh-weiss);
	border: 1.5px solid color-mix(in srgb, var(--sh-braun) 45%, #fff); border-radius: 8px;
	padding: .65rem .8rem; min-height: 48px; width: 100%; box-sizing: border-box;
}
.sh-form textarea { min-height: 8rem; }
.sh-form :is(input, select, textarea):focus-visible, .sh-quicksearch input:focus-visible {
	outline: 3px solid var(--sh-sonne); outline-offset: 1px; border-color: var(--sh-braun);
}
.sh-form__group { border: 0; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 1rem; }
.sh-form__group legend { font-family: var(--sh-serif); font-size: 1.35rem; font-weight: 600; color: var(--sh-braun); margin-bottom: .75rem; padding: 0; }
.sh-form__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.sh-form__field { display: grid; gap: .3rem; }
.sh-form__field label { font-weight: 600; }
.sh-form__req { color: var(--sh-braun); }
.sh-form__field.has-error :is(input, select, textarea) { border-color: #b3261e; border-width: 2px; }
.sh-form__error { color: #a1170f; font-weight: 600; margin: 0; font-size: .95rem; }
.sh-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sh-form__privacy, .sh-form__note { font-size: .92rem; }
.sh-form__message { padding: 1.25rem 1.5rem; border-radius: var(--sh-radius); margin-bottom: 1.5rem; }
.sh-form__message:focus { outline: 3px solid var(--sh-sonne); outline-offset: 3px; }
.sh-form__message--ok { background: color-mix(in srgb, var(--sh-gruen-dunkel) 12%, #fff); border-left: 6px solid var(--sh-gruen-dunkel); }
.sh-form__message--error { background: #fdecea; border-left: 6px solid #b3261e; }
.sh-form__message--error a { color: #7d1109; }
.sh-form__message-title { font-size: 1.3rem; margin: 0 0 .5rem; }
.sh-form__message ul { margin: 0; padding-left: 1.2rem; }

/* ---------- Kontakt ---------- */
.sh-contact { font-style: normal; display: grid; gap: .6rem; }
.sh-contact__item { display: inline-flex; align-items: flex-start; gap: .6rem; color: inherit; }
.sh-contact__item .sh-icon { margin-top: .1em; }
a.sh-contact__item { text-decoration: none; }
a.sh-contact__item:hover span, a.sh-contact__item:focus-visible span { text-decoration: underline; }
.sh-contact--line { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.sh-contact--line .sh-icon { width: 1.1em; height: 1.1em; }

/* ---------- Bewertungen ---------- */
.sh-ratings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.sh-ratings__item {
	display: flex; align-items: center; gap: .9rem; background: var(--sh-weiss); padding: .9rem 1.25rem .9rem .9rem;
	border-radius: var(--sh-radius); box-shadow: var(--sh-schatten);
}
.sh-ratings__score {
	display: grid; place-items: center; min-width: 3.4rem; height: 3.4rem; padding: 0 .4rem; border-radius: 12px 12px 12px 2px;
	background: var(--sh-braun); color: var(--sh-weiss); font-family: var(--sh-serif); font-size: 1.35rem; font-weight: 700;
}
.sh-ratings__meta { display: grid; line-height: 1.3; }
.sh-ratings__portal { font-weight: 700; color: var(--sh-braun); }
.sh-ratings__sub { font-size: .9rem; }
.sh-ratings__date { text-align: center; font-size: .85rem; margin-top: .75rem; }

/* ---------- 2-Klick-Embeds ---------- */
.sh-embed { border-radius: var(--sh-radius); overflow: hidden; background: var(--sh-leinen); min-height: 22rem; display: grid; }
.sh-embed__placeholder {
	display: grid; justify-items: center; align-content: center; gap: .6rem; text-align: center; padding: 2rem 1.5rem;
	background:
		radial-gradient(circle at 20% 30%, rgb(232 183 34 / 22%) 0 12rem, transparent 12rem),
		repeating-linear-gradient(45deg, transparent 0 22px, rgb(111 42 12 / 4%) 22px 23px);
}
.sh-embed__icon { width: 2.8rem; height: 2.8rem; color: var(--sh-braun); }
.sh-embed__title { font-family: var(--sh-serif); font-size: 1.35rem; font-weight: 600; color: var(--sh-braun); margin: 0; }
.sh-embed__text { max-width: 44ch; margin: 0; font-size: .95rem; }
.sh-embed__alt { margin: 0; font-size: .92rem; }
.sh-embed__frame { width: 100%; min-height: 22rem; height: 100%; border: 0; display: block; background: #fff; }
.sh-embed--bergfex .sh-embed__frame { min-height: 26rem; }

@media (prefers-reduced-motion: reduce) {
	.sh-room-card, .sh-room-card:hover { transition: none; transform: none; }
}
.sh-prices__block:focus-visible { outline: 3px solid var(--sh-sonne); outline-offset: 3px; }
.sh-ratings__score { background: var(--sh-gruen-dunkel); }
.sh-embed { background: var(--sh-apfel-hell); }