/*
Theme Name: Gartenanker
Theme URI: https://gartenanker.org
Author: Gartenanker
Description: Villen in Starnberg. Kauf und Miete. Kein Hotel, keine Ferienwohnung.
Version: 1.0.0
Text Domain: gartenanker
*/

:root {
	--gan-chalk: #efe9e0;
	--gan-umber: #5c3d2e;
	--gan-leaf: #6b7c4a;
	--gan-paper: #f7f3ec;
	--gan-line: #d4cdc2;
	--gan-ink: #2a221c;
	--gan-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
	--gan-text: "IBM Plex Sans", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--gan-text);
	color: var(--gan-ink);
	background: var(--gan-chalk);
	line-height: 1.72;
	font-size: 1.06rem;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--gan-display); font-weight: 600; margin: 0 0 0.42em; line-height: 1.14; }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2.05rem); }
a { color: var(--gan-leaf); }
address { font-style: normal; }
.gan-knopf, .gan-linie {
	display: inline-block; padding: 12px 18px; text-decoration: none; font-weight: 600;
	font-family: var(--gan-text); border: 0; cursor: pointer; letter-spacing: 0.02em;
}
.gan-knopf { background: var(--gan-umber); color: var(--gan-chalk); }
.gan-knopf:hover { background: #4a3125; }
.gan-linie { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gan-umber); color: var(--gan-umber); }
.gan-linie:hover { background: var(--gan-paper); }
.gan-kicker {
	font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--gan-leaf); font-weight: 600; margin: 0 0 8px;
}

/* Header: wordmark left, facts column right, leaf nav under — not address-row, not phone-then-dark-nav */
.gan-kop { background: var(--gan-paper); border-bottom: 1px solid var(--gan-line); }
.gan-kop-akte {
	display: grid;
	grid-template-columns: 1fr minmax(220px, 32%);
	gap: 24px;
	padding: 22px 6vw 18px;
	align-items: end;
}
.gan-wort {
	font-family: var(--gan-display);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--gan-umber);
	text-decoration: none;
	line-height: 1;
	letter-spacing: -0.02em;
}
.gan-wort small {
	display: block;
	margin-top: 8px;
	font-family: var(--gan-text);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gan-leaf);
	font-weight: 600;
}
.gan-fakten {
	font-size: 0.84rem;
	line-height: 1.55;
	text-align: right;
	border-left: 2px solid var(--gan-leaf);
	padding-left: 18px;
}
.gan-fakten a { color: var(--gan-ink); text-decoration: none; }
.gan-fakten a:hover { color: var(--gan-leaf); }
.gan-nav {
	padding: 0 6vw;
	background: var(--gan-leaf);
}
.gan-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 11px 0; }
.gan-nav a { color: var(--gan-chalk); text-decoration: none; font-size: 0.88rem; font-weight: 600; }
.gan-nav .current-menu-item a { box-shadow: inset 0 -2px 0 var(--gan-chalk); }
.gan-open {
	display: none; background: var(--gan-umber); color: var(--gan-chalk); border: 0;
	padding: 8px 12px; cursor: pointer; font-family: inherit;
}
.gan-lade { display: none; background: var(--gan-umber); color: var(--gan-chalk); padding: 18px 6vw 26px; }
.gan-lade a { color: var(--gan-chalk); }
.gan-lade.is-open, .gan-lade:not([hidden]) { display: block; }
.gan-lade ul { list-style: none; margin: 12px 0 0; padding: 0; }
.gan-lade li { padding: 8px 0; border-bottom: 1px solid #7a5846; }
.gan-lade button {
	background: transparent; color: var(--gan-chalk); border: 1px solid var(--gan-chalk);
	padding: 6px 10px; margin-bottom: 12px; cursor: pointer;
}

/* Divider: broken corner frame, four L-shaped ticks */
.gan-ecken {
	position: relative;
	height: 52px;
	margin: 0 6vw;
}
.gan-ecken i {
	position: absolute;
	inset: 10px 0;
	display: block;
}
.gan-ecken::before,
.gan-ecken::after,
.gan-ecken i::before,
.gan-ecken i::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border-color: var(--gan-umber);
	border-style: solid;
}
.gan-ecken::before { top: 10px; left: 0; border-width: 2px 0 0 2px; }
.gan-ecken::after { top: 10px; right: 0; border-width: 2px 2px 0 0; }
.gan-ecken i::before { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.gan-ecken i::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.gan-bahn { padding: 52px 6vw 76px; width: 100%; max-width: none; }
.gan-bahn p { max-width: none; }

/* Home hero: villa as left-file overlay, not a bottom plate */
.gan-villa {
	min-height: 74vh;
	background: #5c3d2e url("images/villa.jpg") 58% 42%/cover;
	display: grid;
	grid-template-columns: minmax(280px, 40%) 1fr;
}
.gan-villa-akte {
	background: rgba(239, 233, 224, 0.95);
	padding: 40px 6vw 48px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.gan-villa-akte p { max-width: none; }

/* Home objects: stacked ledger rows, not three hotel cards */
.gan-objekte { padding: 48px 6vw 20px; }
.gan-kachelreihe { display: flex; flex-direction: column; gap: 0; margin: 28px 0 12px; }
.gan-kachel {
	display: grid;
	grid-template-columns: minmax(160px, 28%) 1fr;
	gap: 0;
	width: 100%;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--gan-line);
	background: var(--gan-paper);
	color: inherit;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.gan-kachel:last-child { border-bottom: 1px solid var(--gan-line); }
.gan-kachel.is-on { box-shadow: inset 6px 0 0 var(--gan-leaf); background: #fff; }
.gan-kachel figure { min-height: 168px; margin: 0; background-size: cover; background-position: center; }
.gan-kachel-seehaus { background-image: url("images/objekt-a.jpg"); }
.gan-kachel-gartenhaus { background-image: url("images/objekt-b.jpg"); }
.gan-kachel-anwesen { background-image: url("images/objekt-c.jpg"); }
.gan-kachel-text { padding: 18px 22px 20px; }
.gan-kachel-text h3 { font-size: 1.35rem; margin-bottom: 0.25em; }
.gan-kachel-text p { margin: 0; font-size: 0.94rem; }
.gan-kachel-text strong {
	display: block;
	margin-top: 10px;
	font-family: var(--gan-display);
	font-size: 1.55rem;
	color: var(--gan-umber);
}

/* Months widget */
.gan-monate {
	padding: 40px 6vw 64px;
	background: var(--gan-umber);
	color: var(--gan-chalk);
}
.gan-monate a { color: #c9d4a8; }
.gan-monate .gan-kicker { color: #c9d4a8; }
.gan-monate-feld {
	display: grid;
	grid-template-columns: minmax(200px, 28%) 1fr;
	gap: 28px;
	align-items: end;
	margin-top: 20px;
}
.gan-monate label { display: block; font-weight: 600; font-size: 0.9rem; }
.gan-monate input[type="number"] {
	display: block;
	width: 8rem;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid #8a6a56;
	background: var(--gan-chalk);
	color: var(--gan-ink);
	font-family: inherit;
	font-size: 1.25rem;
}
.gan-summe {
	font-family: var(--gan-display);
	font-size: clamp(1.45rem, 2.6vw, 2.15rem);
	margin: 0;
	line-height: 1.28;
}

/* Lage band */
.gan-lage {
	min-height: 58vh;
	background: #5c3d2e url("images/see.jpg") 50% 48%/cover;
	display: flex;
	align-items: flex-end;
}
.gan-lage-tafel {
	width: 100%;
	background: rgba(92, 61, 46, 0.92);
	color: var(--gan-chalk);
	padding: 32px 6vw 40px;
}
.gan-lage-tafel a { color: #c9d4a8; }
.gan-lage-tafel .gan-kicker { color: #c9d4a8; }

/* Hours ledger */
.gan-zeiten { padding: 52px 6vw 72px; }
.gan-zeiten-leiste {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 28px 0 36px;
	border-top: 2px solid var(--gan-umber);
	border-bottom: 2px solid var(--gan-umber);
}
.gan-zeiten-leiste article {
	padding: 18px 20px 20px 0;
	border-right: 1px solid var(--gan-line);
}
.gan-zeiten-leiste article:last-child { border-right: 0; padding-right: 0; }
.gan-zeiten-leiste h3 { font-size: 1.05rem; }
.gan-uhr {
	font-family: var(--gan-display);
	font-size: 1.4rem;
	color: var(--gan-umber);
	margin: 0 0 8px;
}

/* Dossier: title left, text right */
.gan-dossier-bahn { padding: 48px 6vw 72px; background: var(--gan-paper); }
.gan-dossier {
	display: grid;
	grid-template-columns: minmax(200px, 34%) 1fr;
	gap: 28px;
	padding: 28px 0 32px;
	border-top: 1px solid var(--gan-line);
}
.gan-dossier:first-of-type { border-top: 2px solid var(--gan-umber); }
.gan-dossier h2, .gan-dossier h3 { margin: 0; }
.gan-dossier h2 a, .gan-dossier h3 a { color: var(--gan-umber); text-decoration: none; }
.gan-dossier time {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gan-leaf);
	margin-bottom: 8px;
}
.gan-dossier-text p { margin: 0 0 0.9rem; }
.gan-dossier-bild {
	min-height: 220px;
	margin: 0 0 22px;
	background-size: cover;
	background-position: center;
}
.gan-dos-a { background-image: url("images/dos-a.jpg"); }
.gan-dos-b { background-image: url("images/dos-b.jpg"); }
.gan-dos-c { background-image: url("images/dos-c.jpg"); }
.gan-dos-d { background-image: url("images/dos-d.jpg"); }

/* About bureau */
.gan-buero {
	min-height: 44vh;
	background: #5c3d2e url("images/buero.jpg") 50% 40%/cover;
	margin: 0;
}

/* Features: stacked exposé bands */
.gan-expose { display: flex; flex-direction: column; gap: 0; margin: 32px 0; }
.gan-expose article {
	display: grid;
	grid-template-columns: 42% 1fr;
	background: var(--gan-paper);
	margin: 0 0 22px;
}
.gan-expose article:nth-child(even) { grid-template-columns: 1fr 42%; }
.gan-expose article:nth-child(even) figure { order: 2; }
.gan-expose figure { min-height: 260px; margin: 0; background-size: cover; background-position: center; }
.gan-obj-d { background-image: url("images/objekt-d.jpg"); }
.gan-obj-e { background-image: url("images/objekt-e.jpg"); }
.gan-obj-f { background-image: url("images/objekt-f.jpg"); }
.gan-expose-text { padding: 28px 6vw 32px; }
.gan-expose-text strong {
	display: block;
	margin-top: 12px;
	font-family: var(--gan-display);
	font-size: 1.65rem;
	color: var(--gan-umber);
}

/* Reviews: object strips with street line */
.gan-streifenfach { margin: 24px 0 0; }
.gan-objektstreifen {
	padding: 18px 0 20px;
	border-bottom: 1px solid var(--gan-line);
	background:
		linear-gradient(var(--gan-paper), var(--gan-paper)) 0 0 / 8px 100% no-repeat;
	padding-left: 22px;
}
.gan-strasse {
	font-family: var(--gan-display);
	font-size: 1.05rem;
	color: var(--gan-umber);
	margin: 0 0 6px;
	letter-spacing: 0.01em;
}
.gan-objektstreifen p { margin: 0 0 8px; }
.gan-objektstreifen strong { font-size: 0.88rem; color: var(--gan-leaf); font-weight: 600; }

/* Contact gate */
.gan-tor {
	min-height: 40vh;
	background: #5c3d2e url("images/tor.jpg") 50% 45%/cover;
	margin: 0;
}
.gan-impressum {
	margin: 28px 0;
	padding: 22px 24px 26px;
	background: var(--gan-paper);
	border-top: 3px solid var(--gan-umber);
}
.gan-impressum h2 { font-size: 1.25rem; }

/* 404 */
.gan-leer {
	min-height: 38vh;
	background: #5c3d2e url("images/leer.jpg") 50% 50%/cover;
	margin: 0;
}

/* Years as stamps */
.gan-jahre {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 28px 0;
	border: 1px solid var(--gan-line);
}
.gan-jahre span {
	padding: 16px 18px 18px;
	border-right: 1px solid var(--gan-line);
}
.gan-jahre span:last-child { border-right: 0; }
.gan-jahre strong {
	display: block;
	font-family: var(--gan-display);
	font-size: 1.35rem;
	color: var(--gan-umber);
	margin-bottom: 6px;
}

.gan-faq details { border-bottom: 1px solid var(--gan-line); padding: 12px 0; }
.gan-faq summary { cursor: pointer; font-weight: 600; }
.gan-form label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 0.92rem; }
.gan-form input, .gan-form textarea, .gan-form select {
	width: 100%; padding: 12px 14px; border: 1px solid var(--gan-line);
	font-family: inherit; background: #fff; margin-top: 6px;
}
.gan-form input:focus, .gan-form textarea:focus, .gan-form select:focus {
	outline: 2px solid var(--gan-leaf); border-color: var(--gan-leaf);
}
.gan-form input[type="checkbox"] { width: auto; margin-right: 8px; }
.gan-bahn table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.gan-bahn th, .gan-bahn td { border-bottom: 1px solid var(--gan-line); padding: 10px 12px; text-align: left; }
.gan-bahn th { background: var(--gan-paper); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gan-hinweis { background: #e4e6d6; padding: 10px 14px; }
.gan-hinweis-fehl { background: #ead8d0; }

/* Footer: impressum ledger */
.gan-fuss { background: var(--gan-umber); color: var(--gan-chalk); }
.gan-fuss-leiste {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 28px;
	padding: 40px 6vw 32px;
}
.gan-fuss-leiste strong { font-family: var(--gan-display); font-size: 1.45rem; display: block; margin-bottom: 10px; }
.gan-fuss-leiste p, .gan-fuss-leiste address { margin: 0 0 10px; font-size: 0.92rem; }
.gan-fuss a { color: #c9d4a8; }
.gan-fuss-jur {
	padding: 14px 6vw 8px;
	font-size: 0.86rem;
	border-top: 1px solid #7a5846;
}
.gan-fuss-jur a { margin-right: 14px; }
.gan-rechte {
	margin: 0;
	padding: 8px 6vw 22px;
	font-size: 0.82rem;
}

.gan-keks {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: var(--gan-ink); color: var(--gan-chalk);
	padding: 14px 6vw; display: none; z-index: 20;
}
.gan-keks a { color: #c9d4a8; }
.gan-keks.is-open { display: block; }
.gan-keks .gan-linie { box-shadow: inset 0 0 0 1.5px var(--gan-chalk); color: var(--gan-chalk); margin-right: 8px; }

@media (max-width: 880px) {
	.gan-kop-akte { grid-template-columns: 1fr auto; }
	.gan-nav { display: none; }
	.gan-open { display: block; align-self: start; }
	.gan-villa, .gan-kachel, .gan-monate-feld, .gan-dossier,
	.gan-expose article, .gan-expose article:nth-child(even) { display: block; }
	.gan-expose article:nth-child(even) figure { order: 0; }
	.gan-villa figure, .gan-kachel figure, .gan-expose figure { min-height: 200px; }
	.gan-zeiten-leiste, .gan-jahre, .gan-fuss-leiste { grid-template-columns: 1fr 1fr; }
	.gan-fakten { text-align: left; border-left: 0; padding-left: 0; }
}

@media (max-width: 560px) {
	.gan-zeiten-leiste, .gan-jahre, .gan-fuss-leiste { grid-template-columns: 1fr; }
	.gan-zeiten-leiste article { border-right: 0; border-bottom: 1px solid var(--gan-line); }
}