/*
artikel.css
URI: http://www.steckdesign.ch/
Author: steckdesign.ch
Author URI: http://www.steckdesign.ch/
Version: 1.0
*/

a.artikel-link {
    display: flex;
    width: 100%;
    opacity: 1;
    margin-bottom: var( --size-1 );
    text-decoration: none;
}
a.artikel-link:hover .artikel--featured,
a.artikel-link:hover .artikel-list-inner {
    background-color: rgba(17, 58, 128, 0.6);
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.artikel-content--featured {
    background-color: rgba(var(--maincolor-bg), 0.15);
    padding: 0em;
    width: 100%;
    position: relative;
}
.artikel-list-content {
    background-color: rgba(var(--maincolor-bg), 0.15);
    padding: 0em;
    width: 100%;
    position: relative;
}

.artikel-content--featured .artikelbild {
    background-color: rgba(var(--maincolor-bg), 0.15);
    aspect-ratio: 9/4;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
@media (max-width: 768px) { 
    .artikel-content--featured .artikelbild {
        aspect-ratio: 1/1;
    }
}

.artikelbild {
    background-color: rgba(var(--maincolor-bg), 0.15);
    aspect-ratio: 1/1;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.artikel-list-inner {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /* padding-top: var( --size-1 ); */
    /* padding-left: var( --size-1 ); */
    /* padding-right: var( --size-1 ); */
    /* padding-bottom: var( --size-1 ); */
    background-color: transparent;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.artikel--featured {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /* padding-top: var( --size-2 ); */
    /* padding-left: var( --size-2 ); */
    /* padding-right: var( --size-1 ); */
    /* padding-bottom: var( --size-1 ); */
    background-color: transparent;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.artikel--featured .titel-big {
    line-height: 1;
    margin-bottom: 0px;
}
.artikel-list-inner h4,
.artikel-list-inner h5,
.artikel-list-inner h6 {
    font-family: var( --font-semibold );
    font-size: var( --size-125 );
    color: var( --red );
    line-height: 1.2;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto; 
}
.artikel-list-inner p {
    font-size: var( --size-1 );
    line-height: 1.3;
}
@media (min-width: 768px) { 
    .artikel-list-inner p {
        font-size: calc( var( --size-1 ) * 0.8888);
        line-height: 1.4;
    }
}

.artikel-list-link {
    display: block;
    padding-top: 0em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.6em;
    color: #008e3b;
}
/*
.artikel-list-link a,
.artikel-list-link a:visited {
}
*/
.artikel-list-link a:hover,
.artikel-list-link a:active,
.artikel-list-link a:focus {
	color: black!important;
}

/**
 * Basic
 */
.artikel-link-basic {
    text-decoration: none;
}
.artikel-artikeldatum-basic,
.artikel-titel-basic {
    font-family: var( --title-font-hand ); 
    font-style: var( --font-normal ); 
    letter-spacing: 2px; 
    word-spacing: -2px;
    text-transform: uppercase;
}
.artikel-artikeldatum-basic {
    font-size: calc( var( --fontsize ) * 1.3 );
    padding-top: calc( var( --size-1 ) * 0.75);
    margin-bottom: calc( var( --size-1 ) * 0.1);
}
.artikel-titel-basic {
    font-size: calc( var( --fontsize ) * 1.55 );
    margin-bottom: calc( var( --size-1 ) * 0.25);
    color: rgba(var(--sitecolor), 1.0);
}

a.artikel-link-basic:hover .btn-outline-theme-basic {
    color: rgba(var(--white), 1.0)!important;
    background-color: var( --red-400 );
    border-color: var( --red-600 );
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
/*
a.artikel-link-basic:hover {
    background-color: var( --red-400 );
}
*/
/*
a.artikel-link-basic:hover .artikel-artikeldatum-basic,
a.artikel-link-basic:focus .artikel-artikeldatum-basic,
a.artikel-link-basic:hover .artikel-titel-basic,
a.artikel-link-basic:focus .artikel-titel-basic,
a.artikel-link-basic:hover .artikel-textauszug-basic,
a.artikel-link-basic:focus .artikel-textauszug-basic {
    color: rgba(var(--rgb_red), 1.0);
}
*/
.artikel-textauszug-basic {
    text-transform: uppercase;
}

.artikelbild-wrapper-basic {
    overflow: hidden;
}
a.artikel-link-basic:hover .artikelbild,
a.artikel-link-basic:focus .artikelbild {
    transform: scale(1.1);
}



.singlebox {
    display: flex;
    align-items: center;
  }
  
  .a {
    grid-column: col / span 2;
    grid-row: row 1 / 3;
  }
  
.single-headerbild {
    position: relative;
}
.single-headerbild-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: rgba(var(--maincolor-2), 0.7);
}


.artikel_single-titel .titel-big {
    margin-top: var( --size-1 );
    margin-bottom: 0px;
    color: rgba(var(--rgb_red), 1.0);
    line-height: 1;
}

.artikel_single-content {
    font-size: calc( var( --fontsize ) * 1.1 );
    line-height: 1.5;
    margin-bottom: var( --size-2 );
}

.artikel_single-artikeldatum {
    font-size: calc( var( --fontsize ) * 2 );
}
.artikel_single-auszug {
    font-size: calc( var( --fontsize ) * 1.5 );
    line-height: 1.2;
    text-transform: uppercase;
    margin-top: calc( var( --size-1 ) * 0.6);
}


.artikel-artikeldatum-featured {
    font-size: calc( var( --fontsize ) * 2.6 );
    line-height: 1;
    margin-top: calc( var( --size-1 ) * 0.22);
    margin-bottom: calc( var( --size-1 ) * 0.4);
}
.artikel-artikeldatum {
    font-size: calc( var( --fontsize ) * 2 );
    line-height: 1;
    margin-top: calc( var( --size-1 ) * 0.17);
    margin-bottom: calc( var( --size-1 ) * 0.4);
}

span.bgbalken {
    padding: 0px;
    margin: 0px;
    line-height: 0.7;
    padding-left: calc( var( --size-1 ) * 0.9);
    padding-right: calc( var( --size-1 ) * 1);
    color: rgba(var(--white), 1 );
    background-color: rgba(var(--rgb_red), 1 );
}


/* Animation */
@keyframes fadeInUp {
    from {
        transform: translate3d(20px, 0px, 20px);
    }

    to {
        transform: translate3d(0, 0px, 0);
        opacity: 1;
    }
}

.artikel-button {
    display: none;
}
a.artikel-link:hover .artikel-button {
    display: block;
    position: absolute;
    right: 15px;
    bottom: 0px;
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    overflow: hidden;
}