/* ==========================================================================
   Casa Lucertola – Haupt-Stylesheet
   Ein warmes, modernes Design inspiriert von Tessiner Naturstein-Rustici,
   Kastanienwäldern und dem Licht des Vallemaggia.
   ========================================================================== */

/* -------------------------- 1. Design-Tokens -------------------------- */
:root {
	/* Farben */
	--cl-cream: #FAF5EC;
	--cl-cream-dark: #F0E7D6;
	--cl-stone: #E4DAC6;
	--cl-forest: #33473A;
	--cl-forest-dark: #202E27;
	--cl-terracotta: #BE6A3F;
	--cl-terracotta-dark: #A2532F;
	--cl-gold: #C7973F;
	--cl-ink: #2A241D;
	--cl-ink-light: #5B5346;
	--cl-white: #FFFFFF;
	--cl-line: rgba(42, 36, 29, 0.12);

	/* Typografie */
	--cl-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--cl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Layout */
	--cl-container: 1180px;
	--cl-radius: 14px;
	--cl-radius-sm: 8px;
	--cl-shadow: 0 20px 45px -20px rgba(32, 28, 20, 0.35);
	--cl-shadow-sm: 0 8px 24px -12px rgba(32, 28, 20, 0.25);
	--cl-transition: 220ms cubic-bezier(.4,0,.2,1);
}

/* -------------------------- 2. Reset & Basis -------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--cl-cream);
	color: var(--cl-ink);
	font-family: var(--cl-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--cl-font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 .5em;
	color: var(--cl-forest-dark);
}
h1 { font-size: clamp(2.4rem, 4vw + 1rem, 4rem); }
h2 { font-size: clamp(1.9rem, 2.4vw + 1rem, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; background: var(--cl-forest);
	color: #fff; padding: 12px 20px; z-index: 10000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* -------------------------- 3. Layout-Helfer -------------------------- */
.cl-container {
	max-width: var(--cl-container);
	margin-inline: auto;
	padding-inline: 24px;
}
.cl-section { padding-block: clamp(56px, 8vw, 110px); }
.cl-section--tight { padding-block: clamp(40px, 5vw, 70px); }
.cl-section--forest { background: var(--cl-forest); color: #EDE7DA; }
.cl-section--forest h2, .cl-section--forest h3 { color: #fff; }
.cl-section--stone { background: var(--cl-cream-dark); }
.cl-kicker {
	display: inline-block;
	font-family: var(--cl-font-body);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .78rem;
	color: var(--cl-terracotta-dark);
	margin-bottom: 14px;
}
.cl-section--forest .cl-kicker { color: var(--cl-gold); }
.cl-lead { font-size: 1.15rem; color: var(--cl-ink-light); max-width: 62ch; }
.cl-center { text-align: center; margin-inline: auto; }
.cl-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.cl-reveal.is-visible { opacity: 1; transform: none; }

/* -------------------------- 4. Buttons -------------------------- */
.cl-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--cl-transition), background var(--cl-transition), color var(--cl-transition), border-color var(--cl-transition);
}
.cl-btn:hover { transform: translateY(-2px); }
.cl-btn--primary { background: var(--cl-terracotta); color: #fff; }
.cl-btn--primary:hover { background: var(--cl-terracotta-dark); }
.cl-btn--outline { border-color: currentColor; background: transparent; }
.cl-btn--outline.cl-btn--light { color: #fff; }
.cl-btn--outline.cl-btn--light:hover { background: rgba(255,255,255,.12); }
.cl-btn--dark { border-color: var(--cl-forest); color: var(--cl-forest); }
.cl-btn--dark:hover { background: var(--cl-forest); color: #fff; }

/* -------------------------- 5. Header / Navigation -------------------------- */
.cl-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(250, 245, 236, .92);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--cl-line);
}
.cl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
}
.cl-brand { display: flex; align-items: center; gap: 12px; font-family: var(--cl-font-display); font-size: 1.35rem; color: var(--cl-forest-dark); font-weight: 700; }
.cl-brand img { max-height: 52px; width: auto; }
.cl-brand__lizard { font-size: 1.5rem; }
.cl-nav__list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-nav__list a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	color: var(--cl-ink);
	transition: background var(--cl-transition), color var(--cl-transition);
}
.cl-nav__list a:hover,
.cl-nav__list .current-menu-item > a {
	background: var(--cl-forest);
	color: #fff;
}
.cl-header__right { display: flex; align-items: center; gap: 14px; }
.cl-lang-switch { display: flex; gap: 4px; border: 1px solid var(--cl-line); border-radius: 999px; padding: 4px; }
.cl-lang-switch__item a { display: block; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.cl-lang-switch__item.is-active a { background: var(--cl-terracotta); color: #fff; }
.cl-nav-toggle {
	display: none;
	background: none; border: none; cursor: pointer; padding: 8px;
	flex-direction: column; gap: 5px;
}
.cl-nav-toggle span { width: 26px; height: 2px; background: var(--cl-forest-dark); display: block; border-radius: 2px; }

@media (max-width: 880px) {
	.cl-nav-toggle { display: inline-flex; }
	.cl-primary-nav {
		position: fixed; inset: 0 0 0 auto; width: min(340px, 85vw);
		z-index: 450;
		background: var(--cl-cream); box-shadow: var(--cl-shadow);
		transform: translateX(100%); transition: transform var(--cl-transition);
		padding: 90px 28px 28px; overflow-y: auto;
	}
	.cl-primary-nav.is-open { transform: translateX(0); }
	.cl-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.cl-nav__list a { padding: 14px 16px; }
	.cl-nav-overlay { position: fixed; inset: 0; background: rgba(32,28,20,.45); opacity: 0; pointer-events: none; transition: opacity var(--cl-transition); z-index: 400; }
	.cl-nav-overlay.is-open { opacity: 1; pointer-events: auto; }
}

/* -------------------------- 6. Hero -------------------------- */
.cl-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	color: #fff;
	background: linear-gradient(180deg, rgba(32,46,39,.35) 0%, rgba(24,33,27,.55) 55%, rgba(18,25,20,.85) 100%), var(--cl-forest-dark) center/cover no-repeat;
	background-image: var(--hero-image, none), linear-gradient(180deg, rgba(32,46,39,.35) 0%, rgba(24,33,27,.55) 55%, rgba(18,25,20,.85) 100%);
}
.cl-hero__inner { padding-block: 90px 64px; width: 100%; }
.cl-hero__kicker { color: var(--cl-gold); }
.cl-hero h1 { color: #fff; max-width: 16ch; }
.cl-hero__lead { max-width: 52ch; font-size: 1.15rem; color: rgba(255,255,255,.88); }
.cl-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.cl-hero__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; opacity: .8; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

.cl-page-hero {
	background: var(--cl-forest);
	color: #fff;
	padding-block: 80px 56px;
}
.cl-page-hero h1 { color: #fff; }
.cl-page-hero .cl-kicker { color: var(--cl-gold); }
.cl-breadcrumb { color: rgba(255,255,255,.7); font-size: .9rem; }
.cl-breadcrumb a:hover { text-decoration: underline; }

/* -------------------------- 7. Highlight-Kacheln -------------------------- */
.cl-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-top: 48px; }
.cl-highlight-card {
	background: var(--cl-white);
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	padding: 28px 24px;
	transition: transform var(--cl-transition), box-shadow var(--cl-transition);
}
.cl-highlight-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-sm); }
.cl-highlight-card__icon {
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--cl-cream-dark); color: var(--cl-terracotta);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
}
.cl-highlight-card__icon svg { width: 24px; height: 24px; }
.cl-highlight-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.cl-highlight-card p { color: var(--cl-ink-light); margin: 0; font-size: .96rem; }

/* -------------------------- 8. Zwei-Spalten / Story -------------------------- */
.cl-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.cl-split.cl-split--reverse .cl-split__media { order: 2; }
.cl-split__media img { border-radius: var(--cl-radius); box-shadow: var(--cl-shadow); }
.cl-split__body .cl-prose { color: var(--cl-ink-light); }
@media (max-width: 880px) {
	.cl-split { grid-template-columns: 1fr; gap: 32px; }
	.cl-split.cl-split--reverse .cl-split__media { order: 0; }
}

/* -------------------------- 9. Teaser-Galerie (Startseite) -------------------------- */
.cl-teaser-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; margin-top: 44px; height: 480px; }
.cl-teaser-grid a { border-radius: var(--cl-radius); overflow: hidden; display: block; position: relative; }
.cl-teaser-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cl-teaser-grid a:hover img { transform: scale(1.06); }
.cl-teaser-grid a:first-child { grid-row: 1 / 3; }
@media (max-width: 780px) {
	.cl-teaser-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
	.cl-teaser-grid a:first-child { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 16/9; }
	.cl-teaser-grid a { aspect-ratio: 1/1; }
}

/* -------------------------- 10. Testimonials -------------------------- */
.cl-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 44px; }
.cl-testimonial {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--cl-radius);
	padding: 30px 26px;
}
.cl-section--stone .cl-testimonial, body:not(.cl-page-home) .cl-testimonial {
	background: var(--cl-white); border-color: var(--cl-line);
}
.cl-testimonial__mark { font-family: var(--cl-font-display); font-size: 2.6rem; color: var(--cl-gold); line-height: .4; display: block; margin-bottom: 12px; }
.cl-testimonial h3 { font-size: 1.05rem; margin-bottom: 10px; }
.cl-testimonial p { font-size: .96rem; margin: 0; }
.cl-section--stone .cl-testimonial p,
body:not(.cl-page-home) .cl-testimonial p { color: var(--cl-ink-light); }

/* -------------------------- 11. Galerie-Seite + Lightbox -------------------------- */
.cl-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.cl-gallery-grid figure { margin: 0; border-radius: var(--cl-radius-sm); overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; }
.cl-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.cl-gallery-grid figure:hover img { transform: scale(1.07); }
@media (max-width: 880px) { .cl-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cl-gallery-grid { grid-template-columns: 1fr; } }

.cl-lightbox {
	position: fixed; inset: 0; background: rgba(18,16,12,.94); z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none; transition: opacity .25s ease;
	padding: 24px;
}
.cl-lightbox.is-open { opacity: 1; pointer-events: auto; }
.cl-lightbox img { max-height: 88vh; max-width: 92vw; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.cl-lightbox__close, .cl-lightbox__prev, .cl-lightbox__next {
	position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none;
	width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.4rem;
	display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.cl-lightbox__close:hover, .cl-lightbox__prev:hover, .cl-lightbox__next:hover { background: rgba(255,255,255,.28); }
.cl-lightbox__close { top: 24px; right: 24px; }
.cl-lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.cl-lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.cl-empty-state { border: 1px dashed var(--cl-line); border-radius: var(--cl-radius); padding: 48px; text-align: center; color: var(--cl-ink-light); margin-top: 24px; }

/* -------------------------- 12. Akkordeon (Weitere Infos) -------------------------- */
.cl-accordion { border-top: 1px solid var(--cl-line); margin-top: 32px; }
.cl-accordion__item { border-bottom: 1px solid var(--cl-line); }
.cl-accordion__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: none; border: none; text-align: left; cursor: pointer;
	padding: 24px 4px; font-family: var(--cl-font-display); font-size: 1.3rem; color: var(--cl-forest-dark);
}
.cl-accordion__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cl-line); display: flex; align-items: center; justify-content: center; transition: transform var(--cl-transition), background var(--cl-transition); }
.cl-accordion__trigger[aria-expanded="true"] .cl-accordion__icon { transform: rotate(45deg); background: var(--cl-terracotta); color: #fff; border-color: var(--cl-terracotta); }
.cl-accordion__panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.cl-accordion__panel-inner { padding: 0 4px 28px; }
.cl-accordion__panel ul { display: grid; gap: 12px; }
.cl-accordion__panel li { position: relative; padding-left: 26px; color: var(--cl-ink-light); }
.cl-accordion__panel li::before {
	content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
	border-radius: 50%; background: var(--cl-terracotta);
}

/* -------------------------- 13. Preistabelle -------------------------- */
.cl-pricing { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 22px; }
.cl-price-card { background: var(--cl-white); border: 1px solid var(--cl-line); border-radius: var(--cl-radius); padding: 32px 28px; }
.cl-price-card--accent { background: var(--cl-forest); color: #fff; border-color: var(--cl-forest); }
.cl-price-card--accent .cl-price-card__label { color: var(--cl-gold); }
.cl-price-card__label { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; color: var(--cl-terracotta-dark); }
.cl-price-card__value { font-family: var(--cl-font-display); font-size: 2.6rem; margin: 10px 0 4px; }
.cl-price-card__unit { font-size: .9rem; opacity: .75; }
.cl-extras-table { width: 100%; border-collapse: collapse; margin-top: 44px; }
.cl-extras-table th { text-align: left; font-family: var(--cl-font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cl-ink-light); padding-bottom: 12px; border-bottom: 1px solid var(--cl-line); }
.cl-extras-table td { padding: 16px 0; border-bottom: 1px solid var(--cl-line); }
.cl-extras-table td:last-child { text-align: right; font-weight: 600; color: var(--cl-forest-dark); }
.cl-note-box {
	margin-top: 32px; padding: 20px 24px; border-radius: var(--cl-radius-sm);
	background: var(--cl-cream-dark); border-left: 4px solid var(--cl-terracotta); color: var(--cl-ink-light);
}

/* -------------------------- 14. Karte / Anfahrt -------------------------- */
.cl-map-frame { border-radius: var(--cl-radius); overflow: hidden; box-shadow: var(--cl-shadow); border: 1px solid var(--cl-line); }
.cl-map-frame iframe { width: 100%; height: 460px; border: 0; display: block; }
.cl-address-card {
	background: var(--cl-white); border: 1px solid var(--cl-line); border-radius: var(--cl-radius);
	padding: 28px; display: grid; gap: 6px;
}
.cl-address-card strong { font-family: var(--cl-font-display); font-size: 1.2rem; color: var(--cl-forest-dark); }
.cl-steps { counter-reset: cl-step; margin-top: 28px; display: grid; gap: 20px; }
.cl-step { position: relative; padding-left: 52px; }
.cl-step::before {
	counter-increment: cl-step; content: counter(cl-step);
	position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
	background: var(--cl-terracotta); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--cl-font-display); font-weight: 700;
}

/* -------------------------- 15. Kalender / Belegung -------------------------- */
.cl-calendar-frame { border-radius: var(--cl-radius); overflow: hidden; box-shadow: var(--cl-shadow); border: 1px solid var(--cl-line); background: var(--cl-white); }
.cl-calendar-frame iframe { width: 100%; height: 640px; border: 0; display: block; }
.cl-contact-cta { background: var(--cl-forest); color: #fff; border-radius: var(--cl-radius); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.cl-contact-cta h3 { color: #fff; margin-bottom: 4px; }
.cl-contact-cta p { margin: 0; color: rgba(255,255,255,.8); }

/* -------------------------- 16. Footer -------------------------- */
.cl-footer { background: var(--cl-forest-dark); color: rgba(255,255,255,.82); padding-block: 64px 28px; }
.cl-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.cl-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.cl-footer p { color: rgba(255,255,255,.68); }
.cl-footer__brand { font-family: var(--cl-font-display); font-size: 1.4rem; color: #fff; margin-bottom: 12px; }
.cl-footer__list a { display: block; padding: 6px 0; color: rgba(255,255,255,.75); transition: color var(--cl-transition); }
.cl-footer__list a:hover { color: #fff; }
.cl-footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.55); }
@media (max-width: 780px) { .cl-footer__grid { grid-template-columns: 1fr; } }

/* -------------------------- 17. Responsive Feinschliff -------------------------- */
@media (max-width: 780px) {
	body { font-size: 16px; }
	.cl-hero { min-height: 78vh; }
}

/* -------------------------- 18. Print -------------------------- */
@media print {
	.cl-header, .cl-footer, .cl-nav-toggle { display: none; }
}