body.vereine_verbande,
body.gastronomie_apart,
body.firefighters,
body.senioren_pflege,
body.kinderbetreuung,
body.arzte_apotheken,
body.kirchen_pfarramter {

    /* ==================================================
       GRUNDLAYOUT
       ================================================== */

    div#content {
        padding: 70px 0;
    }

    /* Kartenübersicht */
    #position {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
        padding: 20px;
    }


    /* ==================================================
       KARTE
       ================================================== */

    .collection_list.vereine {
        background: var(--clr-primary-white);
        border-radius: var(--br-primary);
        padding: 0;
        min-width: 0;
        width: 100%;
    }

    #content .collection_container {
        padding: 25px 30px;
        color: var(--clr-primary-dark);

        display: grid;

        /*
         * Links: gesamter verfügbarer Platz
         * Mitte: Trennlinie
         * Rechts: feste schmale Spalte
         */
        grid-template-columns: minmax(0, 1fr) 1px 200px;
        column-gap: 35px;

        align-items: stretch;
        min-width: 0;
    }


    /* ==================================================
       TRENNLINIE
       ================================================== */

    #content .collection_container::after {
        content: '';
        display: block;

        grid-column: 2;
        grid-row: 1;

        width: 1px;
        min-height: 100%;
        background: var(--clr-primary-dark);

        align-self: stretch;
    }


    /* ==================================================
       LINKE SPALTE
       ================================================== */

    .col_vereine_left {
        grid-column: 1;
        min-width: 0;
    }

    /* Überschrift "Vereine" */
    .collection_group {
        color: var(--primary-accent);
        font-weight: var(--fw-semibold);
        font-size: var(--fs-600);
        margin-bottom: 12px;
    }

    /* Vereinsname */
    .collection_content.vereinsname {
        color: var(--clr-primary-dark);
        font-weight: var(--fw-bold);
        font-size: var(--fs-800);
        line-height: 1.35;
        margin-bottom: 15px;
        /* lange Namen (Flurbereinigungsgenossenschaft) mit Trennstrich umbrechen,
           lang="de" liefert die Silbentrennung; notfalls hart umbrechen */
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
        min-width: 0;
    }


    /* ==================================================
       KONTAKTDATEN
       ================================================== */

    .collection_content.vereine_adress,
    .collection_content.vereine_telefon,
    .collection_content.vereine_email {
        position: relative;
        padding-left: 30px;
        line-height: 1.5;
        min-width: 0;
    }

    .collection_content.vereine_adress,
    .collection_content.vereine_telefon {
        margin-bottom: 10px;
    }

    .collection_content.vereine_email {
        margin-bottom: 0;
    }


    /* Adresse */
    .collection_content.vereine_adress::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;

        width: 18px;
        height: 18px;

        background: url('/userdata/02_Kollektionen/home_ver.svg') no-repeat center;
        background-size: contain;
    }


    /* Telefon */
    .collection_content.vereine_telefon::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;

        width: 18px;
        height: 18px;

        background: url('/userdata/02_Kollektionen/phone_ver.svg') no-repeat center;
        background-size: contain;
    }


    /* E-Mail */
    .collection_content.vereine_email::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;

        width: 18px;
        height: 18px;

        background: url('/userdata/06_Bausteine/mail_orig_w.svg') no-repeat center;
        background-size: contain;
    }


    /* Telefon + E-Mail Links */
    .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;
    }

    /* Lange Adressen (vorstand@buergervereinbindlacherberg.de) liefen auf
       Tablet und Handy ueber die Karte: einzeilig, am Ende "..." -
       der Link (mailto:) bleibt vollstaendig. */
    .collection_content.vereine_email a {
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* ==================================================
       PLZ UND ORT
       Zweite Zeile der Adresse. bc.min.js packt beide Felder in
       .vereine_adress_plz_ort, damit sie eine Zeile bilden; die Einrueckung
       entspricht den Kontaktdaten oben.
       ================================================== */

    .vereine_adress_plz_ort {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        padding-left: 30px;
        line-height: 1.5;
        min-width: 0;

        margin-bottom: 10px;
    }

    /* Der Abstand sitzt dann unter der PLZ-Zeile statt unter der Strasse -
       aber nur, wenn es die Zeile ueberhaupt gibt. */
    .col_vereine_left:has(.vereine_adress_plz_ort) .collection_content.vereine_adress {
        margin-bottom: 0;
    }

    /* Sind PLZ und Ort leer, faellt die ganze Zeile weg. */
    .vereine_adress_plz_ort:not(:has(div:not(:empty))) {
        display: none;
    }


    /* ==================================================
       RECHTE SPALTE / VERLINKUNGEN
       ================================================== */

    .col_vereine_right {
        grid-column: 3;
        min-width: 0;

        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;

        gap: 12px;
    }

    /* Überschrift "Verlinkungen" */
    .col_vereine_right::before {
        content: "Verlinkungen";

        display: block;
        width: 100%;

        color: var(--primary-accent);
        font-weight: var(--fw-semibold);
        font-size: var(--fs-600);

        margin-bottom: 8px;
    }


    /* ==================================================
       WEBSITE / FACEBOOK / INSTAGRAM
       ================================================== */

    .collection_content.vereine_website,
    .collection_content.vereine_facebook,
    .collection_content.vereine_insta {
        margin: 0;
        flex: 0 0 auto;
    }

    .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);

        color: var(--clr-primary-dark);
        font-size: var(--fs-500);
        text-decoration: none;
        white-space: nowrap;

        transition: transform 0.2s ease;
    }

    /* Nur aktive Links bekommen Hover */
    .collection_content.vereine_website a:not(.disabled):hover,
    .collection_content.vereine_facebook a:not(.disabled):hover,
    .collection_content.vereine_insta a:not(.disabled):hover {
        transform: scale(1.05);
    }

    /* Nicht vorhandene Links */
    .collection_content.vereine_website a.disabled,
    .collection_content.vereine_facebook a.disabled,
    .collection_content.vereine_insta a.disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.4;
    }


    /* ==================================================
       LEERE KONTAKTFELDER
       ================================================== */

    .collection_content.cg-empty {
        display: none !important;
    }


    /* ==================================================
       TABLET
       ================================================== */

    @media (max-width: 1200px) {

        #content .collection_container {
            /*
             * Rechte Spalte etwas kompakter.
             * Linke Seite bekommt weiterhin den Rest.
             */
            grid-template-columns: minmax(0, 1fr) 1px 160px;
            column-gap: 25px;
        }
    }


    @media (max-width: 992px) {

        #position {
            grid-template-columns: 1fr;
            gap: 25px;
            padding: 15px;
        }

        /*
         * Sobald nur noch eine Karte pro Zeile steht,
         * haben wir wieder deutlich mehr Platz.
         */
        #content .collection_container {
            grid-template-columns: minmax(0, 1fr) 1px 200px;
            column-gap: 35px;
            padding: 25px 30px;
        }
    }


    /* ==================================================
       MOBILE
       ================================================== */

    @media (max-width: 570px) {

        #main-content #content.content-selector {
            padding: var(--p-300);
        }

        #position {
            grid-template-columns: 1fr;
            padding: 10px;
            gap: 20px;
        }

        #content .collection_container {
            display: block;
            padding: 20px;
        }

        /* Vertikale Trennlinie verschwindet */
        #content .collection_container::after {
            display: none;
        }

        .col_vereine_left {
            padding-bottom: 20px;
            margin-bottom: 20px;

            border-bottom: 1px solid var(--clr-primary-grey);
        }

        .col_vereine_right {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 8px;
        }

        .col_vereine_right::before {
            width: 100%;
            margin-bottom: 4px;
        }
    }


    /* ==================================================
       KLEINE SMARTPHONES
       ================================================== */

    @media (max-width: 480px) {

        #position {
            padding: 5px;
            gap: 15px;
        }

        #content .collection_container {
            padding: 15px;
        }

        .collection_content.vereine_website a,
        .collection_content.vereine_facebook a,
        .collection_content.vereine_insta a {
            padding: 6px 12px;
            font-size: var(--fs-500);
        }
    }


    @media (max-width: 435px) {

        #content .collection_list.vereine {
            height: unset !important;
        }
    }
}