/* Kartenseite (front-page.php) — Leaflet-Restyling + Panels.
   Nutzt die Tokens aus style.css (--ink, --paper, --accent, --shadow-*, …). */

html, body { height: 100%; }
body.vf-map-page { overflow: hidden; }

#vf-map { position: fixed; inset: 0; background: var(--paper); }

/* Grüner OSM-Tile-Filter */
#vf-map .leaflet-tile {
	filter: grayscale(0.85) sepia(0.25) hue-rotate(70deg) saturate(1.6) brightness(1.06) contrast(0.92);
}

.leaflet-control-attribution {
	font-family: var(--font-mono);
	font-size: 9px !important;
}

/* Header oben links */
.vf-header {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 1000;
	background: var(--paper);
	border: var(--border-w) solid var(--ink);
	padding: 14px 18px;
	max-width: 340px;
	box-shadow: var(--shadow-lg);
}
.vf-header__row { display: flex; align-items: center; gap: 12px; }
.vf-header__logo { flex-shrink: 0; }
.vf-header h1 {
	margin: 0 0 4px;
	font-size: var(--fs-h);
	letter-spacing: var(--ls-title);
	font-weight: var(--fw-bold);
}
.vf-header h1 .dot { color: var(--accent); }
.vf-header p { margin: 0; font-size: var(--fs-small); line-height: 1.5; opacity: 0.75; }

/* Impressum-Button oben rechts */
.vf-actions {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1000;
	display: flex;
	gap: 8px;
}
.vf-actions button {
	font-family: var(--font-mono);
	font-size: var(--fs-kicker);
	font-weight: var(--fw-bold);
	padding: 8px 12px;
	border: var(--border-w) solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
}
.vf-actions button:hover { background: var(--ink); color: var(--paper); }

/* Impressum-Dialog */
dialog#vf-impressum {
	border: var(--border-w) solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-mono);
	max-width: 420px;
	width: calc(100% - 32px);
	padding: 28px 32px;
	box-shadow: var(--shadow-xl);
}
dialog#vf-impressum::backdrop { background: rgba(30, 38, 32, 0.45); }
dialog#vf-impressum h2 { margin: 0 0 16px; font-size: var(--fs-h); letter-spacing: var(--ls-title); }
dialog#vf-impressum p { font-size: var(--fs-small); line-height: 1.7; margin: 0 0 12px; }
dialog#vf-impressum .vf-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: var(--border-w) solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}
dialog#vf-impressum .vf-close:hover { background: var(--ink); color: var(--paper); }

/* Pins */
.vf-pin {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--paper);
	border: var(--border-w) solid var(--ink);
	font-size: 13px;
	font-weight: var(--fw-bold);
	font-family: var(--font-mono);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
	transition: transform 0.15s;
}
.vf-pin:hover { transform: scale(1.15); }
.vf-pin.is-read { background: var(--accent); color: #fff; }

/* Leaflet-Popup */
.leaflet-popup-content-wrapper {
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	border: var(--border-w) solid var(--ink);
	box-shadow: var(--shadow-md);
	font-family: var(--font-mono);
}
.leaflet-popup-tip { background: var(--ink); }
.leaflet-popup-content { margin: 0; width: 240px !important; }
.vf-pop { display: flex; flex-direction: column; }
.vf-pop img { width: 100%; height: 110px; object-fit: cover; display: block; border-bottom: var(--border-w) solid var(--ink); }
.vf-pop .vf-pop__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.vf-pop .vf-kicker { font-size: 10px; }
.vf-pop h3 { margin: 0; font-size: 14px; line-height: 1.3; }
.vf-pop p { margin: 0; font-size: 11.5px; line-height: 1.5; opacity: 0.8; }
.vf-pop button {
	align-self: flex-start;
	margin-top: 4px;
	font-family: inherit;
	font-size: 11px;
	padding: 6px 10px;
	border: var(--border-w) solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}
.vf-pop button:hover { background: var(--accent); border-color: var(--accent); }

/* Artikel-Panel */
#vf-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100%);
	z-index: 1100;
	background: var(--paper);
	border-left: var(--border-w) solid var(--ink);
	transform: translateX(105%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
#vf-panel.is-open { transform: translateX(0); }
#vf-panel .vf-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: var(--border-w) solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
}
#vf-panel .vf-close:hover { background: var(--ink); color: var(--paper); }
#vf-panel .vf-scroll { overflow-y: auto; flex: 1; }
#vf-panel img.vf-hero { width: 100%; height: 220px; object-fit: cover; display: block; border-bottom: var(--border-w) solid var(--ink); }
#vf-panel .vf-content { padding: 24px 28px 40px; }
#vf-panel .vf-kicker { margin-bottom: 8px; }
#vf-panel h2 { margin: 0 0 6px; font-size: var(--fs-title); line-height: 1.25; letter-spacing: var(--ls-title); }
#vf-panel .vf-meta { font-size: var(--fs-kicker); opacity: 0.6; margin-bottom: 20px; }
#vf-panel .vf-text p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 14px; }
#vf-panel .vf-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
#vf-panel .vf-gallery img { width: 100%; height: 100px; object-fit: cover; border: var(--border-w) solid var(--ink); }
#vf-panel .vf-nav { display: flex; justify-content: space-between; gap: 10px; padding: 14px 28px; border-top: var(--border-w) solid var(--ink); }
#vf-panel .vf-nav button {
	font-family: inherit;
	font-size: var(--fs-kicker);
	padding: 8px 12px;
	border: var(--border-w) solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
}
#vf-panel .vf-nav button:hover { background: var(--ink); color: var(--paper); }

/* Index unten links */
#vf-index {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 1000;
	background: var(--paper);
	border: var(--border-w) solid var(--ink);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-kicker);
	max-width: 280px;
}
#vf-index summary { cursor: pointer; padding: 10px 14px; font-weight: var(--fw-bold); list-style: none; }
#vf-index summary::-webkit-details-marker { display: none; }
#vf-index summary::before { content: '▸ '; }
#vf-index[open] summary::before { content: '▾ '; }
#vf-index ol { margin: 0; padding: 0 14px 12px 34px; }
#vf-index li { padding: 3px 0; cursor: pointer; }
#vf-index li:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
	.vf-header { max-width: calc(100% - 32px); }
	.vf-actions { top: auto; bottom: 16px; right: 16px; }
	#vf-index { display: none; }
}