@charset "UTF-8";
/* CSS Document */

@font-face { font-family: "PTSans-Bold"; src: url("../fonts/PTSans-Bold.ttf"); }
@font-face { font-family: "PTSans-BoldItalic"; src: url("../fonts/PTSans-BoldItalic.ttf"); }
@font-face { font-family: "PTSans-Italic"; src: url("../fonts/PTSans-Italic.ttf"); }
@font-face { font-family: "PTSans-Regular"; src: url("../fonts/PTSans-Regular.ttf"); }

* {
	margin:0;
	padding:0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}
*:focus {
  outline: none;
}
html,
body {
	height: 100%;
}
body {
	background-color: #fff;
	color: #0a0a0a;
	font-family: "PTSans-Regular";
	font-weight: 300;
}
h1, h2, h3, h4, h5,
strong, .close {
	font-family: "PTSans-Bold";
}
a {
	color:#808080;
}

#wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
#header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 122px;
	background-color: #fff;
	border-bottom: solid 1px #666;
	box-sizing: border-box;
	z-index: 4;
}
.header-wrapper-right {
	position: absolute;
	top: 24px;
	right: 24px;
	background-color: #fff;
}
.header-wrapper-right .logo-hs {
	width: 174px;
	height: 74px;
  	background: url(../img/hs-logo-w180px.jpg);
  	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

#kartentitel,
#headertitel {
	position: absolute;
	top: 50%;
	left: 24px;
	font-family: "PTSans-Bold";
	transform: translateY(-50%);
	z-index: 6;
}
#kartentitel span,
#headertitel span {
  display: block;
	font-size: 20px;
}
#kartentitel span:first-child,
#headertitel span:first-child  {
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
	margin-bottom: 4px;
}

/* Navi */
#streifen {
	position: absolute;
	top: 41px;
	right: 258px;
	height: 48px;
	padding-top: 4px;
	box-sizing: border-box;
}
#home {
	float: left;
	width: 40px;
	height: 40px;
	background-image: url(../img/home.svg);
	background-size: 40px;
	z-index: 10;
}
#button_navi {
	display: none;
	float: left;
	width: 40px;
	height: 40px;
	margin-left: 24px;
	background-image: url(../img/menue.svg);
	background-size: 40px;
	z-index: 10;
}
#navi {
	display: block;
	float: left;
	z-index: 10;
}
#navi li {
	padding: 0 12px;
	font-size: 20px;
	font-family: "PTSans-Bold";
	background-color: #e6e6e6;
	margin-left: 12px;
}
#institutionen {
	float: left;
	height: 40px;
	padding: 0 12px;
	margin-left: 24px;
	color: #0a0a0a;
	font-family: "PTSans-Bold";
	font-size: 20px;
	text-align: center;
	text-transform: uppercase;
	line-height: 40px;
	box-sizing: border-box;
	background-color: #e6e6e6;
  z-index: 10;
}
#language {
	display: inline-block;
	float: left;
	margin-left: 24px;
	z-index: 8;
}
#language li {
	width: 40px;
	font-size: 20px;
	font-family: "PTSans-Bold";
}
#navi li,
#language li {
	float: left;
	list-style-type: none;
	height: 40px;
	color: #0a0a0a;
	text-align: center;
	text-transform: uppercase;
	line-height: 40px;
	box-sizing: border-box;
}

/* Active */
#home.active,
.no-touch #home:hover {
	filter: opacity(0.6);
}
#button_navi.active,
.no-touch #button_navi:hover {
	filter: opacity(0.6);
}
#language li.current,
#navi li.current,
#navi li.active,
#language li.active,
#institutionen.active,
.no-touch #navi li:hover,
.no-touch #language li:hover,
.no-touch #institutionen:hover  {
	background-color: #5e5e5e;
	color: #fff;
}

#content {
	position: absolute;
	top: 122px;
	left: 0px;
	height: calc(100% - 122px - 64px);
	width: 100%;
	overflow: auto;
}
/* Zoom interaktive Karte */
.zoom-interactiv-map {
	display: none;
	position: fixed;
	top: 146px;
	left: 24px;
	width: 40px;
	height: 80px;
	border: 2px solid rgba(0,0,0,0.2);
	background-color: #fff;
	z-index: 3;
}
.zoom-in,
.zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	line-height: 40px;
	text-align: center;
	background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.zoom-in.disable, .zoom-out.disable {
	color: #e7e7e7;
}

/* Legende */
#button_legende {
	display: none;
	position: fixed;
	bottom: 88px;
	left: 24px;
	width: 40px;
	height: 40px;
	border: 2px solid rgba(0,0,0,0.2);
	background-color: #fff;
	background-image: url(../img/legende.svg);
	background-size: 40px;
	background-clip: padding-box;
	box-shadow: none;
	z-index: 9;
}
#legende {
	display: block;
	position: fixed;
	bottom: 88px;
	left: 24px;
	width: 340px;
	height: auto;
	border: 1px solid #666;
	background-color: #fff;
	box-sizing: border-box;
	color: #0a0a0a;
	padding: 12px;
	z-index: 9;
}
#legende h3 {
	margin-bottom: 8px;
	font-size: 16px;
}
#legende table td {
	vertical-align: top;
	padding-bottom: 4px;
	font-size: 14px;
}
#legende table tr:last-child td {
	padding-bottom: 0px;
}
#legende table tr td:first-child {
	width: 24px;
}
#legende table tr td:first-child img {
	width: 24px;
	padding-top: 2px;
}
#legende table tr td:last-child {
	width: 100%;
	padding-left: 8px;
}
#legende .close {
	display: none;
	position: absolute;
  top: 4px;
  right: 4px;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 32px;
}
/* Info */
#text_google_karte {
	position: fixed;
	top: 146px;
	right: 24px;
	width: calc(100% - 48px);
	max-width: 768px;
	background: rgba(255,255,255,0.9);
	padding: 24px;
	box-sizing: border-box;
	opacity: 1;
  z-index: 3;
  transition: opacity 0.5s;
}
#text_google_karte .close {
	position: absolute;
  top: 12px;
  right: 12px;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 40px;
	z-index: 9999;
}
#button_text_google_karte {
	display: none;
	position: fixed;
	top: 146px;
	right: 24px;
	width: 40px;
	height: 40px;
	border: 2px solid rgba(0,0,0,0.2);
	background-color: #fff;
	background-image: url(../img/info.svg);
	background-size: 36px;
	background-position: center;
	background-repeat: no-repeat;
	background-clip: padding-box;
	box-shadow: none;
	z-index: 7;
}
#button_text_google_karte.active,
.no-touch #button_text_google_karte:hover,
#button_legende.active,
.no-touch #button_legende:hover,
.zoom-in.active,
.no-touch .zoom-in:hover,
.zoom-out.active,
.no-touch .zoom-out:hover {
	background-color: #f5f5f5;
}

/* Overlay */
#overlay,
#point_of_interest {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 11;
}
#overlay .box,
#point_of_interest .box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96%;
	height: 96%;
	width: calc(100% - 48px);
	height: calc(100% - 48px);
	max-width: 1024px;
	max-height: 768px;
	background-color: #fff;
	color: #0a0a0a;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
  transform: translate(-50%,-50%);
	overflow: hidden;
}
#overlay .box .close,
#point_of_interest .box .close {
	position: absolute;
  top: 12px;
  right: 20px;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 40px;
	background-color: #fff;
	z-index: 9999;
}
#overlay .box .content {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200%;
	height: 100%;
  transform: translateX(0%);
	transition: transform 0.5s;
}
#overlay .box .content.schieben {
	transform: translateX(-50%);
	transition: transform 0.5s;
}
#overlay .box .content .left {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 50%;
	height: 100%;
	padding: 32px 0px 32px 32px;
	box-sizing: border-box;
}
#overlay .box .content .right {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 50%;
	height: 100%;
	padding: 32px 72px 32px 88px;
	box-sizing: border-box;
}
#overlay .box .content .right .back {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 48px;
	height: 48px;
	background-image:url(../img/back.svg);
	background-size: 48px;
	text-align: center;
	transform: translateY(-50%);
}
#overlay .box .content .right .back.active,
.no-touch #overlay .box .content .right .back:hover {
	filter: opacity(0.6);
}
/* Titel bleibt stehen */
.box h1.titel {
	display: block;
	height: 64px;
	line-height: 64px;
	margin-bottom: 16px;
	padding: 0 32px;
	font-size: 24px;
	border-bottom: solid 1px #666;
	box-sizing: border-box;
}

/* Overlay Navi */
#button_navi_popup,
#button_navi_point_of_interest {
	display: none;
	position: absolute;
	top: 88px;
	left: 24px;
	width: 48px;
	height: 48px;
	background-color: #5e5e5e;
	background-image:url(../img/menue_weiss.svg);
	background-size: 40px;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}
#button_navi_popup.active,
.no-touch #button_navi_popup:hover,
#button_navi_point_of_interest.active,
.no-touch #button_navi_point_of_interest:hover {
	background-color: #4f4f4f;
	filter: contrast(0.6);
}
#navi_popup,
#navi_point_of_interest {
	position: absolute;
	display: inline-block;
	top: 96px;
	left: 32px;
	width: 220px;
	z-index: 12;
}
#navi_popup {
	top: 32px;
}
#navi_popup li,
#navi_point_of_interest li {
	list-style-type: none;
	width: 100%;
	height: 48px;
	margin-bottom: 16px;
	font-size: 18px;
	line-height: 48px;
	text-align: center;
	color: #5e5e5e;
	border: 1px solid #5e5e5e;
	background-color: #fff;
	box-sizing: border-box;
}
#navi_popup li:last-child,
#navi_point_of_interest li:last-child {
	margin-bottom: 0px;
}
#navi_point_of_interest li.current,
#navi_popup li.current {
	background-color: #5e5e5e;
	color: #fff;
}
.no-touch #navi_popup li:hover,
.no-touch #navi_point_of_interest li:hover {
	background-color: #5e5e5e;
	color: #ccc;
}

.modul {
	position: absolute;
	top: 96px;
	left: 284px;
	width: calc(100% - 316px);
	height: calc(100% - 128px);
	padding-right: 24px;
	background-color: #fff;
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	opacity: 0;
	z-index: 1;
}
#overlay .modul {
	top: 32px;
	height: calc(100% - 64px);
	width: calc(100% - 348px);
}
.modul.ohne_navi {
	left: 32px;
	width: calc(100% - 64px);
}
#overlay .modul.ohne_navi {
	left: 32px;
	width: calc(100% - 100px);
}
.modul.active {
	opacity: 1;
	z-index: 2;
}

/* back overlay */
#point_of_interest .box .back {
	display: none;
	position: absolute;
	bottom: 32px;
	left: 32px;
	width: 48px;
	height: 48px;
	background-color: #5e5e5e;
	background-image:url(../img/prev_weiss.svg);
	background-size: 32px;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	z-index: 12;
}
#point_of_interest .box .back.active,
.no-touch #point_of_interest .box .back:hover {
	background-color: #4f4f4f;
	filter: contrast(0.6);
}
#point_of_interest .inhalt img {
	display: block;
}
#poi_image .inhalt img {
	max-width: 100%;
}

/* Overlay Vorschaubilder */
.thumb {
	display: inline-block;
	width: 100%;
}
.thumb li {
	list-style-type: none;
	width: 100%;
	margin-bottom: 16px;
	box-sizing: border-box;
}
#thumb_doubleimages li,
#thumb_images li {
	position: relative;
	float: left;
	width: calc((100% - 16px) / 2);
	height: auto;
	margin-right: 16px;
	padding-bottom: 26%;
	overflow: hidden;
	filter: brightness(0.8);
}
#thumb_doubleimages li.active, #thumb_images li.active,
.no-touch #thumb_doubleimages li:hover, .no-touch #thumb_images li:hover {
	filter: brightness(1);
}
#thumb_doubleimages li div {
	position: absolute;
	width: 50%;
	height: 100%;
	overflow: hidden;
}
#thumb_doubleimages li .bild_alt {
	left: 0;
}
#thumb_doubleimages li .bild_neu {
	right: 0;
}
#thumb_doubleimages li img {
	display: block;
	position: absolute;
	top: 50%;
	width: 200%;
	height: auto;
}
#thumb_doubleimages li .bild_alt img {
	transform: translateY(-50%);
}
#thumb_doubleimages li .bild_neu img {
	transform: translate(-50%, -50%);
}
#thumb_images li img {
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	height: auto;
	transform: translateY(-50%);
}
#thumb_doubleimages li:nth-child(2n+0),
#thumb_images li:nth-child(2n+0) {
	margin-right: 0px;
}
#thumb_texte li {
	background-color: #5e5e5e;
	color: #fff;
	box-sizing: border-box;
	padding: 16px;
	font-size: 18px;
}
#thumb_texte li.active,
.no-touch #thumb_texte li:hover {
	color: #ccc;
}
.ohne_navi #thumb_texte li {
	position: relative;
	float: left;
	width: calc((100% - 16px) / 2);
	margin-right: 16px;
}
.ohne_navi #thumb_texte li:nth-child(2n+0) {
	margin-right: 0;
}

/* Overlay Einzelbild */
.einzelbild {
	position: relative;
	width: 100%;
	max-height: 526px;
	margin-bottom: 8px;
	background-color: #e7e7e7;
}
.einzelbild img {
	position: relative;
	max-width: 100%;
	max-height: 526px;
	margin: auto;
}

/* Overlay Bildpaar alt/neu */
.bildpaar {
	position: relative;
	width: 100%;
	max-height: 486px;
}
.bildpaar .bild_alt {
	position: absolute;
	width: 50%; /* wird durch Schieberegler verändert */
	max-height: 486px;
	overflow: hidden;
	z-index: 2;
}
.bildpaar .bild_neu {
	position: relative;
	width: 100%;
	max-height: 486px;
	margin-bottom: 8px;
	background-color: #e7e7e7;
	z-index: 1;
}
.bildpaar .bild_transparent {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	background: rgba(255, 0, 0, 0);
}
.bildpaar .bild_alt img {
	position: absolute;
	width: auto;
	max-width: 100%;
	max-height: 486px;
	opacity: 0;
}
.bildpaar .bild_neu img {
	position: relative;
	width: auto;
	max-width: 100%;
	max-height: 486px;
	opacity: 0;
	margin: auto;
	transition: opacity 0.2s;
}
.bildpaar .bild_alt img.aktive,
.bildpaar .bild_neu img.aktive {
	opacity: 1;
	transition: opacity 0.2s;
}

/* Overlay Schieberegler Bildpaar alt/neu */
.schieberegler {
	background-image:url(../img/leiste_grau.svg);
	width:100%;
	height:40px;
}
.schieber {
	 width:16px;
	 height:100%;
	 margin-left:calc(50% - 8px);
}

/* Overlay Text */
#overlay .box h2,
#point_of_interest .box h2,
#text_google_karte h2 {
	margin-top: -4px;
	margin-bottom: 12px;
	font-size: 1.325em;
	line-height: 1.2;
}
#point_of_interest .box h3 {
	margin-bottom: 12px;
	font-size: 20px;
	line-height: 1.2;
}
#point_of_interest .header {
	color: #666;
	font-size: 16px;
  margin-bottom: 12px;
}
#overlay .box p,
#point_of_interest .box p,
#text_google_karte p {
	line-height: 1.5em;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	margin-bottom: 24px;
}
#overlay .box p:last-child,
#point_of_interest .box p:last-child,
#text_google_karte p:last-child {
	margin-bottom: 0;
}
#overlay .box #audio_modul p:last-child {
	margin-bottom: 24px;
}
#overlay .bildunterschrift,
#point_of_interest .bildunterschrift {
	font-size: 16px;
	font-style: italic;
	line-height: 1.3;
}

/* Institutionen */
.inhalt .bild_institution,
.inhalt .text_institution {
	width: calc((100% - 24px) / 2);
	float: left;
}
.inhalt .bild_institution {
	margin-right: 24px;
}
.inhalt .bild_institution img {
	display: block;
	width: 100%;
}
/* ENDE Institutionen */

/* Video */
#content_video {
	width: 100%;
}
#content_video #video {
	display: block;
	position: relative;
	background-color: #f5f5f5;
	width: 100%;
	max-height: calc(100% - 104px);
}

/* Schaltflaeche */
.schaltflaeche {
	background-color: #5e5e5e;
	position:relative;
	width:100%;
	height:48px;
	margin-bottom: 8px;
	z-index: 2;
}
.schaltflaeche ul {
	list-style-type:none;
	position:absolute;
	top:4px;
	left:4px;
	width:calc(100% - 8px);
	height:40px;
}
.schaltflaeche ul li {
	float:left;
}
.pause {
	background-image:url(../img/pause.svg);
	width:40px;
	height:40px;
	background-size: 40px;
}
.pause.play_aktiv {
	background-image:url(../img/play.svg);
}
.zeit {
	width:64px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size: 16px;
	color: #fff;
}
.aktuellezeit {
	margin-right: 8px;
}
.fortschrittsbalken {
	background-image:url(../img/leiste.svg);
	width:calc(100% - 376px);
	height:40px;
}
.fortschrittsbalken img {
	float:left;
}
.fortschritt {
	 width:16px;
	 height:40px;
	 margin-left:-8px;
}
.gesamtzeit {
	margin-left: 8px;
}
.laut {
	background-image:url(../img/laut.svg);
	width:40px;
	height:40px;
	background-size: 40px;
	margin-left: 40px;
	margin-right: 20px;
}
.volumebalken {
	background-image:url(../img/leiste.svg);
	width:100px;
	height:40px;
}
.volumebalken img {
	float:left;
}
.volume {
	 width:16px;
	 height:40px;
	 margin-left:42px;
}
/* ENDE Schaltfläche */

/* Bildershow */
.swiper-container {
  width: 100%;
}
.swiper-button-next {
	right: 0px;
	width: 48px;
	height: 48px;
	background-image:url(../img/next_weiss.svg);
	background-size: 48px;
  transform: translateY(-56px);
	filter: drop-shadow(0px 0px 2px #000);
}
.swiper-button-prev {
	left: 0px;
	width: 48px;
	height: 48px;
	background-image:url(../img/back_weiss.svg);
	background-size: 48px;
  transform: translateY(-56px);
	filter: drop-shadow(0px 0px 2px #000);
}
.swiper-button-next::after,
.swiper-button-prev::after {
 content: unset;
}
.swiper-pagination-bullet {
	background: #333;
}
.swiper-slide .bild {
	position: relative;
	background-color: #f5f5f5;
	width: 100%;
	padding-top: 77.5%;
	margin-bottom: 64px;
}
.swiper-slide .bild img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 100%;
	max-height: 100%;
}
.swiper-slide .bildunterschrift {
	position: absolute;
	bottom: -26px;
	width: 100%;
}
/* ENDE Bildershow */

.karte {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 1;
	z-index: 2;
	transition: opacity 0.5s;
	overflow: auto;
}
.svg-object {
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	transform: scale(1);
  transform-origin: 0px 0px;
	transition: transform 0.2s ease-in-out;
}
.hidden {
	opacity: 0;
	z-index: 1;
	transition: opacity 0.5s;
}
#overlay.hidden,
#point_of_interest.hidden,
#text_google_karte.hidden {
	opacity: 0;
	z-index: 1;
	transition: none;
}
.no-touch #home,
.no-touch #institutionen,
.no-touch #button li,
.no-touch #language li,
.no-touch #navi li,
.no-touch #button_text_google_karte,
.no-touch #button_legende,
.no-touch #button_navi,
.no-touch #button_navi_popup,
.no-touch #button_navi_point_of_interest,
.no-touch #overlay .box .content .right .back,
.no-touch .close,
.no-touch #navi_popup li,
.no-touch #navi_point_of_interest li,
.no-touch #point_of_interest .box .back,
.no-touch .thumb li,
.no-touch .zoom-in,
.no-touch .zoom-out {
	cursor: pointer;
}
.link {
	display: inline-block;
	width: 100%;
	height: 20px;
	line-height: 20px;
	background-image: url(../img/pointer.svg);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: right center;
	padding-bottom: 2px;
	cursor: pointer;
}
.touch .link {
	cursor: unset;
}
.leaflet-touch .leaflet-control-layers-toggle,
.leaflet-bottom.leaflet-right {
	display: none;
}

/* Footer */
#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
	height: 64px;
	line-height: 64px;
	background-color: #fff;
  text-align: center;
	border-top: solid 1px #666;
	box-sizing: border-box;
  z-index: 2;
}
#footer span {
  text-decoration: underline;
  color: #666;
}
#footer span.active,
#footer span:hover {
  color: #000;
}
.no-touch #footer span {
  cursor: pointer;
}

@media (max-width: 1799px) {
	#button_navi {
		display: block;
	}
	#navi {
		display: none;
		position: fixed;
		top: 93px;
		right: 258px;
		width: 208px;
		background-color: #5e5e5e;
		padding: 16px 0;
	}
	#navi li {
		float: none;
		width: 100%;
		height: 48px;
		color: #fff;
		font-size: 18px;
		line-height: 48px;
		margin-left: 0;
		background-color: #5e5e5e;
	}
	#navi li.current,
	#navi li.active,
	.no-touch #navi li:hover {
		color: #ccc;
	}

	#button_legende {
		display: block;
	}
	#legende {
		display: none;
		bottom: 88px;
	}
	#legende .close {
		display: block;
	}
}

@media (max-width: 1024px) {
	.zoom-interactiv-map {
	  display: block;
	}

	.no-touch .zoom-interactiv-map {
	  display: none;
	}
}

@media (max-width: 1023px) {
	/* Menüstreifen, header = 170px, Elemente bei 126px; */
	#streifen {
		width: 100%;
		top: 122px;
		right: 0;
		background-color: #5e5e5e;
	}
	#home {
		margin-left: 16px;
	}
	#language {
		float: right;
		margin-right: 16px;
	}
	#institutionen,
	#language li {
		color: #fff;
	}
	#institutionen {
		background-color: unset;
		padding: 0 0;
	}
	#home,
	#button_navi {
		filter: invert(1);
	}
	/* Active */
	#language li.current,
	#navi li.current,
	#language li.active,
	#institutionen.active,
	.no-touch #language li:hover,
	.no-touch #institutionen:hover {
		color: #ccc;
	}
	#home.active,
	.no-touch #home:hover {
		background-image: url(../img/home_active_invert.svg);
		filter: invert(0);
	}
	#button_navi.active,
	.no-touch #button_navi:hover {
		background-image: url(../img/menue_active_invert.svg);
		filter: invert(0);
	}
	#navi {
		top: 170px;
		right: unset;
		left: 68px;
	}

	#content {
		top: 170px;
		height: calc(100% - 170px - 64px);
	}

	#button_text_google_karte,
	#text_google_karte,
	.zoom-interactiv-map  {
		top: 194px;
	}

	.karte {
		width: 100%;
		height: 64.4vw;
	}
}

@media (max-width: 979px) {
	/* Overlay */
	#overlay .box,
	#point_of_interest .box {
		width: calc(100% - 48px);
    height: calc(100% - 48px);
	}
	#overlay .box .close,
	#point_of_interest .box .close {
		top: 12px;
		right: 12px;
	}
	#navi_popup,
	#navi_point_of_interest {
		top: 88px;
		left: 24px;
		width: 200px;
	}
	#navi_popup {
		top: 24px;
	}
	#navi_popup li, #navi_point_of_interest li {
		font-size: 16px;
	}
	.box h1.titel {
		padding: 0 24px;
	}
	.modul {
		top: 88px;
		left: 248px;
		width: calc(100% - 272px);
		height: calc(100% - 112px);
		padding-right: 16px;
	}
	#overlay .modul {
		top: 24px;
		height: calc(100% - 48px);
		width: calc(100% - 308px);
	}
	.modul.ohne_navi {
    left: 24px;
    width: calc(100% - 48px);
	}
	#overlay .modul.ohne_navi {
		left: 24px;
		width: calc(100% - 84px);
	}
	#poi_detail .modul {
		height: calc(100% - 184px);
	}

	/* Bildershow */
	.swiper-button-next,
	.swiper-button-prev {
		width: 32px;
		height: 32px;
		background-size: 32px;
		transform: translateY(-40px);
	}
	#point_of_interest .box .back {
		bottom: 24px;
		left: 24px;
	}
}

@media (max-width: 819px) {
	#header {
		height: 104px;
	}
	.header-wrapper-right .logo-hs {
		width: 131px;
    height: 56px;
	}
	/* headertitel kleiner */
	#headertitel span,
	#kartentitel span {
		font-size: 18px;
	}
	#headertitel span:first-child,
	#kartentitel span:first-child {
	  font-size: 24px;
	}
	#streifen {
		background-color: #5e5e5e;
		top: 104px;
	}
	#home,
	#language,
	#institutionen,
	#button_navi {
		top:108px;
	}
	#navi {
		top: 152px;
	}
	#content {
		top: 152px;
		height: calc(100% - 152px - 64px);
	}
	#overlay .box h2, #point_of_interest .box h2, #text_google_karte h2 {
		font-size: 1.25em;
	}

	#button_text_google_karte,
	#text_google_karte,
	.zoom-interactiv-map  {
		top: 176px;
	}

	/* Overlay */
	#navi_popup,
	#navi_point_of_interest {
		display: none;
		background-color: #5e5e5e;
		top: 136px;
		padding: 16px 0;
	}
	#button_navi_popup,
	#button_navi_point_of_interest {
		display: block;
	}
	#navi_popup li, #navi_point_of_interest li {
		margin-bottom: 0;
		border: unset;
		background-color: #5e5e5e;
		color: #fff;
	}
	#navi_popup li.current,
	#navi_popup li.active,
	.no-touch #navi_popup li:hover,
	#navi_point_of_interest li.current,
	#navi_point_of_interest li.active,
	.no-touch #navi_point_of_interest li:hover {
		color: #ccc;
	}

	#overlay .box h2,
	#point_of_interest .box h2 {
		width: calc(100% - 48px);
	}
	#text_google_karte h2 {
		width: calc(100% - 32px);
	}

	#overlay .modul,
	#point_of_interest .modul {
		left: 96px;
		width: calc(100% - 120px);
		padding-right: 0;
	}
	#overlay .modul.ohne_navi,
	#point_of_interest .modul.ohne_navi {
    left: 24px;
    width: calc(100% - 48px);
	}
	#point_of_interest .modul.ohne_navi {
		height: calc(100% - 184px);
	}
	.ohne_navi #thumb_texte li {
    width: 100%;
    margin-right: 0;
	}
	.inhalt .bild_institution, .inhalt .text_institution {
    width: 100%;
	}
	.inhalt .bild_institution {
    margin-right: 0;
		margin-bottom: 16px;
	}
}

@media (max-width: 699px) {
	#header {
		height: 88px;
	}
	.header-wrapper-right {
		top: 16px;
    right: 16px;
	}
	/* headertitel kleiner */
	#headertitel,
	#kartentitel {
		left: 16px;
		margin-right: 163px;
	}
	#headertitel span,
	#kartentitel span {
		font-size: 16px;
	}
	#headertitel span:first-child,
	#kartentitel span:first-child {
	  font-size: 22px;
		margin-bottom: 0;
	}
	#headertitel span.second_line,
	#kartentitel span.second_line {
	  display: none;
	}
	#streifen {
		background-color: #5e5e5e;
		top: 88px;
	}
	#home {
		margin-left: 8px;
	}
	#language {
		margin-right: 8px;
	}
	#institutionen,
	#button_navi {
		margin-left: 16px;
	}
	#navi {
		top: 136px;
		left: 50px;
	}
	#content {
		top: 136px;
		height: calc(100% - 136px - 56px);
	}
	#button_text_google_karte,
	#text_google_karte,
	.zoom-interactiv-map {
		top: 152px;
	}
	#button_text_google_karte {
		right: 16px;
	}
	#text_google_karte {
		right: 16px;
		width: calc(100% - 32px);
		padding: 16px;
	}
	#text_google_karte .close {
		top: 4px;
		right: 4px;
	}
	.zoom-interactiv-map {
		left: 16px;
	}
	#button_legende {
		bottom: 72px;
		left: 16px;
	}
	#legende {
		bottom: 72px;
		left: 16px;
	}

	#footer {
		height: unset;
		line-height: 32px;
		padding: 12px;
	}
	#footer span {
		font-size: 14px;
	}
}

@media (max-width: 479px) {
	#headertitel span:first-child,
	#kartentitel span:first-child {
	  font-size: 18px;
	}
	/* Overlay */
	/* Vorschaubilder */
	.thumb {
		width: 100%;
	}
	#thumb_doubleimages li,
	#thumb_images li {
		width: 100%;
		margin-right: 0px;
		padding-bottom: 56.25%;
	}
	#thumb_doubleimages li:nth-child(2n+0),
	#thumb_images li:nth-child(2n+0) {
		margin-right: 0px;
	}

	/* Schaltflaeche */
	.pause {
		background-size: 32px;
		background-position: center;
		background-repeat: no-repeat;
	}
	.zeit {
		width: 56px;
		font-size: 14px;
	}
	.fortschrittsbalken {
		width: calc(100% - 152px);
	}
	.laut,
	.volumebalken {
		display: none;
	}
}

@media (max-width: 399px) {
	#headertitel span:first-child,
	#kartentitel span:first-child {
	  font-size: 16px;
	}
}

@media (orientation: portrait) {
  .karte {
		height: 100%;
		width: 155.2vh;
	}
}

.legal {
	height: unset;
}
#impressum,
#datenschutz {
	margin-bottom: 24px;
}
#impressum h2,
#datenschutz h2 {
	margin-bottom: 24px;
}
#impressum p,
#datenschutz p,
#impressum ul,
#datenschutz ul {
	margin-bottom: 24px;
}
#impressum p:last-child,
#datenschutz p:last-child {
	margin-bottom: 0;
}
#impressum li,
#datenschutz li {
	margin-left: 16px;
}