/*
Theme Name: KEKS Reboot
Theme URI: 
Author: 
Author URI: 
Description: WordPress-Theme für KEKS Köln (Kölner Eltern- und Kinderselbsthilfe e.V.), auf Basis des statischen KEKS-Templates. Struktur folgt den Kommentaren aus der ursprünglichen index.html (header.php / index.php / footer.php). Bereiche, die noch nicht ausgearbeitet sind, wurden unverändert als Platzhalter übernommen.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keks-reboot
*/

@import url(css/content.css);

/*
Grün dunkel: #456f63
Grün hell:   #85a89f
Rot  dunkel: #a80f1e
Rot  hell:   #d46753
Gelb dunkel: #e2af47
Gelb hell:   #ede9d7
*/

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

body {
    background-color: #fff;
    font-size: 1rem;
}

.boxed {
    display: flex;
    margin: auto;
    width: min(100% , var(--layout-width)); /* CUSTOMIZER */
    height: 100%;
}

.stretched {
    display: flex;
    height: 100%;
}

article {
    overflow: hidden;
}

picture {
    display: inline-block;
}

#main {
    display: flex;
    flex-direction: column;
}

/* + + + + + TOPMENU + + + + + + */

#topmenu {
    background-color: #85a89f;
    height: 40px;
}

#topmenu ul {
    list-style: none;
    justify-content: flex-end;
}

#topmenu li {
    line-height: 40px;
}

#topmenu a {
    display: block;
    padding: 0 15px;
    text-decoration: none;
    color: #fff;
}

/* + + + + + HEAD 1 + + + + + + */

#head1 {
    display: flex;
}

#headlogo {
    flex: 0 1 auto; /* CUSTOMIZER */
}

#headlogo picture {
    padding: 2em 0;
}

#headlogo img {
    width: 100%;
}

#headservice {
    flex: 2 1 auto;
    margin: 0 0 0 20px;
}

#headservice ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
  flex-direction: row;
    width: 100%;
    height: 100%;
    list-style: none;
}

#headservice li {
    margin-left: 20px;
}

#headservice a {
    display: block;
    text-decoration: none;
}

#headservice i {
    font-size: 3rem;
}

#headservice .fa-at,
#headservice .fa-facebook-f {
    background-color: #e2af47;
    color: #fff;
    padding: 3px; 
    width: 54px;
    height: 54px;
}

/* + + + + + HEAD 2 + + + + + + */

#headfull {
    width: 100%;
}

/* + + + + + MENU + + + + + + */

#mainmenu {
    width: 100%;
    height: 80px;
}

#mainmenu ul {
    display: flex;
    justify-content:space-between;
    align-items:stretch;
    font-size: 1.6rem;
    border-top: 1px solid #ede9d7;
    border-bottom: 1px solid #ede9d7;
}

#mainmenu li {
    list-style: none;
    line-height: 80px;
}

#mainmenu a {
    display: block;
    text-decoration: none;
    padding: 0 10px;
    color: #85a89f;
}

#mainmenu a:hover {
    background-color: #85a89f;
    color: #fff;
}

/* + + + + + CONTENT + + + + + + */

#testwidthdiv {
    margin: auto;
    background-color: aqua;
    padding: 30px 0;
}

/* + + + + + CONTENT LEFT + + + + + + */

.boxed  #maincontent,
.stretched  #maincontent {
    flex: 2 1 0%; /* - Dadurch übernimmt der Content die ganze verfügbare Breite, wenn die Seitenspalte nicht existiert - */
    padding: 50px 150px 50px 0;
    position: relative;
}

#maincontent .overcookie {
    position: absolute;
    z-index: 20;
    right: 50px;
    bottom: -50px;
}

#aktuellesbox {
    background-color: #ede9d7;
    position: relative;
    background-image: url(../images/biss2.gif);
    background-repeat: no-repeat;
    background-position-x: 26%;
}

#aktuellesbox .overcookie {
    position: absolute;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
}

#aktuellesbox h2 {
    color: #e2af47;
    max-width: 1200px;
    margin: auto;
}

#fortbildungenbox {
    background-color: #D46753;
    position: relative;
    background-image: url(../images/biss3.gif);
    background-repeat: no-repeat;
    background-position-x: 70%;
}

#fortbildungenbox .overcookie {
    position: absolute;
    z-index: 20;
    left: 34%;
    bottom: -24px;
}

#fortbildungenbox h2 {
    color: #fff;
    max-width: 1200px;
    margin: auto;
}

.boxboard {
    padding: 20px 0 50px;
    
}

.boxboard h2 {
    font-size: 2rem;
}

#marktplatzbox {
    display: flex;
    padding: 20px 0 50px;
}

#marktleft,
#marktcenter,
#marktright {
    flex: 1;
    background-color: #E2AF46;
    width: 31%;
    margin: 26px 1.1% 26px 1.1%;
    padding: 20px;
}

#marktplatzbox h3 {
    font-size: 1.8em;
    margin: 0;
    line-height: 1.4;
    color: #fff;
}

#marktplatzbox h4 {
    font-family: 'Merriweather';
    color: #d46753;
    font-weight: 700;
}

/* + + + + + SIDEBAR + + + + + + */

#sidebar-l {
    flex: 1 1 0%;
    padding: 50px 20px 50px 0;
}

#sidebar-r {
    flex: 1 1 0%;
    padding: 50px 20px 50px 0;
}

.home #sidebar-r section,
#footerright section {
    padding: 20px;
    margin-bottom: 30px;
}

#cta-start-first {
    background-color: #D46753;
    background-image: url(../images/biss1.gif);
    background-repeat: no-repeat;
    background-position: top right;
    position: relative;
}

#cta-start-first .overcookie {
    position: absolute;
    z-index: 20;
    bottom: -24px;
    right: 30px;
}

#cta-start-second {
    background-color: #E2AF46;
    text-align: center;
}

#cta-start-third {
    background-color: #85A99F;
    text-align: center;
}

.home #sidebar-r h3,
#footerright section h3 {
    font-family: 'Merriweather';
    color: #fff;
    font-size: 1.4rem;
}

.home #sidebar-r section,
#footerright section {
    position: relative;
}

.home #sidebar-r section a,
#footerright section a {
    text-decoration: none;
}

.home #sidebar-r section:hover .overlay::before,
#footerright section:hover .overlay::before {
    height: 100%;
    opacity: 0.5;
    z-index: 1;
  }

  .home #sidebar-r section .overlay::before,
  #footerright section .overlay::before {
    content: "";
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background: #333;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: 0.3s;
  }

  #sidebar-r li a {
    text-decoration: none;
    color: #fff;
  }

  #cta-start-first i.fa-circle-right {
    color: #fff;
  }

  .single #sidebar-r .sidebox {
    border: 1px solid #e2af47;
    padding: 10px;
    margin-bottom: 40px;
    background-color: #f8f7ef;
    position: relative;
  }

  .single #sidebar-r .sidebox h2 {
    color: #e2af47;
    /*font-family: 'Fontin SmallCaps Regular';*/
  }

  .single #sidebar-r .sidebox .overcookie {
    position: absolute;
    top: -1px;
    right: -1px;
  }

  .single #content article {
    text-align: justify;
  }

  .single #content figure {
    margin: .75rem 0;
  }

  .single #content figure img {
    width: 100%;
  }

  .single #content figure figcaption {
    padding: 6px 0 10px;
    font-size: 70%;
    color: #555;
  }

/* + + + + + MASONRY + + + + + + */

.masonry {
    max-width: 1200px;
    margin: auto;
    /* border: 1px solid #777; */
    /* padding: 14px; */
}

.masonry .item {
   box-sizing: border-box;
  width: 33.333%;
  padding: 0 12.5px;
  margin-bottom: 25px;
}

.masonry .iteminner {
    box-sizing: border-box;
  height: 100%;
  padding: 1.25rem;
  background-color: #fff;
}



.masonry h3 {
    font-size: 1.8em;
    margin: 0;
    line-height: 1.4;
    color: #d46753;
}

.masonry img {
    width: 100%;
}

/* + + + + + FOOTER + + + + + + */

#colophon {
    display: flex;
    background-color: #85A99F;
    position: relative;
}

#colophon .overcookie {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: -34px;
}

#colophon .boxed > div {
    padding: 30px;
}

#colophon .boxed {
    justify-content: space-between;
}

#colophon ul {
    list-style: none;
}

#colophon li {
    font-size: 1.2rem;
    margin: 6px 0;
}

#colophon a {
    color: #fff;
    text-decoration: none;
}

#footerleft {
    
}

#footercenter {
    margin-right: 20%;
}

#footerright {
    
}

#footerright section h3 {
    text-align: center;
}

#footerright .redbutton {
    background-color: #D46753;
}

#footerright .whitebutton {
    background-color: #fff;
}

#footerright .whitebutton h3 {
    color: #456F63;
}

/* + + + + + TOPMENU + + + + + + */

#bottommenu {
    background-color: #456f63;
    padding: 10px 0;
}

#bottommenu p {
    margin: 0;
    color: #fff;
}

#bottommenu a {
    text-decoration: none;
    color: #fff;
}

/* + + + + + RESPONSIVE  + + + + + + */

@media screen and (max-width: 900px) {
    .masonry .item {
        width: 50%; 
      }
} 

@media screen and (max-width: 600px) {
    .masonry .item {
        width: 100%; 
      }
}