/**************
***************
*** PRESETS ***
***************
**************/

.use_accent_colors
{
    color: var(--accent_color_secondary) !important;
    background-color: var(--accent_color_primary) !important;
}

.use_accent_colors_inverted
{
    color: var(--accent_color_primary) !important;
    background-color: var(--accent_color_secondary) !important;
}

.use_secondary_color_as_bg
{
    background-color: var(--accent_color_secondary) !important;
}

.use_secondary_color_as_bg_and_white_for_font
{
    color: var(--color_white) !important;
    background-color: var(--accent_color_secondary) !important;
}

.border_radius { border-radius: var(--spacing_standard); }
.border_radius_top { border-top-left-radius: var(--spacing_standard); border-top-right-radius: var(--spacing_standard); }
.border_radius_bottom { border-bottom-left-radius: var(--spacing_standard); border-bottom-right-radius: var(--spacing_standard); }
.border_bottom_accent_color_secondary { border-bottom: 1px solid var(--accent_color_secondary); }

@media (min-width: 1300px)
{
    .box_shadow_center { -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.25); box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.25); }
    .box_shadow_up_left { -webkit-box-shadow: -5px -5px 5px 2px rgba(0,0,0,0.25); box-shadow: -5px -5px 5px 2px rgba(0,0,0,0.25); }
    .box_shadow_up_right { -webkit-box-shadow: 5px -5px 5px 2px rgba(0,0,0,0.25); box-shadow: 5px -5px 5px 2px rgba(0,0,0,0.25); }
    .box_shadow_down_left { -webkit-box-shadow: -5px 5px 5px 2px rgba(0,0,0,0.25); box-shadow: -5px 5px 5px 2px rgba(0,0,0,0.25); }
    .box_shadow_down_right { -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); }
}

/***********************
************************
*** ELEMENT STANDARD ***
************************
***********************/

.element_standard
{
    display: block;
    box-sizing: border-box;
    width: 100%;
}

/**************
***************
*** SPACING ***
***************
**************/

.element_spacing
{
    display: block;
    box-sizing: border-box;

    width: 100%;
    height: var(--spacing_standard);
}

.element_spacing[data-size="xxs"] { height: var(--spacing_xxs); }
.element_spacing[data-size="xs"] { height: var(--spacing_xs); }
.element_spacing[data-size="s"] { height: var(--spacing_s); }
.element_spacing[data-size="standard"] { height: var(--spacing_standard); }
.element_spacing[data-size="l"] { height: var(--spacing_l); }
.element_spacing[data-size="xl"] { height: var(--spacing_xl); }
.element_spacing[data-size="xxl"] { height: var(--spacing_xxl); }
.element_spacing[data-size="xxxl"] { height: var(--spacing_xxxl); }

/***************
****************
*** SECTIONS ***
****************
***************/

.element_section_container
{
    display: flex;
    justify-content: space-between;
}

.element_section_container:nth-of-type(even)
{
    background-color: var(--color_very_very_faint_gray);
}

.element_section_container:nth-of-type(odd)
{
    background-color: var(--color_very_faint_gray);
}

.element_section_left, .element_section_right
{
    box-sizing: border-box;
    width: var(--section_padding);
}

.element_section_middle
{
    box-sizing: border-box;
    width: var(--section_width);
}

.element_section_is_full_width
{
    width: 100%;
}

@media (min-width: 1300px)
{
    /*.element_section_left, .element_section_right { width: var(--section_padding); }*/
}

/************
*************
*** GRIDS ***
*************
************/

.element_grid
{
    display: grid;
}

.element_grid.gap_xxs { gap: var(--spacing_xxs); }
.element_grid.gap_xs { gap: var(--spacing_xs); }
.element_grid.gap_s { gap: var(--spacing_s); }
.element_grid.gap_standard { gap: var(--spacing_standard); }
.element_grid.gap_l { gap: var(--spacing_l); }
.element_grid.gap_xl { gap: var(--spacing_xl); }
.element_grid.gap_xxl { gap: var(--spacing_xxl); }
.element_grid.gap_xxxl { gap: var(--spacing_xxxl); }

.element_grid[data-grid_size_horizontal_mobile="1"] { grid-template-columns: repeat(1, 1fr); }
.element_grid[data-grid_size_horizontal_mobile="2"] { grid-template-columns: repeat(2, 2fr); }
.element_grid[data-grid_size_horizontal_mobile="3"] { grid-template-columns: repeat(3, 3fr); }
.element_grid[data-grid_size_horizontal_mobile="4"] { grid-template-columns: repeat(4, 4fr); }
.element_grid[data-grid_size_horizontal_mobile="5"] { grid-template-columns: repeat(5, 5fr); }
.element_grid[data-grid_size_horizontal_mobile="6"] { grid-template-columns: repeat(6, 6fr); }
.element_grid[data-grid_size_horizontal_mobile="7"] { grid-template-columns: repeat(7, 7fr); }
.element_grid[data-grid_size_horizontal_mobile="8"] { grid-template-columns: repeat(8, 8fr); }

@media (min-width: 1300px)
{
    .element_grid[data-grid_size_horizontal_desktop="1"] { grid-template-columns: repeat(1, 1fr) !important; }
    .element_grid[data-grid_size_horizontal_desktop="2"] { grid-template-columns: repeat(2, 2fr) !important; }
    .element_grid[data-grid_size_horizontal_desktop="3"] { grid-template-columns: repeat(3, 3fr) !important; }
    .element_grid[data-grid_size_horizontal_desktop="4"] { grid-template-columns: repeat(4, 4fr) !important; }
    .element_grid[data-grid_size_horizontal_desktop="5"] { grid-template-columns: repeat(5, 5fr) !important; }
    .element_grid[data-grid_size_horizontal_desktop="6"] { grid-template-columns: repeat(6, 6fr) !important; }
    .element_grid[data-grid_size_horizontal_desktop="7"] { grid-template-columns: repeat(7, 7fr) !important; }
    .element_grid[data-grid_size_horizontal_desktop="8"] { grid-template-columns: repeat(8, 8fr) !important; }
}

/*********************
**********************
*** MASONRY LAYOUT ***
**********************
*********************/

.element_masonry_layout[data-column_count_mobile="1"] { column-count: 1; }
.element_masonry_layout[data-column_count_mobile="2"] { column-count: 2; }
.element_masonry_layout[data-column_count_mobile="3"] { column-count: 3; }
.element_masonry_layout[data-column_count_mobile="4"] { column-count: 4; }
.element_masonry_layout[data-column_count_mobile="5"] { column-count: 5; }
.element_masonry_layout[data-column_count_mobile="6"] { column-count: 6; }
.element_masonry_layout[data-column_count_mobile="7"] { column-count: 7; }
.element_masonry_layout[data-column_count_mobile="8"] { column-count: 8; }

.element_masonry_layout[data-gap_size_mobile="none"] { column-gap: 0px; }
.element_masonry_layout[data-gap_size_mobile="none"] > * { margin-bottom: 0px; }
.element_masonry_layout[data-gap_size_mobile="xxs"] { column-gap: var(--spacing_xxs); }
.element_masonry_layout[data-gap_size_mobile="xxs"] > * { margin-bottom: var(--spacing_xxs); }
.element_masonry_layout[data-gap_size_mobile="xs"] { column-gap: var(--spacing_xs); }
.element_masonry_layout[data-gap_size_mobile="xs"] > * { margin-bottom: var(--spacing_xs); }
.element_masonry_layout[data-gap_size_mobile="s"] { column-gap: var(--spacing_s); }
.element_masonry_layout[data-gap_size_mobile="s"] > * { margin-bottom: var(--spacing_s); }
.element_masonry_layout[data-gap_size_mobile="standard"] { column-gap: var(--spacing_standard); }
.element_masonry_layout[data-gap_size_mobile="standard"] > * { margin-bottom: var(--spacing_standard); }
.element_masonry_layout[data-gap_size_mobile="l"] { column-gap: var(--spacing_l); }
.element_masonry_layout[data-gap_size_mobile="l"] > * { margin-bottom: var(--spacing_l); }
.element_masonry_layout[data-gap_size_mobile="xl"] { column-gap: var(--spacing_xl); }
.element_masonry_layout[data-gap_size_mobile="xl"] > * { margin-bottom: var(--spacing_xl); }
.element_masonry_layout[data-gap_size_mobile="xxl"] { column-gap: var(--spacing_xxl); }
.element_masonry_layout[data-gap_size_mobile="xxl"] > * { margin-bottom: var(--spacing_xxl); }
.element_masonry_layout[data-gap_size_mobile="xxxl"] { column-gap: var(--spacing_xxxl); }
.element_masonry_layout[data-gap_size_mobile="xxxl"] > * { margin-bottom: var(--spacing_xxxl); }

.element_masonry_layout
{
    column-count: 2;
    column-gap: var(--spacing_standard);
}

.element_masonry_layout > *
{
    margin-bottom: var(--spacing_standard);
}

@media (min-width: 1300px)
{
    .element_masonry_layout[data-column_count_desktop="1"] { column-count: 1 !important; }
    .element_masonry_layout[data-column_count_desktop="2"] { column-count: 2 !important; }
    .element_masonry_layout[data-column_count_desktop="3"] { column-count: 3 !important; }
    .element_masonry_layout[data-column_count_desktop="4"] { column-count: 4 !important; }
    .element_masonry_layout[data-column_count_desktop="5"] { column-count: 5 !important; }
    .element_masonry_layout[data-column_count_desktop="6"] { column-count: 6 !important; }
    .element_masonry_layout[data-column_count_desktop="7"] { column-count: 7 !important; }
    .element_masonry_layout[data-column_count_desktop="8"] { column-count: 8 !important; }

    .element_masonry_layout[data-gap_size_desktop="none"] { column-gap: 0px !important; }
    .element_masonry_layout[data-gap_size_desktop="none"] > * { margin-bottom: 0px !important; }
    .element_masonry_layout[data-gap_size_desktop="xxs"] { column-gap: var(--spacing_xxs) !important; }
    .element_masonry_layout[data-gap_size_desktop="xxs"] > * { margin-bottom: var(--spacing_xxs) !important; }
    .element_masonry_layout[data-gap_size_desktop="xs"] { column-gap: var(--spacing_xs) !important; }
    .element_masonry_layout[data-gap_size_desktop="xs"] > * { margin-bottom: var(--spacing_xs) !important; }
    .element_masonry_layout[data-gap_size_desktop="s"] { column-gap: var(--spacing_s) !important; }
    .element_masonry_layout[data-gap_size_desktop="s"] > * { margin-bottom: var(--spacing_s) !important; }
    .element_masonry_layout[data-gap_size_desktop="standard"] { column-gap: var(--spacing_standard) !important; }
    .element_masonry_layout[data-gap_size_desktop="standard"] > * { margin-bottom: var(--spacing_standard) !important; }
    .element_masonry_layout[data-gap_size_desktop="l"] { column-gap: var(--spacing_l) !important; }
    .element_masonry_layout[data-gap_size_desktop="l"] > * { margin-bottom: var(--spacing_l) !important; }
    .element_masonry_layout[data-gap_size_desktop="xl"] { column-gap: var(--spacing_xl) !important; }
    .element_masonry_layout[data-gap_size_desktop="xl"] > * { margin-bottom: var(--spacing_xl) !important; }
    .element_masonry_layout[data-gap_size_desktop="xxl"] { column-gap: var(--spacing_xxl) !important; }
    .element_masonry_layout[data-gap_size_desktop="xxl"] > * { margin-bottom: var(--spacing_xxl) !important; }
    .element_masonry_layout[data-gap_size_desktop="xxxl"] { column-gap: var(--spacing_xxxl) !important; }
    .element_masonry_layout[data-gap_size_desktop="xxxl"] > * { margin-bottom: var(--spacing_xxxl) !important; }
}

/**********************
***********************
*** ROLLING CONTENT ***
***********************
**********************/

.element_rolling_content
{

}

.element_rolling_content_container
{
    display: flex;

    overflow-x: auto;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* For Firefox */
}

/* For Chrome, Safari */
.element_rolling_content_container::-webkit-scrollbar { display: none; }

.element_rolling_content_page
{
    margin-right: var(--spacing_xxxl);

    flex: 0 0 100%;
    scroll-snap-align: start;
}

/* BUTTONS */

.element_rolling_content_buttons_container
{
    display: flex;

    line-height: 2rem;

    justify-content: center;
    align-items: center;
    gap: var(--spacing_s);
}

@media (min-width: 1300px)
{
    .element_rolling_content_buttons_container
    {
        gap: var(--spacing_l);
    }
}

.element_rolling_content_startpause_button
{
    position: relative;

    box-sizing: content-box;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;

    text-align: center;

    border: 1px solid var(--color_faint_gray);
    border-radius: 50%;

    background: conic-gradient(var(--accent_color_secondary) calc(100%), transparent 0);
}

.element_rolling_content_startpause_button::before
{
    content: '';
    position: absolute;
    inset: 1px;
    background-color: var(--color_white);
    border-radius: 50%;
}

.element_rolling_content_startpause_button:hover::before { background-color: var(--accent_color_secondary); }
.element_rolling_content_startpause_button:hover > .element_rolling_content_startpause_button_text { cursor: pointer; color: var(--color_white); }

.element_rolling_content_startpause_button_text
{
    position: absolute;

    box-sizing: border-box;
    width: 2rem;
    height: 2rem;

    padding: 0.25rem;
}

.element_rolling_content_startpause_button_text > svg
{
    width: 100%;
    height: 100%;
}

.element_rolling_content_button
{
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;

    border: 1px solid var(--accent_color_secondary);
    border-radius: 50%;

    background-color: var(--color_white);

    transition: background-color 0.3s;
}

.element_rolling_content_button:hover { cursor: pointer; background-color: var(--accent_color_secondary_darkened); }
.element_rolling_content_button[data-is_active] { cursor: pointer; background-color: var(--accent_color_secondary); }

@media (min-width: 1300px)
{
    .element_rolling_content_button
    {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/************
*************
*** TITLE ***
*************
************/

.element_title
{
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.1rem;
}

/**************
***************
*** CAPTION ***
***************
**************/

.element_caption
{

}

h2.element_caption
{
    font-size: 1.5rem;
    font-weight: bold;
}

h3.element_caption
{
    font-weight: bold;
}

/******************
*******************
*** SIMPLE TEXT ***
*******************
******************/

.element_simpletext
{
    line-height: var(--spacing_xxl);
}

/***************
****************
*** CHIPLIST ***
****************
***************/

.element_chiplist
{
    display: flex;

    flex-wrap: wrap;
    gap: var(--spacing_s);
}

.element_chiplist_chip
{
    padding: 4px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    font-size: 13px;
}

/******************
*******************
*** COLLAPSIBLE ***
*******************
******************/

.element_collapsible_container
{
    overflow: hidden;
    
    border: 1px solid var(--accent_color_secondary_faint);
    border-radius: var(--spacing_standard);
}

.element_collapsible_checkbox
{
    display: none;
}

.element_collapsible_header_wrapper
{
    display: grid;
    grid-gap: var(--spacing_s);
    grid-template-columns: auto 1fr auto;
}

.element_collapsible_header
{
    display: block;

    padding: var(--spacing_standard);

    background: var(--color_very_faint_gray);

    cursor: pointer;

    perspective: 300px;
}

.element_collapsible_title
{
    font-size: var(--font_size_l);
    font-weight: bold;
}

.element_collapsible_arrow
{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    transform-origin: 70% 50%;
    transform: translateY(5px) rotateX(0deg) rotate(45deg);
    transition: transform 0.3s ease;
}

.element_collapsible_checkbox:checked ~ .element_collapsible_header .element_collapsible_arrow
{
    transform: translateY(5px) rotateX(180deg) rotate(45deg);
}

.element_collapsible_content
{
    display: grid;

    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease;
}

.element_collapsible_content_inner
{
    overflow: hidden;

    padding-left: var(--spacing_standard);
    padding-right: var(--spacing_standard);
}

.element_collapsible_checkbox:checked ~ .element_collapsible_content
{
    grid-template-rows: 1fr;
}

/*****************
******************
*** HERO IMAGE ***
******************
*****************/

.element_hero_image_container
{
    box-sizing: border-box;

    height: calc(100vh - var(--content_top_margin));
}

.element_hero_image_container>img
{
    display: block;

    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - var(--content_top_margin));

    object-fit: cover;
    object-position: center center;
}

@media (min-width: 1300px)
{
    .element_hero_image_container
    {
        height: 100vh;
    }

    .element_hero_image_container>img
    {
        height: 100vh;
    }
}

/******************
*******************
*** SIMPLE LINK ***
*******************
******************/

.element_simplelink
{
    line-height: var(--spacing_xxl);
    transition: filter 0.3s;
}

.element_simplelink:hover
{
    filter: brightness(0.5);

    cursor: pointer;
    text-decoration: underline;
}

/******************
*******************
*** SIMPLE LIST ***
*******************
******************/

.element_simplelist
{
    list-style: none;
    padding: 0;
}

.element_simplelist_entry
{
    display: flex;

    margin-bottom: var(--spacing_s);
}

.element_simplelist_entry::before
{
    content: "•";
    width: 1.5em; /* marker column width */
    flex-shrink: 0;
}

/*********************
**********************
*** CALL TO ACTION ***
**********************
*********************/

.element_call_to_action
{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color_white);
    background-color: var(--accent_color_secondary);

    font-weight: bold;

    padding: var(--spacing_standard);

    border: 1px solid var(--accent_color_secondary);
    border-radius: 8px;

    transition: color 0.3s, background-color 0.3s, border 0.3s;
}

.element_call_to_action:hover
{
    cursor: pointer;

    color: var(--accent_color_secondary);
    background-color: var(--color_white);

    border: 1px solid var(--accent_color_secondary);
}

.element_call_to_action[disabled]
{
    pointer-events: none;

    opacity: 0.5;
}

/*************
**************
*** PERSON ***
**************
*************/

.element_person
{
    border: 1px solid var(--accent_color_secondary);
}

.element_person_lower_container
{
    padding-left: var(--spacing_standard);
    padding-right: var(--spacing_standard);
}

/***************
****************
*** MITGLIED ***
****************
***************/

.element_mitglied
{
    position: relative;
}

.element_mitglied_hover_container
{
    display: flex;
    box-sizing: border-box;

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

    position: absolute;

    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);

    opacity: 0;

    transition: opacity 0.3s;
}

.element_mitglied:hover .element_mitglied_hover_container
{
    opacity: 1;
    cursor: pointer;
}