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

    * 00 Globales
      - Schrift
      - Autogrid Mobile umgekehrte Reihenfolge
      - Elemente nebeneinander
      - Aufzählungspunkte
      - Padding von der Paddingklasse m über die Gridspalte besser responsive
      - Eclipse display none
      - Zahlen Icon auf Mobile
      
    * 01 Header  
    * 02 Design Elemente
    * 03 Nachrichtenliste
    * 04 Testimonials
    * 05 Nachrichtenarchiv
    * 06 Formulare
    * 07 Lebenslauf
    * 08 Komitee
    * 09 Über mich
    
    * 20 Footer
    

------------------------------------------------------------------------------*/

/*********************************00 Globales**********************************/
/*Schrift*/
body h1 {
  margin-bottom: 0px;
}

.txt-color-second h1 {
  overflow: visible;
}

@media (max-width: 767px){
  .ce_text.format-p-medium p, .ce_text.format-p-medium ul, .ce_text.format-p-medium ol {
    font-size: 19px;
    line-height: 32px;
  }
} 
/*Autogrid Mobile umgekehrte Reihenfolge*/
@media (max-width: 767px){ 
	.mobile-grid-reverse {
		display: flex;
    flex-direction: column-reverse;
	}
}

/*Elemente nebeneinander*/
.display-column .attributes{
  display: flex;
  gap: 5px;
}

/*Aufzählungspunkte*/
li::marker {
  color: var(--secondColor);
}

/*Padding von der Paddingklasse m über die Gridspalte besser responsive*/
@media (max-width: 1024px){ 
  .autogrid_row>.column>.attributes.p-m {
    padding: 115px 10px 115px 10px;
  }
}

@media (max-width: 768px){ 
  .autogrid_row>.column>.attributes.p-m {
    padding: 40px 0px 40px 0px;
  }
}

/*Eclipse display none*/
#privacy_optout_link {
  display: none;
}

.mlist.error_503 {
  display: none;
}

/*Hintergrund der Auswahl*/
body::selection{
  background-color: var(--secondColor);
  color: white;
}

*::-moz-selection {
  background-color: var(--secondColor);
  color: white;
}


/*Zahlen Icon auf Mobile*/
@media (max-width: 767px){ 
  .zahl {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
}
/*----------------------------------------------------------------------------*/

/*********************************01 Header************************************/
/* Navigation */
#header {
  padding-top: 1%;
}

.mmenu_trigger .label {
  display: none;
}

.mmenu_trigger {
   padding-right: 15px; 
}


@media (max-width: 767px){ 
  #header {
      padding-top: 0%;
  }
}

/*Dropdown Navigation*/
.mainmenu ul ul {
  box-shadow: none;
  border-radius: 0px;
  padding: 15px 0px;
}

.mainmenu ul ul li a {
  font-size: 18px;
  padding: 5px 1.5rem !important;
}

.mod_socials.color i.fa-instagram, .mod_socials .social-FontAwesome.color i.fa-instagram, .mod_socials i.fa-instagram:hover,
.mod_socials.color i.fa-linkedin, .mod_socials .social-FontAwesome.color i.fa-linkedin, .mod_socials i.fa-linkedin:hover{
  border-radius: 50px;
  background-color: var(--secondColor) !important;
}

.header .mod_socials a i {
  border-radius: 50px;
}

/*Tablet Navigation*/
.smartmenu-content {
  width: 100vw;
}

.smartmenu-content .mod_navigation ul.level_1 {
  padding: 40px 120px;
}

.smartmenu-content .mod_navigation .vlist.level_1 li,
body.mmenu_open #mmenu .mod_navigation .vlist.level_1 li{
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.smartmenu-content .mod_navigation .vlist.level_2{
  padding-left: 15px;
  padding-bottom: 15px;
}

body.mmenu_open #mmenu .mod_navigation .vlist.level_2 {
  padding-bottom: 15px;
}

.smartmenu-content .mod_navigation .vlist.level_2 li,
body.mmenu_open #mmenu .mod_navigation .vlist.level_2 li{
  border: 0px;
  font-size: 22px;
}

.smartmenu-content .mod_navigation a.trail {
  border: 0px;
}

.smartmenu-content .subitems_trigger:before,
.smartmenu-content .mod_navigation li.open > .subitems_trigger:before{
  content: "";
  mask: url("/files/markeberli/01_icons/chevron-down-light-full.svg") no-repeat center;
  -webkit-mask: url("/files/markeberli/01_icons/chevron-down-light-full.svg") no-repeat center;
  width: 20px;
  height: 20px;
  display: block;
  background-color: white;
  padding-top: 10px;
}

.smartmenu-content .mod_navigation a.active {
  border: 0px;
  font-weight: bold;
}

.smartmenu-content .mod_navigation li.open > .subitems_trigger:before {
  mask: url("/files/markeberli/01_icons/chevron-up-light-full.svg") no-repeat center;
  -webkit-mask: url("/files/markeberli/01_icons/chevron-up-light-full.svg") no-repeat center;
}


/*Mobile Nav*/
#mmenu {
  min-width: 100%;
}

#mmenu .mod_socials a i {
  background-color: var(--secondColor);
}

#mmenu .mod_socials {
  text-align: left;
}

#mmenu .mod_socials {
  border-color: rgba(255,255,255,0.3);
}

#mmenu .mod_navigation li a {
  font-size: 18px;
}

#mmenu .mod_navigation li a.submenu:after {
  padding-top: 4px;
}

/*Darstellung Hero Slider Hintergrund weiss*/
.no-hero .header .mainmenu ul li a {
  color: black;
}

.no-hero .header.original .mainmenu ul li a.trail.a-level_1, .no-hero .header.original .mainmenu ul li a.active.a-level_1, .no-hero .header.cloned .mainmenu ul li a.trail.a-level_1, .no-hero .header.cloned .mainmenu ul li a.active.a-level_1, .no-hero .mod_pct_megamenu .mod_navigation a.active.a-level_1, .no-hero .header .mod_socials a  {
  color: black;
}
.no-hero .header .smartmenu .smartmenu-trigger .line, .no-hero .header .smartmenu .smartmenu-trigger .line:before, .no-hero .header .smartmenu .smartmenu-trigger .line:after {
  background: black;
}

@media (max-width: 767px){ 
  .no-hero #header {
      background-color: transparent;
  }
}





/*----------------------------------------------------------------------------*/

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

/* Bild in abgeschräter Fläche (Übermich) */
.gelbe-schraege-flaeche.bild-mark .attributes:before{
   background-image: url(/files/markeberli/0_portrait/Mark-Eberli_DSC_9060_def_web.jpg);
   background-position: center;
   background-size: cover;
}

/* Bild in abgeschräter Fläche (Meine Politik) */
.gelbe-schraege-flaeche.meine-politik .attributes:before{
   background-image: url(/files/markeberli/0_portrait/Mark-Eberli_DSC_8814_def_web.jpg);
   background-position: center;
   background-size: cover;
}

/* Bild in abgeschräter Fläche (Leistungsausweis 2022 - 2026) */
.gelbe-schraege-flaeche.leistungsausweis-22-26 .attributes:before{
   background-image: url(/files/markeberli/0_portrait/Mark_Eberli_5020_2500px_def_web.jpg);
   background-position: center;
   background-size: cover;
}

/* Bild in abgeschräter Fläche (Leistungsausweis 2014 - 2018) */
.gelbe-schraege-flaeche.leistungsausweis-14-18 .attributes:before{
   background-image: url(/files/markeberli/0_portrait/Eberli_Mark_DSC_8064_2500px_def.jpg);
   background-position: center;
   background-size: cover;
}

/* Bild in abgeschräter Fläche (Leistungsausweis 2006 - 2014) */
.gelbe-schraege-flaeche.leistungsausweis-06-14 .attributes:before{
   background-image: url(/files/markeberli/03_leistungsausweise/Ausgabe_Sozialhilfe_KT_ZH-bcc30a05@2x.png);
   background-position: center;
   background-size: cover;
}

@media (max-width: 1440px) {
  .gelbe-schraege-flaeche.bild-mark .attributes:before,
  .gelbe-schraege-flaeche.meine-politik .attributes:before,
  .gelbe-schraege-flaeche.leistungsausweis-22-26 .attributes:before,
  .gelbe-schraege-flaeche.leistungsausweis-14-18 .attributes:before,
  .gelbe-schraege-flaeche.leistungsausweis-06-14 .attributes:before{
    left: -75px;
  }
}

/* auf Home Seite der datunterligende Artikel hochnehmen*/
.aktuelles-home{
  top: -80px;
}

/* runder Button */
.runder-button .attributes .ce_image{
  background-color: var(--accentColor);
  padding: 10px;
  border-radius: 100%;
  transition: ease 0.3s;
}

.runder-button .attributes .ce_image:hover{
  scale: 1.05;
}

/* Font Links*/
.text-link p a {
  position: relative;
  text-decoration: none;
}

.text-link p a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: white;
  transition: height 0.3s ease, background-color 0.3s ease;
}

.text-link p a:hover:after {
  height: 2px;
}

/***** geteilter Hintergrund ****/
.oben-weiss-unten-hellgelb {
  background: linear-gradient(to bottom, white 70%, rgba(248, 218, 0, 0.1) 30%);
}

/*----------------------------------------------------------------------------*/

/****************************03 Nachrichtenliste*******************************/
.datum {
  flex: 0 0 200px;
  font-style: italic;
  color: var(--thirdColor);
  font-size: 0.95rem;
  line-height: 55px;
}

.mod_newslist h3 a{
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--accentColor);
}

.more {
  font-style: italic;
  color: var(--accentColor); 
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accentColor), var(--accentColor));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}

.mod_newslist .layout_latest {
  margin: 45px 0px;
}

.more:hover {
  background-size: 100% 3px;
}

@media (max-width: 768px) {
  .container-aktuelles {
    flex-direction: column;
    gap: 0;
  }

  .datum {
    margin-bottom: 1rem;
    flex: 0 0 0;
  }
}

.content-swiper h3 {
  color: var(--secondColor);
}

/*----------------------------------------------------------------------------*/

/*******************************04 Testimonials********************************/
.testimonials.content-swiper .swiper-button-prev,
.testimonials.content-swiper .swiper-button-next{
  display: none;
}

/*----------------------------------------------------------------------------*/

/****************************05 Nachrichtenarchiv******************************/
.mod_newsarchive h2{
  font-weight: 300;
  color: var(--secondColor);
  margin-bottom: 35px !important;
}

#nachrichtenarchiv h2 {
  margin-bottom: 0px;
}

.mod_newsarchive h3 a {
  color: var(--accentColor);
}

.mod_newsarchive .layout_latest {
  margin: 45px 0px;
}

.mod_newsmenu li a {
  color: #000;
}

/*Hintergrundbild Tablet*/
.bg-bild-tablet {
  background-position-x: 30%;
}

/*----------------------------------------------------------------------------*/

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

.widget-radio fieldset legend {
  background-color: transparent;
  background-color: transparent;
  color: black;
  flex-direction: row;
  display: flex;
  padding-left: 0px;
}

.widget-checkbox fieldset {
  padding: 0px;
}

form .checkbox_container label,
form .radio_container label,
form .widget-radio fieldset legend,
form span.mandatory{
  color: white;
}

form fieldset {
  border: none;
}

form.style5 input, form.style5 select, form.style5 textarea {
  border-radius: 0px;
  background-color: white;
  border: 0px;
}

input.submit, button.submit {
  border-radius: 0px;
  background-color: var(--secondColor);
  padding: 15px 20px;
  color: var(--accentColor);
}

input.submit[type="submit"]:hover, button.submit[type="submit"]:hover {
  scale: 1.05;
  background-color: var(--secondColor);
  opacity: 1;
}

.bg span {
  /* padding-bottom: 20px; */
  gap: 10px;
}

@media only screen and (max-width: 767px) {
    .column[class*="col_"]:not([class*="_m"]), .autogrid_grid .column:not([class*="_m"]) {
        margin-bottom: 0px;
    }
}

/*----------------------------------------------------------------------------*/

/**********************************07 Lebenslauf*******************************/
.lebenslauf p{
  font-weight: 300;
}

.lebenslauf p strong{
  font-weight: 800;
}

/*----------------------------------------------------------------------------*/

/************************************08 Komitee********************************/
.co-praesidium li::marker{
  color: var(--accentColor);
}

/*Tabelle*/

.ce_table th:nth-child(1),
.ce_table td:nth-child(1) {
  width: 25%;
}

.ce_table th:nth-child(2),
.ce_table td:nth-child(2) {
  width: 25%;
}

.ce_table th:nth-child(3),
.ce_table td:nth-child(3) {
  width: 50%;
}

.ce_table table th{
  background-color: transparent;
  color: var(--accentColor);
}

.ce_table table td {
  line-height: 25px;
}

.ce_table table thead tr th{
  border-bottom: solid 1.5px var(--accentColor);
}

/*Tabelle nummeriert*/

.table-numbered th:nth-child(1),
.table-numbered td:nth-child(1) {
  width: 5%;
}

.table-numbered th:nth-child(2),
.table-numbered td:nth-child(2) {
  width: 25%;
}

.table-numbered th:nth-child(3),
.table-numbered td:nth-child(3) {
  width: 25%;
}

.table-numbered th:nth-child(4),
.table-numbered td:nth-child(4) {
  width: 45%;
}

.table-numbered {
  counter-reset: rowNumber 9; /* Zähler starten */
}

.table-numbered tr {
  counter-increment: rowNumber; /* Zähler erhöhen */
}

.table-numbered tr td:first-child::before {
  content: counter(rowNumber);
  font-weight: bold;
  /*padding-right: 0.5em;*/
}

.table-numbered thead tr {
  counter-reset: none;
  counter-increment: none;
}

.table-numbered thead tr td:first-child::before {
  content: "";
}


/*----------------------------------------------------------------------------*/

/************************************09 Über mich******************************/
.ueber-mich-persoenliches{
    clip-path: polygon(
    0% 4%,     
    100% 0%,   
    100% 100%, 
    0% 96%
  );
}

/*----------------------------------------------------------------------------*/

/**********************************20 Footer***********************************/
#footer {
  background-color: var(--accentColor);
}
#footer, #footer a {
  color: white;
}

#footer p {
    line-height: 28px;
}
#footer .socials .attributes {
  display: flex;
  gap: 5px;
  opacity: 0.6;
}

#footer .socials {
  display: flex;
  align-items: center;
}

#footer a:hover {
  opacity: 1;
  color: white !important;
}

#footer .link a {
  position: relative;
	align-items: center;

}

#footer .link a:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: white;
  /* padding-top: 1px; */
  transform: translateY(50%);
  rotate: -45deg;
  mask: url(/files/markeberli/01_icons/arrow-right-solid-full.svg) no-repeat center;
  -webkit-mask: url(/files/markeberli/01_icons/arrow-right-solid-full.svg) no-repeat center;
}

@media (max-width: 767px){ 
  #footer .inside {
    padding-bottom: 15px;
  }
}

/*----------------------------------------------------------------------------*/