/* =====================================================================
   Das Goldene Haus — Joomla 5 Template
   Design: Alpine-Architektur · Schiefer + Messinggold + Lärche + Schnee
   Display: Fraunces  ·  Body: Mulish
   ===================================================================== */

:root {
	--gh-ink:        #1F2421; /* warmer Schiefer, fast schwarz */
	--gh-ink-soft:   #3C443D;
	--gh-gold:       #B0823A; /* Messinggold – der Namensgeber */
	--gh-gold-bright:#C99B4B;
	--gh-larch:      #C7A881; /* Lärchenholz */
	--gh-snow:       #F6F2EA; /* Seitenhintergrund */
	--gh-paper:      #FFFFFF;
	--gh-mist:       #E5DECF; /* Linien / Flächen */
	--gh-mist-soft:  #EFEADF;
	--gh-pine:       #20281F; /* Footer / Tann */

	--gh-display: "Fraunces", Georgia, "Times New Roman", serif;
	--gh-body:    "Mulish", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--gh-shadow:   0 18px 50px -28px rgba(31, 36, 33, .45);
	--gh-shadow-sm:0 8px 24px -16px rgba(31, 36, 33, .4);
	--gh-radius:   4px;
	--gh-radius-img: 14px;
	--gh-maxw:     1180px;
	--gh-gutter:   clamp(1.1rem, 4vw, 2.5rem);
	--gh-ease:     cubic-bezier(.2, .7, .2, 1);
}

/* ---- Reset-ish ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.gh-site {
	margin: 0;
	font-family: var(--gh-body);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--gh-ink);
	background: var(--gh-snow);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--gh-gold); text-decoration: none; transition: color .2s var(--gh-ease); }
a:hover { color: var(--gh-ink); }

h1, h2, h3, h4 {
	font-family: var(--gh-display);
	font-weight: 500;
	line-height: 1.12;
	color: var(--gh-ink);
	letter-spacing: -.01em;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.1rem; }

/* ---- Layout helpers ------------------------------------------------- */
.gh-container {
	width: 100%;
	max-width: var(--gh-maxw);
	margin-inline: auto;
	padding-inline: var(--gh-gutter);
}

.gh-visually-hidden,
.gh-skip {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.gh-skip:focus {
	position: fixed; left: 1rem; top: 1rem;
	width: auto; height: auto; clip: auto;
	z-index: 2000; background: var(--gh-ink); color: var(--gh-snow);
	padding: .7rem 1.1rem; border-radius: var(--gh-radius);
}

/* The signature: a thin brass seam used as an eyebrow marker */
.gh-seam {
	display: inline-block;
	width: 34px; height: 1px;
	background: var(--gh-gold);
	margin-right: .85rem;
	vertical-align: middle;
}

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--gh-gold);
	outline-offset: 3px;
}

/* ---- Buttons -------------------------------------------------------- */
.gh-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: .5rem;
	font-family: var(--gh-body);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--gh-radius);
	cursor: pointer;
	transition: background .25s var(--gh-ease), color .25s var(--gh-ease),
				border-color .25s var(--gh-ease), transform .25s var(--gh-ease);
}
.gh-btn:hover { transform: translateY(-2px); }

.gh-btn--gold {
	background: var(--gh-gold); color: #fff;
	border-color: var(--gh-gold);
}
.gh-btn--gold:hover { background: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }

.gh-btn--ghost {
	background: transparent; color: #fff;
	border-color: rgba(255,255,255,.55);
}
.gh-btn--ghost:hover { background: #fff; color: var(--gh-ink); border-color: #fff; }

.gh-btn--dark {
	background: var(--gh-ink); color: #fff; border-color: var(--gh-ink);
}
.gh-btn--dark:hover { background: var(--gh-gold); border-color: var(--gh-gold); }

/* ---- Topbar --------------------------------------------------------- */
.gh-topbar {
	background: var(--gh-pine);
	color: rgba(246,242,234,.78);
	font-size: .8rem;
	letter-spacing: .03em;
}
.gh-topbar__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; min-height: 44px; flex-wrap: wrap;
}
.gh-topbar__tag { margin: 0; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
.gh-topbar__tag .gh-seam { background: var(--gh-gold-bright); }
.gh-topbar__meta { display: flex; gap: 1.4rem; align-items: center; }
.gh-topbar__link { color: rgba(246,242,234,.85); }
.gh-topbar__link:hover { color: var(--gh-gold-bright); }
.gh-topbar__btn {
	padding: .42rem 1.05rem;
	font-size: .72rem;
	letter-spacing: .1em;
	border-radius: var(--gh-radius);
}
.gh-topbar__btn:hover { transform: none; background: var(--gh-gold-bright); border-color: var(--gh-gold-bright); color: var(--gh-pine); }

/* ---- Header --------------------------------------------------------- */
.gh-header {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(246,242,234,.86);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--gh-mist);
	transition: background .3s var(--gh-ease), box-shadow .3s var(--gh-ease);
}
.gh-header.is-scrolled {
	background: rgba(246,242,234,.97);
	box-shadow: var(--gh-shadow-sm);
}
.gh-header__inner {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: 78px;
}

.gh-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--gh-ink); }
.gh-brand:hover { color: var(--gh-ink); }
.gh-brand__logo { max-height: 52px; width: auto; }
.gh-brand__mark { color: var(--gh-gold); display: inline-flex; }
.gh-brand__name {
	font-family: var(--gh-display);
	font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em;
	line-height: 1;
}

.gh-nav { margin-left: auto; }
.gh-header__actions { display: flex; align-items: center; gap: .9rem; }

/* ---- Main menu (mod_menu output) ------------------------------------ */
.gh-nav ul {
	list-style: none; display: flex; align-items: center;
	gap: .25rem; margin: 0; padding: 0;
}
.gh-nav ul ul { display: none; }
.gh-nav .nav-item { position: relative; }
.gh-nav .nav-item > a,
.gh-nav .nav-item > span {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .6rem .95rem;
	font-size: .8rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--gh-ink-soft); cursor: pointer;
	border-radius: var(--gh-radius);
}
.gh-nav .nav-item > a::after {
	content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .35rem;
	height: 1.5px; background: var(--gh-gold);
	transform: scaleX(0); transform-origin: left; transition: transform .28s var(--gh-ease);
}
.gh-nav .nav-item > a:hover { color: var(--gh-ink); }
.gh-nav .nav-item > a:hover::after,
.gh-nav .nav-item.current > a::after,
.gh-nav .nav-item.active > a::after { transform: scaleX(1); }
.gh-nav .nav-item.current > a,
.gh-nav .nav-item.active > a { color: var(--gh-ink); }

/* Parent items with children */
.gh-nav .nav-item.deeper.parent > a::before,
.gh-nav .nav-item.item-with-children > a::after { /* keep underline behaviour */ }

/* Dropdowns */
.gh-nav .nav-item:hover > ul,
.gh-nav .nav-item:focus-within > ul {
	display: block; position: absolute; top: 100%; left: 0;
	min-width: 230px; padding: .5rem;
	background: var(--gh-paper);
	border: 1px solid var(--gh-mist);
	border-top: 2px solid var(--gh-gold);
	border-radius: var(--gh-radius);
	box-shadow: var(--gh-shadow);
	z-index: 50;
}
.gh-nav .nav-item ul .nav-item { width: 100%; }
.gh-nav .nav-item ul .nav-item > a {
	display: block; width: 100%; padding: .6rem .8rem;
	text-transform: none; letter-spacing: .01em; font-size: .92rem;
	color: var(--gh-ink-soft);
}
.gh-nav .nav-item ul .nav-item > a::after { display: none; }
.gh-nav .nav-item ul .nav-item > a:hover { background: var(--gh-mist-soft); color: var(--gh-ink); }

/* ---- Burger --------------------------------------------------------- */
.gh-burger {
	display: none; background: transparent; border: 1px solid var(--gh-mist);
	border-radius: var(--gh-radius); padding: .55rem .6rem; cursor: pointer;
}
.gh-burger__box { display: block; width: 22px; height: 14px; position: relative; }
.gh-burger__box span {
	position: absolute; left: 0; height: 2px; width: 100%;
	background: var(--gh-ink); border-radius: 2px; transition: transform .3s var(--gh-ease), opacity .2s;
}
.gh-burger__box span:nth-child(1) { top: 0; }
.gh-burger__box span:nth-child(2) { top: 6px; }
.gh-burger__box span:nth-child(3) { top: 12px; }

/* ---- Hero ----------------------------------------------------------- */
.gh-hero {
	position: relative;
	min-height: clamp(440px, 72vh, 680px);
	display: flex; align-items: flex-end;
	color: #fff;
	background:
		linear-gradient(180deg, rgba(31,36,33,.18) 0%, rgba(31,36,33,.30) 45%, rgba(31,36,33,.82) 100%),
		var(--gh-hero-img) center/cover no-repeat,
		var(--gh-pine);
	overflow: hidden;
}
.gh-hero__inner { padding-block: clamp(2.5rem, 7vw, 5rem); position: relative; z-index: 2; max-width: 760px; }
.gh-hero__eyebrow {
	margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .2em;
	font-size: .76rem; font-weight: 600; color: var(--gh-gold-bright);
}
.gh-hero__eyebrow .gh-seam { background: var(--gh-gold-bright); }
.gh-hero__title {
	color: #fff; font-weight: 500;
	font-size: clamp(2.4rem, 6vw, 4.1rem); margin: 0 0 1rem;
	text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.gh-hero__text {
	font-size: 1.18rem; line-height: 1.6; max-width: 36em;
	color: rgba(255,255,255,.92); margin-bottom: 1.8rem;
}
.gh-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.gh-hero__scroll {
	position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
	width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.6);
	border-radius: 14px; z-index: 2;
}
.gh-hero__scroll span {
	position: absolute; left: 50%; top: 8px; width: 3px; height: 7px;
	margin-left: -1.5px; background: #fff; border-radius: 2px;
	animation: gh-scroll 1.8s var(--gh-ease) infinite;
}
@keyframes gh-scroll { 0%{opacity:0;transform:translateY(0);} 35%{opacity:1;} 70%{opacity:0;transform:translateY(12px);} 100%{opacity:0;} }
@media (prefers-reduced-motion: reduce) { .gh-hero__scroll span { animation: none; } }

.gh-hero--module { display: block; min-height: 0; background: var(--gh-ink); color: #fff; }

/* ---- Eckdaten / facts strip ---------------------------------------- */
.gh-facts { padding-block: clamp(2rem, 5vw, 3rem); }
.gh-facts__card {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	background: var(--gh-paper);
	border: 1px solid var(--gh-mist);
	border-radius: var(--gh-radius-img);
	box-shadow: var(--gh-shadow-sm);
	max-width: 920px;
	margin-inline: auto;
	overflow: hidden;
}
.gh-facts__item {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .15rem;
	padding: 1.8rem 1.4rem;
}
.gh-facts__item + .gh-facts__item { border-left: 1px solid var(--gh-mist); }
.gh-facts__seam { display: block; margin: 0 0 .8rem; }
.gh-facts__value {
	font-family: var(--gh-display);
	font-size: clamp(2rem, 4vw, 2.7rem);
	font-weight: 500;
	line-height: 1;
	color: var(--gh-ink);
}
.gh-facts__label {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gh-gold);
}

/* ---- Breadcrumbs ---------------------------------------------------- */
.gh-breadcrumbs { background: var(--gh-mist-soft); border-bottom: 1px solid var(--gh-mist); }
.gh-breadcrumbs .gh-container { padding-block: .7rem; }
.gh-breadcrumbs ol, .gh-breadcrumbs ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.gh-breadcrumbs a { color: var(--gh-ink-soft); }
.gh-breadcrumbs a:hover { color: var(--gh-gold); }
.gh-breadcrumbs .active, .gh-breadcrumbs [aria-current] { color: var(--gh-gold); }
.gh-breadcrumbs .divider { opacity: .5; }

/* ---- Content & layout ----------------------------------------------- */
.gh-content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.gh-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
.gh-layout.gh-main--has-aside { grid-template-columns: minmax(0, 1fr) 320px; }
.gh-main { min-width: 0; }

/* Article (com_content) defaults */
.gh-main .page-header h1,
.gh-main .item-page h1,
.gh-main h1 { margin-top: 0; }
.gh-main h2 { margin-top: 2.2rem; }
.gh-main a:not(.gh-btn):not(.btn) { color: var(--gh-gold); border-bottom: 1px solid transparent; }
.gh-main a:not(.gh-btn):not(.btn):hover { color: var(--gh-ink); border-bottom-color: var(--gh-gold); }
.gh-main img { border-radius: var(--gh-radius-img); }
.gh-main figure { margin: 1.6rem 0; }
.gh-main blockquote {
	margin: 1.8rem 0; padding: .4rem 0 .4rem 1.4rem;
	border-left: 3px solid var(--gh-gold);
	font-family: var(--gh-display); font-style: italic; font-size: 1.3rem; color: var(--gh-ink-soft);
}
.gh-main ul, .gh-main ol { padding-left: 1.3rem; }
.gh-main ul li { list-style: none; position: relative; padding-left: 1.4rem; margin-bottom: .5rem; }
.gh-main ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; background: var(--gh-gold); border-radius: 1px; transform: rotate(45deg); }
.gh-main hr { border: 0; border-top: 1px solid var(--gh-mist); margin: 2.5rem 0; }

.gh-main .article-info, .gh-main .createdby, .gh-main .published,
.gh-main .category-name, .gh-main .article-info-term {
	font-size: .8rem; color: var(--gh-ink-soft); letter-spacing: .04em;
}

/* Sidebar / module cards */
.gh-aside { min-width: 0; }
.card, .moduletable, .gh-feature__col .card, .gh-bottom__col .card {
	background: var(--gh-paper);
	border: 1px solid var(--gh-mist);
	border-radius: var(--gh-radius);
	padding: 1.6rem;
	box-shadow: var(--gh-shadow-sm);
	margin-bottom: 1.5rem;
}
.card-header, .moduletable > h3, .card > h3 {
	font-family: var(--gh-display); font-size: 1.2rem; margin: 0 0 1rem;
	padding-bottom: .7rem; border-bottom: 1px solid var(--gh-mist);
}
.gh-aside .nav, .moduletable .menu { list-style: none; margin: 0; padding: 0; }
.gh-aside .nav li, .moduletable .menu li { margin: 0; }
.gh-aside .nav a, .moduletable .menu a { display: block; padding: .5rem 0; border-bottom: 1px solid var(--gh-mist-soft); color: var(--gh-ink-soft); }
.gh-aside .nav a:hover, .moduletable .menu a:hover { color: var(--gh-gold); padding-left: .4rem; transition: padding .2s var(--gh-ease); }

/* ---- Feature / bottom grids ----------------------------------------- */
.gh-feature { padding-block: clamp(2rem, 5vw, 3.5rem); }
.gh-feature__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.gh-bottom { background: var(--gh-mist-soft); border-top: 1px solid var(--gh-mist); padding-block: clamp(2.5rem, 6vw, 4rem); }
.gh-bottom__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.gh-bottom__col .card { box-shadow: none; }

/* ---- Forms (Buchungsanfrage / Kontakt) ------------------------------ */
.gh-main input[type=text], .gh-main input[type=email], .gh-main input[type=tel],
.gh-main input[type=date], .gh-main input[type=number], .gh-main input[type=password],
.gh-main textarea, .gh-main select,
.gh-aside input, .gh-aside textarea, .gh-aside select {
	width: 100%; font-family: var(--gh-body); font-size: 1rem;
	padding: .75rem .85rem; color: var(--gh-ink);
	background: var(--gh-paper);
	border: 1px solid var(--gh-mist);
	border-radius: var(--gh-radius);
	transition: border-color .2s var(--gh-ease), box-shadow .2s var(--gh-ease);
}
.gh-main textarea { min-height: 140px; }
.gh-main input:focus, .gh-main textarea:focus, .gh-main select:focus {
	border-color: var(--gh-gold); box-shadow: 0 0 0 3px rgba(176,130,58,.16); outline: none;
}
.gh-main label, .gh-aside label { font-weight: 600; font-size: .9rem; }

/* Joomla buttons inside content */
.gh-main .btn, .gh-main button[type=submit], .gh-main input[type=submit] {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--gh-body); font-weight: 600; font-size: .82rem;
	letter-spacing: .1em; text-transform: uppercase;
	padding: .8rem 1.5rem; border-radius: var(--gh-radius);
	background: var(--gh-ink); color: #fff; border: 1px solid var(--gh-ink); cursor: pointer;
	transition: background .25s var(--gh-ease), border-color .25s var(--gh-ease);
}
.gh-main .btn:hover, .gh-main button[type=submit]:hover, .gh-main input[type=submit]:hover {
	background: var(--gh-gold); border-color: var(--gh-gold); color: #fff;
}
.gh-main .btn-primary { background: var(--gh-gold); border-color: var(--gh-gold); }

/* Joomla system messages */
.gh-main .alert { border-radius: var(--gh-radius); border: 1px solid var(--gh-mist); padding: 1rem 1.2rem; margin-bottom: 1.5rem; background: var(--gh-paper); }
.gh-main .alert-success { border-left: 3px solid #4f7a4a; }
.gh-main .alert-danger, .gh-main .alert-error { border-left: 3px solid #b14b3c; }
.gh-main .alert-info { border-left: 3px solid var(--gh-gold); }

/* Pagination */
.gh-main .pagination { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 2rem 0 0; }
.gh-main .pagination a, .gh-main .pagination span {
	display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center;
	border: 1px solid var(--gh-mist); border-radius: var(--gh-radius); color: var(--gh-ink-soft);
}
.gh-main .pagination .active span, .gh-main .pagination a:hover { background: var(--gh-gold); color: #fff; border-color: var(--gh-gold); }

/* ---- Footer --------------------------------------------------------- */
.gh-footer { background: var(--gh-pine); color: rgba(246,242,234,.78); margin-top: 0; }
.gh-footer__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
	padding-block: clamp(2.8rem, 6vw, 4rem);
}
.gh-footer__name { font-family: var(--gh-display); font-size: 1.6rem; color: #fff; display: block; }
.gh-footer__tag { margin-top: .5rem; max-width: 26em; font-size: .95rem; }
.gh-footer__head { font-family: var(--gh-display); color: var(--gh-gold-bright); font-size: 1.1rem; margin-bottom: 1rem; }
.gh-footer a { color: rgba(246,242,234,.88); }
.gh-footer a:hover { color: var(--gh-gold-bright); }
.gh-footer__addr { font-style: normal; line-height: 1.7; }
.gh-footer__nav ul, .gh-footer__nav .menu { list-style: none; margin: 0; padding: 0; }
.gh-footer__nav li { margin-bottom: .55rem; }
.gh-footer__nav a { font-size: .95rem; }

.gh-footer__bar { border-top: 1px solid rgba(246,242,234,.12); }
.gh-footer__bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; font-size: .82rem; }
.gh-footer__bar p { margin: 0; }
.gh-footer__top { letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; }

/* ---- Off-canvas ----------------------------------------------------- */
.gh-offcanvas { position: fixed; inset: 0; z-index: 1500; visibility: hidden; }
.gh-offcanvas.is-open { visibility: visible; }
.gh-offcanvas__backdrop {
	position: absolute; inset: 0; background: rgba(20,24,20,.5);
	opacity: 0; transition: opacity .3s var(--gh-ease);
}
.gh-offcanvas.is-open .gh-offcanvas__backdrop { opacity: 1; }
.gh-offcanvas__panel {
	position: absolute; top: 0; right: 0; height: 100%;
	width: min(360px, 86vw); background: var(--gh-snow);
	box-shadow: var(--gh-shadow); padding: 1.5rem 1.4rem;
	display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform .35s var(--gh-ease);
	overflow-y: auto;
}
.gh-offcanvas.is-open .gh-offcanvas__panel { transform: translateX(0); }
.gh-offcanvas__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--gh-mist); margin-bottom: 1rem; }
.gh-offcanvas__title { font-family: var(--gh-display); font-size: 1.3rem; }
.gh-offcanvas__close { background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--gh-ink); }
.gh-offcanvas__nav ul { list-style: none; margin: 0; padding: 0; }
.gh-offcanvas__nav ul ul { padding-left: 1rem; }
.gh-offcanvas__nav .nav-item > a,
.gh-offcanvas__nav .nav-item > span {
	display: block; padding: .8rem .2rem; font-size: 1rem; font-weight: 600;
	letter-spacing: .02em; color: var(--gh-ink); border-bottom: 1px solid var(--gh-mist-soft);
}
.gh-offcanvas__nav .nav-item.current > a, .gh-offcanvas__nav .nav-item.active > a { color: var(--gh-gold); }
.gh-offcanvas__cta { margin-top: 1.4rem; }

body.gh-no-scroll { overflow: hidden; }

/* ---- Rounded imagery (site-wide) ------------------------------------ */
.gh-content img,
.gh-feature img,
.gh-bottom img,
.gh-aside img,
.gh-footer img,
.item-image img,
.item-image,
.pull-left, .pull-right,
.float-start, .float-end,
figure img,
.gh-main .item-page img {
	border-radius: var(--gh-radius-img);
}
/* keep brand mark, nav and icons square */
.gh-brand__logo,
.gh-nav img,
.gh-offcanvas img,
img.icon, .gh-main svg { border-radius: 0; }

/* ---- Category blog view (e.g. Das Haus > Die Unterkunft) ------------ */
.gh-main .com-content-category-blog__items,
.gh-main .blog-items {
	display: grid;
	gap: clamp(1.3rem, 3vw, 2.2rem);
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Joomla splits the leading post and the rest into two separate containers.
   Make the gap between them match the gap between the grid rows, and strip
   any framework utility margins so all spacing is uniform. */
.gh-main .com-content-category-blog__items { margin: 0 !important; }
.gh-main .com-content-category-blog__items + .com-content-category-blog__items {
	margin-top: clamp(1.3rem, 3vw, 2.2rem) !important;
}
.gh-main .com-content-category-blog__item,
.gh-main .blog .item { margin: 0 !important; }

/* Each post becomes a framed card */
.gh-main .com-content-category-blog__item,
.gh-main .blog .item,
.gh-main .blog-items > [class*="column-"] {
	display: flex;
	flex-direction: column;
	background: var(--gh-paper);
	border: 1px solid var(--gh-mist);
	border-radius: var(--gh-radius-img);
	padding: 1.6rem 1.7rem 1.7rem;
	box-shadow: var(--gh-shadow-sm);
	transition: transform .3s var(--gh-ease), box-shadow .3s var(--gh-ease), border-color .3s var(--gh-ease);
}
.gh-main .com-content-category-blog__item:hover,
.gh-main .blog .item:hover,
.gh-main .blog-items > [class*="column-"]:hover {
	transform: translateY(-5px);
	box-shadow: var(--gh-shadow);
	border-color: var(--gh-larch);
}

/* Card inner content as an even flex column */
.gh-main .com-content-category-blog__item .item-content,
.gh-main .blog .item .item-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-align: left;
}

/* Lead image fills the card width, evenly cropped, rounded, shown on top */
.gh-main .com-content-category-blog__item .item-content img,
.gh-main .blog .item .item-content img {
	order: -2;
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--gh-radius-img);
	margin: 0 0 1.2rem;
}
.gh-main .com-content-category-blog__item .item-content p:has(img),
.gh-main .blog .item .item-content p:has(img) { order: -2; margin: 0 0 1.2rem; }
.gh-main .com-content-category-blog__item .item-content p:has(img) a,
.gh-main .blog .item .item-content p:has(img) a { display: block; }

/* Title (works whether h2 or h3), left aligned, uniform spacing */
.gh-main .com-content-category-blog__item .item-content > h1,
.gh-main .com-content-category-blog__item .item-content > h2,
.gh-main .com-content-category-blog__item .item-content > h3,
.gh-main .com-content-category-blog__item .page-header,
.gh-main .blog .item .item-content > h2,
.gh-main .blog .item .item-content > h3 {
	order: -1;
	margin: 0 0 .7rem;
	font-family: var(--gh-display);
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.15;
}
.gh-main .com-content-category-blog__item .item-content > h2 a,
.gh-main .com-content-category-blog__item .item-content > h3 a,
.gh-main .blog .item .item-content > h2 a,
.gh-main .blog .item .item-content > h3 a { color: var(--gh-ink); border: 0; }
.gh-main .com-content-category-blog__item .item-content > h2 a:hover,
.gh-main .com-content-category-blog__item .item-content > h3 a:hover { color: var(--gh-gold); }

/* Body paragraphs: uniform spacing, hide empty ones */
.gh-main .com-content-category-blog__item .item-content p,
.gh-main .blog .item .item-content p { margin: 0 0 .8rem; }
.gh-main .com-content-category-blog__item .item-content p:empty,
.gh-main .blog .item .item-content p:empty { display: none; }
.gh-main .com-content-category-blog__item .article-info,
.gh-main .blog .item .article-info {
	order: -1; margin: 0 0 .7rem; font-size: .76rem; letter-spacing: .04em;
	color: var(--gh-ink-soft); text-transform: uppercase;
}

/* Read more pinned to the bottom so every card lines up evenly */
.gh-main .com-content-category-blog__item .readmore,
.gh-main .blog .item .readmore { order: 10; margin: auto 0 0; padding-top: 1.1rem; }

/* ---- Refined "Weiterlesen" link ------------------------------------- */
.gh-main .readmore a,
.gh-main .readmore a.btn,
.gh-main p.readmore a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--gh-gold);
	font-family: var(--gh-body);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.gh-main .readmore a .icon-chevron-right,
.gh-main .readmore a [class^="icon-"] { display: none; }   /* hide icon-font glyph */
.gh-main .readmore a::after {
	content: "\2192";   /* → */
	font-size: 1.1em;
	transition: transform .25s var(--gh-ease);
}
.gh-main .readmore a:hover {
	background: transparent;
	color: var(--gh-ink);
}
.gh-main .readmore a:hover::after { transform: translateX(6px); }
.gh-main .readmore a:focus-visible { outline-offset: 4px; }

/* ---- Featured first post (Leitartikel, z. B. Wohnzimmer) ----------- */
.gh-main .items-leading > .com-content-category-blog__item,
.gh-main .com-content-category-blog__items:first-of-type > .com-content-category-blog__item:first-child,
.gh-main .blog-items:first-of-type > [class*="column-"]:first-child {
	grid-column: 1 / -1;             /* span the full width of the grid */
}
/* larger, capped lead image */
.gh-main .items-leading .item-content img,
.gh-main .com-content-category-blog__items:first-of-type > .com-content-category-blog__item:first-child .item-content img {
	aspect-ratio: 2 / 1;
	max-height: 400px;
}
/* larger title for the featured post */
.gh-main .items-leading .item-content > h1,
.gh-main .items-leading .item-content > h2,
.gh-main .items-leading .item-content > h3,
.gh-main .com-content-category-blog__items:first-of-type > .com-content-category-blog__item:first-child .item-content > h2,
.gh-main .com-content-category-blog__items:first-of-type > .com-content-category-blog__item:first-child .item-content > h3 {
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 991.98px) {
	.gh-nav { display: none; }
	.gh-header__cta { display: none; }
	.gh-burger { display: inline-flex; }
	.gh-layout.gh-main--has-aside { grid-template-columns: 1fr; }
	.gh-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.gh-topbar__tag { display: none; }
	.gh-topbar__inner { justify-content: center; }
	.gh-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
	.gh-hero__actions .gh-btn { flex: 1 1 auto; }
	.gh-facts__item { flex-basis: 50%; padding: 1.4rem 1rem; }
	.gh-facts__item + .gh-facts__item { border-left: 0; }
	.gh-facts__item:nth-child(n+3) { border-top: 1px solid var(--gh-mist); }
}