/**
## Farben -Themen ##
physik-chemie-und-unser-universum 
bg: #8f8bb3
border: #76719e

umwelt-pflanzen-und-natur
background-color: #b1d336;
border: #79ad0b;

koerper-gesundheit-und-ernaehrung
background-color: #ebbf90;
border: #d38e5e;

tiere-tiere-und-tiere
background-color: #f6ad13;
border: #d27401;

wirtschaft-arbeit-und-geld
background-color: #66c6dc;
border: #43abc3;

technik-informatik-und-mathematik
background-color: #67b2b4;
border: #4f9b9f;

lernen-sprache-und-kultur
background-color: #ebc808;
border: #daad18;

gesellschaft-geschichte-und-recht
background-color: #ff7f33;
border: #ff6423;

gesund-und-gluecklich
background-color: #ff5450;
border: #ff1b19;

klima-und-energie
background-color: #79c9aa;
border:  #5fb793;

## Blog ##
Feld weiss / Linie 1px #ffc400
Headlines: #706f6f Mikado 15,5pt /18pt Durchschuss // Fl.Text Roboto Reg 12,5 / 15 - Farbe Schwarz
#header
der HG Verlauf ist von #ffc400 zu #ffe43f (65% von dunkel zu hell) Linie 1px #ffc400
## Hintergrund
#ffea67

## gelb 2 - Bg Formular
#ffe43f


**/
/** temporär! **/
body.blog .filter-group,
body.blog .filter-trigger {
    visibility: hidden;
}
body.blog #page-container #left-area .header-wrapper .illu {
    text-align: right;
}
body.blog #page-container .no_sidebar #left-area {
    width: 100%;
    padding-right: 0px;
    min-height:initial!important; 
}

body.blog .content-wrapper {
    background: linear-gradient(0deg, #ffea67 0%, rgba(255,255,255,1) 50%);
}
body.single-post .header-wrapper {
    background: linear-gradient(0deg, #ffea67 0%, rgba(255,255,255,1) 50%);
}

body:not(.logged-in) .simplefavorite-button{
    display: none;
}
/** single post **/
.single-post #sidebar .related-post-wrapper{
    display: block;
    position: relative;
    clear: both;
}

/** Menü **/
#page-container #nice-mobile-menu .menu-footer .menu-aha-blog a {
    color: transparent!important;
}
#page-container #nice-mobile-menu .menu-footer li.menu-aha-blog{
    margin-top: 8px !important;
}

ul li.menu-aha-blog a{
    padding:4px!important;
}
ul li.menu-aha-blog  {
    background-color: transparent !important;
    background: url('/wp-content/themes/kinderbuero-custom/images/AHA_Schrift ZW.svg') no-repeat;
    width: 100px;
    background-size:contain;
    background-position:center;
    margin-top: 13px !important;
    position: relative;
    top: 3px;
} 
#quicklinks-navbar ul li.menu-aha-blog a {
    color: transparent !important;
}
/* https://kinderuni.online/wp-content/uploads/sites/11/2022/07/aha-blog-schrift.png */

a.linked-teaser{
    position: relative;
    display: block;
}
.single-post #main-content,
.blog #courses-wrapper  {
    background-color: #ffea67;
}

.single-post #left-area{
    background-color: #fff;
    border-radius: 8px;
}
.single-post #main-content h1,
.single-post #main-content h2,
.single-post #main-content h3,
.single-post #main-content h4{
    color: #706f6f;
}
.single-post .entry-title {
    margin-top: 0;
}
.single-post #page-container #left-area {
    padding: 20px;
}

.single-post #sidebar .related-post-wrapper .thumb{
    display: block;
    width: 30%;
    float: left;
    padding-right: 10px;
}
.single-post #sidebar .related-post-wrapper .content{
    display: block;
    padding: 5px;
}
.single-post #sidebar .related-post-wrapper img{
    border-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: block;
    margin-bottom: 0!important;
    margin: 0;
}
.single-post #sidebar .sub-widget.related-posts a{
    border: 1px solid;
    border-right: 8px solid;
    border-color:#ffea67;
    border-radius: 12px;
    margin-bottom: 5px;
    color: #706f6f !important;
}
.single-post #sidebar .sub-widget.related-posts a.thema-wirtschaft-arbeit-und-geld{
    border-color: #66c6dc;
}
.single-post #sidebar .widget-first{
    background-color: #ffc400 !important;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.single-post #sidebar .sub-widget{
    background-color: #fff;  
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.single-post #sidebar h4{
    color: #333;
}

.single-post p:not(.has-background):last-of-type {
    padding-bottom: 15px;
} 

.widget_text.aha-form img{
    margin: auto;
}

/** Formular **/
.remodal, .remodal-wrapper:after {
    background-color: #ffc400 !important;
}

.remodal .caldera-grid h2 {
    color: #333;
}
.single-post #sidebar button.caldera-forms-modal{
    display: block;
    width: 150px;
    background: url(https://kinderuni.online/wp-content/uploads/sites/11/2022/07/schreibuns-w.png) no-repeat;
    background-size: contain;
    height: 43px;
    cursor: pointer;
    border: none;
    color: transparent;
    margin: 20px 0 0 0;
}
/** Bereiche **/

/** top post **/
.blog-top-wrapper{
    width: 100%;
    background-color: #ffea67;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 0;
}
.blog .top-post{
    display: flex;
    border-radius: 8px;
    background-color: #fff;
}
.blog .top-post a.read-more{
    display: block;
    margin-top: 15px;
    border: none !important;
}
.blog .top-post a.read-more::before{
    content: '>> ';
}
.blog .top-post h2,
.blog .top-post h3{
    color: #706f6f;
}
.blog .top-post .left-area,
.blog .top-post .right-area{
    padding: 20px;
}
.blog .top-post .left-area{
    position: relative;
    width: 50%;
}
.blog .top-post .right-area{
    width: 50%;
}
.blog .top-post .right-area img{
    border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: block;
}

.blog a.grid-link .content {
    max-width: 60%;
}
.blog #et-main-area .button:not(.filter-button):not(.acf-repeater-add-row):not(.acf-button){
    background-color: #f6a500;
}
.blog #et-main-area .button.aha-tag.reset{
/*     background-color: #f7cf49 !important;
    color: #333 !important; */
    font-size: 180%;
}
.blog #et-main-area .button.aha-tag.reset.active{
    background-color: #fff !important;
}
.blog #et-main-area .button.aha-tag:hover{
    background-color: #ffea67 !important;
}
.blog #et-main-area .button.aha-tag.active:hover{
    background-color: #fff !important;
}
.blog #et-main-area .button.aha-tag.reset.active:hover{
    color: #333 !important;
}
/* Autor*innen */
.blog-author-area-top{
    position: relative;
    border-bottom: 4px dotted #ffc400;
    margin-bottom: 25px;
    padding-bottom: 15px;
}

body.single-post .simplefavorite-button {
    padding: 7px;
    font-size: 16px;
    border-radius: 50%;
    box-shadow: none;
    border: none;
    transition: opacity 0.4s ease-in-out;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
}
.author-item h4 span.name{
    font-weight: normal;
}
.author-item .author-logo img{
    border-radius: 8px;
    max-width: 200px;
    margin-top: 10px;
}
.blog-author-area-top .author-item{
    display: flex;
    padding-left: 10%;
}
.blog-author-area-top .author-item.no-author {
    padding-left: 0;
}
.blog-author-area-top .author-item .name_date{
    padding-top: 20px;
    color: #706f6f;
}
.blog-author-area-top .author-item .avatar{
    height: 80px;
    width: 80px;
    margin-left: 30px;
}
.blog-author-area-top .author-item .avatar img{
    border-radius: 50%;
    border: 1px solid;
}

.blog-author-area-bottom{
    border-top: 4px dotted #ffc400;   
    padding: 20px;
    margin: 0 -20px 0 -20px;
    background-color: #dbdbdb;
}
.blog-author-area-bottom .author-item{
    display: flex;
}
.blog-author-area-bottom .author-item .author_text{
    width: 70%;
    padding-right: 15px;
}
.blog-author-area-bottom .author-item .image-area {
    width: 30%;
    text-align: center;
}
.blog-author-area-bottom .author-item .attachment-thumbnail{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    border: 1px solid;
}

.blog-top-wrapper .author-item{
    display: flex;
    position: absolute;
    right: 15px;
    bottom: 15px;
}
.blog-top-wrapper .author-item .avatar {
    height: 70px;
    width: 70px;
    margin-left: 70px;
}
.blog-top-wrapper .author-item .avatar img {
    border-radius: 50%;
    border: 1px solid;
    opacity: 0.7;
}
.blog-top-wrapper .author-item .name_date{
    padding-top: 15px;
    color: #706f6f;
    font-size: 90%;
}

/** gallery **/
.psgal_wrap{
    margin-left: -15px;
    margin-top: 20px;
}
.single-post .psgal_wrap figcaption{
    display: block !important;
    padding-top: 5px;
    color: #555;
}
.single-post .psgal {
    padding-bottom: 25px;
}
/** Video **/
.single-post .video-gallery-wrapper .grid-item h4 {
    color: #333 !important;
}
.single-post .grid-item-wrapper{
    background-color: #f1f1f1 !important;
}
.text_after_videos{
    padding-bottom: 20px;
}
/** Podcast **/
.single-post .audio-wrapper {
    margin-top: 0;
    margin-bottom: 25px;
}
.podcasts_description{
    padding-bottom: 20px;
}
.single-post .course-item.audio-item{
    background-color: #f1f1f1;
    padding: 5px;
    border-radius: 8px;
}
.single-post .mejs-container .mejs-controls {
    background: #f1f1f1;
    border-radius: 5px;
}
.single-post .mejs-controls .mejs-time-rail .mejs-time-total {
    background: #ffc400;
}
.single-post .mejs-horizontal-volume-total {
    height: 4px;
    top: 18px;
}
.single-post .mejs-time-total {
    border-radius: 2px;
    height: 4px;
    margin: 9px 0 0;
}
.single-post .mejs-button>button {
    background: transparent url('../../images/mejs-controls.svg');
}

.single-post .mejs-time {
    color: #706f6f;
}

.single-post .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
 .single-post .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #ffc400;
}

/* Start: Play/Pause/Stop */
.single-post .mejs-play > button {
    background-position: 0 0;
}

.single-post .mejs-pause > button {
    background-position: -20px 0;
}

.single-post .mejs-replay > button {
    background-position: -160px 0;
}

/* Start: Mute/Volume */
.single-post .mejs-mute > button {
    background-position: -60px 0;
}

.single-post .mejs-unmute > button {
    background-position: -40px 0;
}

.single-post .mejs-volume-button {
    position: relative;
}

.audio-text .description{
    color: #706f6f;
    font-size: 90%;
}

/** downloads **/
.downloads-wrapper{
/*     background: linear-gradient(0deg, #ffc400 0%, rgba(255,255,255,1) 65%); */
    background-color: #ffc400;
    padding: 15px;
    border-radius: 8px;
    margin: 0 -5px 25px -5px;
    text-align: center;
}
.downloads-wrapper i.fa.fa-download{
    font-size: 80px;
    position: absolute;
    left: 30px;
    padding-top: 10px;
/*     color: rgba(0, 0, 0, 0.2); */
    color: #ffea67;
}
.single-post #main-content .downloads-wrapper h3{
    color: #333;
}
.single-post ul.downloads{
    margin: 0 !important;
}
.single-post ul.downloads li{
    list-style: none;
    margin-left: 0;
    margin-bottom: 15px !important;
}
.single-post #et-main-area ul.downloads li a{
    color: #fff !important;
    font-weight: bold;
}

/** Übersicht **/
.blog .grid-item-wrapper{
    background-color: #fff !important;

}
.blog #et-main-area .grid-item h3,
.blog .grid-item-meta .text {
    color: #706f6f!important;
}

.blog .grid-content span.icon:before {
    color: #706f6f;
}

.blog .grid-item .author-item-grid {
    display: block;
    position: relative;
    color: #706f6f;
    font-size: 85%;
    line-height: 1.2;
    margin-top: 10px;
}
.blog .tags-wrapper ul li{
    display: inline-block;
    margin-right: 10px;
}
.blog .tags-wrapper ul li a.button.active{
    background-color: #fff;
    color: #000 !important;
}

@media screen and (max-width: 850px){
    .blog .top-post{
        display: block;
    }
    .blog .top-post .left-area,
    .blog .top-post .right-area {
        width: 100%;
    }
    .blog .top-post .right-area img {
        border-radius: 0;
        display: block;
        width: 100%;
    }
    .blog-top-wrapper .author-item {
        display: block;
        position: relative;
        left: 0;
        bottom: 0;
        text-align: right;
    }
    .blog-top-wrapper .author-item .avatar {
        height: 70px;
        width: 70px;
        margin-left: 70px;
        display: inline-block;
    }
    .blog-top-wrapper .author-item .name_date {
        padding-top: 0;
    }
    .blog .top-post a.read-more {
        margin-top: 0;
        position: absolute;
        bottom: 15px;
    }
}