/************************** Navigation *****************************************

				00. Typografie
				01. Design Elemente
				02. Buttons + Links
				03. Zahlen Icon
				04. Stimmen Swiper
				05. Events
				06. Akkordeon
				07. Parteien Label
				08. SocialFeed
				09. Navi inkl. Mobile
				10. Downloads
				11. Formulare
				12. Komitee
				13. Cookie-Banner
				20. Footer

********************************************************************************/



/*************************** 00. Typografie ************************************/
/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/files/cto_layout/fonts/open-sans-v44-latin/open-sans-v44-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/files/cto_layout/fonts/open-sans-v44-latin/open-sans-v44-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

h1, .h1, h2, .h2, h3, .h3 {
  margin-bottom: 15px;
}

h2.bold {
  font-weight: 700;
}

a{
  color: var(--accentColor);
}

#footer a {
  color: var(--customColor1) !important;
}

.ce_text.bold p {
  font-weight: 800;
}



/*************************** 01. Design Elemente *******************************/
/* abgeschrägter Hintergrund */
.schraege-flaeche .attributes:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--customColor1);
  top: -5%;
  left: -500px;
  padding-bottom: 20%;
  z-index: -1  ;
 /*  clip-path: polygon(
    0% 4%,     
    100% 0%,   
    100% 100%, 
    0% 96%
  );*/
 
}

.align-column .attributes,
.align-column.right .attributes .same-height-wrap{
  display: flex;
  gap: 15px;
}

.align-column.right .attributes,
.align-column.right .attributes .same-height-wrap{
  justify-content: flex-end;
  align-items: end;
}

@media (max-width: 768px) {
  .align-column .attributes {
  flex-direction: column;
  gap: 0px;
}
  .align-column.mobile-row .attributes {
  flex-direction: row;
  gap: 15px;
}
}

/* Label Header */
@media only screen and (min-width: 768px) {
    .stickyheader .header.cloned {
        line-height: 70px;
        max-height: 69px;
    }
    
    .header.cloned .smartmenu .smartmenu-trigger {
    height: 67px;
    }
}

@media only screen and (max-width: 767px) {
    .header .inside {
        height: 39px;
    }
}



/******************************** 02. Buttons + Links **********************************/
.ce_hyperlink a{
  border-radius: 100px;
  line-height: 22px !important;
}

.ce_fancylink.style1 .link_text {
  font-weight: 700;
}

p a {
  font-weight: 700;
}


/****************************** 03. Zahlen Icon ********************************/
.zahlen-icon .column .ce_image{
  padding-right: 45px;
}



/*************************** 04. Stimmen Swiper ********************************/
.stimmen-swiper h3 {
  font-size: 2rem;
}



/***************************** 05. Events **********************************/
.mod_eventlist h3.event-month {
  margin-top: 50px;
}

.mod_eventlist .header {
  background-color: transparent;
  padding: 0px;
  color: var(--secondColor);
  font-weight: 400;
}

.mod_eventlist .header .day,
.mod_eventlist .header .date {
  font-weight: bold;
}

.mod_eventlist .location {
  margin-bottom: 0;
}

.mod_eventlist .location:before {
    font-family: "FontAwesome";
    content: "\f124";
    text-indent: 0;
    display: inline-block;
    position: relative;
    left: 0;
    margin-right: 5px;
    width: 20px;
}

/*.mod_eventlist {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}*/

.mod_eventlist .event-block-full {
  background-color: var(--customColor1);
  padding: 20px;
  margin-bottom: 20px;
}

.mod_eventlist .event h3, 
.mod_eventlist .event .h3 {
  font-size: 1.6rem;
  font-weight: 400;
}

.mod_eventlist .event_geschlossen {
  color: var(--secondColor);
}

.mod_eventlist .event_geschlossen p:before {
    font-family: "FontAwesome";
    content: "\f06a";
    text-indent: 0;
    display: inline-block;
    position: relative;
    left: 0;
    margin-left: 1px;
    margin-right: 5px;
    width: 20px;
}

.mod_eventlist p.more {
  margin-bottom: 0;
  margin-top: 10px;

}

.more a {
  transition: 0.3s ease;
}

.more a:hover {
  color: var(--secondColor);
}

.ics-export {
  border-bottom: solid 1px;
}

.event-links {
  display: flex;
  flex-direction: row;
  gap: 35px;
  margin-top: 10px;
}

@media only screen and (max-width: 767px) {
    .more a {
        padding: 0px;
        padding-bottom: 2px;
    }
    .event-links{
      gap: 20px;
    }
}


/* Reader */
.mod_eventreader .info {
  text-transform: none;
  color: var(--accentColor);
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
  font-weight: 700;
  font-size: var(--h5-fontSize);
}

.mod_eventreader .location {
  font-weight: 400;
}

.mod_eventreader .info:before,
.mod_eventreader .location:before {
  display: none;
}





/***************************** 06. Akkordeon **********************************/
.content-accordion {
	border-bottom: 0px;
}

.content-accordion .handorgel__header .handorgel__header__button {
	background-color: transparent;
	/*border-top: solid 1px var(--accentColor);*/
	border-top: 0;
	border-bottom: solid 1px var(--secondColor);
	
	color: var(--accentColor);
	font-size: var(--h5-fontSize);
	line-height: 1.3;
	
	font-family: 'Open Sans';
	font-weight: 700;
}

.content-accordion h4 {
  /*border-bottom: solid 1px;*/
  /*padding-bottom: 15px;*/
  padding-top: 30px;
  margin-bottom: 10px;
}


/* Ausnahme: der *erste* Accordion-Header innerhalb jedes .content-accordion NIE Border oben */
.content-accordion .handorgel__header:first-child .handorgel__header__button {
    border-top: none !important;
}

.content-accordion .handorgel__header .handorgel__header__button:hover{
	color: var(--secondColor);
	border-bottom: solid 1px var(--secondColor) !important;
}

.content-accordion .handorgel__header .handorgel__header__button:active {
  border-bottom: 0px !important;
}

.content-accordion .handorgel__header .handorgel__header__button:hover:before{
	background-color: var(--secondColor);
	border-bottom: solid 1px var(--secondColor);
}

.content-accordion .handorgel__header .handorgel__header__button{
	padding: 20px 0px;
}

.content-accordion .handorgel__content__inner {
	padding: 0px 0px 20px 0px;
}

.content-accordion .handorgel__header .handorgel__header__button:before {
	content: "";
	width: 30px;
	height: 30px;
	float: right;
    clear: both;
    display: inline-block;
    margin-left: 15px;
    padding: 0;
    text-align: center;
    background-color: black;
    transition: rotate ease .8s;
    
	mask: url("/files/Dontao_Scognamiglio/04_Icons/angle-down-regular-full.svg") no-repeat center;
	-webkit-mask: url("/files/Dontao_Scognamiglio/04_Icons/angle-down-regular-full.svg") no-repeat center;
}


/*schönere Animation*/
.content-accordion .handorgel__content--open {
	transition: height .5s ease;
}

.content-accordion .handorgel__content__inner {
	opacity: 1;
}

.content-accordion .handorgel__header.handorgel__header--open .handorgel__header__button {
	color: var(--accentColor);
}

.content-accordion .handorgel__content.handorgel__content--open .handorgel__content__inner .ce_text figure {
	padding-bottom: 25px;
}

.content-accordion .handorgel__header.handorgel__header--open .handorgel__header__button:before {
	transform: rotate(180deg);
	background-color: var(--accentColor);
}

@media (max-width: 767px) {
	.content-accordion .handorgel__header .handorgel__header__button,
	.content-accordion .handorgel__header .handorgel__header__button:before{
		font-size: 20px;
		
	}
	.content-accordion .handorgel__header .handorgel__header__button{
		padding: 20px 10px;
	}
	.content-accordion .handorgel__content__inner {
		padding: 0 10px;
	}
}

.content-accordion .handorgel__header button.handorgel__header__button:hover{
	border-top: solid 1px black;
}

.content-accordion .handorgel__content {
	border-top: solid 1px rgba(0,0,0,0);
	background: transparent;
}

/* Akkordeons Mandate (Links) */
#mandate .handorgel__content__inner p a {
  background: var(--secondColor);
	border-color: var(--secondColor);
	border-radius: 100px;
	padding-left: var(--hyperlink-medium-padding-left);
	padding-right: var(--hyperlink-medium-padding-right);
	padding-top: var(--hyperlink-medium-padding-top);
	padding-bottom: var(--hyperlink-medium-padding-bottom);
	font-size: var(--hyperlink-medium-font-size);
	color: #fff !important;
}

#mandate .handorgel__content__inner p a:hover {
	opacity: 0.8;
}

#mandate .handorgel__content__inner p {
  margin-bottom: 20px;
}

/**************************** 07. Parteien Label *******************************/
.container-parteilabel .attributes{
  flex-wrap: wrap;
}

.parteien-label {
  margin-bottom: 0px;
  padding: 15px 5px 15px 5px ;
}


/****************************** 08. Social Feed ********************************/
.linkedin-feed {
  display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.linkedin-feed {
    width: 100%;
    margin-inline: auto;
}

.linkedin-feed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
}


/****************************** 09. Navi ********************************/
.header .mainmenu ul li a.highlight span {
  background-color: var(--secondColor);
  border-color: var(--secondColor) !important;
  border-radius: 100px;
  padding-left: var(--hyperlink-medium-padding-left) !important;
	padding-right: var(--hyperlink-medium-padding-right) !important;
}

#mmenu .mod_navigation ul li a.highlight {
  background-color: var(--secondColor);
  border-color: var(--secondColor) !important;
  border-radius: 100px;
  padding-top: var(--hyperlink-medium-padding-top);
  padding-bottom: var(--hyperlink-medium-padding-bottom);
}

.smartmenu-content ul li a.highlight {
  background-color: var(--secondColor);
  border-color: var(--secondColor) !important;
  border-radius: 100px;
	padding-left: 55px;
	padding-right: var(--hyperlink-medium-padding-right) !important;
}

.smartmenu-content ul li.highlight{
  margin-left: -55px;
}




.smartmenu-content .mod_navigation a.active {
  border-bottom: 0;
  font-weight: 700;
}

/* Mobile Menu */
#mmenu_middle, .mobile_vertical {
  overflow: visible !important;
}

#mmenu .mod_navigation ul li.highlight {
  transform: translateX(-10vw);
}

#mmenu .mod_navigation ul li a.highlight {
    padding: 5px;
    padding-left: 10vw;
    border-radius: 0px 100px 100px 0px;
    margin-top: 10px;
    max-width: 60%;
}

/****************************** 10. Downloads ********************************/
#presse .ce_downloads a {
  color: var(--secondColor);
  font-size: 13px;
}

#presse .ce_downloads a span.size {
  display: none;
}

#presse .ce_downloads li {
  border-bottom: 0;
  margin-bottom: 25px;
}



/****************************** 11. Formulare ********************************/
.widget-radio fieldset {
	display: flex;
	flex-direction: row;
	gap: 15px;
	margin-top: 10px;
	border: 0px;
	padding-left: 0px;
}

form.style5 input, form.style5 select, form.style5 textarea {
  border-radius: 0;
}

form fieldset {
  border: 0;
}

.bestaetigungs-checkbox label,
.bestaetigung-nl label{
	font-weight: 400;
	font-size: .9rem;
	line-height: 25px;
}

form div.bestaetigungs-checkbox {
    margin-bottom: 0px;
}

button.submit {
  background: var(--secondColor);
}

/* Formular Mithilfe */
form div.checkbox-mithilfe {
	margin-bottom: 5px;
}

form div.checkbox-mithilfe-weitere span {
	margin-bottom: 10px;
}

form fieldset.checkbox-mithilfe,
form fieldset.checkbox-mithilfe-weitere,
form fieldset.bestaetigungs-checkbox-mithilfe {
	padding: 0px;
}

form fieldset.bestaetigungs-checkbox-mithilfe {
	margin-top: 10px;
}

.widget-explanation h5 {
  margin-bottom: -20px;
}

form.style5 input[type="checkbox"],
form.style5 input[type="radio"]  {
  padding: 5px;
}

/****************************** 12. Komitee ********************************/
.ce_authorbox {
    overflow: visible;
    position: relative;
}

.ce_authorbox_inside {
    padding-top: 25px;
}

.ce_authorbox_inside .image_container {
    width: 30%;
    margin: 0 40px 10px 0;
}

.ce_authorbox_inside .subtitle {
  font-family: "Open Sans";
	font-weight: 400;
	line-height: 1.4rem;
  font-size: 1.1rem;
  font-style: normal;
	
	background-color: var(--secondColor);
  color: #ffffff;
    
  display: inline-block;
  padding: 8px 15px;
  margin: 0;
  margin-right: 20px;
    
  position: absolute;
  top: -15px;
  left: 35%;
    
  /*transform: skewY(-3deg);
  transform-origin: center left;*/
    
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease;
}

.ce_authorbox_inside .name {
	font-weight: 400;
	font-style: normal;
	padding-top: 40px;
	font-size: 1.6rem;
}

.ce_authorbox_inside p {
    margin-top: 10px;
}

@media (min-width: 768px) and (max-width: 1024px)  {
    .ce_authorbox_inside .image_container,
    .ce_authorbox.komitee-first .ce_authorbox_inside .image_container {
        top: 0px;
    }
    
    .ce_authorbox.komitee-first .ce_authorbox_inside .image_container {
          top: -25px;
    }
    .ce_authorbox.komitee-first.ce_authorbox_inside {
        padding-top: 25px;
    }
    .ce_authorbox.komitee-first .ce_authorbox_inside {
    padding-top: 55px;
    }
}

@media (max-width: 768px) {
    .ce_authorbox_inside .image_container {
        width: 100%;
    }
    .ce_authorbox_inside {
        padding-top: 50px;
    }
    
    .ce_authorbox_inside .name {
        padding-top: 310px;
    }
    
    .ce_authorbox_inside .image_container,
    .ce_authorbox.komitee-first .ce_authorbox_inside .image_container{
        top: 0;
    }
    .ce_authorbox_inside .subtitle {
         left: -5px;
    }
}


/******************************** 13. Cookie-Banner ***********************************/
.mod_privacy_optin_slim .privacy_inside {
  background: var(--secondColor);
}

.mod_privacy_optin_slim * {
	font-family: 'Open Sans';
	line-height: 23px;
  font-size: 15px;
}

/******************************** 20. Footer ***********************************/
#footer .ce_iconbox.default i {
  font-size: 2rem;
}

/* EVP-Logo soll im Footer nur auf der Politiker-Seite erscheinen*/
#footer .logo-evp {
  display: none;
}
body.show-logo-evp #footer .logo-evp {
  display: inline-block;
}

#bottom .inside .left a {
	margin-right: 0px;
	font-weight: 700;
}

#bottom .inside a:hover {
	color: var(--accentColor);
}

/********************************* RESPONSIVE ***********************************/
/*******************************************************************************/


/*---------------------------------TABLET--------------------------------------*/
@media (max-width: 1024px) {
/***************************** 05. Eventliste **********************************/
  .mod_eventlist {
    grid-template-columns: 1fr 1fr;
  }
/****************************** 08. Social Feed ********************************/
  .linkedin-feed {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/*---------------------------------MOBILE--------------------------------------*/
@media (max-width: 768px) {

/*************************** 01. Design Elemente *******************************/
.mod_article:not(.fullwidth) > .container {
  padding-left: 0px;
  padding-right: 0px;
}

.schraege-flaeche .attributes:before {
  padding-bottom: 0px;
}

.schraege-flaeche .attributes h2 {
  padding-top: 10%;  
}
 /****************************** 03. Zahlen Icon *******************************/
  .zahlen-icon .column .ce_image{
    padding-right: 15px ;
  } 
  
/*************************** 04. Stimmen Swiper ********************************/
  .stimmen-wrap  {
    padding: 15% 5% !important;
  }
  
  .stimmen-wrap h5 {
    padding-top: 25px;
  }
  
  .stimmen-swiper {
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-top: 35px;
  }
/***************************** 05. Eventliste **********************************/
  .mod_eventlist {
    grid-template-columns: 1fr;
  }
/**************************** 07. Parteien Label *******************************/
  .container-parteilabel .attributes {
    flex-direction: row;
    gap: 15px;
  }
/****************************** 08. Social Feed ********************************/
  .linkedin-feed {
    grid-template-columns: 1fr ;
  }
  
}