/**
*
* .c31
*  container and flexible amount of cards
*
**/

/*======= 320  padding l,r  15  = 290 ===*/

.c31 {
    text-align: center;
    margin-bottom: 2em;
    background-color: var(--areaBg);
    padding-bottom: 3em;
}

.c31.bottomLine {
    border-bottom: 1px solid var(--fontDarkBlue);
}

.c31 .top-article h2 {
    font-size: 2em;
}

.c31 .card {
    background-color: white;
    padding: 5px;
}

.c31 .card h3 {
    font-size: 1.7em;
}


.c31 .card-footer p {
    text-align: center;
}


.c31 article {
    margin-bottom: 2em;
}

.c31 .card {
    margin-bottom: 2em;
    padding-bottom: 2em;
}

.c31 .icon {
    height: 100px;
    width: auto;
}

.c31 .link {
    display: block;
    width: 250px;
    margin-bottom: 20px;
    padding: 10px 5px;
    margin-top: 20px;
    color: white;
}

.c31 .link a {
    text-transform: uppercase;
    color: white;
}

.c31 .link a:hover {
    font-weight: 500;
}

.c31 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    align-items: flex-start;
}

/* When card is expanded, only take its own height, don't affect neighbors */
.c31 .card.expanded {
    align-self: flex-start;
}

/* normal grid of cards */
.c31 .card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
}

/* Card Header - Logo and Title Area */
.c31 .card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 0;
    min-height: 100px;
}

.c31 .card .logo {
    height: 80px;
    width: auto;
    flex-shrink: 0;
}

.c31 .card-title {
    font-size: 1.3em;
    margin: 0;
    flex-grow: 1;
    display: none;
}

/* Card Content - Hidden by default on small screens */
.c31 .card-content {
    display: none;
    margin-top: 20px;
}

.c31 .card-content h3 {
    margin-top: 0;
}

.c31 .card-content p,
.c31 .card-content li {
    text-align: left;
}

/* Toggle Button - Green Triangle */
.c31 .card-toggle {
    position: absolute;
    bottom: 15px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    background-color: var(--green);
    cursor: pointer;
    padding: 0;
    display: block !important;
    z-index: 10;
    transition: all 0.3s ease;
    clip-path: polygon(5% 15%, 95% 15%, 50% 100%);
    flex-shrink: 0;
    pointer-events: auto;
}

.c31 .card-toggle:focus {
    outline: 2px solid rgba(0, 0, 0, 0.2);
}

.c31 .card-toggle::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 0px solid transparent;
    border-top: 8px solid white;
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.c31 .card-toggle:hover {
    opacity: 0.8;
}

.c31 .card.expanded .card-toggle {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.c31 .card.expanded .card-content {
    display: block !important;
}

.c31 .card.expanded .card-content {
    display: block;
}

.c31 .card-footer {
    margin-top: auto;
    align-self: center;
    padding-bottom: 20px;
}

/* Filter Buttons Styles */
.c31-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 1em;
    margin-bottom: 2em;
    border-bottom: 1px solid #000;
    padding-bottom: 30px;
}

.filter-btn {
    padding: 10px 20px;
    border: none;
    background-color: white;
    color: var(--darkBlue);
    border-radius: 0;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: all 0.3s ease;
    text-transform: capitalize;
}

.c31 .filter-btn.all-btn {
    background-color: transparent;
    border: none;
    width: 34px;
    height: 43px;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg width="84" height="96" version="1.1" viewBox="0 0 84 96" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><marker id="TriangleStart" overflow="visible" markerHeight="4" markerWidth="4" orient="auto-start-reverse" preserveAspectRatio="xMidYMid" viewBox="0 0 5.3244081 6.1553851"><path transform="scale(.5)" d="m5.77 0-8.65 5v-10z" fill="context-stroke" fill-rule="evenodd" stroke="context-stroke" stroke-width="1pt"/></marker></defs><g transform="translate(-1.9358 -3.8706)" style="stroke:%23041e49"><path transform="rotate(252.03)" d="m-36.506 35.603a35.431 35.431 0 0 1-36.383 23.178 35.431 35.431 0 0 1-31.805-29.144 35.431 35.431 0 0 1 19.919-38.264 35.431 35.431 0 0 1 42.116 9.3368" fill="none" marker-start="url(%23TriangleStart)" stroke="%23000" stroke-width="9.8893" style="stroke-width:9.889;stroke:%23041e49"/></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
}

.filter-btn:hover {
    background-color: var(--darkBlue);
    color: white;
}

.filter-btn.active {
    background-color: var(--darkBlue);
    color: white;
}

.filter-btn.active:not(.all-btn) {
    background-color: var(--darkBlue);
    color: white;
}

.filter-btn.active:not(.all-btn)::before {
    filter: brightness(0) invert(1);
}

.c31 .filter-btn.all-btn:hover,
.c31 .filter-btn.all-btn.active {
    background-color: transparent;
    color: var(--darkBlue);
}

/* Card Filter Animations */
.c31 .card {
    animation-duration: 0.3s;
}

.c31 .card.fade-in {
    animation: fadeIn 0.3s ease-in;
}

.c31 .card.fade-out {
    animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}





/*======= 576 ========= MEDIA QUERIES ======= border 15 = 546 ===*/

@media only screen and (min-width: 576px) {
    /* Grid layout for buttons - 3 columns */
    .c31-filter-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 100%;
        padding: 0 20px 20px 0;
        margin-left: auto;
        margin-right: auto;
        justify-items: center;
    }

    /* Square buttons with icons */
    .filter-btn:not(.all-btn) {
        width: 120px;
        height: 120px;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.85em;
        position: relative;
    }

    /* Icon styling with ::before */
    .filter-btn:not(.all-btn)::before {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Individual button icons - Replace these SVGs with your designer's icons */
    .filter-handwerk::before {
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Handwerk" xmlns="http://www.w3.org/2000/svg" width="55" height="71.5" viewBox="0 0 55 71.5"><path d="M29.042,23.775l-5.138-5.138c-2.19-2.309-1.561-5.36-1.546-6.222.101-2.8-.919-5.675-3.06-7.812-3.062-3.063-7.549-3.832-11.331-2.302l5.501,5.502c1.574,1.573,1.554,4.17-.021,5.746-1.574,1.577-4.174,1.597-5.75.024l-5.498-5.502c-1.529,3.778-.761,8.266,2.306,11.332,2.136,2.136,5.009,3.154,7.808,3.056.676-.009,2.713-.403,4.676.498" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M35.336,40.81l11.172,11.171c1.924,1.923,3.894,2.372,5.817.446,1.925-1.923,1.479-3.891-.448-5.817l-2.482-2.481" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M47.654,35.506c1.197-1.196,3.177-1.179,4.391.039l.517.511c1.213,1.218,1.23,3.194.034,4.392l-3.632,3.63c-1.197,1.198-3.175,1.183-4.393-.035l-.511-.511c-1.217-1.217-1.233-3.195-.036-4.394l3.63-3.631Z" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M44.065,29.222c1.196-1.197,3.172-1.181,4.389.036l.514.513c1.215,1.217,1.233,3.193.035,4.389l-4.978,4.978c-1.197,1.199-3.175,1.184-4.391-.031l-.512-.514c-1.217-1.217-1.233-3.195-.035-4.393l4.978-4.977Z" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M28.767,24.763l4.697-4.699c1.198-1.197,3.177-1.18,4.394.036l.514.515c1.215,1.216,1.231,3.193.036,4.392l-4.564,4.561" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M34.149,29.262l6.223-6.22c1.197-1.2,3.169-1.186,4.388.036l.512.508c1.217,1.221,1.235,3.194.035,4.394l-6.22,6.22" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M28.639,43.354s2.955-6.061-1.763-10.779" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><path d="M24.242,61.301l3.27-3.271s2.461.712,5.59-.694c2.652-1.189,6.343-4.165,10.553-8.097" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/><path d="M24.973,30.655l4.78,4.781c3.63,3.626,8.247-.989,8.247-.989,0,0-9.298-9.298-10.282-10.283-1.658-1.657-3.735-1.45-3.735-1.45-5.287,3.008-7.21,7.736-7.21,7.736-.935,1.763-1.975,10.871-1.975,10.871-.153,1.92-1.035,3.114-1.035,3.114" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/><polyline points="1.949 51.213 7.904 45.258 26.655 64.008 20.7 69.963" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/></svg>');
    }

    .filter-industrie::before {
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Industrie" xmlns="http://www.w3.org/2000/svg" width="74.108" height="69" viewBox="0 0 74.108 69"><polyline points="25.392 43.67 34.196 38.189 34.196 46.015 46.833 38.171 46.833 46.093 59.53 38.24 59.53 67.175" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="26.722" y1="54.076" x2="32.27" y2="54.076" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="37.64" y1="54.076" x2="43.188" y2="54.076" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="48.556" y1="54.076" x2="54.104" y2="54.076" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M23.413,7.555c.934-3.425,4.069-5.94,7.788-5.94,4.459,0,8.074,3.616,8.074,8.075,0,2.879-1.508,5.405-3.775,6.834" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><path d="M14.2,15.932c0-4.39,3.56-7.947,7.948-7.947,1.593,0,3.08.469,4.324,1.276" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><polyline points="6.561 63.254 8.872 20.707 19.465 20.707 21.99 67.175" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="12.501" y1="27.17" x2="19.521" y2="27.17" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="1.25" y1="67.385" x2="64.651" y2="67.385" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><line x1="69.401" y1="67.385" x2="72.858" y2="67.385" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/></svg>');
    }

    .filter-handel::before {
        background-image:url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Handel" xmlns="http://www.w3.org/2000/svg" width="71.399" height="60.5" viewBox="0 0 71.399 60.5"><path d="M1.25,1.546h12.681l7.242,34.945s.183.747.213.916c1.654,9.053,6.3,11.014,11.048,11.014h25.659" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/><path d="M64.011,53.687c0,2.907-2.358,5.266-5.267,5.266s-5.267-2.359-5.267-5.266,2.358-5.266,5.267-5.266,5.267,2.358,5.267,5.266Z" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><polyline points="16.405 11.395 70.149 15.005 63.144 36.617 21.544 36.609" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M34.238,53.687c0,2.907-2.36,5.266-5.268,5.266s-5.267-2.359-5.267-5.266,2.359-5.266,5.267-5.266,5.268,2.358,5.268,5.266Z" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="19.111" y1="24.348" x2="67.076" y2="24.348" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/><line x1="42.068" y1="13.239" x2="42.068" y2="36.312" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="56.169" y1="14.276" x2="53.02" y2="36.201" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="27.855" y1="12.217" x2="31.303" y2="36.515" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/></svg>');
    }

    .filter-dienstleister::before {
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Dienstleistung" xmlns="http://www.w3.org/2000/svg" width="72.819" height="47" viewBox="0 0 72.819 47"><line x1="53.871" y1="34.594" x2="62.439" y2="34.588" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M27.689,45.333c-1.218.254-3.886.409-5.581-2.463l-7.162-12.287h-4.345" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="34.684" y1="32.605" x2="38.972" y2="40.332" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><line x1="28.481" y1="37.654" x2="31.264" y2="42.492" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><path d="M44.507,42.09c-1.249.528-3.638,1.516-5.564-1.786" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M35.783,44.159s-2.614,1.799-4.515-1.668" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="10.582" y1="5.633" x2="24.718" y2="5.633" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><polyline points=".076 1.541 10.296 1.541 10.296 35.09 0 35.09" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><polyline points="72.743 4.429 62.522 4.429 62.522 37.978 72.819 37.978" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M54.72,35.945l-11.558-22.028c-.981-.062-5.961-.511-5.961-.511l-6.825,6.932c-5.696,4.354-8.811-2.063-8.811-2.063l8.769-11.429c2.94-3.695,5.899-3.737,5.899-3.737l13.198.019,12.925,5.623" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M55.479,35.066c-.524,1.482-3.886,10.15-8.227,2.559l-6.047-9.482" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><circle cx="70.577" cy="29.615" r=".779" fill="%23394553" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M2.998,26.627c0,.432-.347.779-.778.779s-.779-.348-.779-.779.35-.779.779-.779.778.348.778.779Z" fill="%23394553" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/></svg>');
    }

    .filter-gastronomie::before {
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Gastronomie" xmlns="http://www.w3.org/2000/svg" width="63" height="66" viewBox="0 0 63 66"><path d="M21.284,33.006c-1.927,1.124-4.169,1.77-6.56,1.77-7.194,0-13.026-5.832-13.026-13.026s5.832-13.024,13.026-13.024c1.587,0,3.109.286,4.515.805l.404-.056c1.976-4.677,6.488-7.809,11.882-7.809,5.322,0,9.898,3.19,11.92,7.765l.315.101c1.407-.519,2.929-.805,4.515-.805,7.194,0,13.026,5.833,13.026,13.024s-5.833,13.026-13.026,13.026c-2.391,0-4.633-.646-6.56-1.77" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"/><polyline points="48.262 39.728 48.262 64.335 14.789 64.334 14.789 39.56" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="14.589" y1="55.84" x2="47.649" y2="55.84" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><line x1="24.366" y1="55.739" x2="24.366" y2="41.356" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><line x1="31.557" y1="55.739" x2="31.557" y2="41.356" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/><line x1="38.747" y1="55.739" x2="38.747" y2="41.356" fill="none" stroke="%2300963e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5"/></svg>');
    }

    .filter-banken::before {
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Banken" xmlns="http://www.w3.org/2000/svg" width="69.5" height="65.5" viewBox="0 0 69.5 65.5"><path d="M50.22,35.268c0,.416-.334.75-.748.75s-.752-.334-.752-.75.338-.75.752-.75.748.336.748.75Z" fill="%23394553" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><polyline points="27.884 20.027 62.987 20.027 62.987 50.715 45.657 50.715" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><polyline points="27.884 15.057 68.081 15.057 68.081 46.793" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M45.657,45.008h7.777c0-2.139,1.734-3.873,3.873-3.873v-11.529c-2.139,0-3.873-1.733-3.873-3.873h-25.551" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M31.411,37.028c-.143-.486-.221-1.006-.221-1.543,0-2.824,2.129-5.113,4.752-5.113s4.756,2.289,4.756,5.113c0,1.217-.396,2.334-1.057,3.212" fill="none" stroke="%2300963e" stroke-miterlimit="10" stroke-width="2.5"/><path d="M23.735,6.793c0,2.852-4.996,5.164-11.158,5.164S1.419,9.645,1.419,6.793,6.415,1.627,12.577,1.627s11.158,2.312,11.158,5.166Z" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M1.419,19.731c0,2.853,4.996,5.166,11.158,5.166s11.158-2.312,11.158-5.166" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M1.419,13.284c0,2.852,4.996,5.165,11.158,5.165s11.158-2.314,11.158-5.165" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M1.419,32.627c0,2.853,4.996,5.166,11.158,5.166s11.158-2.312,11.158-5.166" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M1.419,39.077c0,2.852,4.996,5.164,11.158,5.164,1.014,0,1.996-.062,2.93-.18" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><line x1="23.735" y1="38.336" x2="23.735" y2="6.793" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M1.419,12.247v39.727c0,2.852,4.996,5.164,11.158,5.164.992,0,1.955-.06,2.871-.172" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M23.735,26.18c0,2.852-4.996,5.164-11.158,5.164S1.419,29.032,1.419,26.18" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M1.419,45.524c0,2.853,4.996,5.166,11.158,5.166.92,0,1.814-.053,2.67-.149" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M41.579,45.786c0,2.854-4.996,5.166-11.158,5.166s-11.156-2.312-11.156-5.166,4.996-5.164,11.156-5.164,11.158,2.312,11.158,5.164Z" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M19.263,51.37v7.338c0,2.851,4.996,5.165,11.158,5.165s11.158-2.314,11.158-5.165v-12.94" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/><path d="M19.263,52.259c0,2.853,4.996,5.165,11.158,5.165s11.158-2.312,11.158-5.165" fill="none" stroke="%2300963e" stroke-linejoin="round" stroke-width="2.5"/></svg>');
    }

    .filter-btn.active:not(.all-btn) {
        background-color: var(--darkBlue);
        color: white;
    }

    .filter-btn.active:not(.all-btn)::before {
        filter: brightness(0) invert(1);
    }

    .filter-btn:not(.all-btn):hover {
        background-color: var(--darkBlue);
        color: white;
    }

    .filter-btn:not(.all-btn):hover::before {
        filter: brightness(0) invert(1);
    }

    .all-btn {
        width: 120px;
        height: 120px;
    }

    .c31 .container {
        gap: 0px;
    }

    .c31 .card {
        min-height: 120px;
    }
}


/*======= 768 ========= MEDIA QUERIES ======= border 15 = 738 ===*/

@media only screen and (min-width: 768px) {
    .c31 .container {
        gap: 20px;
    }
    /* Change buttons to rectangular layout matching card width */
    .c31-filter-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        max-width: 100%;
    }

    .filter-btn:not(.all-btn) {
        width: calc(50% - 20px);
        height: 80px;
        flex-direction: row;
        padding: 0 20px;
        gap: 15px;
    }

    .filter-btn:not(.all-btn)::before {
        margin-bottom: 0;
        margin-right: 10px;
    }

    .all-btn {
        width: calc(50% - 20px);
        height: 80px;
    }

    /* Cards show logo and name, content hidden until clicked */
    .c31 .card {
        padding: 20px;
        min-height: 160px;
        position: relative;
    }

    .c31 .card-header {
        min-height: 0;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        align-self: flex-start;
        position: static;
        width: 100%;
    }

    .c31 .card .logo {
        height: 60px;
        width: auto;
        display: block;
        margin: 0 auto;
    }

    .c31 .card-title {
        display: block;
        flex: none;
        text-align: center;
        font-size: 1.2em;
    }

    .c31 .card-toggle {
        display: block !important;
        position: absolute;
        top: auto;
        left: auto;
        bottom: 15px;
        right: 15px;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        pointer-events: auto;
        z-index: 10;
    }

    .c31 .card-content {
        display: none !important;
        text-align: center;
    }

    .c31 .card-content h3 {
        display: none;
    }

    .c31 .card.expanded .card-content {
        display: block !important;
    }

    .c31 .card h3 {
        font-size: 1.4em;
    }

    .c31 .card {
        flex-basis: calc(50% - 20px);
        min-height: 180px;
    }

    .c31 .top-article h2 {
        font-size: 3em;
    }

    .c31 .top-article {
        margin-bottom: 4em;
    }
}


/*======= 990 ======== MEDIA QUERIES ======== border 15 = 960 ===*/

@media only screen and (min-width: 990px) {
    /* 3-column grid layout for buttons */
    .c31-filter-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        justify-items: center;
    }

    .filter-btn:not(.all-btn) {
        width: 100%;
        height: 100px;
        flex-direction: column;
        padding: 0;
        gap: 8px;
    }

    .filter-btn:not(.all-btn)::before {
        margin-bottom: 0;
        margin-right: 0;
    }

    .all-btn {
        width: 100%;
        height: 100px;
    }

    /* Cards show everything, no toggle needed */
    .c31 .card {
        flex-direction: column;
        padding: 20px;
    }

    .c31 .card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .c31 .card .logo {
        width: 100%;
        height: auto;
    }

    .c31 .card-title {
        display: block;
    }

    .c31 .card-toggle {
        display: block !important;
        position: absolute;
        bottom: 15px;
        right: 15px;
    }

    .c31 .card-content {
        display: none !important;
    }

    .c31 .card.expanded .card-content {
        display: block !important;
    }

    .c31 .top-article {
        text-align: left;
        display: block;
        width: 70%;
        padding-left: 4%;
    }

    .c31 .card {
        flex-basis: calc(33.333% - 20px);
        min-height: 300px;
    }
}

/*======= 1398 ======= MEDIA QUERIES ======== border 30 = 1338 ==*/

@media only screen and (min-width: 1398px) {}

/*======= 2512 ======= MEDIA QUERIES ==== border 151-45 = 2396 ==*/

@media only screen and (min-width: 2512px) {}

/*END.c31*/