/*** Kundenspezifische CSS ***/
 /*** Microsite - 800 Jahre Ringsheim - SSL 2025***/

/* ------------- Reset von Rändern und Abständen ---------------- */

html { box-sizing: border-box; margin: 0; padding: 0;}

*, ::before, ::after { box-sizing: inherit;  margin: 0; padding: 0;}

body { font-size: 100%; font-family: 'Myriad Pro Regular', sans-serif; color: #19171C;}

ul, ol, dl {     margin: 0 0 0 0; }

br.clearDvv { display: none;}


#loginout {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 99999;
}
#loginout:hover {
    background: url(../img/ico-key.gif) left top no-repeat;
}


/* ------------- Grundraster ---------------- */
 

.toplinks-wrapper { position: absolute; top: -1000px;}

.the-wrapper { max-width: 100%; width: 100%; padding-bottom: 140px;}

#quickLink1 { position: absolute; z-index: 2001; width: 100%;}

/* ------------- header ---------------- */
#header { position: fixed; max-width: 100%; width: 100%; margin: 0px auto; text-align: center; background: #fff; z-index: 2000;}
#header  .top-content { max-width: 1600px; margin: 0px auto; display: flex; justify-content: space-between;align-items: center; padding: 10px 0px 7px 0px; width: 100%;}
#header .top-content-inner:after { clear: both; display: block; content: '.'; float: none; height: 0; line-height: 0; font-size: 0; }
#header .toplinks ul { display: flex; list-style-type: none; flex-wrap: wrap;}
.home .logo img {	width: 200px; height: auto;}

.header-content { position: relative;top: 120px;z-index: 1999;/*! margin-bottom: 140px; */max-width: 1920px;margin: 0px auto;}
.header-content .image-inner {text-align: center;/*! max-width: 1920px; *//*! margin: 0px auto; */}
.header-content img { max-width: 100%;}


.seitenname { background: url(../img/headline-icon.png) no-repeat 0px 8px; padding-left: 60px; position:absolute; bottom: 40px; left: 130px; z-index: 1000; color: #fff; font-size: 56px; font-family: 'Myriad Pro Bold', sans-serif; text-transform: uppercase;}

/* Slider */

.bx-pager { display: none;}
.bx-wrapper {    margin-bottom: 0px !important; box-shadow: 0 0 0; border: 0px solid #fff; background: none; max-width:1920px !important; margin: 0px auto;}
.subcl {   padding: 0 0 0 0; }

.slider { position: relative;max-height: 541.4px;overflow: hidden;}

.slogan {
	background: url(../img/Ringsheim-Symbole.svg) no-repeat 0px 0px;
	width: 600px;
	height: 40%;
	color: #fff;
	position: absolute;
	bottom: 3vW;
	left: 11vW;
	z-index: 2000;
	/* padding: 35px 10px 35px 20px; */
	font-family: 'Myriad Pro Bold';
	line-height: 140px;
	/*backdrop-filter: blur(5px);*/
} 
.slogan { transition: all .8s ease-in-out; }

.slogan .boxChild:nth-child(1) {  font-size: 3.0vW; line-height: 3.2vW; }
.slogan .boxChild:nth-child(2) {  font-size: 5.2vW; line-height: 5.3vW;}
.slogan .boxChild:nth-child(3) {  font-size:  5.0vW;  line-height: 5.3vW; letter-spacing: 1.2rem; }



/* ------------- Main (umschliesst Navi und content) ---------------- */
#main { max-width: 1600px; margin: 0px auto; min-height: 300px; top: 140px;position: relative;padding-top: 40px; padding-bottom: 50px;}
#main .ym-column .ym-col2 { width: 100%; font-size: 18px; }


.ym-column { display: block; width: 100%; overflow: hidden;}
.ym-cbox {    padding: 0px 0px;}
.ym-gr {    float: none;    margin: 0 0 0 0px;}

#content .composedcontent-dvv-row { display: flex; justify-content: space-between; }
#content .composedcontent-dvv-row > div { float: none; flex-basis: 32%; width: auto;}
#content .composedcontent-dvv-row > .ym-g75 { float: none; flex-basis: 65%; width: auto;}
@media screen and ( max-width : 600px)   {
	#content .composedcontent-dvv-row > .ym-g75 { flex-basis: 100%;}
}

h2 { text-align: center;}
h2.basecontent-sub-heading  {text-transform: uppercase; margin-bottom: 40px; font-family: 'Myriad Pro Regular'; font-size: 36px;}

a { color: #19171C;}

/* Top-Links */

.top-links {  text-align: center;  padding: 20px 20px; background: #F2F2F3; display: flex; flex-wrap: wrap; justify-content: space-between;display: flex;}
.top-links .boxChild { flex-basis: 32%; font-size: 16px; padding: 48px 0px;overflow: hidden;}
.top-links .boxChild:hover { background-color: #FFDB00;;}
.top-links p a { text-decoration: none;  text-transform: uppercase; margin-top: 5px; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;} 
div.top-links p:hover  { margin-bottom: 0px; }
.top-links p i { margin-bottom: 5px;}
.top-links .dateiGroesse { display: none;}

/* Aktuelles */


.ui-accordion .ui-accordion-header  { margin-bottom: 20px;  background-color: #F2F2F3; border: 0px; outline: 0 !important; border-radius: 0px; padding: 5px 0px 5px 10px; position: relative;  }
.ui-accordion .ui-accordion-header  h2 { font-size: 22px; font-weight: normal; text-align: left;   }

.ui-accordion .ui-accordion-header.ui-accordion-header-active { background-color: #BEC601; margin-bottom: 10px;  }
.ui-accordion .ui-accordion-header a { display: inline-block;color: #000; font-family: 'Myriad Pro Semibold', sans-serif; padding-right: 40px;width: 95%;}
.ui-accordion .ui-accordion-header-icon { display: none;}
.ui-accordion .ui-accordion-header:after { font-weight: 300; position: absolute; right: 0px; top: 20px;content:"\f078"; width: 40px; height: 40px; color: #000; font-size: 130%;font-family: "Font Awesome 5 Pro"; transform: scaleX(1.4);}
.ui-accordion .ui-accordion-header.ui-accordion-header-active:after { content:"\f077"; }


.ui-accordion .ui-accordion-content { border: 0px;
    padding: 0.5em 0.6em;
    border-top: 0;
    overflow: auto;
}

.pm-pubDate { color: #000; font-size: 16px; font-family: 'Myriad Pro', sans-serif;}

.pm-content { /*! display: flex; */ flex-wrap: wrap; justify-content: space-between;}

.pm-content .pm-bild { flex-basis: 200px;float: right; display: none;}
.pm-content .pm-bild img { max-width: 200px;}
.pm-content .pm-anreisser { /*! flex-basis: calc(100% - 210px); */}


.alleAnzeigen p a { font-size: 20px; display: block; text-align: center; text-transform: uppercase; font-weight: bold; letter-spacing: 0.05rem; text-decoration: none;margin-top: 15px;}
.alleAnzeigen p a:after { font-family: "Font Awesome 5 Pro"; content:"\f054"; margin-left: 10px; text-decoration: none; transform: scaleY(1.67);  font-size: 80%;}

.pm-detaillink { display: block; margin-top: 10px; margin-bottom: 10px;}

/*** VK ***/

.basecontent-dvv-zm-vk  { background: #F2F2F3; margin-bottom: 20px;}
.basecontent-dvv-zm-vk  ul { list-style-type: none; padding: 0;}
.basecontent-dvv-zm-vk  ul li {  margin-left: 0px; padding: 18px 0px 18px 10px;}
.basecontent-dvv-zm-vk  ul li:hover { background-color: #BEC601;}
.basecontent-dvv-zm-vk  ul li .datum { font-size: 18px; font-family: 'Myriad Pro Semibold', sans-serif;}

section.zmOrt { display: inline;}
.zmOrt header { display: inline;}
.summary a { font-size: 20px; font-family: 'Myriad Pro Semibold', sans-serif;}
#okKalender1 { min-height: 375px !important;;}


/*** Footer ***/

#mainfooter { margin-top: 50px; border-top: 1px solid #D6D7D9; padding-top: 50px; }
#mainfooter .composedcontent-dvv-row { display: flex;justify-content: space-between;width: 100%;}
#mainfooter .composedcontent-dvv-row > div { float: none;flex-basis: 32%;}

/* -------------- Responsive Menu ----------------------- */


@media screen and ( min-width : 1023px)   {

#mm-my-menu { display: none !important; }
#hamburger  { display: none !important; }
}

@media screen and (max-width : 1022px)   {
#my-menu  { display: none; }
}



/* Hamburger */
#hamburger
{
	box-sizing: border-box;
	display: block;
	height: 43px !important;
	position: fixed;
	top: 28px !important;
	right: 0px !important;
  width: 40px !important;
	left: auto;
	z-index: 4000 !important; background: #BEC601 !important; 
}

#hamburger:before,
#hamburger:after,
#hamburger span
{
	background: #ffffff !important;
	content: '';
	display: block;
	width: 25px !important;
	height: 5px;
	position: absolute;
	left: 8px !important; border: 0px !important;
}
#hamburger:before { top: 10px; }
#hamburger span { top: 20px; }
#hamburger:after { top: 30px; }


/* Hamburger animation */
#hamburger:before,
#hamburger:after,
#hamburger span
{
	-webkit-transition: none 0.5s ease 0.5s;
	transition: none 0.5s ease 0.5s;

	-webkit-transition-property: transform, top, bottom, left, opacity;
	transition-property: transform, top, bottom, left, opacity;
}
html.mm-opening #hamburger:before,
html.mm-opening #hamburger:after
{
	top: 20px;	
}
html.mm-opening #hamburger span
{
	left: -50px;
	opacity: 0;
}
html.mm-opening #hamburger:before { transform: rotate( 45deg ); }
html.mm-opening #hamburger:after { transform: rotate( -45deg ); }





/* -------------- Responsive Formate ----------------------- */

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

.slogan { transform: scale(0.8); bottom:1vW;}
.slogan .boxChild:nth-child(1) {  font-size: 4.3vW; line-height: 4.3vW; }
.slogan .boxChild:nth-child(2) {  font-size: 7.5vW; line-height: 7.3vW; }
.slogan .boxChild:nth-child(3) {  font-size:  7.0vW;  letter-spacing: 1.0rem; line-height: 7.3vW; }
	
#main {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    margin: 0px auto;
}	
	
	
}


@media screen and ( max-width : 1100px)   {
.pm-content .pm-bild { flex-basis: 100%;}
.pm-content .pm-bild img { max-width: 100%;}	
.pm-content .pm-anreisser { flex-basis: 100%;}

	
.top-links .boxChild {
    flex-basis: 49%;
    font-size: 16px;
    padding: 48px 0px;
    overflow: hidden;

}
	
}

@media screen and ( max-width : 960px)   {
	
header { width: 90%;}
header .toplinks-wrapper { display: none;}
	
.slogan  {padding: 3vW 2.5vW; transform: scale(1.0); width: 26vW	}
.slogan .boxChild:nth-child(1) {  font-size: 3.8vW; line-height: 4.3vW; }
.slogan .boxChild:nth-child(2) {  font-size: 6.5vW; line-height: 7.3vW; }
.slogan .boxChild:nth-child(3) {  font-size:  6.3vW;  letter-spacing: 1vW; line-height: 7.3vW; }	
	
	
	
#main { width: 90%;}	
#content .composedcontent-dvv-row { flex-wrap: wrap; }

#content .composedcontent-dvv-row > div {   flex-basis: 100%; margin-bottom: 40px; }	
.pm-content .pm-bild { flex-basis: 325px;}
.pm-content .pm-bild img { max-width: 100%;}	
.pm-content .pm-anreisser { flex-basis: calc(100% - 340px);}	
	
	
footer { width: 90%;}	


.mm-navbar { height: auto; }

/* ab hier wird die Höhe der unteren Navbars vom mmenu definiert. Die untere ist die "bottom-1". Dort wird mittels jquery das div "toplinks" aus der top-custom.vm wiederholt. */	
.mm-navbar-bottom-2 {     bottom: 80px; }
.mm-navbar-bottom-1 ul { list-style-type: none;}	
.mm-navbar-bottom-1 ul li { list-style-type: none; display: inline-block; font-size: 0.9rem;}	
}


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

#quickLink1 li.right { display: none;}
.powered{ display: none;}
	
}


@media screen and ( max-width : 600px)   {
.pm-content .pm-bild { float: none; width: 100%;}
.pm-content .pm-bild img { max-width: 100%; width: 100%;}	
.pm-content .pm-anreisser { flex-basis: 100%;}
.top-links { display: flex; flex-wrap: wrap;}
.top-links > div.boxChild { flex-basis: 50%; width: auto; max-width: none;}	
	
}