/* ==================================================
   VERANSTALTUNGEN - KARTENANSICHT
   Angleichung an die Karte von Bindlach - Rathaus
   (dort layout/frontend/b2c/dist/css/components/col_veranstaltung.css,
   Seite /live_bindlach/veranstaltungen/).

   Die Struktur baut bc.min.js auf beiden Portalen gleich auf
   (col-kalender_one mit Icon, col-kalender_two mit Inhalt). Die Felder
   bedeuten aber nicht dasselbe:

     Rathaus   col-kalender_titlee leer, traegt nur data-category
               col-kalender_stadt  = Titel
               col-kalender_text   = Ort
     hier      col-kalender_titlee = Titel, dazu data-category
               col-kalender_stadt  = Ort
               col-kalender_text   = Artikeltext

   Damit die Karte gleich AUSSIEHT, ist die Zuordnung angepasst: Kategorie
   als kleine Akzentzeile ueber dem Titel, darunter der Ort; der Artikeltext
   bleibt der Vollansicht vorbehalten, im Rathaus steht an der Stelle
   ebenfalls kein Anriss.

   Die bisherigen Regeln in bc-style.min.css kleben das Icon absolut in die
   Ecke und sortieren die Bloecke per order um. Sie arbeiten mit #content und
   !important, deshalb liegt diese Datei auf derselben Spezifitaet und haelt
   an den noetigen Stellen mit !important dagegen. bc-style.min.css bleibt
   unberuehrt; eingebunden wird die Datei in get_gulp_sources().
   ================================================== */

body.veranstaltungskalend {

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

    #content .collection_list.col-kalender .collection_container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;

        width: 100%;
        box-sizing: border-box;
        padding: 20px;

        background: var(--clr-primary-white);
        border: 0;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

        position: relative;
        overflow: visible;
    }

    /* Reihenfolge wie im Rathaus: Icon, Inhalt, Veranstalter, "Mehr lesen".
       Ohne das landet das Icon rechts und fuer den Inhalt bleiben 0px. */
    #content .collection_list.col-kalender .col-kalender_one {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    #content .collection_list.col-kalender .col-kalender_two {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;

        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_organizer {
        order: 3 !important;
        flex-basis: 100% !important;
    }

    #content .collection_list.col-kalender .collection_link {
        order: 4 !important;
        flex-basis: 100% !important;
        margin-top: 4px;
    }

    /* bc.min.js verschachtelt col-kalender_two einmal in sich selbst */
    .col-kalender_two .col-kalender_two {
        gap: 4px;
        padding: 0;
    }


    /* ==================================================
       ICON-KREIS
       ================================================== */

    #content .collection_list.col-kalender .collection_content.col-kalender_icon {
        position: static !important;
        top: auto !important;
        left: auto !important;

        width: 100px !important;
        height: 100px !important;

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

        border-radius: 50% !important;
        background-color: var(--clr-primary-grey) !important;
        overflow: hidden !important;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_icon img {
        width: 50px !important;
        height: 50px !important;
        object-fit: contain !important;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_icon img.custom-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* ==================================================
       KATEGORIE, TITEL, ORT
       ================================================== */

    /* Die bisherige Fassung setzt hier 18px/500 mit !important - deshalb
       dieselbe Gangart, sonst bleibt der Titel groesser als im Rathaus. */
    #content .collection_list.col-kalender .collection_content.col-kalender_titlee {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.3;
        /* --clr-primary-dark ist hier #222, im Rathaus #4B4B4B - fuer die
           Angleichung zaehlt der Wert von dort. */
        color: #4B4B4B !important;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_titlee[data-category]:not([data-category=""])::before {
        content: attr(data-category);

        display: block;

        color: var(--primary-accent);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.4px;
        line-height: 1.4;
        text-transform: uppercase;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_stadt {
        font-size: 13px;
        line-height: 1.4;
        color: #888888;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_stadt:empty {
        display: none;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_text {
        display: none !important;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_organizer {
        font-size: 13px;
        color: #888888;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_organizer:empty {
        display: none;
    }


    /* ==================================================
       DATUM, UHRZEIT, KALENDERKNOPF
       Datum links, Knopf rechts - wie im Rathaus.
       ================================================== */

    #content .collection_list.col-kalender .col-kalender_two_datum {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        width: 100%;
        column-gap: 10px;

        margin-top: 4px;
    }

    #content .collection_list.col-kalender .col-kalender_two_datum .col-kalender_two_datum {
        display: inline-flex;
        align-items: center;
        gap: 10px;

        width: auto;
        margin-top: 0;
        justify-self: start;
    }

    /* Die bisherigen Regeln setzen 14px/#666 mit !important - im Rathaus sind
       die Chips 12px in der dunklen Schriftfarbe. */
    #content .collection_list.col-kalender .collection_content.col-kalender_datum,
    #content .collection_list.col-kalender .collection_content.col-kalender_zeit {
        display: inline-block;

        padding: 4px 10px !important;

        border: 1px solid var(--primary-accent) !important;
        border-radius: 6px !important;
        background: var(--clr-primary-white);

        color: #4B4B4B !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        white-space: nowrap;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_datum:empty,
    #content .collection_list.col-kalender .collection_content.col-kalender_zeit:empty {
        display: none;
    }

    /* Bisher eine graue Pille (#E2E2E2) mit eigenem Symbol, alles !important.
       Im Rathaus ist es schlichter Text mit Kalendersymbol davor - dafuer die
       Pille zuruecknehmen und das alte Symbol abschalten, das eigene steht
       weiter unten an .textcontent. */
    #content .collection_list.col-kalender .col-kalender_outlook {
        display: inline-flex !important;
        align-items: center !important;
        justify-self: end;

        padding: 0 !important;
        border: 0;
        border-radius: 20px !important;
        background: none !important;
        background-color: transparent !important;

        color: #4B4B4B !important;
        font-size: 13px !important;
        gap: 0 !important;

        cursor: pointer;
        text-decoration: none;
    }

    #content .collection_list.col-kalender .col-kalender_outlook::before {
        content: none !important;
    }

    /* Bisher ein blau gefuellter Knopf (#275b91, 16px, Padding 10/20).
       Im Rathaus ist es Text mit Symbol - also Fuellung und Polster
       zuruecknehmen. */
    #content .collection_list.col-kalender .col-kalender_outlook .textcontent {
        display: inline-flex;
        align-items: center;
        gap: 7px;

        padding: 0;
        border-radius: 0;
        background: none;
        background-color: transparent;

        color: #4B4B4B;
        font-size: 13px;
        font-weight: 400;
        white-space: nowrap;

        transition: transform 0.3s;
    }

    #content .collection_list.col-kalender .col-kalender_outlook .textcontent:hover {
        background-color: transparent;
    }

    #content .collection_list.col-kalender .col-kalender_outlook .textcontent:hover {
        transform: scale(1.01);
    }

    /* Das Symbol liegt im Rathaus unter userdata/02_Kollektionen/. Hier ist
       es eingebettet, damit im Portal nichts hochgeladen werden muss. */
    #content .collection_list.col-kalender .col-kalender_outlook .textcontent::before {
        content: "";

        display: inline-block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;

        background-image: url("data:image/svg+xml,<svg id=%22%D0%A1%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C_4414%22 data-name=%22%D0%A1%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C 4414%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2217.843%22 height=%2217.843%22 viewBox=%220 0 17.843 17.843%22> <path id=%22%D0%9A%D0%BE%D0%BD%D1%82%D1%83%D1%80_11580%22 data-name=%22%D0%9A%D0%BE%D0%BD%D1%82%D1%83%D1%80 11580%22 d=%22M3.9,0a.558.558,0,0,1,.558.558v.558h8.921V.558a.558.558,0,1,1,1.115,0v.558h1.115a2.23,2.23,0,0,1,2.23,2.23V15.612a2.23,2.23,0,0,1-2.23,2.23H2.23A2.23,2.23,0,0,1,0,15.612V3.346a2.23,2.23,0,0,1,2.23-2.23H3.346V.558A.558.558,0,0,1,3.9,0ZM2.23,2.23A1.115,1.115,0,0,0,1.115,3.346V15.612A1.115,1.115,0,0,0,2.23,16.728H15.612a1.115,1.115,0,0,0,1.115-1.115V3.346A1.115,1.115,0,0,0,15.612,2.23Z%22/> <path id=%22%D0%9A%D0%BE%D0%BD%D1%82%D1%83%D1%80_11581%22 data-name=%22%D0%9A%D0%BE%D0%BD%D1%82%D1%83%D1%80 11581%22 d=%22M7.5,11.058a.558.558,0,0,1,.558-.558H19.209a.558.558,0,0,1,.558.558v1.115a.558.558,0,0,1-.558.558H8.058a.558.558,0,0,1-.558-.558Zm6.133,4.461a.558.558,0,0,1,.558.558v1.673h1.673a.558.558,0,1,1,0,1.115H14.191v1.673a.558.558,0,1,1-1.115,0V18.864H11.4a.558.558,0,0,1,0-1.115h1.673V16.076A.558.558,0,0,1,13.633,15.518Z%22 transform=%22translate(-4.712 -6.597)%22/> </svg>");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }


    /* ==================================================
       DATEIGALERIE
       Der Link "Mehr Informationen" steht direkt ueber dem Kalenderknopf -
       die Beschriftung kommt aus module/filegallery/show_filegallery.inc.php.

       Vorher klebte er absolut in der oberen rechten Ecke der Karte. Den
       gemeinsamen Block .col-kalender_kalenderblock baut bc.min.js und setzt
       ihn in col-kalender_two_datum an die Stelle des Knopfes; Termine ohne
       Datei bekommen keinen Block und bleiben unveraendert.

       Ohne eine Regel fuer den Dateiblock haengt er als weiteres Flex-Kind
       ohne order ganz vorne und schiebt sich links neben das Icon - deshalb
       bleibt er auch ausserhalb des Blocks aus dem Fluss.
       ================================================== */

    #content .collection_list.col-kalender .col-kalender_kalenderblock {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;

        /* Der Block steht in der rechten Spalte des Datumsrasters, dort wo
           vorher der Knopf allein sass. */
        justify-self: end;

        /* Bezugspunkt fuer den Dateilink, siehe unten. */
        position: relative;
    }

    #content .collection_list.col-kalender .collection_content.col-kalender_files {
        position: absolute;
        top: 16px;
        right: 16px;

        order: 5;
        margin: 0;
        width: auto;
    }

    /* Der Knopf soll auf einer Hoehe mit Datum und Uhrzeit stehen. Zaehlte der
       Dateilink zur Hoehe des Blocks, waere die Zeile zwei Zeilen hoch, der
       Knopf rutschte nach unten und links unter den Chips blieb Platz offen.

       Deshalb haengt der Link ueber dem Knopf statt ueber ihm zu stehen: er
       nimmt den Platz neben der Ortszeile ein, der ohnehin frei ist. Fuer die
       Hoehe der Zeile zaehlt damit nur der Knopf.

       Das order: 5 von oben muss zurueck, sonst rutscht der Link unter den
       Knopf. */
    #content .collection_list.col-kalender .col-kalender_kalenderblock .collection_content.col-kalender_files {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 100%;

        margin-bottom: 6px;
        order: 0;
    }

    /* Der Wrapper-Link auf die Vollansicht kommt ohne target und wuerde als
       leerer Anker mitzaehlen. */
    #content .collection_list.col-kalender .col-kalender_files .filegallery_content_file > a:not([target]) {
        display: none;
    }

    #content .collection_list.col-kalender .col-kalender_files .filegallery_content_file > a[target] {
        color: #222222;
        font-size: 17px;
        text-decoration: none;
        white-space: nowrap;
    }

    #content .collection_list.col-kalender .col-kalender_files .filegallery_title {
        display: none;
    }


    /* ==================================================
       KONTAKTKNOEPFE
       Anders als bei den Vereinen: nicht gefuellte Felder werden hier
       ausgeblendet statt gesperrt angezeigt. Im Kalender steht pro Karte
       ohnehin wenig, ein leerer "Telefon"-Knopf sagt nichts aus.
       Beschriftung und Klasse setzt bc.min.js.
       ================================================== */

    #content .collection_list.col-kalender .collection_content.code_phone:empty,
    #content .collection_list.col-kalender .collection_content.code_website:empty,
    #content .collection_list.col-kalender .collection_content.code_phone:has(a.disabled),
    #content .collection_list.col-kalender .collection_content.code_website:has(a.disabled),
    #content .collection_list.col-kalender .collection_content.code_phone:has(a[href=""]),
    #content .collection_list.col-kalender .collection_content.code_website:has(a[href=""]),
    #content .collection_list.col-kalender .collection_content.code_phone:has(a:not([href])),
    #content .collection_list.col-kalender .collection_content.code_website:has(a:not([href])) {
        display: none !important;
    }

    .code_phone,
    .code_website {
        display: inline-block;
        margin-top: 6px;
        margin-right: 8px;
    }

    .code_phone a,
    .code_website a {
        display: inline-block;

        padding: 6px 14px;

        border: 1px solid var(--primary-accent);
        border-radius: var(--br-button);

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

        transition: transform 0.2s ease;
    }

    .code_phone a:not(.disabled):hover,
    .code_website a:not(.disabled):hover {
        transform: scale(1.05);
    }

    /* Bleibt als Rueckfallebene, falls :has() nicht greift. */
    .code_phone a.disabled,
    .code_website a.disabled {
        display: none;
    }


    /* ==================================================
       SCHMALE BILDSCHIRME
       ================================================== */

    @media (max-width: 570px) {

        #content .collection_list.col-kalender .collection_container {
            gap: 12px;
            padding: 14px;
        }

        #content .collection_list.col-kalender .collection_content.col-kalender_icon {
            width: 60px !important;
            height: 60px !important;
        }

        #content .collection_list.col-kalender .collection_content.col-kalender_icon img {
            width: 30px !important;
            height: 30px !important;
        }

        #content .collection_list.col-kalender .col-kalender_two_datum {
            grid-template-columns: 1fr;
            row-gap: 8px;
        }

        #content .collection_list.col-kalender .col-kalender_outlook {
            justify-self: start;
        }

        /* Hier steht der Block unter den Chips statt daneben. Haenge der Link
           weiter ueber dem Knopf, laege er auf den Chips. Also wieder im
           Fluss, ueber dem Knopf, alles linksbuendig. */
        #content .collection_list.col-kalender .col-kalender_kalenderblock {
            align-items: flex-start;
            justify-self: start;
        }

        #content .collection_list.col-kalender .col-kalender_kalenderblock .collection_content.col-kalender_files {
            position: static;
            bottom: auto;
            right: auto;
            margin-bottom: 0;
        }
    }
}


/* ==================================================
   STARTSEITE
   Die Kachel "Veranstaltungskalender" auf der Startseite ist ein Anriss und
   soll nur Symbol, Titel sowie Datum und Uhrzeit zeigen. Alles andere - Ort,
   Veranstalter, Bild, Anhang, Telefon, Webseite und der Kalenderknopf -
   gehoert in die Uebersicht und in die Vollansicht, nicht hierher.

   Die Uhrzeit war bisher ausgeblendet (.home .col-kalender_zeit in
   bc-style.min.css) und wird hier wieder eingeschaltet.
   ================================================== */

body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_stadt,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_text,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_adress,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_postleitzahl,
body.home .news_k_veran .collection_list.col-kalender .collection_content.code_city,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_organizer,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_bild,
body.home .news_k_veran .collection_list.col-kalender .col-kalender_three,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_files,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_outlook,
body.home .news_k_veran .collection_list.col-kalender .collection_content.code_phone,
body.home .news_k_veran .collection_list.col-kalender .collection_content.code_website {
    display: none !important;
}

/* Uhrzeit wieder zeigen, im selben Chip-Stil wie das Datum */
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_zeit {
    display: inline-block !important;
}

body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_zeit:empty {
    display: none !important;
}

/* Datum und Uhrzeit nebeneinander, ohne den Platz fuer den entfallenen
   Kalenderknopf offen zu lassen. */
body.home .news_k_veran .collection_list.col-kalender .col-kalender_two_datum {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
}

/* Startseite: Titel, Datum und Uhrzeit sauber untereinander.
   Die Datumsgruppe ist doppelt verschachtelt (.col-kalender_two_datum >
   .col-kalender_two_datum) und hatte zusaetzlich margin-top: 8px, das Datum
   ausserdem margin-top: 5px - dadurch zu viel Luft unter dem Titel und Datum
   und Uhrzeit nicht auf einer Hoehe. */
body.home .news_k_veran .collection_list.col-kalender .col-kalender_two {
    gap: 6px;
    justify-content: center;
}

body.home .news_k_veran .collection_list.col-kalender .col-kalender_two_datum {
    margin: 0 !important;
}

body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_datum,
body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_zeit {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    line-height: 1;
}

body.home .news_k_veran .collection_list.col-kalender .collection_content.col-kalender_zeit:empty {
    display: none !important;
}