/*!
 * Copyright 2020
 */

/*   Schriften                                */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url(http://allfont.de/allfont.css?fonts=droid-serif);


body {
  font-family: 'PT Sans', sans-serif;
  font-size: 100%;
  color:#707070;
}


/*   Main-Grid                                */

body wrapper#budygrid {  
  display: grid;
  grid-template-areas: 
    ". logo logo logo logo logo logo logo logo ."
    ". nav nav nav nav nav nav nav nav ."
    "header header header header header header header header header header"
    ". article article article article article aside aside aside ."
    "footerleft footer footer footer footer footer footer footer footer footerright";
  grid-template-columns: 1fr 150px 150px 150px 150px 150px 150px 150px 150px 1fr;
  grid-template-rows: 195px 50px 680px 1fr auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  //height: 100vh;
  }  

body.home wrapper#budygrid {  
  display: grid;
  grid-template-areas: 
    ". logo logo logo logo logo logo logo logo ."
    ". nav nav nav nav nav nav nav nav ."
    "header header header header header header header header header header"
    ". zitat zitat zitat zitat zitat zitat zitat zitat ."
    ". article article article article article aside aside aside ."
    "footerleft footer footer footer footer footer footer footer footer footerright";
  grid-template-columns: 1fr 150px 150px 150px 150px 150px 150px 150px 150px 1fr;
  grid-template-rows: 195px 50px 680px auto 1fr auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  //height: 100vh;
  }  

body.impressum wrapper#budygrid,  
body.datenschutz wrapper#budygrid {  
  display: grid;
  grid-template-areas: 
    ". logo logo logo logo logo logo logo logo ."
    ". nav nav nav nav nav nav nav nav ."
    "header header header header header header header header header header"
    ". article article article article article article article article ."
    "footerleft footer footer footer footer footer footer footer footer footerright";
  grid-template-columns: 1fr 150px 150px 150px 150px 150px 150px 150px 150px 1fr;
  grid-template-rows: 195px 50px 680px 1fr auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  //height: 100vh;
  }  

header, footer, article, nav2, aside, div {
  padding: 0.0em;
  //border:1px solid #aeaeae;
  }
article {
  min-height: 520px;
  }
footer {
  min-height: 300px;
  }
#pageLogo { 
  display: grid;
  grid-area: logo;
  background: transparent;
  justify-self: end;
  align-self: center;
  grid-auto-flow: column;
  justify-items: end;
  align-items: center;
  }

nav { 
  grid-area: nav; 
  }
header {
  grid-area: header;
  background:transparent url() no-repeat top center;
  }
zitat { 
  grid-area: zitat; 
  }
article { 
  grid-area: article;
  }
article#mainArticle { 
  padding:0px 50px 20px 0px;
  margin-bottom:60px;
  font-size: 1.25rem;
  }
aside { 
  grid-area: aside; 
  //width:450px;
  padding:20px 25px 20px 30px;
  margin-bottom:60px;
  background-color:#fff0ee;
  //background:#fff0ee url(/images/content/sidebar-bewegung.png) no-repeat center 40px;
  } 
.home aside { 
  //width:450px;
  padding:20px 0px 20px 0px;
  background-color:transparent;
  //background:#fff0ee url(/images/content/sidebar-bewegung.png) no-repeat center 40px;
  } 
footer {
  grid-area: footer;
  color:#ffffff;
  background-color:#9b9b9b;
  padding-top: 34px;  }
footerleft {
  grid-area: footerleft;
  background-color:#9b9b9b;
  overflow:hidden;
  }
footerright {
  grid-area: footerright;
  background-color:#9b9b9b;
  overflow:hidden;
  }
footer .adresse {
  font-size: 1.15em;
  line-height: 1.3em;
  margin-bottom: 50px;
  }
footer .adresse h4 {
  font-size: 1.25em;
  font-weight: 900;
  margin:0;
}

/*                                               */



/*   Seiten Specials                                */

#map_canvas1 {
    width: 400px;
    height: 400px;
    border: 1px solid #999999;
}
.leaflet-control-attribution {
    font-size: 10px !important;
}
.button {
    display: inline-block;
    white-space: nowrap;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(to bottom, #eeeeee,#cccccc);
    background-color: #eeeeee;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC');
    //zoom: 1;
    border: 1px solid #777;
    border-radius: .2em;
    color: #333 !important;
    cursor: pointer;
    font: normal 0.7em/2em Arial, Helvetica;
    margin: 0 0.75em 0 0;
    padding: 0 1.5em;
    overflow: visible;
    text-decoration: none !important;
}
.button:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #dddddd));
    background-image: -webkit-linear-gradient(top, #fafafa, #dddddd);
    background-image: -moz-linear-gradient(top, #fafafa, #dddddd);
    background-image: -ms-linear-gradient(top, #fafafa, #dddddd);
    background-image: linear-gradient(to bottom, #fafafa,#dddddd);
    background-color: #fafafa;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FFFAFAFA', endColorstr='#FFDDDDDD');
    zoom: 1;
}

/*                                               */



/*   Test Navigation                                */

div#navDiv ul.nav-grid {
	display:grid;
  grid-auto-flow: column;
  justify-items: start;
  align-items: start;
	//height: 300px;
	overflow:hidden;
	padding:0;
	margin:0;
  border:1px solid #ababab;
}

div#navDiv ul.nav-grid li {
  overflow: hidden;
  z-index:10;
}
div#navDiv ul.nav-grid li:hover,
ul.nav-grid li.aktive {
  background-color: #ababab;
  z-index:10;
  cursor:pointer;
}


div#navDiv ul.nav-grid li ul {
	position:absolute;
	padding:0;
	max-height: 0;
	overflow: hidden;
  background-color: #ababab;
	background-color: rgba(200, 200, 200, 0.2);
	//-webkit-transition: max-height 0.8s;
	//-moz-transition: max-height 0.8s;
	transition: all 0.2s linear;
}
div#navDiv ul.nav-grid li:hover ul {
	max-height: 100px;
	transition: all 0.5s linear;
}
div#navDiv ul.nav-grid li ul li {
}

div#navDiv input#hamburger {display:none;}
div#navDiv label.hamburger {display:none;}




@media all and (max-width: 800px) {

  body wrapper#budygrid {  
    grid-template-areas: 
      "logo logo logo logo"
      "nav nav nav nav"
      "header header header header"
      "article article article aside"
      "footer footer footer footer";
    grid-template-rows: 195px 50px 54vw 1fr 70px 50px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }  

  div#navDiv ul.nav-grid { 
    max-height: 0px; 
	  display:block;
    padding-left:15px;
    //margin:15px;;
    overflow: hidden; 
    transition: all 0.5s linear;
    border:0px solid #ababab;
  }

  div#navDiv ul.nav-grid li ul {
    position:relative;
    max-height:initial;
  }
  div#navDiv ul.nav-grid li ul li {
    padding-left:15px;
  }

  #map_canvas1 {
    width: 100%;
  }


  /*   Hamburger             */
  div#navDiv input#hamburger {display:none}
  div#navDiv label.hamburger { 
    position: relative; 
    display: block;
    background: #999999; 
    width: 56px; 
    height: 52px; 
    border-radius: 3px; 
    margin-left: 15px; 
    margin-bottom: 15px; 
  }
  div#navDiv .line { 
    position: absolute; 
    left:10px;
    height: 5px; width: 35px; 
    background: #fff; border-radius: 2px;
    display: block; 
    transition: 0.5s; 
    transform-origin: center; 
  }
  div#navDiv .line:nth-child(1) { top: 12px; }
  div#navDiv .line:nth-child(2) { top: 24px; }
  div#navDiv .line:nth-child(3) { top: 36px; }
  div#navDiv #hamburger:checked + .hamburger .line:nth-child(1){
    transform: translateY(12px) rotate(-45deg);
  }
  div#navDiv #hamburger:checked + .hamburger .line:nth-child(2){
    opacity:0;
  }
  div#navDiv #hamburger:checked + .hamburger .line:nth-child(3){
    transform: translateY(-12px) rotate(45deg);
  }
  /*                          */


  div#navDiv #hamburger:checked + .hamburger  + ul.nav-grid { 
    max-height: 400px; 
    border:1px solid #ababab;
  }

}

/*                                               */









@media all and (max-width: 1200px) {

  body wrapper#budygrid {  
    grid-template-areas: 
      "logo logo logo logo logo"
      "nav nav nav nav nav"
      "header header header header header"
      "article article article aside aside"
      "footer footer footer footer footer";
    grid-template-rows: 195px 50px 54vw 1fr 70px 50px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: center;
  }

  body.home wrapper#budygrid {  
    display: grid;
    grid-template-areas: 
      "logo logo logo logo logo"
      "nav nav nav nav nav"
      "header header header header header"
      "zitat zitat zitat zitat zitat"
      "article article article aside aside"
      "footer footer footer footer footer";
    grid-template-rows: 195px 50px 54vw auto 1fr auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    justify-content: center;
  }  

body.impressum wrapper#budygrid, 
body.datenschutz wrapper#budygrid { 
    grid-template-areas: 
      "logo logo logo logo logo"
      "nav nav nav nav nav"
      "header header header header header"
      "article article article article article"
      "footer footer footer footer footer";
    grid-template-rows: 195px 50px 54vw 1fr 70px 50px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }  


  
  #pageLogo .section-logo {  
   margin-right:15px;
  }

  header {
    background:transparent url() no-repeat center center;
    background-size:cover;
  }
  article#mainArticle {
    padding: 0px 20px 20px 20px;
  }
  aside {
    grid-area: aside;
    padding: 20px 20px 20px 20px;
  }  
  footer {
    padding: 34px 20px 20px 20px;
    //min-height: 50px;
  }
  footer .adresse {
    margin-bottom: 10px;
  }
  
 body.home zitat {
    font-family: "Droid Serif", Times, serif;
    font-size: 3.2rem;
    color: #49a7a2;
    font-weight: normal;
    line-height: 1.13em;
    margin-top: 0px;
    margin-bottom: 74px;
    padding: 40px 20px 20px 20px;
  }


}


@media all and (max-width: 800px) {


  body wrapper#budygrid {  
    grid-template-areas: 
      "logo logo logo logo logo"
      "nav nav nav nav nav"
      "header header header header header"
      "article article article article article"
      "aside aside aside aside aside"
      "footer footer footer footer footer";
    grid-template-rows: 125px 50px 54vw auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }  

  body.home wrapper#budygrid {  
    display: grid;
    grid-template-areas: 
      "logo logo logo logo logo"
      "nav nav nav nav nav"
      "header header header header header"
      "zitat zitat zitat zitat zitat"
      "article article article article article"
      "aside aside aside aside aside"
      "footer footer footer footer footer";
    grid-template-rows: 195px 50px 54vw auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }  



  article#mainArticle {
    padding: 0px 20px 20px 20px;
    margin-bottom: 0px;  }
  aside {
    grid-area: aside;
    padding: 20px 20px 20px 20px;
    margin-bottom: 10px;
  }  

}

@media all and (max-width: 650px) {

  #pageLogo .section-logo {  
   margin-right:3%;
   margin-left:3%;
   width:94%;
  }

}




  /*   Accordion             */
.ui-accordion-content img,
.ui-widget-content img {
  float: left;
  }
.ui-accordion-content p,
.ui-widget-content p {
  //padding-left: 100px;
  }
.person .ui-icon, .ui-widget-content .ui-icon {
    background: url("/images/elemente/pfeil-weiss-right.png") no-repeat left center;
}
.person .ui-state-hover .ui-icon,
.person .ui-state-focus .ui-icon,
.person .ui-button:hover .ui-icon,
.person .ui-button:focus .ui-icon {
		background-image: url("/images/elemente/pfeil-weiss-right.png");
}
.person .ui-state-active .ui-icon, .ui-button:active .ui-icon {
    background-image: url("/images/elemente/pfeil-weiss-down.png");
}


/*   Kategorie Einstellungen             */

.Xhome #pageLogo .section-logo{ border-right: 2px solid #49a7a2;}
.Xgestalttherapie #pageLogo .section-logo{ border-right: 2px solid #70b2cd;}
.Xpaartherapie #pageLogo .section-logo{ border-right: 2px solid #87acb1;}
.Xeinzeltherapie #pageLogo .section-logo{ border-right: 2px solid #fc705b;}
.Xperson #pageLogo .section-logo{ border-right: 2px solid #f8970e;}
.Xkonditionen #pageLogo .section-logo{ border-right: 2px solid #23387f;}
.Xkontakt #pageLogo .section-logo{ border-right: 2px solid #5ba1bf;}
.Ximpressum #pageLogo .section-logo{ border-right: 2px solid #5ba1bf;}
.Xdatenschutz #pageLogo .section-logo{ border-right: 2px solid #5ba1bf;}


  /*   Sidebar             */
.home aside { background-color: transparent;}
.gestalttherapie aside { background-color: #e2f0f6;}
.paartherapie aside { background-color: #d9f2f4;}
.einzeltherapie aside { background-color: #fff0ee;}
.person aside { background-color: #ca3637;}
.konditionen aside { background-color: #d6dee7;}
.kontakt aside { background-color: transparent;}
.impressum aside { background-color: #fcc85b;}
.datenschutz aside { background-color: #fcc85b;}

.home aside h2 { color: #49a7a2;}
.gestalttherapie aside h2 { color: #0485c0;}
.paartherapie aside h2 { color: #548990;}
.einzeltherapie aside h2 { color: #dd5a45;}
.person aside h2 { color: #ffffff;}
.konditionen aside h2 { color: #23387f;}
.kontakt aside h2 { color: #5ba1bf;}
.impressum aside h2 { color: #5ba1bf;}
.datenschutz aside h2 { color: #5ba1bf;}

.home aside h3 { color: #49a7a2;}
.gestalttherapie aside h3 { color: #0485c0;}
.paartherapie aside h3 { color: #548990;}
.einzeltherapie aside h3 { color: #dd5a45;}
.person aside h3 { color: #ffffff;}
.konditionen aside h3 { color: #23387f;}
.kontakt aside h3 { color: #5ba1bf;}
.impressum aside h3 { color: #5ba1bf;}
.datenschutz aside h3 { color: #5ba1bf;}

.person aside * { color: #ffffff;}


.person aside { 
    background-image: url(/images/content/Portrait-Astrid-Kohrs.jpg);
    background-repeat:no-repeat;
    background-size:contain;
    padding-top:165%;
  }



  /*   Content             */
.kontakt h1 { color: #5ba1bf;}

.home h2 { color: #49a7a2;}
.gestalttherapie h2 { color: #0485c0;}
.paartherapie h2 { color: #548990;}
.einzeltherapie h2 { color: #dd5a45;}
.person h2 { color: #ca3637;}
.konditionen h2 { color: #23387f;}
.kontakt h2 { color: #5ba1bf;}
.impressum h2 { color: #5ba1bf;}
.datenschutz h2 { color: #5ba1bf;}




/*   Editmode-Einstellungen             */

 body#editmode button.weBtn {
    width: initial;
}