div .inner .hfkbanner {
	width: 100%;
	height: auto;
	background-color:#f4f4f4;
	border: 5px solid #f4f4f4;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	margin:20px 0 20px 0;
}
.hfkcenter {
	text-align: center;
}


/* TRANSLATE */
a.gflag {border:none !important;}
a.gflag img {border: 0px !important; box-shadow: none !important;}
a.gflag img:hover a:link, a:active, a:visited, a:hover, a:focus {outline: none;}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
#google_translate_element2 {display:none!important;}
.translate {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1000;
}
.translate img {
	transition: transform 0.2s;
}
.translate img:hover {
	transform: translate(0px, -2px);
}
.xtranslate {
	position: absolute;
	right: 5px;
	top: 5px;
	z-index: 99999;
}
body {top:0 !important;}
div.skiptranslate {
	display: none !important;
}


#jahre {
	color: var( --coblau );
	font-weight: 700;
	font-size: 2em;
}

#vonbis {
	color: var( --coblau );
	font-weight: 700;
	font-size: 1em;
}

/* Simple Lightbox */
.simple-lightbox button {
	box-shadow: none;
	border: none;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

/* Lightboxgallery */
.lg-outer button {
	box-shadow: none;
	border: none;
	color: white !important;
}

#banner {
	width: 100%;
	padding: 0;
	border-radius: 0px 0px 100% 100% / 0px 0px 24% 24%;
}

#main > .inner {
	padding: 0 0 0.1em 0; !important;
}
#main > .inner input, #main > .inner select {
	height: 2em;
	line-height: 2em;
	margin-top: -1.5em;
}
#main > .inner input:focus {
	border-color: var( --coblau );
}
#main > .inner label {
	color: var( --coblau );
	font-size: 1em;
	margin-bottom: 1.5em;
}
#main > .inner > section, #badinfo {
	padding: 2em 5em 0em 5em;
}
#main .tiles article .image:after {
	background: none;
}
#main .tiles article a div.text {
	box-shadow: 1px 1px black;
	background-color: white;
	color: black;
	padding: 0 10px;
}
h1, h2, h3, h4, h5 {
	margin: 0 0 0.2em 0;
	clear: both;
}
/*section.start h1 {*/
section h1 {
	font-size: 2.7em;
	font-family: "Kalam", cursive;
	font-weight: 700;
	font-style: normal;
}
h1 {
	font-size: 2.2em;
	clear: both;
}
h2 {
	font-size: 1.8em;
}
h3 {
	font-size: 1.6em;
}
h4 {
	font-size: 1.2em;
}
#main .inner p {
	overflow: hidden;
	margin-bottom: 1em;
}
#main .inner div.row {
	overflow: hidden;
}
#header a {
	flex: none;
}
#main section {
	overflow: hidden;
	margin-bottom: 5em;
}
#main section:nth-of-type(2) {
	border: none;
}
#main .hfkpressimage {
	padding:5px;
	margin:0 0 5px 0;
	background-color:#f4f4f4;
	border-radius:10px;
	width:100%;
	height:auto;
	overflow: hidden;
}
#main .hfkvideo {
	position:relative;
	width:auto;
	padding-bottom: 56.25%;
	overflow: hidden;
	margin: 0 0 1em;
}
#main .hfkvideo iframe {
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	left: 0;
}

span.hfkimgdescr {
	position: absolute;
	z-index:2;
	color: black;
	background-color: white;
	font-weight: bold;
	font-size: 0.7em;
	padding: 5px 10px;
	opacity: 0.7;
	top: 0;
	left: 0;
}

p.copyright {
	text-align: center;
}

/* Laufschrift */
#marquee {
	top: 0;
	height: 2.67em;
	/*left: -10px;*/
	width: 0px;
	overflow: hidden;
	padding-right: 10px;
	padding-left: 70px;
	background-color: var( --cogelb );
	background-image: url(images/?icoticker=1);
	background-repeat: no-repeat;
	background-size: 1.2em;
	background-position: 35px center;
	position: absolute;
	z-index: 1000;
}
#marquee > span {
	width: 30px;
	height: 2.5em;
	display: block;
	position: absolute;
	background-image: url(images/?icomoon=1);
	background-repeat: no-repeat;
	background-size: 1.3em;
	background-position: 4px center;
	cursor: pointer;
	top: 2px;
	left: 0px;
}
#marquee p {
	color: black;
	white-space: nowrap;
	border-radius: 20px;
	overflow: clip;
	height: 2.5em;
	line-height: 2.5em;
	font-size: 1.2em;
	margin: 0;
	margin-top: -0.2em;
	color: var( --coblau );
	padding: 0;
}
#marquee span.alert, #marquee span.alert a {
	color: var( --corot );
	font-weight: 700;
	/*text-shadow: white 0 0 1px, white 0 0 1px, white 0 0 1px;*/
}

/* HFK Informiert */
#hfkinformiertx {
	background-color: #f56a6a;
	overflow: hidden;
	border: 5px solid #f56a6a;
	border-top: none;
	display: none;
}
#hfkinformiertx p {
	background-color: #f56a6a;
	color: white;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-shadow: 1px 1px black;
	overflow: visible !important;
	white-space: nowrap;
}
#hfkinformiert {
	background-color: #f56a6a;
	overflow: hidden;
	border: 5px solid #f56a6a;
	border-top: none;
	display: none;
	position: absolute;
	z-index: 2;
}
#hfkinformiert p {
	background-color: #f56a6a;
	color: white;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-shadow: 1px 1px black;
	overflow: visible !important;
	white-space: nowrap;
}
#hfkinformiert p a {
	color: white;
	-moz-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
}
#hfkinformiert p a:hover {
	color: white !important;
}
#hfkinformiert p a:hover strong {
	color: white !important;
}

strong {
	color: var( --coblau );
	font-weight: 700;
}

/* Listen */
ol {
	padding-left: 1.6em !important;
}

/* Badegewässenqualität */
table#badequali {
}
table#badequali thead th {
	font-size: 0.65em;
}
table#badequali tbody td {
	font-size: 0.65em;
}
table#badequali tfoot td {
	font-size: 0.65em;
}
table#badequali thead th,
table#badequali tbody td {
	text-align: center;
	vertical-align: middle;
	padding: 0.2em;
}

/* der HFK informiert */
div.hfkinformiert {
	padding: 0.5em;
	border: 1px solid red;
	margin-bottom: 1em;
	font-size: 0.8em;
}

#menu ul li a, #menu ul li span.opener {
	border-left: 0.3em solid var( --cobside );
}

#menu ul li ul li strong a i.micon, #menu ul li ul li span.opener {
	border-left: 0.3em solid var( --cogelb );
}

#menu ul li a:hover, #menu ul li span.opener:hover {
	font-weight: 700;
}

#menu ul li strong a, #menu ul li span.active {
	border-left: 0.3em solid var( --cogelb );
	/* background-image: linear-gradient(to right, var( --cogelb ) 0%, var( --cobside ) 100% );*/
	/*background-color: rgba( 250, 200, 1, .1 );*/
	background-color: rgb( from var( --cogelb ) r g b / 0.1);
	font-weight: 700;
}

#menu ul li ul li strong a, #menu ul li ul li span.active {
	border-left: none;
	/* background-image: linear-gradient(to right, var( --cogelb ) 0%, var( --cobside ) 100% );*/
	background-color: transparent;
	font-weight: 700;
}

#menu ul li a i.micon, #menu ul li span i.micon {
	mask-repeat: no-repeat;
	-mask-repeat: no-repeat;
	mask-position: 0 center;
	-mask-position: 0 center;
	mask-size: 1.5em;
	-mask-size: 1.5em;
	margin: 0;
	padding: 0;
	background-color: var( --coblau );
	padding-left: 1.5em;
	margin-left: 1em;
	margin-right: 1em;
}

#menu ul li ul li a i.micon, #menu ul li ul li span i.micon {
	padding-left: 0.2em;
	mask-size: 0;
	-mask-size: 0;
	background-color: var( --cobside );
}

#menu li a.startseite i.micon { mask-image: url(images/icons/house.svg); -mask-image: url(images/icons/house.svg); }
#menu li span.unser_verein i.micon { mask-image: url(images/icons/users.svg); -mask-image: url(images/icons/users.svg); }
#menu li span.sport_im_hfk i.micon { mask-image: url(images/icons/sportsparten.svg); -mask-image: url(images/icons/sportsparten.svg); }
#menu li span.baden_im_sommer i.micon { mask-image: url(images/icons/swimming.svg); -mask-image: url(images/icons/swimming.svg); }
#menu li span.freizeit___gemeinschaft i.micon { mask-image: url(images/icons/community.svg); -mask-image: url(images/icons/community.svg); }
#menu li span.mitglied_werden i.micon { mask-image: url(images/icons/memberadd.svg); -mask-image: url(images/icons/memberadd.svg); }
#menu li span.aktuelles i.micon { mask-image: url(images/icons/newspaper.svg); -mask-image: url(images/icons/newspaper.svg); }
#menu li span.rechtliches i.micon { mask-image: url(images/icons/rechtliches.svg); -mask-image: url(images/icons/rechtliches.svg); }
#menu li a.kontakt i.micon { mask-image: url(images/icons/kontakt.svg); -mask-image: url(images/icons/kontakt.svg); }
#menu li a.datenschutz i.micon { mask-image: url(images/icons/datenschutz.svg); -mask-image: url(images/icons/datenschutz.svg); }
#menu li a.impressum i.micon { mask-image: url(images/icons/impressum.svg); -mask-image: url(images/icons/impressum.svg); }
#menu li a.cookieeinstellungen i.micon { mask-image: url(images/icons/cookieeinstellungen.svg); -mask-image: url(images/icons/cookieeinstellungen.svg); }
#menu li a.mitgliederbereich i.micon { mask-image: url(images/icons/mitgliederbereich.svg); -mask-image: url(images/icons/mitgliederbereich.svg); }
#menu li span.mitgliederbereich i.micon { mask-image: url(images/icons/mitgliederbereich.svg); -mask-image: url(images/icons/mitgliederbereich.svg); }

#menu li span._edit i.micon { mask-image: url(images/icons/intern_edit.svg); -mask-image: url(images/icons/intern_edit.svg); }

#badinfo {
	padding-top: 0;
	/*position: relative;
	bottom: 6em;
	width: 100%;*/
}
#badinfo div.row div {
	border: 1px solid lightgrey;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	box-shadow: 0 0 2px 0px lightgray;
	padding: 0;
	background-color: var( --cobgbadinfo );
	margin: 1em 1em 0 1.5em;
	width: calc( 50% - 1.5em );
	color: var( --cobadinfotext );
	font-size: 90%;
	height: 4em;
	display: flex;
	align-items: center;
}
#badinfo div.row div p {
	margin: 0;
	padding: 0 0 0 4.5em;
	line-height: 1.25em;
}
#bueroopen {
	margin-left: 0.5em !important;
	margin-right: 0 !important;
	width: calc( 50% - 1.5em ) !important;
	background-image: url(images/?icobuero=1);
	background-repeat: no-repeat;
	background-size: 3em;
	background-position: 0.8em center;
}
#badopen {
	background-image: url(images/?icobad=1);
	background-repeat: no-repeat;
	background-size: 3em;
	background-position: 0.8em center;
}
#badopen.closed {
	background-image: url(images/?icobad=closed);
}
#bueroopen.closed {
	background-image: url(images/?icobuero=closed);
}

#bannertext {
	pointer-events: none;
	position: absolute;
	top: 0;
	border: none !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex;
	align-items: center;
	height: 25em;
}
#bannertext p {
	position: absolute;
	margin: auto auto;
	margin-left: -0.5em;
	margin-top: 0.5em;
	padding: 0.5em;
	text-align: left !important;
	color: var( --cobannertext );
	font-size: 3.5vw !important;
	text-shadow: black 0 0 8px, black 0 0 8px;
	line-height: 1.2em;
	font-family: "Kalam", cursive;
	font-weight: 400;
	font-style: normal;
	cursor: default;
}
#kihint {
	position: absolute;
	right: 5px;
	top: 4em;
	color: white;
	writing-mode: sideways-lr;
	text-shadow: black 0 0 8px, black 0 0 8px, black 0 0 8px,black 0 0 8px,black 0 0 8px,black 0 0 8px;
	font-size: 90%;
	z-index: 12;
}
#main .inner section p, #tinymce p {
	text-align: justify;
}

div.cowhite {
	color: white;
}

div.teaser {
	position: relative;
	margin-bottom: 1em;
}

div.teaser:hover span {
	color: var( --cogelb );
	font-size: 150%;
	transition: ease-in-out 0.1s;
}

div.teaser a img {
	margin: 0 !important;
}

div.teaser span {
	pointer-events: none;
	position: absolute;
	bottom: 0;
	text-shadow: black 0 0 8px, black 0 0 8px;
	z-index: 10;
	color: white;
	padding: 0 0 0.5em 0.5em;
	font-weight: 700;
	font-size: 120%;
	transition: ease-in-out 0.1s;
}

#liveweather .image.fit {
	margin: 0;
}

#liveweather p {
	position: relative;
	margin: 0 !important;
	padding: 0;
	height: 100%;
	top: 0;
	margin: auto auto;
	pointer-events: none;
	/*display: flex;
	align-items: center;*/
}

#liveweather p span {
	position: absolute;
	z-index: 10;
	color: white;
	text-shadow: black 0 0 2px, black 0 0 2px, black 0 0 2px, black 0 0 2px, black 0 0 2px, black 0 0 2px;
	font-size: 80%;
	cursor: default;
}
#liveweather p span.livewhat {
	bottom: 0;
	left: 0.5em;
	display: none;
}
#liveweather p span.livetime {
	bottom: 0.1em;
	right: 0.5em;
}
#liveweather p span.livedata {
	text-shadow: black 0 0 4px, black 0 0 4px, black 0 0 4px, black 0 0 4px, black 0 0 4px, black 0 0 4px;
	font-weight: 700;
	font-size: 2vw;
	left: 0;
	bottom: 0.1em;
	width: 100%;
	text-align: center;
}

#wettercom h2 a {
	display: inline-block;
	background-image: url(images/icons/wetter_com_logo.svg) !important;
	background-repeat: no-repeat;
	background-position: 0 0.3em;
	color: var( --cobmain );
	width: 5em;
}
div.wettercom div p {
	position: relative;
	margin: 0;
	padding: 0;
	height: auto;
	top: 0;
	text-align: center;
}
div.wettercom div p img {
	/*padding-top: 2em;*/
	margin: 0 !important;
}
div.wettercom div p span {
	z-index: 10;
	color: var( --coblau );
	font-size: 0.8vw;
	width: 100%;
	left: 0;
	display: block;
	text-align: center;
}
div.wettercom div p span.wcDay {
	font-weight: 700;
}

div.wettercom div p span.wcData {
	bottom: -3.5vw;
	line-height: 1em;
	padding-bottom: 3.5em;
}

div.baderegeln p {
	text-align: left !important;
}

article.schulferien th {
	color: var( --coblau );
	font-size: 1.2em;
}

div.tierwelt span {
	margin-bottom: 0.5em !important;
}

div.tierwelt p {
	text-align: center !important;
	font-size: 90% !important;
}

#s-all-bn {
	color: var( --cogelb ) !important;
}

span .image {
	color: black;
	font-size:80%;
}
span .image i {
	position: absolute;
	bottom:0;
	text-shadow: black 0 0 4px, black 0 0 4px, black 0 0 4px, black 0 0 4px, black 0 0 4px, black 0 0 4px;
	font-style: normal;
	color: white;
	padding: 0.5em;
	z-index:1000;
}

.image.leftsmall, .image.rightsmall {
	max-width: 20%;
}
.image.leftsmall img, .image.rightsmall img {
	width: 100%;
}
/* Accordion */
details {
	border: 1px solid #eee;
	margin-bottom: 1em;
	padding: 10px 0 0 10px;
}
details:open {
	border: 1px solid var( --coblau );
	padding: 30px;
}
details > summary {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	margin: -10px 0px 0px -10px;
	padding: 10px;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	font-weight: normal;
	font-size: 1.2em;
	width: calc( 100% - 10px );
}
details p:last-child {
	margin: 0 !important;
}
details:open > summary {
	color: var( --cogelb );
	background-color: var( --coblau );
	margin: -30px 0px 30px -30px;
	width: calc( 100% + 40px );
}
details > summary:hover {
	background-color: #ccc;
}
details:open > summary:hover {
	background-color: var( --coblau );
}
details > summary:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f067';
	float: right;
	margin-left: 0;
	width: 30px;
}
details:open > summary:after {
	content: '\f068';
}
details > summary::-webkit-details-marker,
details > summary::marker {
	content: '';
	display: none;
	color: transparent;
	font-size: 0px;
}
span.special {
	font-family: Kalam;
	font-weight: bold;
	color: var(--coblau);
}
font.kiosk {
	color: #ff00aa;
}

.accordion > div,
.accordion > p,
.accordion-one > p,
.accordion-one > div {
	display: none;
}

.linkhelper .selector {
	float: left;
}
.linkhelper .selector select {
	background: none;
	width: 18em;
	padding: 0;
	height: 100vh;
	float: left;
}
.linkhelper .selector option:checked, .linkhelper .selector option:focus {
	background-color: var( --coblau );
	color: white;
}
.linkhelper .wrapper {
	height: 100vh;
	width: 100vw;
	float: left;
	padding: 0;
	margin: 0;
}
.linkhelper .wrapper #content {
	background-color: var( --comain );
	float: left;
	height: calc( 100vh );
	width: calc( 100% - 18em );
	overflow: scroll;
}
.linkhelper .wrapper #preview {
	background-color: var( --comain );
	border-left: 1px solid lightgrey;
	padding: 1em;
	float: left;
	height: 100vh;
	width: 52em;
	overflow: scroll;
}
.linkhelper .wrapper #preview p {
	clear: both;
	text-align: justify;
}
.linkhelper .wrapper #preview select {
	float: left;
	width: auto;
	height: 2em;
	margin-right: 1em;
}
.linkhelper .wrapper #preview label {
	float: left;
	line-height:2.2em;
	padding-right: 0.5em;
}
.linkhelper .wrapper #preview input {
	float: left;
	width: auto;
	height: 2em;
}
.linkhelper .wrapper #preview h4 {
	clear: both;
}

.linkhelper .wrapper #content div {
	width: 11em;
	height: 11em;
	margin-top: 1em;
	margin-left: 1em;
	padding: 0.5em;
	padding-bottom: 0;
	float: left;
	border: 1px solid transparent;
	background-color: transparent;
	/*overflow: hidden;*/
}
.linkhelper .wrapper #content div:hover {
	border: 1px solid lightgrey;
	background-color: lightgrey;
}
.linkhelper .wrapper #content p {
	float: left;
	text-align: center;
	width: 10em;
	white-space: nowrap;
	margin: 0;
	padding: 0 0.5em;
	overflow: hidden;
	text-overflow: ellipsis;
}
.linkhelper .wrapper #content p.img {
	padding: 0;
	height: 8em;
	width: 10em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: transparent;
}

ol.gelaendeplan {
}

ol.gelaendeplan li {
	cursor: default;
	list-style-type: none;
	line-height: 1.8em;
}

ol.gelaendeplan li::before {
	content: var( --licontent );
	cursor: default;
	background-color: var(--licolor);
	border-radius: 100% 100%;
	color: white;
	position: absolute;
	margin-left: -30px;
	text-align: center;
	width: 1.6em;
	height: 1.6em;
	display: block;
	line-height: 1.6em;
	margin-top: 2px;
}

ol.gelaendeplan li:hover {
	color: var( --coblau );;
	font-weight: 700;
}

body#tinymce {
	padding: 1em;
	font-size: 100%;
}

a.linkinternal, a.linkexternal, a.linklock {
	white-space: nowrap;
}

a.linkinternal:before, a.linklock:before {
	content: "\f061\00a0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

a.linklock:after {
	content: "\00a0\f023";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

a.linkexternal:before {
	content: "\f35d\00a0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

div.spacer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3em;
	margin-bottom: 1em;
}
div.spacer span {
	width: 100%;
	border-top: 1px solid var( --coblau );
	height: 1px;
}

table.stats td, table.stats th {
	padding: 0px;
	padding-right: 10px;
	vertical-align: middle;
}
table.stats td {
	font-size: 0.9em;
}

table.stats span {
	display: block;
	float: left;
	font-size: 0.6em;
	opacity: .6;
}

table.stats span.statsweb {
	background-color: var( --cogruen );
}

table.stats span.statsintern {
	background-color: var( --corot );
}

#cc_div #c-txt button, #c-p-bn, #c-s-bn {
	background-color: #e0e0e0 !important;
	border: none;
	padding: 0 10px;
}

#mainlogo {
	filter: drop-shadow( 5px 5px 5px #808080 );
}
@media screen and (max-width: 1680px) {
	#bannertext {
	}
	#bannertext p {
		/* font-size: 3em;*/
	}
	#marquee {
	}
	#marquee p {
		font-size: 1.4em;
		margin-top: -0.3em;
	}
	#liveweather p span.livedata {
		font-size: 2vw;
	}
	div.wettercom div p span {
		font-size: 1vw;
	}
	div.wettercom div p span.wcData {
		bottom: -2vw;
	}
}
@media screen and (max-width: 1280px) {
	#bannertext {
	}
	#bannertext p {
		font-size: 5vw !important;
	}
	#marquee {
	}
	#marquee p {
		font-size: 1.4em;
		margin-top: -0.4em;
	}
	ul.contact {
		font-size: 0.9em;
	}
	#main .inner section p, #badinfo {
		font-size: 1.2em;
	}
	#main > .inner > section, #badinfo {
		padding: 1em 2em 0em 2em;
	}
	#liveweather p span.livedata {
		font-size: 3vw;
	}
	div.wettercom div p span {
		font-size: 1.3vw;
	}
	div.wettercom div p span.wcData {
		bottom: -2vw;
	}
}
@media screen and (max-width: 736px) {
	#badinfo div.row {
		display: block;
	}
	#badinfo div.row div {
		display: flex;
		width: calc( 100% - 1.5em ) !important;
		margin: 0 1.5em 1em 1.5em !important;
	}
	div.teaser span {
		font-size: 2em;
	}
	div.teaser:hover span {
		font-size: 2.5em;
	}
	#marquee {
		position: sticky;
	}
	#banneroverlay {
		margin-top: -2.67em;
	}
	#marquee p {
		font-size: 1.4em;
		margin-top: -0.3em;
	}
	ul.contact {
		font-size: 1.2em;
	}
	#bannertext {
	}
	#bannertext p {
		font-size: 5vw !important;
	}
	#main .inner section p, #badinfo {
		font-size: 1.2em;
	}
	#main > .inner > section, #badinfo {
		padding: 1em 1em 0em 1em;
	}
	#liveweather p span.livedata {
		font-size: 5vw;
		bottom: -5px;
	}
	#liveweather p span.livetime {
		display:none;
	}
	div.wettercom div p span {
		font-size: 2.5vw;
	}
	div.wettercom div p span.wcData {
		bottom: -3vw;
	}
	section.start h1 {
		font-size: 2.1em;
	}
}