/* Farben-Variablen vergeben */
:root {
	--tiefblau: #003B76;
	--dunkelblau: #37517A;
	--schriftzugblau: #5B7E9E;
	--schriftzugblau-transparenz: #5b7e9ed6;
	--seehundhellblau: #BFD5E0;
	--logotuerkis: #55C5CF;
	--tabellegrau: #E0E5EC;
	--tabellegrau2: #D3DFEE;
	--weiss1: #FFFFFF;
	--weiss2: #DDDDDD;
	--schwarz: #000000;
	--kalenderHGgrau: #AAAAAA;
	--rahmenblau: #003B76;
	--schriftgroesse: 12pt;
	--schattenbox: #1e355054;
    --seestern: #684070;
    --bewertungsrot: #e80543;
    --breite: 75%;
}

/* Preloader anpassen */
.preloader {
	background: var(--dunkelblau);
}

.preloader:before {
	border-color: transparent var(--rahmenblau);
}

.preloader:after {
	border-color: transparent transparent transparent var(--rahmenblau);
}

.transition-overlay {
	background: var(--dunkelblau);
}

.preloader .inner .percentage {
	opacity: 1;
	font-size: 5vw;
}

/* Headerstyle */
.HeaderFONT {
	font-family: serif;
}

.HeaderTEXT {
	font-family: Montserrat;
	text-align: center;
	color: var(--tiefblau);
}

.HeaderSLOGAN {
	text-align: center;
	color: var(--tiefblau);
	font-size: 20px;
	font-weight: 700;
	font-family: 'Open Sans';
}

.HeaderOSTSEE {
	font-weight: 700;
}

.HeaderEINLEITUNG {
	margin-left: auto;
	margin-right: auto;
	color: var(--weiss1);
}

.HeaderEINLEITUNG h1 {
	color: var(--weiss1);
}

.HeaderEINLEITUNG p {
	color: var(--weiss1);
}
.HeaderLogo {
	margin: 0 auto 0 auto;
    padding: 10px 0 10px 0;
	width: 70%;
}

/* Adresse */
.HeaderContainer0 {
	color: var(--weiss1);
	font-size: 15px;
	margin-top: 5px;
	text-align: center;
}

.Robbe {
	position: relative;
	top: 0px;
}

.Robbe p {
	text-align: center;
}

/* Headertext oben */
.HeaderContainer1 {
	font-size: 22px;
	margin-top: 11px;
	color: var(--weiss1);
	text-align: center;
}

/* Telefonnumer */
.HeaderContainer2 {
	text-align: center;
	margin: -5px auto 5px auto;
	max-width: 250px;
}

.Hoerer {
	position: relative;
	top: 10px;
	right: 0px;
}

.Nummer {
	font-size: 23px;
	color: var(--weiss1);
	margin-top: 5px;
}

.RufNr {
	text-align: center;
}

.NeueRufnummer {
	color: var(--weiss1);
	margin-top: 5px;
	font-family: 'Montserrat';
	text-align: center;
}

/* Telefonnummer [Effekt]*/
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
}

.symbolpulse {
	animation-delay: 1s;
	animation-iteration-count: infinite;
}

#Parallax1 {
    height: 400px;
}

/* Fonts und Headlineschriften*/
ul,
li,
p,
a {
	font-family: 'Open Sans';
	font-style: normal;
	line-height: 1.5;
  	font-size: var(--schriftgroesse);
    text-align: left;
}

.headline2,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Montserrat';
  	text-align: left;
}

#maincontent a:hover, #maincontent a:focus {
    color: var(--logotuerkis);
}

/* Menu CSS Styles */
.mod-menu {
	font-family: "Roboto", Arial, sans-serif;
	text-align: right;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

.mod-menu * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.mod-menu li {
	display: inline-block;
	list-style: outside none none;
	margin: 0.5em 1em;
	padding: 0;
}

.mod-menu a {
	padding: 0.3em 0;
	color: var(--weiss1);
	opacity: 0, 5;
	position: relative;
	text-decoration: none;
	display: inline-block;
}

.mod-menu a:before {
	height: 3px;
	position: absolute;
	content: '';
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	background-color: var(--logotuerkis);
	width: 0;
}

.mod-menu a:after {
	height: 3px;
	position: absolute;
	content: '';
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	background-color: var(--logotuerkis);
	width: 0;
}

.mod-menu a:before {
	top: 0;
	left: 0;
}

.mod-menu a:after {
	bottom: 0;
	right: 0;
}

.mod-menu a:hover,
.mod-menu .current a {
	color: var(--weiss1);
}

.mod-menu a:hover:before,
.mod-menu .current a:before,
.mod-menu a:hover:after,
.mod-menu .current a:after {
	width: 100%;
}

#HorizontalesMenue ul.menu > li > a,
#HorizontalesMenue ul.menu > li > span.separator,
#HorizontalesMenue ul.nav > li > a,
#HorizontalesMenue ul.nav > li > span.separator,
#HorizontalesMenue ul.maximenuck > li > a,
#HorizontalesMenue ul.maximenuck > li > span.separator {
	display: block;
	color: var(--schwarz);
	margin: 2px;
	margin-right: 10px;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
	font-size: 15px;
}

#HorizontalesMenue ul.menu > li.active > a,
#HorizontalesMenue ul.menu > li.active > span.separator,
#HorizontalesMenue ul.nav > li.active > a,
#HorizontalesMenue ul.nav > li.active > span.separator,
#HorizontalesMenue ul.maximenuck > li.active > a,
#HorizontalesMenue ul.maximenuck > li.active > span.separator {
	color: var(--tiefblau);
}

/* Parallax-Video */
.videobackground {
	min-width: 100%;
	position: fixed;
	top: 200;
	z-index: -9999;
}

/* Wellengrafik Startseite */
#OstseeWelle {
	position: relative;
	top: 11px;
	left: 0;
}

/* Hovereffekt der Fotos (C) UH2023 */
/* Picturesize: 350 x 350 */
*.Pics {
  	max-width: 100%;
	max-height: 100%;
	display: block;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

*.Pics:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.StFerienparkPic {
	width: 350px;
  	height: 230px;
	box-shadow: 0 0 10px var(--schattenbox);
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}

.HoverPic img {
    display: block;
}

.PicsCont  {
    width: 330px;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	box-shadow: 0 0 10px var(--schattenbox);
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}

.PicTxt p {
    text-align: center;
}
.PicTxt h1 {
    text-align: center;
    font-size: 30px;
}

*.PicsCont1:hover .PicTxt1,
*.PicsCont2:hover .PicTxt2,
*.PicsCont3:hover .PicTxt3,
*.PicsCont4:hover .PicTxt4,
*.PicsCont5:hover .PicTxt5,
*.PicsCont6:hover .PicTxt6,
*.PicsCont7:hover .PicTxt7,
*.PicsCont8:hover .PicTxt8,
*.PicsCont9:hover .PicTxt9,
*.PicsCont10:hover .PicTxt10,
*.PicsCont11:hover .PicTxt11,
*.PicsCont12:hover .PicTxt12 {
	visibility: visible;
	opacity: 1;
}

*.PicsCont1 .PicTxt1,
*.PicsCont2 .PicTxt2,
*.PicsCont3 .PicTxt3,
*.PicsCont4 .PicTxt4,
*.PicsCont5 .PicTxt5,
*.PicsCont6 .PicTxt6,
*.PicsCont7 .PicTxt7,
*.PicsCont8 .PicTxt8,
*.PicsCont9 .PicTxt9,
*.PicsCont10 .PicTxt10,
*.PicsCont11 .PicTxt11,
*.PicsCont12 .PicTxt12
{
	visibility: hidden;
	opacity: 0;
	transition: all .4s;
}

/* iframe */
.iframeck {
	padding-bottom: 90% !important;
}

/* CSS fuer alle Bilder */
.Pics {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.PicTxt {
	width: 100%;
	position: absolute;
	top: 20px;
	left: 0px;
	text-align: center;
    padding: 8px;
}

.PicTxt1, .PicTxt2, .PicTxt3, .PicTxt4, .PicTxt5, .PicTxt6, .PicTxt7, .PicTxt8, .PicTxt9, .PicTxt10, .PicTxt11, .PicTxt12 {
	background-color: var(--schriftzugblau-transparenz);
	color: var(--weiss1);
}

/* Belegungsplan */
.itcs_calendar_cal {
	margin: 10px 10px 0 10px;
}

.datepicker table tr td.today {
	background-color: var(--kalenderHGgrau);
	border-color: var(--rahmenblau);
}

.itcs_calendar .legend p.color0::before {
	background-color: var(--kalenderHGgrau);
}

.today:hover,
.today:active {
	color: var(--schwarz);
	 !important;
	background-color: var(--kalenderHGgrau);
	 !important;
	border-color: var(--rahmenblau);
}

/* Saisonpreise */
.Saisonpreise {
	margin: 20px 0 0 20px;
}

table.tg {
	box-shadow: 0 0 10px var(--schattenbox);
}

.tg {
	border-collapse: collapse;
	border-spacing: 0;
}

.tg td {
	font-family: Arial, sans-serif;
	font-size: 14px;
	padding: 10px 5px;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	word-break: normal;
	text-align: center;
	font-size: var(--schriftgroesse_P);
	color: var(--schwarz);
	line-height: 30px;
}

.tg th {
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	padding: 10px 5px;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
	word-break: normal;
	font-size: var(--schriftgroesse_P);
	color: var(--schwarz);
	line-height: 30px;
}

.A_hg {
	background-color: var(--tabellegrau);
}

.B_hg {
	background-color: var(--tabellegrau2);
}

.C_hg {
	background-color: var(--tabellegrau);
}

.D_hg {
	background-color: var(--tabellegrau2);
}

.E_hg {
	background-color: var(--tabellegrau);
}

/* Entfernungen */
.Lining2_2, .Lining2_1 {
    width: 90%;
}
.Lining2_3 {
    width: 95%;
}

/* Kontaktformular */
.Flaschenpost {
	min-width: auto;
	min-height: 500px
}

/* Kontaktformular - AdresseContainer */
#TxtCont {
	margin: 20px 0 10px 0;
	padding: 10px;
	letter-spacing: 1.1px;
	line-height: 1em;
	color: #202020;
    width: 100% !important;
}

#LogoTxtCont {
	width: 60%;
	margin: 10px auto 10px auto;
}

#AdrTextCont {
	width: 60%;
	margin: 0 auto 0 auto;
}

#GbrTxtCont {
	font-weight: bold;
	text-align: center;
}

p#HeadTxtCont {
	font-size: 16pt;
	text-align: center;
	font-weight: bold;
	margin-top: 20px;
}

#TxtAnker,
#TxtPhone,
#TxtFax,
#TxtMobil,
#TxtMail {
	float: left;
	margin-right: 10px;
}

p#TxtMobil {
	margin-left: 3px;
}

#AdrBlock,
#PhoneBlock,
#FaxBlock,
#MobilBlock,
#MailBlock {
	margin-left: 27px;
}

#PrivatTxt {
	text-align: center;
	font-weight: bold;
	line-height: 1em !IMPORTANT;
	margin-bottom: 10px;
}

.datepicker {
	background-color: #e0e5ec;
}

#maincontent a {
	color: #004b96;
	text-decoration: underline;
}

#OstseeWelle2 {
	position: relative;
	top: 430px;
	left: 0px;
}

/* Social Media-Icons */
.pbck_social_icons.inner {
	width: 110px;
	margin-left: auto;
	margin-right: auto;
}

/* Circle-Images - Hovereffect */
.PicsCircleCont {
	height: 150px;
	width: 150px;
	overflow: hidden;
	box-shadow: 0 0 10px var(--schattenbox);
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}

*.PicsCircle {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

PicsCircle {
	width: 150px !important;
	height: 150px !important;
}

*.PicsCircle:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

*.PicsCircle:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.rund {
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
}

/* Das sind wir */
#OstseeWelle3 {
	position: relative;
	top: 325px;
	left: 0px;
    min-height: 400px;
}

/* Polaroid-Effect */
.polaroid {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);
  
}
.polaroid > img{
  max-width: 100%;
  height: auto;
}
.caption {
  font-size: 1.8rem;
  text-align: center;
  line-height: 2em;
  color: var(--dunkelblau);
}

.PolaroidImages {
	margin-left: auto;
    margin-right: auto;
    width: 430px;
}

.item {
  margin-bottom: 20px;
  width: 100%;
  display: inline-block;
  margin-top: 2rem;
  filter: grayscale(100%);
}
.item .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) {
  transform: scale(0.8, 0.8) rotate(5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
  transform: rotate(6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+2) {
  transform: scale(0.8, 0.8) rotate(-5deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
  transform: rotate(-6deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4);
}
.item:nth-of-type(4n+4) {
  transform: scale(0.8, 0.8) rotate(3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
  transform: rotate(4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  right: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:nth-of-type(4n+3) {
  transform: scale(0.8, 0.8) rotate(-3deg);
  transition: all 0.35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
  transform: rotate(-4deg);
  height: 20%;
  width: 47%;
  bottom: 30px;
  left: 12px;
  box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3);
}
.item:hover {
  filter: none;
  transform: scale(1, 1) rotate(0deg) !important;
  transition: all 0.35s;
}
.item:hover .polaroid:before {
  content: '';
  position: absolute;
  z-index: -1;
  transform: rotate(0deg);
  height: 90%;
  width: 90%;
  bottom: 0%;
  right: 5%;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
  transition: all 0.35s;
}

/* Bewertungen */
.BewertungCont {
	width: 250px;
	margin-top: 20px;
}
.BewertungTxt {
    margin: 10px auto 10px auto;
    width: 300px;
    font-size: 12pt;
}
.BewertungName {
    text-align: right;
}
.Stars {
  	margin: 0 auto 0 auto;
    width: 125px;
    color: var(--bewertungsrot);
}
.Fusszeile {
    margin: 20px auto 0 auto;
    text-align: center;
    width: 40%;
}
.FusszeileWhite {
    margin: 10px auto 20px auto;
    text-align: center;
    width: 40%;
}
.DSGV {
	width: var(--breite);
	margin: auto;
	padding: 20px 0 30px 0;
}

.DSGV h2, h3, h4 {
	margin: 30px 0 10px 0;
}

.DSGV h1 {
	margin: 0 0 10px 0;
}

/* Fontzuweisung */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/montserrat/montserrat-v24-latin-regular.eot');
	/* IE9 Compat Modes */
	src: local(''), url('../fonts/montserrat/montserrat-v24-latin-regular.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('../fonts/montserrat/montserrat-v24-latin-regular.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('../fonts/montserrat/montserrat-v24-latin-regular.woff') format('woff'),
		/* Modern Browsers */
		url('../fonts/montserrat/montserrat-v24-latin-regular.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('../fonts/montserrat/montserrat-v24-latin-regular.svg#Montserrat') format('svg');
	/* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/montserrat/montserrat-v24-latin-600.eot');
	/* IE9 Compat Modes */
	src: local(''), url('../fonts/montserrat/montserrat-v24-latin-600.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('../fonts/montserrat/montserrat-v24-latin-600.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('../fonts/montserrat/montserrat-v24-latin-600.woff') format('woff'),
		/* Modern Browsers */
		url('../fonts/montserrat/montserrat-v24-latin-600.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('../fonts/montserrat/montserrat-v24-latin-600.svg#Montserrat') format('svg');
	/* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/opensans/open-sans-v29-latin-regular.eot');
	/* IE9 Compat Modes */
	src: local(''), url('../fonts/opensans/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('../fonts/opensans/open-sans-v29-latin-regular.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('../fonts/opensans/open-sans-v29-latin-regular.woff') format('woff'),
		/* Modern Browsers */
		url('../fonts/opensans/open-sans-v29-latin-regular.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('../fonts/opensans/open-sans-v29-latin-regular.svg#OpenSans') format('svg');
	/* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/opensans/open-sans-v29-latin-700.eot');
	/* IE9 Compat Modes */
	src: local(''), url('../fonts/opensans/open-sans-v29-latin-700.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('../fonts/opensans/open-sans-v29-latin-700.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('../fonts/opensans/open-sans-v29-latin-700.woff') format('woff'),
		/* Modern Browsers */
		url('../fonts/opensans/open-sans-v29-latin-700.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('../fonts/opensans/open-sans-v29-latin-700.svg#OpenSans') format('svg');
	/* Legacy iOS */
}