#map_canvas, #map {
background:url(../../img/maps-blur.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

#testiframe-youtube, #testiframe-vimeo, #testiframe-soundcloud, #iframe-first {
background:url(../../img/externe-blur.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	margin:0 auto;

}
#youtube-first, #soundcloud-first, #vimeo-first {display:none;z-index:99;width:800px}
iframe {}
.dienste-hinweis {
	font-size:0.875em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 800px;
	padding: 1.75em;
	min-width: 300px;	
	background-color: #f9f6d5;
	-webkit-box-shadow: 0 0.5em 4em 0 rgb(0 0 0 / 25%);
	-moz-box-shadow: 0 0.5em 4em 0 rgba(0,0,0,0.25);
	box-shadow: 0 0.5em 4em 0 rgb(0 0 0 / 25%);
	text-align:left;
}

.dienste-hinweis h2, #location-hinweis h2 {margin-bottom:0.5em}
.ok-btn {display:inline-block;padding:1em;color:var(--weiss);background: var(--black);
    border: 1px solid var(--black);color:var(--weiss);text-decoration:none;box-shadow: 0 0.125em 1em rgba(0,0,0,0.05);}
.ok-btn:hover {color:var(--weiss);background: var(--grey666);text-decoration:none;box-shadow: 0 0.125em 1em rgba(0,0,0,0.2);}
.ok-btn-container {}
#location-hinweis, #featherlight-content-hinweis {padding:1.5em;background:var(--hinweis-bg);display:none}
#featherlight-content-hinweis {max-width:800px;display:block;font-weight:300;line-height:1.5}


@media screen and (max-width: 930px) {
#youtube-first, #soundcloud-first, #vimeo-first {
font-size:0.75em;
width:600px;
}
}

@media screen and (max-width: 690px) {
#youtube-first, #soundcloud-first, #vimeo-first {
font-size:0.625em;
width:400px;
}
}

@media screen and (max-width: 540px) {
#youtube-first, #soundcloud-first, #vimeo-first {
font-size:0.5em;
width:320px;
}
}


#cookie-banner , #cookies-einstellungen {
	background:var(--weiss);
	border-top:1px solid rgba(0,0,0,0.15);
	background:var(--trans-weiss95);
	color:var(--weiss);
	width:100%;
	position:fixed;
	z-index:500;
	display:none;
	left:0;
	bottom:0;
	font-size:1.125em;
	font-weight:300;
	line-height:1.5;
	color:var(--black);
}
#cookie-banner  a#own-cookies, #own-cookies-back {
	padding:0;
	margin:1em;
	color:var(--link-color);
	text-decoration:none;
	border-bottom: 1px solid var(--black);
}
#cookie-banner a#own-cookies:hover, #own-cookies-back:hover {
	opacity:0.66
}




#cookies-einstellungen {
	z-index:501;
	display:none;
	color:var(--grey333);
	background:transparent;
	border-top:none;
	padding-top:1em
	
}

#cookies-einstellungen h5, #cookies-einstellungen .toggle {
	display:inline-block;
	vertical-align:middle;
	line-height: 1;
}
#cookies-einstellungen h5 {
	font-size:1em;
	margin: 0 0.25em 0 0;	
	line-height:1em;
	font-weight:400;
	
}
#cookies-einstellungen p {padding:0;margin:0.25em 0 0;}

.toggle {
	font-size:1.5em;
	text-decoration:none;
}
.toggle .off {
	color:var(--grey999);
	display:inline;
	vertical-align:middle;
}
.toggle .off:hover {
	color:var(--black)
}
.toggle .on {
	color:var(--black);
	display:none;
	vertical-align:middle;
}
.toggle.active .off {
	display:none
}
.toggle.active .on {
	display:inline
}
.toggle.active {
}
.toggle em {
	font-size:0.5em;
	font-weight:300;
	color:var(--kj-off-red);
	display:inline;
	vertical-align:middle;
	position:relative;
	top:-0.125em;
}
.toggle .on em {
	color:var(--blue);
}
#cookies-einstellungen ul li {
	background:var(--weiss);
	padding:1em;
	margin-top:1em;
	border:1px solid var(--grey666);
	padding:1em;
}

#cookies-einstellungen nav ul li {
	background:transparent;
	padding:0;
	margin-top:0;
	border:none;
	padding:0;
}

#cookies-einstellungen ul li ol, .toggle-cookie-infos-hide {
	display:none;
}
#cookies-einstellungen ul li ol {padding:0}
#cookies-einstellungen ul li ol li {
	background:var(--weiss);
	border:1px solid var(--greye7);
	padding:1em;
	margin-top:1em;
	font-size:1em;
	list-style-type:none;	
}
#cookies-einstellungen ul li ol li p {font-size:0.875em}
a.toggle-cookie-infos, a.active.toggle-cookie-infos {
	font-size:0.875em;
	color:var(--link-color);
	text-decoration:underline
}
a.active .toggle-cookie-infos-show {
	display:none
}
a.active .toggle-cookie-infos-hide {
	display:inline-block;
}
#cookies-einstellungen .inner {
	padding:2.5em 1.5em 1.5em 1.5em;
	margin:0 auto;
	max-width:80em;
	max-height:90vh;
	max-height:90dvh;
	background:var(--trans-weiss95);
	overflow:hidden;
	overflow-y:scroll;
	box-shadow:0px 0px 100px 20px rgba(0,0,0,0.25);
	position:relative
}
#cookie-banner  .inner {
	position:relative;
	padding:1.5em 3em;
	/*display:flex;
	justify-content:space-between; */
	margin:0 auto;
	max-width:88em;}
#cookie-banner {	
	max-height:100vh;
	max-height:100dvh;
	overflow:auto;
	
	
}
#cookie-banner  .inner p {
	flex:1 1 auto;
	padding:0;
	margin:0;
	font-size:1rem;
	
}

#cookie-banner  .inner p.cookie-text {

	/*max-height: 47.75vh;
    overflow: auto;*/
	margin:0.5rem 0;
	padding:0 1rem 0 0;
	/*border-right:2px solid var(--greye7);*/
	position:relative !important;
	font-size: 0.875em;
    overflow-y: scroll;
    max-height: 25vh;
	padding: 0.5em;
    border: 1px solid var(--greyCCC);
}




#cookies-einstellungen  .inner p a {word-wrap: break-word;}
#cookie-banner  .inner div {
	/*flex:0 0 auto;
	width:auto; */
	
}
a.cookies-ok, a.cookies-ok-own, a#cookies-NOT-ok,
button.cookies-ok, button.cookies-ok-own, button#cookies-NOT-ok
 {
	padding:0.5em 1.25em;
	margin:0 1em 0 0;
	display:inline-block;
	text-decoration:none;
	font-weight:300;
	color:var(--weiss);
	border:1px solid var(--weiss);
	transition:all ease-in-out 0.1s;
	width:auto;
	text-transform:none;
	letter-spacing:0
	
}
a.cookies-ok2, a.cookies-ok-own,
button.cookies-ok2, button.cookies-ok-own
{
	margin:1em 1em 1em 0;
	
}
a.cookies-ok, a.cookies-ok2, a.cookies-ok-own,
button.cookies-ok, button.cookies-ok2, button.cookies-ok-own
 {
	background: var(--black);
    border: 1px solid var(--black) !important;

}
a.cookies-ok-own:hover,
button.cookies-ok-own:hover
 {
	background: var(--grey666);
    border: 1px solid #77d8bb;;
	color:var(--weiss) !important;
}
a.cookies-ok:hover,
button.cookies-ok:hover
 {background:var(--grey666)}

#cookie-banner .inner div a#cookies-NOT-ok, 
#cookie-banner .inner div button#cookies-NOT-ok
 {
	background:var(--greye7);
	color:var(--grey666);
	border:1px solid var(--greye7);
}

.high-contrast #cookie-banner .inner div a#cookies-NOT-ok, 
.high-contrast #cookie-banner .inner div button#cookies-NOT-ok
 {
	background:var(--greye7);
	color:var(--offweiss);
	border:1px solid var(--offweiss);
}



#cookie-banner .inner div a.cookies-ok:hover, a.cookies-ok2:hover,
#cookie-banner .inner div button.cookies-ok:hover, button.cookies-ok2:hover
 {
	color:var(--weiss);
	background:var(--grey666);
	border: 1px solid var(--black);
}
#cookie-banner .inner div a#cookies-NOT-ok:hover, a.cookies-ok-own,
#cookie-banner .inner div button#cookies-NOT-ok:hover, button.cookies-ok-own {
	color:var(--grey666) !important;
	background:var(--weiss);
}

#viernullvier {font-weight:800;text-align:center;font-size:20em}
#vorauswahl {display:block; font-size:1rem;margin:0.5rem 0}
#vorauswahl a, #vorauswahl em {
	padding:0.25rem 1rem 0.25rem 0 !important;
	margin:0 !important;
	font-size:1rem !important;
	color:var(--black) !important;
	border:none !important;
	text-transform:none;
	font-style: normal;
	
display:inline-block
}

#vorauswahl a#own-cookies4 {color: var(--link-color) !important}

#vorauswahl .toggle .on, #Xvorauswahl em i {
	color:var(--greenhover);
	color:var(--black);
}
#vorauswahl i {font-size: 1.5rem;
    display: inline;
    vertical-align: middle;
    position: relative;
    top: -0.0625rem;}
#vorauswahl em i {top: -0.0625rem; }
#vorauswahl em span {display:inline;
	vertical-align:middle;}
#cookie-banner p strong {font-size:1.125rem;}

.cookie-banner-legal-links {font-size:0.875em}
.cookie-banner-legal-links li {display:inline-block}
.cookie-banner-legal-links li:first-child, #cookies-einstellungen nav ul li:first-child {border-right:1px solid var(--grey666);padding:0 0.75em 0 0; margin: 0 0.75em 0 0 }



@media screen and (max-width: 890px) {
#vorauswahl em span, #vorauswahl .toggle  {font-size:0.875em !important}
}


@media screen and (max-width: 75.000em) {
	 
#cookie-banner  .inner {display:block;padding:2.5em 1.5em 1.5em 1.5em}
#cookie-banner  .inner p { flex: none}
#cookie-banner  .inner div { flex: none;}
#cookie-banner  .inner div a {margin:1em 1em 0 0;} 	 
#cookie-banner  a#own-cookies {margin-left:0}	 
.cookie-banner-legal-links li a {margin:0 !important}
.cookie-banner-legal-links {}
.cookie-banner-close {font-size:0.875em;right:1.5em}
}

/*768px*/
 @media screen and (max-width: 48.000em) {
#own-cookies-back {margin-left:0;}	
 }
 
 /*640px*/
 @media screen and (max-width: 40.000em) {
#viernullvier {font-size:10em}	 
a.cookies-ok2, a.cookies-ok-own {
    margin: 0.5em 1em 0.5em 0;
}	
#cookie-banner , #cookies-einstellungen {
font-size:1.0625em;
}
 }
 
 

 @media screen and (max-width: 576px) {

#cookie-banner , #cookies-einstellungen {
font-size:0.875em;
}
#cookies-einstellungen .inner {
	max-height:76vh;
}


 } 
 
 @media screen and (max-width: 770px) {
.cookie-banner-legal-links {margin-top:1em}

 }