/* =========================================================================
   Feriendorf Grafenhausen – Ferienhäuser
   Frontend-Stil (Schwarzwald: Tannengrün, warmer Sand, Holztöne)
   Farben kommen aus CSS-Variablen (in den Einstellungen anpassbar).
   ========================================================================= */

/* Doppelten Titel entfernen: Auf Ferienhaus-Einzelseiten gibt das Plugin den
   Titel selbst über dem Foto aus. Der zusätzliche Seitentitel des Themes bzw.
   der Elementor-„Post Title“-Widget wird hier ausgeblendet. Der Plugin-Titel
   (.fdg-single-title) ist davon nicht betroffen. */
body.single-fdg_ferienhaus .elementor-widget-theme-post-title,
body.single-fdg_ferienhaus .elementor-page-title,
body.single-fdg_ferienhaus .entry-title,
body.single-fdg_ferienhaus .page-title,
body.single-fdg_ferienhaus .wp-block-post-title {
	display: none !important;
}

.fdg-fewo {
	--fdg-green: #3f5e3a;
	--fdg-sand: #f6f2e9;
	--fdg-bark: #3d352c;
	--fdg-amber: #b9791f;

	--fdg-green-d: color-mix(in srgb, var(--fdg-green) 78%, #000);
	--fdg-green-soft: color-mix(in srgb, var(--fdg-green) 12%, #fff);
	--fdg-line: color-mix(in srgb, var(--fdg-bark) 16%, #fff);
	--fdg-muted: color-mix(in srgb, var(--fdg-bark) 55%, #fff);
	--fdg-radius: 14px;
	--fdg-shadow: 0 1px 2px rgba(61,53,44,.06), 0 10px 30px -18px rgba(61,53,44,.35);

	color: var(--fdg-bark);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.fdg-fewo *,
.fdg-fewo *::before,
.fdg-fewo *::after { box-sizing: border-box; }

.fdg-fewo a { color: var(--fdg-green-d); text-decoration: none; }
.fdg-svg { display: block; }

/* ------------------------------- Raster -------------------------------- */
.fdg-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(3, 1fr);
}
.fdg-cols-1 { grid-template-columns: 1fr; }
.fdg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fdg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fdg-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) { .fdg-cols-3, .fdg-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .fdg-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ------------------------------- Karte --------------------------------- */
.fdg-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--fdg-line);
	border-radius: var(--fdg-radius);
	overflow: hidden;
	box-shadow: var(--fdg-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.fdg-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(61,53,44,.06), 0 22px 40px -22px rgba(61,53,44,.5);
}
.fdg-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--fdg-sand);
}
.fdg-card-media img,
.fdg-card-img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.fdg-card:hover .fdg-card-img { transform: scale(1.05); }
.fdg-card-noimg {
	display: grid; place-items: center;
	height: 100%; color: var(--fdg-muted);
}
.fdg-card-noimg svg { width: 46px; height: 46px; }

.fdg-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fdg-card-title { margin: 0; font-size: 1.35rem; line-height: 1.2; font-weight: 700; color: var(--fdg-bark); }
.fdg-card-title a { color: inherit; }
.fdg-card-title a:hover { color: var(--fdg-green); }
.fdg-card-sub { margin: -6px 0 0; color: var(--fdg-muted); font-size: .92rem; }
.fdg-card-text { margin: 2px 0 0; color: var(--fdg-muted); font-size: .96rem; }
.fdg-card .fdg-btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------ Kennzahlen ----------------------------- */
.fdg-stats {
	display: flex;
	gap: 6px;
	padding: 12px 0;
	border-top: 1px solid var(--fdg-line);
	border-bottom: 1px solid var(--fdg-line);
}
.fdg-stat { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.fdg-stat + .fdg-stat { border-left: 1px solid var(--fdg-line); }
.fdg-stat-ico { color: var(--fdg-green); }
.fdg-stat-ico svg { width: 22px; height: 22px; }
.fdg-stat-num { font-weight: 700; font-size: 1.02rem; color: var(--fdg-bark); }
.fdg-stat-lbl { font-size: .72rem; letter-spacing: .02em; color: var(--fdg-muted); }

/* --------------------------- Ausstattungs-Chips ------------------------ */
.fdg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fdg-chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: .84rem;
	background: var(--fdg-green-soft);
	color: var(--fdg-green-d);
	border: 1px solid color-mix(in srgb, var(--fdg-green) 22%, #fff);
}
.fdg-chip-ico svg { width: 17px; height: 17px; }
.fdg-chip-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 600; }
.fdg-chip-badge svg { width: 13px; height: 13px; }

/* eingeschränkt = Bernstein, deutlich sichtbar */
.fdg-chip-limit {
	background: color-mix(in srgb, var(--fdg-amber) 14%, #fff);
	color: color-mix(in srgb, var(--fdg-amber) 82%, #000);
	border-color: color-mix(in srgb, var(--fdg-amber) 35%, #fff);
}
/* nicht vorhanden = neutral, dezent, aber lesbar */
.fdg-chip-nein {
	background: #fff;
	color: var(--fdg-muted);
	border-color: var(--fdg-line);
}
.fdg-chip-nein .fdg-chip-text { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ------------------------- "Gut zu wissen" Hinweise -------------------- */
.fdg-notes { display: flex; flex-direction: column; gap: 10px; }
.fdg-note {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid;
	background: #fff;
}
.fdg-note-icon { flex: 0 0 auto; margin-top: 1px; }
.fdg-note-icon svg { width: 22px; height: 22px; }
.fdg-note-body { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; line-height: 1.5; }
.fdg-note-body strong { font-size: .98rem; }

.fdg-note-highlight {
	background: var(--fdg-green-soft);
	border-color: color-mix(in srgb, var(--fdg-green) 25%, #fff);
}
.fdg-note-highlight .fdg-note-icon { color: var(--fdg-green); }
.fdg-note-highlight strong { color: var(--fdg-green-d); }

.fdg-note-hinweis {
	background: color-mix(in srgb, var(--fdg-amber) 10%, #fff);
	border-color: color-mix(in srgb, var(--fdg-amber) 32%, #fff);
}
.fdg-note-hinweis .fdg-note-icon { color: var(--fdg-amber); }
.fdg-note-hinweis strong { color: color-mix(in srgb, var(--fdg-amber) 82%, #000); }

/* ------------------------------- Buttons ------------------------------- */
.fdg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 20px;
	border-radius: 999px;
	font-weight: 600; font-size: .95rem;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	border: 1.5px solid var(--fdg-green);
}
.fdg-btn-ghost { background: transparent; color: var(--fdg-green-d); }
.fdg-btn-ghost:hover { background: var(--fdg-green); color: #fff; }
.fdg-btn-solid { background: var(--fdg-green); color: #fff; border-color: var(--fdg-green); }
.fdg-btn-solid:hover { background: var(--fdg-green-d); color: #fff; }
.fdg-btn-block { width: 100%; }

.fdg-empty { padding: 2em; text-align: center; color: var(--fdg-muted); background: var(--fdg-sand); border-radius: var(--fdg-radius); }

/* =============================== Detailseite =========================== */
.fdg-single { max-width: 1080px; margin: 0 auto; }
.fdg-single-head { margin-bottom: 22px; }
.fdg-single-title { margin: 0 0 4px; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; color: var(--fdg-bark); }
.fdg-single-sub { margin: 0 0 16px; color: var(--fdg-muted); font-size: 1.05rem; }
.fdg-single-head .fdg-stats { max-width: 520px; }

/* Galerie */
.fdg-gallery { margin: 0 0 28px; }
.fdg-gallery-main {
	border-radius: var(--fdg-radius);
	overflow: hidden;
	background: var(--fdg-sand);
	aspect-ratio: 16 / 10;
}
.fdg-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdg-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-top: 10px;
}
.fdg-thumb {
	padding: 0; border: 2px solid transparent; border-radius: 10px;
	overflow: hidden; cursor: pointer; background: none; aspect-ratio: 4/3;
}
.fdg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdg-thumb.is-active { border-color: var(--fdg-green); }

/* Zwei-Spalten-Layout */
.fdg-single-cols { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
@media (max-width: 900px) { .fdg-single-cols { grid-template-columns: 1fr; } }

.fdg-single-text { font-size: 1.02rem; }
.fdg-single-text p { margin: 0 0 1em; }

.fdg-h2 { font-size: 1.5rem; margin: 1.6em 0 .7em; color: var(--fdg-bark); }
.fdg-h3 { font-size: 1.1rem; margin: 0 0 12px; color: var(--fdg-bark); }

.fdg-featurelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
@media (max-width: 560px) { .fdg-featurelist { grid-template-columns: 1fr; } }
.fdg-featurelist li { display: flex; gap: 10px; align-items: flex-start; }
.fdg-li-ico { flex: 0 0 auto; color: var(--fdg-green); margin-top: 1px; }
.fdg-li-ico svg { width: 20px; height: 20px; }

.fdg-single-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.fdg-aside-box {
	background: var(--fdg-sand);
	border: 1px solid var(--fdg-line);
	border-radius: var(--fdg-radius);
	padding: 20px;
}
.fdg-aside-box .fdg-note { background: #fff; }

/* ------------------------------ Buchung -------------------------------- */
.fdg-booking {
	margin: 36px 0 4px;
	padding: 24px 26px 28px;
	background: var(--fdg-sand);
	border: 1px solid color-mix(in srgb, var(--fdg-green) 20%, #fff);
	border-top: 4px solid var(--fdg-green);
	border-radius: 14px;
	box-shadow: var(--fdg-shadow);
}
.fdg-booking-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fdg-booking-ico {
	flex: 0 0 auto;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--fdg-green);
	color: #fff;
	display: grid; place-items: center;
}
.fdg-booking-ico svg { width: 25px; height: 25px; }
.fdg-booking-title { margin: 0; font-size: 1.5rem; line-height: 1.15; color: var(--fdg-bark); }
.fdg-booking-sub { margin: 3px 0 0; color: var(--fdg-muted); font-size: .95rem; }
.fdg-booking-body { }
.fdg-booking-embed { margin-top: 2px; }
.fdg-booking-embed #viatoCbe,
.fdg-booking-embed iframe { width: 100%; }
.fdg-btn-lg { font-size: 1.02rem; padding: 14px 28px; }
@media (max-width: 520px) {
	.fdg-booking { padding: 20px 18px 22px; }
	.fdg-booking-title { font-size: 1.3rem; }
	.fdg-btn-lg { width: 100%; }
}

/* -------------------- Navigation zum nächsten Haus --------------------- */
.fdg-house-nav {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin: 30px 0 4px;
	padding-top: 22px;
	border-top: 1px solid var(--fdg-line);
}
.fdg-nav-spacer { flex: 0 0 1px; }
.fdg-nav-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 48%;
	padding: 12px 18px;
	border: 1px solid var(--fdg-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease;
}
.fdg-nav-link:hover { border-color: var(--fdg-green); background: var(--fdg-green-soft); }
.fdg-nav-next { text-align: right; margin-left: auto; align-items: flex-end; }
.fdg-nav-dir { font-size: .78rem; color: var(--fdg-muted); }
.fdg-nav-name { font-weight: 700; color: var(--fdg-green-d); line-height: 1.2; }
@media (max-width: 520px) {
	.fdg-nav-name { font-size: .92rem; }
	.fdg-nav-link { padding: 10px 12px; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	.fdg-card, .fdg-card-img, .fdg-btn { transition: none; }
	.fdg-card:hover { transform: none; }
	.fdg-card:hover .fdg-card-img { transform: none; }
}

/* Fallback ohne color-mix (ältere Browser) */
@supports not (color: color-mix(in srgb, #000 10%, #fff)) {
	.fdg-fewo { --fdg-green-d: #2c4429; --fdg-green-soft: #eef2ec; --fdg-line: #e5ded2; --fdg-muted: #7a7166; }
	.fdg-chip { background: #eef2ec; color: #2c4429; border-color: #cfe0ca; }
	.fdg-chip-limit { background: #fbf1df; color: #8a5a10; border-color: #eccf9c; }
	.fdg-note-highlight { background: #eef2ec; border-color: #cfe0ca; }
	.fdg-note-hinweis { background: #fbf1df; border-color: #eccf9c; }
	.fdg-booking { border-color: #cfe0ca; }
}