/* Allgemeines Styling */
body {
	margin: 0;
	padding: 0;
}
#karte {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}
#locations-list{
	padding: 1rem;
	font-family: Traffic01;
	z-index: 2;
	position: relative;
	display: inline-block;
	background-color: rgba(255,255,255,1);
	max-height: 75vh;
	overflow-y: auto;
	clip-path: polygon(1.0% 1.8%, 4.3% 1.6%, 8.7% 1.9%, 13.0% 2.2%, 17.4% 2.1%, 21.7% 1.7%, 26.1% 1.6%, 30.4% 1.4%, 34.8% 1.4%, 39.1% 1.5%, 43.5% 1.6%, 47.8% 1.7%, 
	52.2% 1.9%, 56.5% 1.8%, 60.9% 2.3%, 65.2% 2.2%, 69.6% 2.3%, 73.9% 1.9%, 78.3% 1.9%, 82.6% 2.4%, 87.0% 2.3%, 91.3% 1.9%, 95.7% 1.8%, 99.3% 2.1%, 100.4% 2.9%, 
	99.6% 6.2%, 99.2% 10.3%, 99.7% 14.5%, 100.5% 18.7%, 100.7% 22.9%, 99.8% 27.0%, 99.8% 31.2%, 99.9% 35.4%, 99.6% 39.6%, 99.5% 43.7%, 99.9% 47.9%, 100.3% 52.1%, 
	100.3% 56.3%, 99.9% 60.4%, 99.8% 64.6%, 100.8% 68.8%, 101.0% 73.0%, 100.2% 77.1%, 99.6% 81.3%, 99.6% 85.5%, 99.5% 89.7%, 100.2% 93.8%, 100.6% 97.1%, 99.3% 97.8%, 
	95.7% 98.2%, 91.3% 97.9%, 87.0% 97.7%, 82.6% 97.7%, 78.3% 97.6%, 73.9% 97.9%, 69.6% 98.1%, 65.2% 98.3%, 60.9% 98.0%, 56.5% 97.8%, 52.2% 98.2%, 47.8% 98.0%, 43.5% 98.2%, 
	39.1% 98.5%, 34.8% 98.2%, 30.4% 97.9%, 26.1% 98.1%, 21.7% 98.1%, 17.4% 98.3%, 13.0% 98.0%, 8.7% 97.8%, 4.3% 98.4%, 1.1% 98.4%, 0.6% 97.2%, 0.2% 93.8%, 0.5% 89.7%, 
	0.1% 85.5%, -0.1% 81.3%, 0.2% 77.1%, 0.3% 73.0%, 0.9% 68.8%, 0.9% 64.6%, 0.4% 60.4%, 0.3% 56.3%, 0.6% 52.1%, 0.2% 47.9%, 0.5% 43.7%, 0.8% 39.6%, 0.6% 35.4%, -0.0% 31.2%, 
	-0.5% 27.0%, -1.0% 22.9%, -0.6% 18.7%, 0.5% 14.5%, 0.2% 10.3%, -0.1% 6.2%, 0.4% 2.8%);
	top: -18px;
}

iframe{
	max-width: 100%;
}

/*Kompass*/
span.mapboxgl-ctrl-icon {
	background-image:url("../img/kompass.png") !important;
	background-size:60%;
}

button.mapboxgl-ctrl-compass {
	width:350px;
	height:350px;
	background-color:transparent;
}

div.mapboxgl-ctrl-bottom-right div.mapboxgl-ctrl {
	background-color:transparent;
	box-shadow:none;
}

/*Font für Liste*/
@font-face {
	font-family: 'Traffic01';
	src: url('/webfonts/Traffic01.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('/webfonts/barlow-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*Styling für Location List und Kartensteuerung*/
h3 {
	font-size: 26px;
	letter-spacing: 1.5px;
	font-weight: 400;
}

ul li {
	letter-spacing: 1px;
	font-size: 20px;
	font-family: 'Barlow';
	/*margin-top: -12px;*/
}

ul li p {
	margin: 0;
}

/*Kompass tiefer setzen*/
#karte > div.mapboxgl-control-container > div.mapboxgl-ctrl-bottom-right > div.mapboxgl-ctrl.mapboxgl-ctrl-group {
	margin-bottom: -30px;
}

.mapboxgl-ctrl-bottom-right {
	bottom: 50px;
}

/*.mapboxgl-marker.mapboxgl-marker-anchor-center svg,  .mapboxgl-marker.mapboxgl-marker-anchor-center path, .mapboxgl-marker.mapboxgl-marker-anchor-center i{
	height:60px;
	width: 40px;
}*/

.mapboxgl-marker svg {
  width: 54px;
  height: 82px;
}

.mapboxgl-marker i,
.mapboxgl-marker i:before{
	font-size: 30px !important;
	padding-top: 4px !important;
}


/*.mapboxgl-popup-content {
	margin-bottom: 20px;
}*/


.mapboxgl-popup-content{
	max-width: 100%;
}


/*Highlighting HQ*/
#karte > div.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-touch-drag-pan.mapboxgl-touch-zoom-rotate > img:nth-child(2) {
	animation: blink 2.3s infinite;
	min-width: 120px;
	min-height: 60px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}





/*Slide-in Legende*/
/* Container fixiert rechts */
#slide-container {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
}

#slide-container.open {
	z-index: 3;
}

/* Inhalt */
#slide-content {
  width: 350px;
  height: 100%;
  background: #f9f9f9;
  box-shadow: -2px 0 5px rgba(0,0,0,0.3);
  transform: translateX(100%); /* Start: ausgeblendet */
  transition: transform 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  z-index:9;
  padding-top:40px;
}

/* Button oben rechts */
#slide-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  color: black;
  border: 1px solid black;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}

#slide-btn:hover {
  background: black;
  color: white;
}

/* Aktiv: Panel sichtbar */
#slide-container.open #slide-content {
  transform: translateX(0);
}

#slide-content h2 {
	font-family: 'Traffic01';
	letter-spacing: 1px;
	font-size: 36px;
	font-weight: 400;
}

#slide-content ul {
	font-family: 'Barlow';
	font-size: 24px;
	padding-left: 20px;
}

#arrow {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

/* Wenn Panel offen: nach rechts gedreht */
#slide-container.open #arrow {
  transform: rotate(-90deg);
}







/*2d/3d toggle*/
/* Container */
#view-toggle {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  font-family: 'Barlow';
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Hintergrund des Switches */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black; /* immer schwarz */
  transition: 0.4s;
  border-radius: 34px;
}

/* Der "Ball" */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white; /* immer weiß */
  transition: 0.4s;
  border-radius: 50%;
}

/* Wenn gecheckt → Ball nach rechts */
input:checked + .slider:before {
  transform: translateX(46px);
}

/* Labels 2D/3D */
.labels {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: white; /* immer weiß */
  pointer-events: none;
}

input:checked ~ .labels::before {
  content: attr(data-on); /* 3D */
}

input:not(:checked) ~ .labels::before {
  content: attr(data-off); /* 2D */
}




/*Footer Styling*/
#site-footer {
	position: fixed;
	bottom: 0;
	z-index: 10;
	background-color: white;
	width: 100%;
	height: 2%;
    padding: 10px 0;
}

#footer-links a {
	margin-left: 20px;
	font-family: 'Barlow';
	font-size: 20px;
	color:black;
	text-decoration:none;
	font-weight: 400;
}

#footer-links a:hover {
	font-weight: 600;
}


.footer-logo {
	height: 40px;
	width: auto;
	margin-top:-7px;
}

#footer-wrapper {
	display: flex;
    flex-direction: row;
    position: relative;
	justify-content:space-between;
}

#footer-wrapper .col{
	width: 33.33%;
}

#footer-links {
	padding-right:30px;
}

#footer-wrapper .two {
	text-align:center;
	align-items: center;
    display: flex;
	justify-content:center;
}

#footer-wrapper .three {
	text-align: right;
}


/*Mapbox Logo verschoben wegen Sichtbarkeit (rechtlich)*/
.mapboxgl-ctrl-logo {
  bottom: 40px !important; /* Standard ist bottom: 0 */
  position: absolute;
}





/* Standard: Desktop, Location Toggle wird nicht angezeigt */
#locations-toggle {
    display: none;
	color: black;
	background-color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    z-index: 11;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
	border-bottom: 2px solid black;
}

#locations-toggle .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}



/* Mobile Ansicht */
@media (max-width: 768px) {
	/* Location Toggle wird angezeigt */
	#locations-toggle {
        display: inline-block;
        width: 100%;
        padding: 10px;
        cursor: pointer;
		z-index: 11;
		position: fixed;
		/*top: 10px;
        right: 10px;*/
		pointer-events: auto;
		border: 0px !important;
    }
	
	#locations-toggle.open {
		border-bottom: 2px solid black !important;
	}
	
	/* Location List außerhalb des Bildschirms verschoben (eingeklappt) */
    #locations-list {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 100%;
        background: white;
        overflow-y: auto;
        transform: translateY(-100%); /* unsichtbar */
        opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
        display: block;
        z-index: 10;
		clip-path: unset;
    }

    #locations-list.active {
        transform: translateY(0); /* hereinschweben */
        opacity: 1;
    }
	
	
	/* Kompass styling */
	#karte > div.mapboxgl-control-container > div.mapboxgl-ctrl-bottom-right > div.mapboxgl-ctrl.mapboxgl-ctrl-group {
		position: fixed;       /* fixiert relativ zum Viewport */
		right: 2px;           /* Abstand von der rechten Seite */
		bottom: 45px;          /* Abstand von der unteren Seite */
		z-index: 9;
	}
	
	.mapboxgl-ctrl-compass {
		max-width: 180px;
		max-height:180px;
	}
	
	#karte > div.mapboxgl-control-container > div.mapboxgl-ctrl-bottom-right > div.mapboxgl-ctrl.mapboxgl-ctrl-attrib.mapboxgl-compact {
		bottom: -10px;
		z-index: 99999;
	}
	
	
	/* Margin bei Überschrift von Location List */
	#locations-list > h3:nth-child(1) {
	margin-top: 45px;
	}
	
	/* 2D/3D Toggle Ausrichtung */
	body #view-toggle {
		top:52px;
		left:12%;
		z-index:1;
	}
	
	/* Kartensteuerung ausgeblendet */
	#slide-container {
		display:none;
	}
	
	/* Footer */
	#site-footer {
		z-index:2 !important;
		padding:13px 0 !important;
	}

	#footer-wrapper .one {
		display:none;
	}
	
	#footer-wrapper .two {
		width: 20% !important;
	}
	
	#footer-wrapper .three {
		width: 80% !important;
		
	}
	
	#footer-wrapper .three #footer-links a {
		font-size:15px;
	}
	
	#footer-wrapper .two .footer-logo {
		margin-left: 22px;
		height: 34px;
		width: auto;
		margin-top:-7px;
	}
	
	#footer-links {
		padding-right:25px;
	}
}