

body.vereine_verbande {
    div#content{
        padding: 70px 0px;
    }

    /* Container for all cards - 2 columns grid */
    #position {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 20px;
    }

    /* Individual card styling */
    .collection_list.vereine {
        background: var(--clr-primary-white);
        border-radius: var(--br-primary);
        padding: 0;
        @media (max-width: 1024px) {
            width: unset;
        }
    }

    /* Card container with left and right columns */
    .collection_container.Vereine {
        padding: 25px 30px;
        color: var(--clr-primary-dark);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 35px;
        align-items: start;
    }

    /* Vertical separator line */
    .collection_container.Vereine::after {
        content: '';
        width: 1px;
        background: var(--clr-primary-dark);
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
    }

    /* Left column */
    .col_vereine_left {
        grid-column: 1;
    }

    /* Right column */
    .col_vereine_right {
        grid-column: 3;
    }

    /* Group label (Vereine) */
    .collection_group {
        color: var(--primary-accent);
        font-weight: var(--fw-semibold);
        font-size: var(--fs-500);
        margin-bottom: 12px;
    }

    /* Club name */
    .collection_content.vereinsname {
        font-weight: var(--fw-bold);
        font-size: var(--fs-700);
        margin-bottom: 15px;
        color: var(--clr-primary-dark);
    }

    /* Address with home icon */
    .collection_content.vereine_adress {
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
        line-height: 1.5;
    }

    .collection_content.vereine_adress::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background: url('/userdata/02_Kollektionen/home_ver.svg') no-repeat center;
        background-size: contain;
    }

    /* Phone with phone icon */
    .collection_content.vereine_telefon {
        position: relative;
        padding-left: 30px;
        margin-bottom: 10px;
    }

    .collection_content.vereine_telefon::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background: url('/userdata/02_Kollektionen/phone_ver.svg') no-repeat center;
        background-size: contain;
    }

    /* Email with email icon */
    .collection_content.vereine_email {
        position: relative;
        padding-left: 30px;
        margin-bottom: 0;
    }

    .collection_content.vereine_email::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background: url('/userdata/06_Bausteine/mail_orig_w.svg') no-repeat center;
        background-size: contain;
    }

    /* Verlinkungen title */
    .collection_content.vereine_verlinkungen_text {
        color: var(--primary-accent);
        font-weight: var(--fw-semibold);
        font-size: var(--fs-500);
        margin-bottom: 12px;
    }

    /* Links styling for contact info */
    .collection_content.vereine_telefon a,
    .collection_content.vereine_email a {
        color: var(--clr-primary-dark);
        text-decoration: none;
    }

    .collection_content.vereine_telefon a:hover,
    .collection_content.vereine_email a:hover {
        color: var(--clr-primary-dark);
        text-decoration: none;
    }

    /* Website and social media links */
    .collection_content.vereine_website,
    .collection_content.vereine_facebook,
    .collection_content.vereine_insta {
        margin-bottom: 8px;
    }

    .collection_content.vereine_website a,
    .collection_content.vereine_facebook a,
    .collection_content.vereine_insta a {
        display: inline-block;
        padding: 8px 16px;
        border: 1px solid var(--primary-accent);
        border-radius: var(--br-button);
        font-size: var(--fs-400);
        transition: transform 0.2s ease;
        color: var(--clr-primary-dark);
        text-decoration: none;
    }

    .collection_content.vereine_website a:hover,
    .collection_content.vereine_facebook a:hover,
    .collection_content.vereine_insta a:hover {
        transform: scale(1.05);
    }

    /* Responsive design */
    /* Tablets and below - single column cards, but keep 2-column layout inside */
    @media (max-width: 992px) {
        #position {
            grid-template-columns: 1fr;
            gap: 25px;
            padding: 15px;
        }
        
        .collection_container.Vereine {
            padding: 20px 25px;
            gap: 30px;
        }
    }

    /* Mobile - stack everything vertically */
    @media (max-width: 570px) {
        #position {
            padding: 10px;
            gap: 20px;
        }
        
        .collection_container.Vereine {
            grid-template-columns: 1fr;
            gap: 0;
            padding: 20px;
        }
        
        .collection_container.Vereine::after {
            display: none;
        }
        
        .col_vereine_left {
            grid-column: 1;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--clr-primary-grey);
        }
        
        .col_vereine_right {
            grid-column: 1;
        }
    }

    /* Small mobile - adjust padding */
    @media (max-width: 480px) {

        #position {
            padding: 5px;
            gap: 15px;
        }
        
        .collection_container.Vereine {
            padding: 15px;
        }
        
        .collection_content.vereine_website a,
        .collection_content.vereine_facebook a,
        .collection_content.vereine_insta a {
            padding: 6px 12px;
            font-size: var(--fs-300);
        }
    }

    @media (max-width: 435px) {
        #content .collection_list.vereine {
            height: unset !important;
        }
     }
}


