@charset "utf-8";

/* ==========================================================
   FORUM KÖPENICK SHOP CARDS
   GRID + CARD
========================================================== */

.forum-cards{

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1.5rem;
    align-items:stretch;
	font-family: 'Encode Sans';
}

.forum-cards > *{

    margin:0;
    list-style:none;

}


/* ==========================================================
   CARD
========================================================== */

.forum-card{

    position:relative;

    display:flex;
    flex-direction:column;

    min-width:0;
    height:100%;

    padding:10px;

    background:#fff;

    color:inherit;
    text-decoration:none;

    box-shadow:
        0 8px 28px rgba(0,0,0,.06);

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        box-shadow .35s cubic-bezier(.2,.7,.2,1);

}

.forum-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 16px 40px rgba(0,0,0,.10);

    color:inherit;

}


/* ==========================================================
   IMAGE
========================================================== */

.forum-card__image-wrap{

    position:relative;

    aspect-ratio:16/10;

    overflow:visible;

}

.forum-card__image-inner{

    width:100%;
    height:100%;

    overflow:hidden;

    border-radius:18px;

}

.forum-card__image{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .45s cubic-bezier(.2,.7,.2,1);
	
	aspect-ratio: 16 / 9;

}

.forum-card:hover .forum-card__image{

    transform:scale(1.04);

}


/* ==========================================================
   LOGO
========================================================== */

.forum-card__logo-wrap{

    position:absolute;

    right:30px;
    bottom:-40px;

    z-index:20;

}

.forum-card__logo{

    display:flex;
    align-items:center;
    justify-content:center;

    width:150px;
    height:150px;

    background:#fff;

    border-radius:50%;

    box-shadow:
        0 8px 24px rgba(0,0,0,.12);

}

.forum-card__logo img{

    width:84%;
    height:84%;

    object-fit:cover;

    border-radius:50%;

    /*filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));*/
	box-shadow: none;
	aspect-ratio: 16 / 9;

}


/* ==========================================================
   CATEGORY BADGE
========================================================== */

.forum-card__badge-wrap{

    position:absolute;

    left:18px;
    bottom: 10px;

    z-index:25;

}

.forum-card__badge{

    display:inline-flex;
    align-items:center;

    padding:.5rem 1rem;

    border-radius:999px;

    font-size:.72rem;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.04em;

    background:var(--forum-accent-bg);
    color:var(--forum-accent);

}

/* ==========================================================
   CONTENT
========================================================== */

.forum-card__content{

    display:flex;
    flex-direction:column;
    flex:1;

    padding: 40px 42px 42px;

}


/* ==========================================================
   META
========================================================== */

.forum-card__floor-wrap{

    margin-bottom:1rem;

}

.forum-card__floor{

    display:inline-flex;
    align-items:center;
    gap:.45rem;

    color:#6f6f6f;

    font-size: .82rem;
    font-weight: 300;

    letter-spacing:.03em;

}

.forum-card__floor svg{

    width:16px;
    height:16px;

    flex:none;

    fill:#00a7b5;

    opacity:.75;

}


/* ==========================================================
   HEAD
========================================================== */

.forum-card__head{

    min-height:6.8rem;


}

.forum-card__title{

    margin:0 0 1rem;

    color:#009fb4;

    font-size:1.38rem;
    font-weight:600;
    line-height:1.15;

    transition:color .25s ease;
	text-wrap: balance;

}

.forum-card:hover .forum-card__title{

    color:#008899;

}

.forum-card__teaser{

    margin:0;

    color:#404040;

    font-size:1rem;
    line-height:1.55;
    font-weight:600;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;
	
    letter-spacing: .5px;
	text-wrap: balance;

}


/* ==========================================================
   OPENING HOURS
========================================================== */

.forum-card__hours{

    display:flex;
    align-items:center;

    gap:.75rem;

    min-height:50px;


    padding: 3px 0;

    border-top:1px solid #e7e7e7;
    border-bottom:1px solid #e7e7e7;

    color:#555;

    font-size:.95rem;
    line-height:1.35;
	
	font-weight: 400;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
	text-wrap: balance;

}

.forum-card__hours svg{

    width:18px;
    height:18px;

    flex:none;

    fill:#00a7b5;

    opacity:.75;

}


/* ==========================================================
   FEATURES
========================================================== */

.forum-card__features{

    display:flex;
    flex-wrap:wrap;

    gap:.55rem;

    margin-bottom:1.5rem;

}

.forum-card__features span{

    display:inline-flex;
    align-items:center;

    padding:.42rem .8rem;

    background:#f5f7f8;

    border-radius:7px;

    color:#5c6772;

    font-size:.84rem;
    font-weight:500;
    line-height:1;

    white-space:nowrap;
	


}


/* ==========================================================
   BUTTON
========================================================== */

.forum-card__more{

    margin-top:auto;

    align-self:flex-end;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.8rem 1.15rem;

    border:1px solid #00a7b5;
    border-radius:4px;

    background:#fff;

    color:#00a7b5;

    font-size:.9rem;
    font-weight:700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}

.forum-card:hover .forum-card__more{

    background:#00a7b5;

    color:#fff;

}

/* ==========================================================
   CATEGORY COLORS
========================================================== */

.forum-card{

    --forum-accent-bg:#dff5f7;
    --forum-accent:#009fb4;

}

.forum-card--mode{

    --forum-accent-bg:#dff5f7;
    --forum-accent:#009fb4;

}

.forum-card--beauty{

    --forum-accent-bg:#fff3cf;
    --forum-accent:#d39a00;

}

.forum-card--books{

    --forum-accent-bg:#f7efcf;
    --forum-accent:#9d8600;

}

.forum-card--service{

    --forum-accent-bg:#e7f1ff;
    --forum-accent:#4f84d9;

}

.forum-card--elektronik{

    --forum-accent-bg:#e6f5ea;
    --forum-accent:#3d9c58;

}

.forum-card--gastro{

    --forum-accent-bg:#efe6fb;
    --forum-accent:#8b5ad3;

}

.forum-card--wohnen{

    --forum-accent-bg:#efe8e3;
    --forum-accent:#8d6852;

}

.forum-card--familie{

    --forum-accent-bg:#fae7ef;
    --forum-accent:#c55482;

}

.forum-card--sport{

    --forum-accent-bg:#e5f7ee;
    --forum-accent:#299b61;

}


/* ==========================================================
   SMALL DETAILS
========================================================== */

.forum-card img{

    max-width:100%;
    height:auto;

}

.forum-card svg{

    display:block;

}

.forum-card:focus-visible{

    outline:2px solid #009fb4;
    outline-offset:4px;

}
/* ======================================================
   SHOP FILTER
====================================================== */

.forum-shop-filter{

    display:flex;
    gap:1rem;

    align-items:center;
    justify-content:space-between;

    margin-bottom:2.5rem;

}

.forum-shop-search{

    flex:1;

    height:54px;

    padding:0 1.25rem;

    background:#fff;

    border:1px solid #d9e3e6;
    border-radius:14px;

    font-size:1rem;
    font-family:inherit;

    box-shadow:0 3px 10px rgba(0,0,0,.03);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.forum-shop-search::placeholder{

    color:#98a2aa;

}

.forum-shop-search:focus{

    outline:none;

    border-color:#00a7b5;

    box-shadow:0 0 0 4px rgba(0,167,181,.12);

}


.forum-shop-category{

    width:360px;
    height:54px;

    padding:0 1.15rem;

    background:#fff;

    border:1px solid #d9e3e6;
    border-radius:14px;

    font-size:1rem;
    font-family:inherit;

    cursor:pointer;

    box-shadow:0 3px 10px rgba(0,0,0,.03);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.forum-shop-category:focus{

    outline:none;

    border-color:#00a7b5;

    box-shadow:0 0 0 4px rgba(0,167,181,.12);

}
.forum-shop-search{

    padding-left:3rem;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398a2aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:18px center;

}
/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1400px){

    .forum-cards{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}
@media (max-width:900px){

    .forum-shop-filter{

        flex-direction:column;
        align-items:stretch;

    }

    .forum-shop-category{

        width:100%;

    }

}

@media (max-width:980px){

    .forum-cards{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .forum-card__content{

        padding:52px 30px 30px;

    }

    .forum-card__logo{

        width:135px;
        height:135px;

    }

}
@media (max-width: 849px) {
.forum-card{
    padding:14px;
}

.forum-card__content{
    padding:18px;
}

.forum-card__logo-wrap{
    width:92px;
    height:92px;
}

.forum-card__title{
    font-size:1.45rem;
}

.forum-card__teaser{
    font-size:.95rem;
}

.forum-card__hours{
    margin:16px 0;
}

.forum-card__features{
    gap:6px;
}

.forum-card__more{
    margin-top:20px;
}
    .forum-cards{

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .forum-card{

        padding:8px;

    }

    .forum-card__content{

        padding:48px 24px 24px;

    }

    .forum-card__logo-wrap{

        right:22px;
        bottom:-34px;

    }

    .forum-card__logo{

        width:84px;
        height:84px;

    }

    .forum-card__head{

        min-height:auto;

    }

    .forum-card__title{

        font-size:1.25rem;

    }

    .forum-card__teaser{

        font-size:.95rem;

    }

    .forum-card__hours{

        min-height:auto;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .forum-card,
    .forum-card__image,
    .forum-card__more,
    .forum-card__title{

        transition:none;

    }

}