/***************************************** Navigation PSW **************************************************/
 
/*
  * GLOBALES
      - Variablen
      - kein horizontales scrollen
      - Menupunkt 503 weg
      - Menupunkt Home Desktop ausblenden, ab 1075px in die Navi aufnehmen
      - Headlines
      - Texte
      - Trennlinie lang in Akzentfarbe
      - Liststyle Sonne
      - Icon Blume bei Text
      - vertikale Linie Textblöcke
      - schwebende Blätter
      - 90grad Button
      - Back to Top Button
      - Navigation & Footer volle Breite
      - Textlinks 
    
  * Tablet Navigation
  * Mobile Navigation
  * Akkordeon
  * Formular
  * Tabelle
  * Galerie Lightbox
  * Iconbox vertikal
*/


/************************************** GLOBALE Anpassungen *************************************************/

/*** Variablen ***/
:root {
	--accentColor: #eac552;
}

/*** kein horizontales scrollen ***/
html, body {
  overflow-x: hidden;
}

/*** 503 Seite weg von der Navi ***/
.mlist.error_503 {
  display: none;
}

#error_503 .ce_bgimage.oversize {
  height: 900px !important;
}

/*** Menupunkt HOME auf Desktop ausblenden, ab Tablet in die Navigation aufnehmen ***/
@media (min-width: 1075px) {
  a[title="Home"] {
    display: none !important;
  }
}

/*** Headlines ***/
@media (min-width: 990px){
  .home-h1 {
    font-size: 80px;
  }
}

h6, .h6 {
	margin-bottom: 0px;
}

/*** Texte alle schwarz ***/
body p,
body form span,
body form label{
  color: #000;
}

/*** Seiten ohne Hero ***/
.no-hero #wrapper {
  border-top: solid 1px var(--accentColor);
}


/*** Trennlinie lang in Akzentfarbe ***/
.ce_divider_extended.version3 {
	background: var(--accentColor);
	margin: 8px 0px !important;
}

/*** Liststyle Sonne ***/
.ce_text ul li {
 list-style: url("/files/content/00_design/sonne-einzeln.svg");	
 color:	black;
}

/*** Icon Blume bei Text ***/
.ce_text.text-blume {
	position: relative;
	overflow: visible;
	z-index: 1;
}

.ce_text.text-blume:after {
	position: absolute;
	content: ""; 
	width: 180px; 
	height: 200px; 
	top: -50px;
	left: -110px;
	opacity: 0.3;
	background: var(--accentColor);
	  mask: url("/files/content/00_design/sonne-einzeln.svg") no-repeat center;
	  -webkit-mask: url("/files/content/00_design/sonne-einzeln.svg") no-repeat center;
	z-index: -1;
}

/*** vertikale Linie Textblöcke ***/
.vertikaler-strich .attributes {
  border-left: 1px solid #eac552;
}

/*** schwebende Blätter ***/
@media only screen and (max-width: 767px) {
    .mod_article.schwebende-blaetter .container {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .mod_article.schwebende-blaetter .ce_image img{
      max-width: 80px;
    }
    
}

/*** 90grad Button ***/
.button-vertikal p {
	font-size: 16px;
	transition: 0.3s ease;
}

.button-vertikal:hover p {
	padding-left: 5px;
	color: var(--accentColor);
	scale: 1.05;
}

@media only screen and (max-width: 767px) {
	.button-vertikal p {
		font-size: 13px;
	}
}

/*** Back to Top ***/
#top_link.top-link .progress-ring circle {
	display: none;
}

#top_link.top-link a {
	color: black;
}

#top_link.top-link {
	background-color: white;
}

/*** Navigation & Footer volle Breite ***/
.header .inside {
	margin-left: 0px;
	margin-right: 0px;
	min-width: 100%;
}

#footer .inside,
#bottom .inside {
	margin-right: calc(var(--articlePaddingLeftRight) + var(--contentPaddingLeftRight));
	margin-left: calc(var(--articlePaddingLeftRight) + var(--contentPaddingLeftRight));
	max-width: none;
}

@media only screen and (max-width: 1024px) {
	#footer .inside,
	#bottom .inside{
		min-width: 100%;
		margin: 0;
	}
}


/*** Textlinks ***/
body p a,
body li a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--accentColor) ;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.5s ease;
  color: black;
  
}

body p a:hover,
body li a:hover{
  text-decoration-thickness: 2px;

}

body p a[href^="mailto:"],
body p a[href^="tel:"],
body p a.pdf{
  position: relative;
  padding-left: 23px;
}

body p a[href^="tel:"]:before,
body p a[href^="mailto:"]:before,
body p a.pdf:before{
  position: absolute;
  content: "";
  width: 18px;
  height: 18px;
  background-color: var(--accentColor);
  top: 0;
  left: 0;
  padding-top: 4px;
  border-bottom: 0px;
}

body p a[href^="mailto:"]:before {
    mask: url("/files/content/00_icons/envelope-light.svg") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/envelope-light.svg") no-repeat center;
}

body p a[href^="tel:"]:before {
    mask: url("/files/content/00_icons/phone-light.svg") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/phone-light.svg") no-repeat center;
}

body p a.pdf:before {
    mask: url("/files/content/00_icons/file-pdf-light.svg ") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/file-pdf-light.svg ") no-repeat center;
}

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


/************************************ Tablet Navigation ****************************************************/

body.smartmenu_open div.body,
body.smartmenu_open .stickyheader{
  transform: translateX(0);
  padding-top: 0;
}
  
body.smartmenu_open div.body::before,
body.smartmenu_open div.stickyheader:before{
    content: ""; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 55555;
}

.smartmenu-content .mod_navigation ul.level_2 li {
  font-size: 18px;
}

.smartmenu .smartmenu-trigger .line {
  width: 25px;
}

body.smartmenu_open body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 999;
}

.smartmenu-content .subitems_trigger:before,
.smartmenu-content .mod_navigation li.open > .subitems_trigger:before{
  content: "";
  mask: url("/files/content/00_icons/chevron-down-thin.svg") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/chevron-down-thin.svg") no-repeat center;
  width: 27px; /***-> so gross wie die Schriftgrösse anpassen****/
  height: 27px; /***-> so gross wie die Schriftgrösse anpassen****/
  display: block;
  background-color: black;
}

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

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

/******************************************** Mobile Navigation ********************************************/
/*** Tablet Navigation auch auf Mobile verwenden ***/
@media only screen and (max-width: 767px) {
  .smartmenu{
  	display: block;
  }
  .smartmenu-content{
  	width: 80vw;
  }
  
  #header .inside {
    margin-right: auto;
    position: absolute;
    min-width: 95%;
  }
  
  #mmenu,
  .mmenu_trigger{
  	display: none;
  }
  
  #header .inside {
  	margin-right: auto;
  }
}

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


/************************************************ Akkordeon ************************************************/
.ce_accordion button {
  font-family: "Playfair Display";
  font-weight: 700;
  color: black !important;
  font-size: 24px !important;
  border-bottom: 1px solid black !important;
}

.ce_accordion .accordion {
  padding: 0px;
}

.ce_accordion .toggler.ui-state-active {
  border-bottom: 1px solid var(--accentColor) !important;
}

.ce_accordion {
  color: black !important;
  border: 0px;
}

@media (max-width: 1200px) {
  .ce_accordion button {
    font-size: 18px !important;
  }
}

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

/************************************************* Formular ************************************************/
form fieldset {
  border: 0px;
  background-color: #f9f9f9;
  padding: 10px;
}

.widget.widget-explanation.explanation {
  border-bottom: 1px solid var(--accentColor);
}

.widget.widget-checkbox.styled-checkbox {
  margin-bottom: 0px;
}

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

form.style5 input:hover:not([type="submit"]),
form.style5 input:focus:not([type="submit"]),
form.style5 textarea:hover,
form.style5 textarea:focus{
  border: 0px;
  border-bottom: 1px solid var(--accentColor);
}

form.style5 button.submit {
  border-radius: 0px;
  color: black;
  background-color: #fff;
  border: solid 1px var(--accentColor);
  padding: 15px 20px;
  margin-top: 20px;
  transition: 1.05;
  font-weight: 700;
}

form.style5 button.submit:hover {
  opacity: 1;
  border: solid 1px #000;
  background-color: #fff;
  color: var(--accentColor);
}


/*** Checkbox ausblenden ***/
.styled-checkbox .checkbox{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

/*** Label bekommt die Box ***/
.styled-checkbox label{
  position: relative;
  padding-left: 32px;            
  cursor: pointer;
  user-select: none;
}
.styled-checkbox label::before{
  content:"";
  position:absolute;
  left: 0; 
  top: 2px;
  width: 24px; 
  height: 24px;
  border: 1px solid #000;
  border-radius: 24px;
  background: #efefef;
  box-sizing: border-box;
  transition: background-color .2s, border-color .2s;
}

/*** Checked über :checked + label ***/
.styled-checkbox .checkbox:checked + label::before{
  background: var(--accentColor);
  border-color: #000;
}
.styled-checkbox .checkbox:checked + label::after{
  content:"";
  position:absolute;
  left:7px; top:5px;
  width:6px; height:12px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

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

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

/********************************************** Tabelle ****************************************************/

/*** Liste Responsive unterinander darstellen ***/
  @media (max-width: 1200px) {
    .ce_table.table-angebot table, 
    .ce_table.table-angebot table thead, 
    .ce_table.table-angebot table tbody, 
    .ce_table.table-angebot table tr {
      display: block;
      width: 100%;
    }
  
    /*** Kopfzeile ausblenden ***/
    .ce_table.table-angebot table thead {
      display: none;
    }
    
    .ce_table.table-angebot table tbody td:first-child {
    background: rgba(255, 215, 0, 0.1);
    }
  
    .ce_table.table-angebot table tbody tr {
      margin-bottom: 1.5em;
      padding: 1em 0;
    }
  
    .ce_table.table-angebot table tbody td {
      display: flex;
      justify-content: space-between;
      padding: 6px 12px;
      border-bottom: 1px solid #eee;
    }
  
    .ce_table.table-angebot table tbody td:last-child {
      border-bottom: none;
    }
    
    /*** Icons ***/
    .ce_table.table-angebot .ce_hyperlink {
    width: 100%;
    }
    

    

  
  /******************* Damit die Titel und Inhalte nebeneinander dargestellt werden ****************************/
    .ce_table.table-angebot table tbody td:nth-child(1)::before { content: "WHG-Nr."; font-weight: 600; }
    .ce_table.table-angebot table tbody td:nth-child(2)::before { content: "Anzahl Zimmer"; font-weight: 600; }
    .ce_table.table-angebot table tbody td:nth-child(3)::before { content: "Wohnfläche m²"; font-weight: 600; }
    .ce_table.table-angebot table tbody td:nth-child(4)::before { content: "Terrasse m²"; font-weight: 600; }
    .ce_table.table-angebot table tbody td:nth-child(5)::before { content: "Kellerfläche m²"; font-weight: 600; }
    .ce_table.table-angebot table tbody td:nth-child(6)::before { content: "Nettomiete"; font-weight: 600; }  
    .ce_table.table-angebot table tbody td:nth-child(7)::before { content: "Nebenkosten"; font-weight: 600; }    
    .ce_table.table-angebot table tbody td:nth-child(8)::before { content: "Grundriss"; font-weight: 600; }
    .ce_table.table-angebot table tbody td:nth-child(9)::before { content: "E-Mail"; font-weight: 600; }
    .ce_table.table-angebot table tbody td:nth-child(10)::before { content: "Verfügbarkeit"; font-weight: 600; }
  
  
  /************ Damit die Titel und Inhalte nebeneinander dargestellt werden (Parkplätze) **********************/
   .ce_table.table-angebot.table-weitere-objekte table tbody td:nth-child(1)::before { content: "Fahrzeug"; font-weight: 600; }
   .ce_table.table-angebot.table-weitere-objekte table tbody td:nth-child(2)::before { content: "Anzahl"; font-weight: 600; }
   .ce_table.table-angebot.table-weitere-objekte table tbody td:nth-child(3)::before { content: "Bruttomiete CHF/Mt."; font-weight: 600; }
  
  
  
  
    /*** Pseudoelement links ausrichten, Wert rechts ***/
    .ce_table.table-angebot table tbody td:before {
      flex: 1 1 50%;
      text-align: left;
    }
  
    .ce_table.table-angebot table tbody td{
      flex: 1 1 50%;
      text-align: right;
    }
    
    /*** Mail Button ***/
   .ce_table.table-angebot a[href^="mailto:"]:before {
      left: -20px !important;
    }

    /*** PDF Button ***/
    .ce_table.table-angebot .ce_hyperlink a:before{
      right: 0;
      padding-left: 20px;
    }
  }
  
.ce_table.table-angebot th {
  padding: 20px 5px;
}

.ce_table.table-angebot table {
  font-size: 14px;
}

.ce_table .table-clean td, .ce_table.table-clean td {
  padding: 20px;
}

.ce_table.table-angebot img {
  transform: translateY(25%);
}

.ce_table.table-angebot .ce_hyperlink a {
  margin: 0px;
  background-color: white;
  padding: 0px;
  border: 0px;
  transition: 0.3s ease;
}

.ce_table.table-angebot .ce_hyperlink {
  width: 30px;
}

.ce_table.table-angebot .ce_hyperlink a:hover {
  opacity: 1;
}

.ce_table.table-angebot .ce_hyperlink a,
.ce_table.table-angebot a[href^="mailto:"]{
  position: relative;
}

.ce_table.table-angebot .ce_hyperlink a:before,
.ce_table.table-angebot a[href^="mailto:"]:before{
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  transform: translateY(25%);
  background-color: var(--accentColor);
  transition: 0.3s ease;
}

.ce_table.table-angebot .ce_hyperlink a:before {
      mask: url("/files/content/00_icons/file-pdf-solid.svg") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/file-pdf-solid.svg") no-repeat center;
}

.ce_table.table-angebot a[href^="mailto:"]:before {
        mask: url("/files/content/00_icons/envelope-solid.svg") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/envelope-solid.svg") no-repeat center;


}

.ce_table.table-angebot .ce_hyperlink a:hover:before {
      mask: url("/files/content/00_icons/file-pdf-light.svg") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/file-pdf-light.svg") no-repeat center;
}

.ce_table.table-angebot a[href^="mailto:"]:hover:before {
        mask: url("/files/content/00_icons/envelope-light.svg") no-repeat center;
  -webkit-mask: url("/files/content/00_icons/envelope-light.svg") no-repeat center;
}
/*---------------------------------------------------------------------------------------------------------*/

/********************************************* Galerie Lightbox ********************************************/
.ce_gallery ul li {
	list-style: none;
}

/*** verhindert scrollen wenn lightbox offen ist ***/
body.no_scroll,
html.no_scroll {
   overflow: hidden !important;
  touch-action: none; 
  -webkit-overflow-scrolling: auto;
}

/*** image 2 of 5 ausblenden ***/
#cboxCurrent { 
	display: none !important;
}

/*** schwarzer border weg ***/
#cboxLoadedContent { 
 border: 0;
}

/*** neues Icon laden ***/
#cboxClose { 
  background: url(/files/content/00_icons/xmark-thin.svg) no-repeat center center;
  width: 25px;
  height: 25px;
  top: -40px;
  right: 0;
}

#cboxNext,
#cboxPrevious{
  width: 50px;
  height: 55px;
}

#cboxNext {
	background: url(/files/content/00_icons/angle-right-thin.svg) no-repeat center center;
	background-color: rgba(255,255,255,0.7);
	right: 0;
}

#cboxPrevious {
  background: url(/files/content/00_icons/angle-left-thin.svg) no-repeat center center;
  background-color: rgba(255,255,255,0.7);
  left: 0;
}

#cboxNext:hover,
#cboxPrevious:hover {
    background-position: center center;
}

#colorbox, #cboxOverlay, #cboxWrapper {
  overflow: visible;
}

@media only screen and (max-width: 767px) {
  #cboxClose { 
    width: 15px;
    height: 15px;
    top: -30px;
  }
  
  #cboxNext,
  #cboxPrevious{
  width: 20px;
  height: 30px;
  transform: translateY(50%);
  }
}

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


/********************************************* Iconbox vertikal ********************************************/
/*** Verbindungsstrich ausblenden ***/
.ce_iconbox_vertical:after{
	width: 0;
}

.ce_iconbox_vertical[data-style="style1"] .icon .icon_inside {
	border: #fff;
}

.ce_iconbox_vertical[data-padding="medium"] {
	padding-bottom: 20px;
}