:root {
	--map: #4e9295;
	--map2: #D6EBEC;
	--mapacht: #ffffff;
	--popupshdw: rgba(0,0,0,0.2);
	--zoomtog: #0066c0;
	
	--mapeins: #0066c0;
	--mapzwei: #c0392b;
	--mapdrei: #27ae60;
	--mapvier: #004080;
	}

/* Kategorie-spezifische Farben */
.categoryclass_offiziell   .karten_popup_marker { background: var(--mapeins); }
.categoryclass_gastronomie .karten_popup_marker { background: var(--mapzwei); }
.categoryclass_handel      .karten_popup_marker { background: var(--mapdrei); }
/* …usw. */


/* pro Kategorie überschreiben */
.karte-marker.category-offiziell   { background: var(--mapvier); }
.karte-marker.category-gastronomie { background: var(--mapzwei); }
.karte-marker.category-handel      { background: var(--mapdrei); }
/* usw. */

/* Übersichtskacheln */
.karten-overview {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 1em;
  margin: 2em auto;
}
.karte-tile { width: 220px; 
	text-align: center;
		text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.2em;
	font-family: var(--roboto);
}
.karte-thumbnail {
  	display: block;
    width: 220px;
    height: 155px;
    transition: opacity .3s;
    object-fit: cover;
	border: solid var(--mapacht) 5px;
}
.karte-thumbnail:hover { opacity:.8; }
.tile-title { margin-top:.5em; font-weight:bold; }

/* Detail-Ansicht zentriert */
.karte-detail {
  margin: 2em auto; text-align: center;
}

/* Wrapper mit weißem Rahmen, zentriert, kein Scroll vor Zoom */
.karte-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 8px solid var(--mapacht);
  margin: 0 auto;
  overflow: hidden;
  line-height: 0;         /* kill Inline-Block whitespace */
}
.karte-wrapper.zoomed {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Innere Box: transform aus der Bildmitte, sanfte Transition */
.karte-inner {
  position: relative;
  display: inline-block;    /* nötig für transform */
  float:left !important;    /*sonst sitzt bild in der mitte des wrappers*/
  vertical-align: top;      /* kein Baseline-Drift */
  transform-origin: 0 0;
  transition: transform .2s ease;
}

/* Bild im Flow, füllt .karte-inner */
.karte-inner > img {
  display: block;
  width: 100%;
  height: auto;
  cursor: default;
}


/* Toggle-Button */
#zoom-toggle {
  position: absolute;
  top: 10px; right: 10px; z-index: 1000;
  padding: .3em .6em; font-size:.9em;
  cursor: pointer;
}
#zoom-toggle.active {
  background: var(--zoomtog); color: var(--mapacht);
}

/* Hotspots */
.karte-hotspot {
  position: absolute;
  z-index: 10;
  /*background: rgba(255,0,0,0.15);*/
  /*outline: 2px dashed red;*/
  cursor: pointer;
}

/* Popups */
.karte-popup {
  position: absolute; z-index:10010;
  background: var(--mapacht);
  padding: 3px; box-shadow:0 0 5px var(--popupshdw);
}
.karte-popup h4 { margin-bottom:.5em; font-size:1em; }

.karte-popup ul { 
	padding: 1.8em 3em !important;
    box-sizing: border-box;
    width: 100%;
    background: var(--drei);
    font-size: 0.8em;
    text-align: left;
    margin: 0.4em 0em !important;}

.karte-popup li { margin:.2em 0; }
.karte-popup li i { margin:0em .5em; !important}

.karte-popup a.popup-link { color:var(--zoomtog); text-decoration:underline; }

.karte-popup button {
    padding: 3px 8px;
    font-family: var(--calibri);
    font-size: 0.8em;
    text-transform: uppercase;
    border: 1px solid var(--picked);
    color: var(--picked2);
    background: var(--drei);
    outline: 0;
    cursor: pointer;
    /* opacity: .5;*/
}

.karten_popup_wrapper {
  padding:.5em;
  font-size:0.9em;
}

.karten_popup_category {
    margin: .5em 0;
    box-sizing: border-box;
    color: var(--mapacht);
    background: var(--picked2);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: var(--roboto);
    font-size: 0.8em;
    font-weight: 900;
    padding: .2em;
}

.karten_popup_headline {
	display:flex;
	flex-direction:row;
	justify-content: center;
	font-size:1.1em;
	line-height:2em;
	font-family: var(--roboto);
}

.karten_popup_marker {
	display:flex;
	flex-direction: column; 
	justify-content: center;
	width:3em;
  	text-align:center;
  	margin-right:.5em;
	font-family: var(--playfair);
  	background:var(--mapacht); color:var(--picked);
	padding: .1em .5em;	
	border: solid .1em var(--picked);
	box-sizing: border-box;
}

.karten_popup_location {
	display: flex;
    flex: 1;
    flex-direction: column;
	justify-content: center;
    font-weight: bold;
    background: var(--picked);
    color: var(--mapacht);
    text-align: left;
    padding: .1em .5em;	
	box-sizing: border-box;
	font-size: .8em;
	text-transform: uppercase;
	line-height:1;
}


.karte-marker {
  position: absolute;
	display: flex;
   justify-content: center;
   align-items: center;
  top: 0; left: 0;
  width: 1.8em; height: 1.8em;
  line-height: 0em;
  text-align: center;
  border-radius: 50%;
  background: var(--map); /* Default */
  opacity:0.8;
  color: var(--mapacht);
  font-size: .8em;
  font-weight: bold;
}


.karte-legende {
  	margin-top: 1em;
  	padding: .5em;
  	/*border-top: 1px solid #ccc;*/
	column-count:4;
	column-gap:2.4em;
  	flex-wrap: wrap;
	background: var(--map);
	color: var(--mapacht);
}
.karte-legende .legende-item {
  	margin-right: 1.5em;
  	display: flex;
  	align-items: center;
	font-family: var(--calibri); 
	text-transform: uppercase; 
	letter-spacing:1px;
	text-align:left;
	font-size: 8px;
}
.karte-legende .legende-icon {
  margin-right: .3em;
}

.legende-icon {
  margin-right: .3em;
  width: 1em; height: 1em;
  text-align: center;
  color: var(--map2);
}

.legende-marker {
	font-weight: 900;
	display:inline-block;
	font-family: var(--playfair);
	font-size: 1em; 
	width: 2.4em;
}