/* =============================================
   ALGO CMS — Responsive Breakpoints
   Getranke Kirchgasser | Bierdepot.at
   Version: 4.0

   Layout, spacing & responsive behavior only.
   Controls vertical rhythm, column stacking,
   side padding, and content width at each
   breakpoint. No visual theming here.

   Breakpoints:
   1200px — large desktop (reduce spacing/fonts)
   1025px — tablet (hamburger menu, stacking)
    850px — small tablet (texti/cols stack)
    650px — mobile (single column, compact)
    480px — small mobile (minimal header)
   ============================================= */


/* ==============================================
   RSCALE — Device detection helper
   JS reads offsetWidth: 0=desktop, 1=tablet, 2=mobile.
   ============================================== */
.rscale {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    bottom: -1000px;
}

/* ==============================================
   BASE LAYOUT — Desktop defaults (no media query)
   art_texti flex layout, image/text 50/50 split,
   inner_width_full_width absolute image overlay.
   ============================================== */

/* --- art_texti: image + text side by side --- */
.art_element.art_texti > .art_element_c {
    display: flex;
    align-items: center;
}
.art_element.art_texti.image_right .art_texti_cont,
.art_element.art_texti.image_left .art_texti_cont {
    width: 50%;
    padding: 0;
    box-sizing: border-box;
    order: 2;
    text-align: left;
}
.art_element.art_texti.image_right .art_texti_cont {
    padding-right: 30px;
}
.art_element.art_texti.image_left .art_texti_cont {
    padding-left: 30px;
}
.art_element.art_texti.image_full .art_texti_cont {
    width: 100%;
}
.art_element.art_texti .art_texti_btn {
    width: 100%;
    float: left;
    margin: 20px 0 0;
}
.art_element.art_texti div img {
    width: 100%;
    float: left;
}

/* Image container: 50% width, aspect ratio preserved */
.art_element.art_texti .dv_image_right,
.art_element.art_texti .dv_image_left {
    width: 50%;
    order: 1;
}

/* Highslide image_item wrapper inside texti — must fill parent */
.art_element.art_texti .dv_image_right .image_item,
.art_element.art_texti .dv_image_left .image_item {
    width: 100%;
    height: 100%;
    display: block;
}
.art_element.art_texti.image_right .dv_image_right {
    order: 3;
}

/* --- inner_width_full_width texti: absolute image, padded text --- */
.art_element.art_texti.inner_width_full_width > .art_element_c {
    padding-bottom: 0;
    align-items: stretch; /* image side stretches to match text height */
}
.art_element.art_texti.inner_width_full_width .dv_image_right,
.art_element.art_texti.inner_width_full_width .dv_image_left {
    padding: 0 !important;
    position: relative;
}
/* image_item wrapper (Highslide) must also fill the container */
.art_element.art_texti.inner_width_full_width .dv_image_right .image_item,
.art_element.art_texti.inner_width_full_width .dv_image_left .image_item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.art_element.art_texti.inner_width_full_width .dv_image_right .img_c,
.art_element.art_texti.inner_width_full_width .dv_image_left .img_c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
}
.art_element.art_texti.inner_width_full_width .dv_image_right picture,
.art_element.art_texti.inner_width_full_width .dv_image_left picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.art_element.art_texti.inner_width_full_width .dv_image_right img,
.art_element.art_texti.inner_width_full_width .dv_image_left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.art_element.art_texti.inner_width_full_width .art_texti_cont {
    min-height: 585px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 65px 85px;
}
.art_element.art_texti.inner_width_full_width .art_texti_cont .art_headline,
.art_element.art_texti.inner_width_full_width .art_texti_cont .art_inner {
    max-width: 480px;
    width: 100%;
    text-align: left;
}
.art_element.art_texti.inner_width_full_width .art_texti_cont_inner {
    width: 100%;
}

/* Content paragraphs */
.content p {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- art_gallery: Standard view (gal_std) and slider (gal_slider) --- */
.art_element.art_gallery {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 160px;
    margin-bottom: 20px;
}
.art_element.art_gallery.vs_medium {
    margin-top: 45px;
}
.art_element.art_gallery .art_inner {
    position: relative;
    z-index: 1;
    padding-top: 0;
    padding-bottom: 0;
}
.art_element.art_gallery .art_inner .galc {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
/* Standard view: 4 columns grid */
.art_element.art_gallery .gal_item {
    width: 25%;
    float: left;
    padding: 12px;
    box-sizing: border-box;
}
/* Aspect ratio container for gallery images */
.art_element.art_gallery .img_c {
    width: 100%;
    padding-bottom: 72.18%;
    position: relative;
}
.art_element.art_gallery .landscape .img_c { padding-bottom: 60%; }
.art_element.art_gallery .square .img_c { padding-bottom: 100%; }
.art_element.art_gallery .portrait .img_c { padding-bottom: 120%; }

.art_element.art_gallery .img_c picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.art_element.art_gallery .img_c picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Clickable gallery items */
.content .iv,
.content .iv img {
    cursor: pointer !important;
}

/* --- art_imageline: images in a row --- */
.art_element.art_imageline .art_image {
    float: left;
    box-sizing: border-box;
    line-height: 100%;
}
.art_element.art_imageline .art_image img,
.art_element.art_imageline .art_image picture {
    width: 100%;
}
.art_element.art_imageline .art_image .img_c {
    width: 100%;
    padding-bottom: 72%;
    position: relative;
}
.art_element.art_imageline .art_image .img_c picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.art_element.art_imageline .art_image .img_c picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- art_tip: full background image with text overlay --- */
.art_element.art_tip {
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0;
    overflow: hidden;
}
.art_element.art_tip > .art_element_c {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: none;
}
.art_element.art_tip .art_tip_image_c {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.art_element.art_tip .art_tip_image_c .img_c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.art_element.art_tip .art_tip_image_c picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.art_element.art_tip .art_tip_image_c picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Subtle gradient overlay for text readability */
.art_element.art_tip .art_tip_image_c::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.14) 15%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.11) 87%);
}
.art_element.art_tip .art_tip_cont {
    width: 100%;
    padding: 280px 160px 200px;
    position: relative;
    z-index: 2;
    text-align: center;
}
.art_element.art_tip .art_tip_btn {
    padding-top: 20px;
}


/* ==============================================
   1200px — LARGE DESKTOP
   Slightly reduced spacing and nav font.
   ============================================== */
@media (max-width: 1200px) {
    .cl_head_content { padding: 0 40px; }
    .cl_nav > ul { gap: 16px; }
    .cl_nav a { font-size: 15px; }
}


/* ==============================================
   1025px — TABLET
   Switch to hamburger menu, reduce vertical
   spacing between content blocks. Headlines
   scale down one step.
   ============================================== */
@media (max-width: 1025px) {
    /* Rscale: tablet = 1px */
    .rscale { width: 1px; }

    :root {
        --space-l: 75px;
        --space-s: 37.5px;
    }

    /* --- Vertical spacing: desktop 140px → tablet 100px --- */
    .art_element {
        margin-top: 100px;
    }

    /* Gallery: reduced top margin on tablet */
    .art_element.art_gallery { margin-top: 120px; }
    .art_element.art_gallery.vs_medium { margin-top: 40px; }

    /* First element reduced proportionally */
    .content > .art_element:first-child {
        margin-top: 120px;
    }

    /* Last element bottom padding */
    .content > .art_element:last-child {
        padding-bottom: 130px;
    }

    /* Vertical spacing modifiers at tablet */
    .vs_medium { margin-top: 20px !important; }
    .vs_small  { margin-top: -10px !important; }

    /* --- art_tip: tablet — fixed min-height, reduced padding --- */
    .art_element.art_tip > .art_element_c {
        min-height: 795px;
    }
    .art_element.art_tip .art_tip_cont {
        padding: 60px;
    }
    .art_element.art_tip .art_tip_btn {
        padding-top: 10px;
    }

    /* Full-bleed highlight padding */
    .art_element.highlight,
    .art_element.highlight2 {
        padding: 90px 0;
    }

    /* Content highlight padding */
    .content_highlight .art_element_c {
        padding: 75px 40px 65px;
    }
    .content_highlight2 .art_element_c {
        padding: 60px 40px 60px;
    }

    /* --- Headlines: one step smaller --- */
    .art_element .art_headline,
    .art_element .art_headline h3 { font-size: 2.25rem; }
    .art_element .art_headline h1 { font-size: 3rem; }
    .art_element .art_headline h2 { font-size: 2.75rem; }
    .art_element .art_headline h4,
    .art_element.art_cols .art_col h4.coltitle { font-size: 1.25rem; }
    .art_element .art_headline h5 { font-size: 1.0625rem; }
    .art_element .art_headline h6 { font-size: 0.875rem; }

    /* --- Header: compact, hamburger visible --- */
    .cl_head_c { height: 90px; border-bottom-width: 8px; }
    .cl_head_content { height: 90px; padding: 0 20px; }

    .cl_nav { display: none; }
    .cl_mobile_menu_btn { display: block; }
    .cl_anfragen_btn { display: none; }
    .cl_logo_c img { width: 140px; }

    /* --- Visibility: tablet-specific --- */
    .art_disp_desktop { display: none; }
    .art_disp_mobile  { display: none; }
    .art_disp_tablet  { display: block; }
    .art_disp_desktab { display: block; }
    .art_disp_tabmob  { display: block; }

    /* --- Footer: stack vertically --- */
    .cl_footer_inner { flex-direction: column; gap: 40px; padding: 0 40px; }
    .cl_footer_bottom { flex-direction: column; gap: 15px; padding: 20px 40px 0; text-align: center; }
    .cl_footer_links { flex-wrap: wrap; justify-content: center; }

    /* --- Brands: wrap on smaller screens --- */
    .cl_brands_inner { gap: 40px; flex-wrap: wrap; }

    /* --- art_tip: reduce min-height --- */
    .art_element.art_tip > .art_element_c {
        min-height: auto;
    }
}


/* ==============================================
   850px — SMALL TABLET
   art_texti stacks (image on top, text below).
   art_cols stacks to single column.
   Side padding reduced.
   ============================================== */
@media (max-width: 850px) {
    :root {
        --space-l: 60px;
        --space-s: 30px;
    }

    /* --- art_texti: image + text stack vertically --- */
    .art_element.art_texti > .art_element_c {
        flex-direction: column;
    }

    /* Remove ALL side padding from texti so image goes edge-to-edge */
    .art_element.art_texti.spl,
    .art_element.art_texti.spr,
    .art_element.art_texti.sspl,
    .art_element.art_texti.sspr {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Remove max-width constraint so image fills full viewport */
    .art_element.art_texti > .art_element_c {
        max-width: none !important;
    }

    /* Image ALWAYS on top (order 1), override desktop order:3 for image_right */
    .art_element.art_texti .dv_image_left,
    .art_element.art_texti .dv_image_right,
    .art_element.art_texti.image_right .dv_image_right,
    .art_element.art_texti .dv_image_full {
        width: 100% !important;
        max-width: 100% !important;
        float: none;
        padding: 0 !important;
        order: 1 !important;
    }

    /* Force image container and inner elements to fill full width */
    .art_element.art_texti .dv_image_left .img_c,
    .art_element.art_texti .dv_image_right .img_c {
        width: 100% !important;
    }
    .art_element.art_texti .dv_image_left .art_image,
    .art_element.art_texti .dv_image_right .art_image {
        width: 100% !important;
    }

    /* Text ALWAYS below image (order 2), symmetric padding */
    .art_element.art_texti .art_texti_cont,
    .art_element.art_texti.image_right .art_texti_cont,
    .art_element.art_texti.image_left .art_texti_cont,
    .art_element.art_texti.image_full .art_texti_cont,
    .art_element.art_texti.inner_width_full_width .art_texti_cont {
        width: 100%;
        order: 2 !important;
        padding: 35px 45px 0 45px !important;
    }

    /* img_c: restore aspect-ratio since image is no longer absolute overlay */
    .art_element.art_texti .img_c {
        padding-bottom: 67.8%;
        position: relative;
    }
    .art_element.art_texti .img_c picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .art_element.art_texti .img_c picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* inner_width_full_width texti: reset absolute image to normal flow */
    .art_element.art_texti.inner_width_full_width .dv_image_right,
    .art_element.art_texti.inner_width_full_width .dv_image_left {
        width: 100%;
        order: 1;
        position: relative;
    }
    .art_element.art_texti.inner_width_full_width .dv_image_right .img_c,
    .art_element.art_texti.inner_width_full_width .dv_image_left .img_c {
        position: relative;
        top: unset;
        left: unset;
        height: auto;
        padding-bottom: 67.8%;
    }
    .art_element.art_texti.inner_width_full_width .art_texti_cont {
        min-height: 0;
    }

    /* --- art_cols: columns stack to full width --- */
    .art_element.art_cols .art_col.cols_six,
    .art_element.art_cols .art_col.cols_four {
        width: 100%;
        float: none;
        padding: 0 !important;
        margin-bottom: 20px;
    }

    /* --- art_imageline: reduce gutter padding --- */
    .art_element.art_imageline .art_image.cols_six {
        padding: 0 10px;
    }
    .art_element.art_imageline .art_image.cols_six:first-child {
        padding: 0 20px 0 0;
    }
    .art_element.art_imageline .art_image.cols_six:last-child {
        padding: 0 0 0 20px;
    }

    /* --- Gallery: 2 columns --- */
    .cl_gallery_slider .slide { flex: 0 0 calc(50% - 8px); }

    /* --- Hero logo: slightly larger on tablet --- */
    .cl_hero_logo { max-width: 60%; }

    /* --- art_tip: small tablet — compact padding --- */
    .art_element.art_tip .art_tip_cont {
        padding: 65px 60px 40px;
    }
}


/* ==============================================
   650px — MOBILE
   Full single-column layout, reduced spacing
   and font sizes, full-width buttons.
   ============================================== */
@media (max-width: 650px) {
    /* Rscale: mobile = 2px */
    .rscale { width: 2px; }

    :root {
        --space-l: 60px;
        --space-s: 60px;
    }

    /* --- Vertical spacing: tablet 100px → mobile 60px --- */
    .art_element {
        margin-top: 60px;
    }

    /* Gallery: reduced margin on mobile */
    .art_element.art_gallery { margin-top: 80px; }
    .art_element.art_gallery.vs_medium { margin-top: 35px; }

    /* First element */
    .content > .art_element:first-child {
        margin-top: 80px;
    }

    /* Last element bottom padding */
    .content > .art_element:last-child {
        padding-bottom: 90px;
    }

    /* Vertical spacing modifiers at mobile */
    .vs_medium { margin-top: 15px !important; }
    .vs_small  { margin-top: -12.5px !important; }

    /* --- art_tip: mobile — compact, text readable --- */
    .art_element.art_tip > .art_element_c {
        min-height: auto;
    }
    .art_element.art_tip .art_tip_cont {
        padding: 120px 30px 80px;
    }

    /* --- Buttons: mobile — full width, compact padding --- */
    .art_element.art_button > .art_element_c > a,
    .art_element.art_tip .art_tip_btn > a,
    .art_element.art_texti .art_texti_btn > a {
        padding: 18px 15px;
        width: 100%;
    }

    /* Full-bleed highlight padding */
    .art_element.highlight,
    .art_element.highlight2 {
        padding: 70px 0;
    }

    /* Content highlight padding */
    .content_highlight .art_element_c {
        padding: 50px 30px 50px;
    }
    .content_highlight2 .art_element_c {
        padding: 50px 30px 50px;
    }

    /* --- Headlines: mobile sizes --- */
    .art_element .art_headline,
    .art_element .art_headline h3 { font-size: 1.875rem; }
    .art_element .art_headline h1 { font-size: 2.188rem; }
    .art_element .art_headline h2 { font-size: 2rem; }
    .art_element .art_headline h4,
    .art_element.art_cols .art_col h4.coltitle { font-size: 1.125rem; }
    .art_element .art_headline h5 { font-size: 0.9375rem; }
    .art_element .art_headline h6 { font-size: 0.8125rem; }

    /* --- Buttons: full width --- */
    .art_element.art_button > .art_element_c > a,
    .art_element.art_tip .art_tip_btn > a,
    .art_element.art_texti .art_texti_btn > a {
        padding: 18px 15px;
        width: 100%;
    }

    /* --- Content font --- */
    .content { font-size: 1rem; }

    /* --- Visibility: mobile-specific --- */
    .art_disp_desktop { display: none; }
    .art_disp_tablet  { display: none; }
    .art_disp_mobile  { display: block; }
    .art_disp_desktab { display: none; }
    .art_disp_tabmob  { display: block; }

    /* --- art_imageline: stack to single column --- */
    .art_element.art_imageline .art_image.cols_six,
    .art_element.art_imageline .art_image.cols_four {
        width: 100%;
        float: none;
        padding: 3px 0 !important;
    }

    /* --- Gallery: 1 column (85% width for peek effect) --- */
    .cl_gallery_slider .slide { flex: 0 0 85%; }

    /* --- Footer --- */
    .cl_footer_inner { padding: 0 15px; }
    .cl_footer_logo img { width: 220px; }
    .cl_footer_bottom { padding: 15px; }
    .cl_footer_links { gap: 12px; }
    .cl_footer_links a { font-size: 12px; }
    .cl_footer_separator { height: 16px; }

    /* --- Brands: tighter --- */
    .cl_brands_inner { gap: 30px; }
    .cl_brands_separator { height: 16px; }
}


/* ==============================================
   480px — SMALL MOBILE
   Minimal header, compact hero.
   ============================================== */
@media (max-width: 480px) {
    .cl_head_c { height: 70px; border-bottom-width: 6px; }
    .cl_head_content { height: 70px; padding: 0 15px; }
    .cl_hero { min-height: 320px; }
    .cl_logo_c img { width: 110px; }

    .cl_hero_logo { max-width: 75%; }
}