/* ====================================================================== *
   [0] Vorab Settings
 * ====================================================================== */

/* hide no more entries button */
.media-boxes-no-more-entries{
    display:none;
}

/* make your own style of the filter */
.filters-container{
    margin-bottom:20px;
}

.custom-filter{
    padding:0;
    text-align:right;
}

.custom-filter li{
    list-style:none;
    display:inline-block;
    margin-left:18px;
    font-size:12px;
}

.custom-filter li a{
    color:#999;
    text-decoration:none;
}

.custom-filter li a:hover{
    color:#333;
}

.custom-filter li a.selected{
    color:#35b181 !important;
}

/* Set the style of the thumbnail overlay items */
.media-box-title{
    color:#fff;
    font-size:11px;
    margin-bottom:5px;
    text-transform:uppercase;
    letter-spacing:2px;
    line-height:28px;
}

.media-box-date{
    color:#F2F2F2;
    font-size:10px;
}

/* Remove box shadow and border-radius from the media boxes */
.media-box-container{
    -webkit-border-radius:0;
       -moz-border-radius:0;
            border-radius:0;

    -webkit-box-shadow:none;
       -moz-box-shadow:none;
         -o-box-shadow:none;
        -ms-box-shadow:none;
            box-shadow:none;
}

/* thumbnail overlay background */
.thumbnail-overlay{
    background-color:rgba(0,0,0,.40);

    -webkit-transition:background-color .2s ease-out;
       -moz-transition:background-color .2s ease-out;
         -o-transition:background-color .2s ease-out;
            transition:background-color .2s ease-out;
}

/* hover effect on the thumbnail-overlay */
.thumbnail-overlay:hover{
    background-color:rgba(0,0,0,.20) !important;
}

/* hover effect on the image */
.media-box-image img{
    -webkit-transition:transform .6s ease-in-out;
       -moz-transition:transform .6s ease-in-out;
         -o-transition:transform .6s ease-in-out;
        -ms-transition:transform .6s ease-in-out;
            transition:transform .6s ease-in-out;

    -webkit-transform-origin:bottom left;
       -moz-transform-origin:bottom left;
         -o-transform-origin:bottom left;
        -ms-transform-origin:bottom left;
            transform-origin:bottom left;
}

.media-box-image:hover img{
    -webkit-transform:scale(1.2) translate(-20px);
       -moz-transform:scale(1.2) translate(-20px);
         -o-transform:scale(1.2) translate(-20px);
        -ms-transform:scale(1.2) translate(-20px);
            transform:scale(1.2) translate(-20px);
}

/* Change alignment in grid 2 */
#grid2 .thumbnail-overlay>div.aligment>div.aligment{
    vertical-align:bottom;
    padding-bottom:40px;
}

.thumbnail-overlay .media-box-title{
    font-size:16px;
}

.thumbnail-overlay .media-box-date{
    font-style:italic;
    font-size:12px;
}

/* ====================================================================== *
   [ALTCHA] Widget Design – transparent pink
   Ziel:
   - echte kompakte Boxbreite
   - kein riesiger pinker Bereich rechts
   - #ee4494 transparent
   - ALTCHA-Logo und Link sichtbar
 * ====================================================================== */

altcha-widget{
    display:block !important;

    width:390px !important;
    max-width:100% !important;

    margin:16px 0 0 0 !important;

    opacity:1 !important;
    filter:none !important;
    mix-blend-mode:normal !important;

    position:relative !important;
    z-index:20 !important;

    border-radius:10px !important;
    overflow:hidden !important;

    --altcha-color-base:rgba(238,68,148,.34) !important;
    --altcha-color-border:rgba(255,255,255,.35) !important;
    --altcha-color-border-focus:rgba(255,255,255,.65) !important;
    --altcha-color-text:#ffffff !important;
    --altcha-color-error-text:#ffffff !important;
    --altcha-color-footer-bg:rgba(238,68,148,.12) !important;
    --altcha-color-footer-text:rgba(255,255,255,.72) !important;
    --altcha-color-anchor:rgba(255,255,255,.9) !important;
}

/* Shadow-DOM Parts */
altcha-widget::part(base){
    background:rgba(238,68,148,.34) !important;
    border:1px solid rgba(255,255,255,.35) !important;
    border-radius:10px !important;
    color:#ffffff !important;
    box-shadow:none !important;

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

altcha-widget::part(container){
    background:transparent !important;
    color:#ffffff !important;
}

altcha-widget::part(label){
    background:transparent !important;
    color:#ffffff !important;
    font-weight:700 !important;
}

altcha-widget::part(footer){
    background:transparent !important;
    color:rgba(255,255,255,.72) !important;
}

altcha-widget::part(checkbox){
    background:#ffffff !important;
    border-color:#ffffff !important;
}

/* Fallback für sichtbare Inhalte */
altcha-widget a,
altcha-widget small,
altcha-widget span,
altcha-widget label{
    color:rgba(255,255,255,.85) !important;
}

altcha-widget input[type="checkbox"]{
    accent-color:#ffffff !important;
}

/* WICHTIG:
   Kein globales altcha-widget * background-color mehr,
   sonst wird wieder die riesige Fläche pink.
*/

/* Hover */
altcha-widget:hover{
    transform:translateY(-1px);
    transition:all .2s ease;
}

/* Mobile */
@media(max-width:520px){
    altcha-widget{
        width:100% !important;
    }
}