/* Fotokarte 2 – Gestaltung nach Style Guide zeilinger.sein.at (Abschnitt 2)
 * Farben als Variablen, damit Divi/Theme sie bei Bedarf überschreiben kann. */

.fotokarte-wrap,
.fk-filter,
.fk-laenderblock,
.fotokarte-lightbox {
	--fk-blue: #05628B;
	--fk-deep: #073B52;
	--fk-gold: #D5B113;
	--fk-sea: #E9F1F5;
	--fk-land: #DAE2E7;
	--fk-txt: #13202A;
	--fk-mut: #5C6E79;
	--fk-line: #DCE5EA;
	--fk-ink: #091217;
	--fk-visited: #A8C3D3;
}

.fotokarte-wrap {
	position: relative;
	font-family: inherit;
	color: var(--fk-txt);
}

/* ---- Kartenfläche ---- */
.fotokarte-wrap .fotokarte-map {
	position: relative;
	width: 100%;
	height: var(--fk-h, 520px);
	background: var(--fk-sea);
	font-family: inherit;
	font-size: 14px;
	z-index: 0; /* eigener Stapelkontext: bleibt unter Divis fixierter Kopfzeile */
	outline: none;
}
.fotokarte-wrap.fk-stil-dunkel .fotokarte-map {
	background: var(--fk-deep);
}
@media (max-width: 767px) {
	.fotokarte-wrap .fotokarte-map {
		height: var(--fk-hm, var(--fk-h, 420px));
	}
}

/* Mini-Karte (Galerie-Seite, 5.1): 11:8, Radius 12 px, ohne Bedienung */
.fotokarte-wrap.fk-mini .fotokarte-map {
	height: auto;
	aspect-ratio: 11 / 8;
	border-radius: 12px;
	overflow: hidden;
	cursor: default;
}
.fk-ort {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 600;
	background: #fff;
	color: var(--fk-txt);
	border: 1px solid var(--fk-line);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	pointer-events: none;
	max-width: calc(100% - 20px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Detailkacheln eingefärbt (nur wenn details="…" gesetzt) */
.fk-stil-hell .fk-kachel { filter: grayscale(1); }
.fk-stil-dunkel .fk-kachel { filter: invert(1) hue-rotate(180deg) brightness(.75) grayscale(.3); }

/* Zoom-Knöpfe: weiß, Radius 8 px, Rahmen --line */
.fotokarte-wrap .leaflet-bar {
	border: 1px solid var(--fk-line);
	border-radius: 8px;
	box-shadow: none;
	overflow: hidden;
}
.fotokarte-wrap .leaflet-bar a {
	color: var(--fk-txt);
	border-bottom-color: var(--fk-line);
	font-weight: 700;
}
.fotokarte-wrap .leaflet-bar a:hover { color: var(--fk-blue); }
.fotokarte-wrap .leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255, 255, 255, .7);
}

/* Irrsee-Markierung: Label rechts neben dem goldenen Ring */
.fk-heim-label { pointer-events: none; }
.fk-heim-label span {
	display: block;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--fk-txt);
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.fk-stil-dunkel .fk-heim-label span {
	color: #fff;
	text-shadow: 0 0 3px #073B52, 0 0 3px #073B52, 0 0 6px #073B52;
}

/* Hinweis bei Mausrad/Ein-Finger-Wischen */
.fk-hinweis {
	position: absolute;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	background: rgba(9, 18, 23, .45);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}
.fk-hinweis.ist-an { opacity: 1; }

/* Tooltip beim Darüberfahren */
.leaflet-tooltip.fk-tooltip {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fk-txt, #13202A);
	border: 1px solid var(--fk-line, #DCE5EA);
	border-radius: 6px;
	box-shadow: none;
	padding: 4px 8px;
}

/* ---- Filter-Pillen / Legende ---- */
.fk-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.fk-filter .fk-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid var(--fk-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fk-txt);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: opacity .15s;
}
.fk-filter .fk-pill i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}
.fk-filter .fk-pill[aria-pressed="false"] { opacity: .45; }
.fk-filter .fk-pill[aria-pressed="false"] i { filter: grayscale(1); }
.fk-filter .fk-pill:focus-visible {
	outline: 2px solid var(--fk-gold);
	outline-offset: 2px;
}
.fk-filter-dunkel.fk-art-pillen .fk-pill {
	background: transparent;
	border-color: #2F6F8C;
	color: #fff;
}

/* Legende (art="legende"): ohne Rahmen, Punkte 11 px – klickbar wie die Pillen */
.fk-filter.fk-art-legende { gap: 12px 18px; }
.fk-filter.fk-art-legende .fk-pill {
	border: 0;
	background: none;
	padding: 2px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fk-mut);
}
.fk-filter.fk-art-legende .fk-pill i { width: 11px; height: 11px; }
.fk-filter-dunkel.fk-art-legende .fk-pill { color: #C7D9E2; }
.fotokarte-wrap > .fk-filter { margin-top: 12px; }
/* Fünfter Legenden-Eintrag (Guide 4.1): keine Schaltfunktion, quadratisches Farbfeld */
.fk-filter .fk-pill.fk-pill-land { cursor: default; }
.fk-filter .fk-pill.fk-pill-land i {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--fk-visited);
}
.fk-filter.fk-in-karte {
	margin: 10px;
	background: rgba(255, 255, 255, .93);
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 10px 30px rgba(7, 59, 82, .14);
}

/* ---- Popup (Style Guide 7.5) ---- */
.fotokarte-wrap .fk-popup .leaflet-popup-content-wrapper {
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--fk-line);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(7, 59, 82, .18);
}
.fotokarte-wrap .fk-popup .leaflet-popup-content {
	margin: 0;
	font-family: inherit;
	line-height: 1.35;
}
.fotokarte-wrap .fk-popup .leaflet-popup-close-button {
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--fk-txt);
	font: 700 18px/26px system-ui, sans-serif;
	text-align: center;
	z-index: 2;
}
.fk-karte {
	display: block;
	color: inherit;
	text-decoration: none !important;
}
.fk-karte .fk-bild {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--fk-sea);
	overflow: hidden;
}
.fk-karte .fk-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
	transition: transform .4s;
}
.fk-karte:hover .fk-bild img { transform: scale(1.03); }
.fk-karte .fk-text {
	display: block;
	padding: 10px 14px 12px;
}
.fk-karte strong,
.fk-zeile strong,
.leaflet-popup .fk-karte strong,
.leaflet-popup .fk-zeile strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fk-txt);
}
.fk-karte small,
.fk-zeile small,
.leaflet-popup .fk-karte small,
.leaflet-popup .fk-zeile small {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--fk-mut);
}
.fk-karte:hover strong,
.fk-zeile:hover strong { color: var(--fk-blue); }

.fk-liste {
	padding: 12px 14px 8px;
	max-height: 340px;
	overflow: auto;
}
.leaflet-popup .fk-kopf,
.fotokarte-lightbox .fk-kopf {
	margin: 0 32px 8px 0;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fk-blue);
}
.fk-zeile {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 10px;
	align-items: center;
	padding: 7px 0;
	border-top: 1px solid var(--fk-line);
	color: inherit;
	text-decoration: none !important;
}
.fk-zeile:first-of-type { border-top: 0; }
.fk-zeile img,
.fk-zeile .fk-leer {
	width: 72px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	max-width: none;
	background: var(--fk-sea);
}
.fk-zeile strong { font-size: 14px; }
.fk-zeile small { font-size: 12.5px; margin-top: 2px; }

/* ---- Lightbox (Option popup="lightbox") ---- */
.fotokarte-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000000; /* über Divis fixierter Kopfzeile (99999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: inherit;
}
.fotokarte-lightbox[hidden] { display: none; }
.fk-lb-grund {
	position: absolute;
	inset: 0;
	background: var(--fk-ink);
	opacity: .92;
}
.fk-lb-box {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 92vw;
	max-height: 90vh;
	overflow: auto;
	padding: 18px;
}
.fk-lb-zu {
	position: absolute;
	top: 6px;
	right: 10px;
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	color: var(--fk-txt);
}
.fk-lb-raster {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}
.fk-lb-raster .fk-karte {
	width: 340px;
	max-width: 78vw;
	border: 1px solid var(--fk-line);
	border-radius: 12px;
	overflow: hidden;
}
.fk-lb-raster.ist-mehr .fk-karte { width: 250px; }

/* ---- Länderblock auf der Reisen-Seite (Guide 5.6) ---- */
.fk-laenderblock {
	color: var(--fk-txt);
	font-family: inherit;
	scroll-margin-top: 80px;
}
.fk-laenderblock .fk-lb-kachel {
	position: relative;
	background: var(--fk-sea);
	border-radius: 16px;
	overflow: hidden;
}
.fk-laenderblock .fk-lb-kachel .fotokarte-map { background: var(--fk-sea); }
.fk-laenderblock .fk-lb-kasten {
	position: absolute;
	left: 18px;
	top: 18px;
	z-index: 500;
	max-width: 370px;
	padding: 18px 20px;
	background: rgba(255, 255, 255, .93);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(7, 59, 82, .14);
}
.fk-laenderblock .fk-kicker {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fk-blue);
}
.fk-laenderblock .fk-lb-kasten h2 {
	margin: 4px 0 8px;
	padding: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--fk-txt);
}
.fk-laenderblock .fk-lb-kasten p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fk-mut);
}
.fk-laenderblock .fk-lb-liste { padding: 14px 0 4px; }
.fk-laenderblock .fk-lb-liste h3.fk-kicker { margin: 12px 0 6px; }
.fk-laenderblock ul.fk-lb-reihe {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.fk-laenderblock ul.fk-lb-reihe li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.fk-laenderblock ul.fk-lb-reihe li::before { content: none !important; }
.fk-laenderblock .fk-land {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--fk-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--fk-txt);
	text-decoration: none;
}
.fk-laenderblock a.fk-land { color: var(--fk-blue); }
.fk-laenderblock a.fk-land:hover { border-color: var(--fk-blue); }
.fk-laenderblock a.fk-land:focus-visible { outline: 2px solid var(--fk-gold); outline-offset: 2px; }
.fk-laenderblock a.fk-land.ist-aktiv { background: var(--fk-blue); border-color: var(--fk-blue); color: #fff; }

/* Galerien eines Landes (?land=xx) – Kacheln wie in der Album-Übersicht */
.fk-laenderblock .fk-lb-treffer { padding-top: 22px; }
.fk-laenderblock .fk-lb-treffer-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: 14px;
}
.fk-laenderblock .fk-lb-treffer-kopf h2 { margin: 0; padding: 0; font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--fk-txt); }
.fk-laenderblock .fk-lb-treffer-kopf span { color: var(--fk-mut); font-size: 14px; }
.fk-laenderblock .fk-lb-treffer-kopf a { margin-left: auto; color: var(--fk-blue); font-weight: 700; font-size: 14px; text-decoration: none; }
.fk-laenderblock .fk-lb-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.fk-laenderblock .fk-lb-album { display: block; color: var(--fk-txt); text-decoration: none; }
.fk-laenderblock .fk-lb-cover {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	overflow: hidden;
	background: var(--fk-sea);
	margin-bottom: 8px;
}
.fk-laenderblock .fk-lb-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.fk-laenderblock .fk-lb-album:hover .fk-lb-cover img { transform: scale(1.03); }
.fk-laenderblock .fk-lb-album strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}
.fk-laenderblock .fk-lb-album small { display: block; margin-top: 2px; font-size: 14px; color: var(--fk-mut); }

@media (max-width: 767px) {
	/* Handy: Kasten oben über die ganze Breite, Karte darunter */
	.fk-laenderblock .fk-lb-kachel { display: flex; flex-direction: column; }
	.fk-laenderblock .fk-lb-kasten {
		order: -1;
		position: static;
		max-width: none;
		margin: 12px 12px 4px;
		padding: 14px 16px;
	}
	.fk-laenderblock .fk-lb-kasten h2 { font-size: 20px; }
	.fk-laenderblock .fk-lb-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ==== Galerie-Seite (Guide 5.1) und „Zuletzt dazugekommen“ (4.3) ==== */
.fotokarte-kopf,
.fotokarte-werkzeuge,
.fotokarte-nachbarn,
.fotokarte-neueste {
	--fk-blue: #05628B;
	--fk-txt: #13202A;
	--fk-mut: #5C6E79;
	--fk-line: #DCE5EA;
	--fk-sea: #E9F1F5;
	--fk-gold: #D5B113;
	color: var(--fk-txt);
	font-family: inherit;
}
.fk-marke {
	display: inline-block;
	margin: 0;
	padding: 2px 7px;
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: middle;
}

.fk-marke.fk-marke-umrandet {
	padding: 1px 6px; /* 1 px Rahmen: Außenmaß gleich wie die gefüllten Marken */
	border: 1px solid var(--fk-line, #DCE5EA);
	background: #fff;
	color: var(--fk-txt, #13202A);
}

/* Kopf: Pfad, Marke, H1, Meta-Zeile */
.fotokarte-kopf .fk-pfad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--fk-mut);
}
.fotokarte-kopf .fk-pfad a { color: var(--fk-blue); font-weight: 600; text-decoration: none; }
.fotokarte-kopf .fk-pfad a:hover { text-decoration: underline; }
.fotokarte-kopf .fk-titel {
	margin: 8px 0 6px;
	padding: 0;
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--fk-txt);
	text-wrap: balance;
}
.fotokarte-kopf .fk-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 8px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--fk-mut);
}
.fotokarte-kopf .fk-meta b { color: var(--fk-txt); font-weight: 700; }

/* Werkzeugleiste: Pillen, rechts „24 von 33 Fotos“ */
.fotokarte-werkzeuge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 24px 0 12px;
}
.fotokarte-werkzeuge .fk-wz-pille {
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var(--fk-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fk-blue);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
.fotokarte-werkzeuge .fk-wz-pille:hover { border-color: var(--fk-blue); }
.fotokarte-werkzeuge .fk-wz-pille:focus-visible { outline: 2px solid var(--fk-gold); outline-offset: 2px; }
.fotokarte-werkzeuge .fk-wz-zahl { margin-left: auto; font-size: 13px; color: var(--fk-mut); font-variant-numeric: tabular-nums; }

/* Vorherige / Nächste Galerie */
.fotokarte-nachbarn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 28px 0 30px;
	border-top: 1px solid var(--fk-line);
}
.fotokarte-nachbarn .fk-nb {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--fk-line);
	border-radius: 12px;
	color: var(--fk-txt);
	text-decoration: none;
}
.fotokarte-nachbarn .fk-nb-nach { grid-template-columns: 1fr 72px; text-align: right; grid-column: 2; }
.fotokarte-nachbarn .fk-nb:hover { border-color: var(--fk-blue); }
.fotokarte-nachbarn img,
.fotokarte-nachbarn .fk-nb-leer {
	display: block;
	width: 72px;
	height: 72px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	background: var(--fk-sea);
}
.fotokarte-nachbarn small {
	display: block;
	margin-bottom: 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fk-mut);
}
.fotokarte-nachbarn b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; }

/* „Zuletzt dazugekommen“: vier Karten, Foto 4:3 */
.fotokarte-neueste .fk-ne-kopf { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.fotokarte-neueste .fk-ne-kopf h2 { margin: 0; padding: 0; font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--fk-txt); }
.fotokarte-neueste .fk-ne-kopf a { margin-left: auto; color: var(--fk-blue); font-weight: 700; font-size: 14px; text-decoration: none; }
.fotokarte-neueste .fk-ne-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fotokarte-neueste .fk-ne-karte {
	display: block;
	overflow: hidden;
	border: 1px solid var(--fk-line);
	border-radius: 12px;
	color: var(--fk-txt);
	text-decoration: none;
	background: #fff;
}
.fotokarte-neueste .fk-ne-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fk-sea); }
.fotokarte-neueste .fk-ne-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fotokarte-neueste .fk-ne-karte:hover .fk-ne-bild img { transform: scale(1.03); }
.fotokarte-neueste .fk-ne-text { display: block; padding: 12px 14px 14px; }
.fotokarte-neueste .fk-marke { margin-bottom: 6px; }
.fotokarte-neueste b {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}
.fotokarte-neueste small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--fk-mut); }

@media (max-width: 767px) {
	.fotokarte-kopf .fk-pfad { margin-bottom: 8px; }
	.fotokarte-werkzeuge { margin-top: 20px; }
	.fotokarte-nachbarn { grid-template-columns: 1fr; padding: 20px 0; }
	.fotokarte-nachbarn .fk-nb-nach { grid-column: auto; }
	.fotokarte-nachbarn .fk-nb-platz { display: none; }
	.fotokarte-neueste .fk-ne-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.fotokarte-neueste .fk-ne-text { padding: 10px 12px 12px; }
}

/* Envira-Lightbox (Guide 5.2): Zähler „7 / 33“, Bildunterschrift mit Datum */
.envirabox-container.fk-lightbox .envirabox-image-counter::before,
.envirabox-container.fk-lightbox .envirabox-image-counter::after { content: none !important; }
.envirabox-container.fk-lightbox .envirabox-image-counter { margin-left: 14px; color: #8EA1AC; font-variant-numeric: tabular-nums; }
.envirabox-container.fk-lightbox .envirabox-caption:empty + .envirabox-image-counter { margin-left: 10px; }
.envirabox-container.fk-lightbox .envirabox-exif { display: none !important; }