/* =============================================
   ALGO CMS — Content Element Styles
   Getranke Kirchgasser | Bierdepot.at
   Template: (de) Claude Content
   Version: 5.0

   Content element types used on this site:
   art_text, art_texti, art_button, art_tip,
   art_group/art_cols, art_imageline,
   art_whitespace, art_plain, art_table.

   Also: typography, image system, animations,
   highlights, buttons, text_link_btn, gallery,
   logos slider, decorative classes, accordion.

   Frame styles  -> cl_style.css
   Responsive    -> cl_responsive.css
   ============================================= */


/* ==============================================
   1. CONTENT TYPOGRAPHY
   Base font settings for .content wrapper.
   All art_elements live inside .content.
   ============================================== */
body.mceContentBody {
    overflow: auto;
    background-color: var(--color-white);
}

.art_focus:focus {
    outline: none;
}

.content {
    font: 300 1.125rem/180% var(--font-body);
    color: var(--color-primary);
    overflow: hidden; /* clearfix for floated art_elements */
}

.content b,
.content strong {
    font-weight: 600;
}

/* Content links */
.content a {
    text-decoration: underline;
    transition: color ease 0.5s;
    color: var(--color-primary);
}
.content a:hover,
.content a:focus {
    color: inherit;
}

/* Unordered lists in content */
.content ul {
    margin: 0;
    padding: 0;
    display: table;
    list-style: none;
    position: relative;
}
.content li {
    padding-left: 19px;
    padding-bottom: 3px;
    position: relative;
}
.content ul li::before {
    width: 5px;
    height: 5px;
    position: absolute;
    top: 12px;
    left: 0;
    border-radius: 50%;
    background-color: var(--color-primary);
    content: '';
}


/* ==============================================
   2. GRID SYSTEM
   12-column float-based grid.
   Each art_element gets a cols_* class for width.
   ============================================== */
.cols_one    { width: 8.33333%; float: left; }
.cols_two    { width: 16.6666%; float: left; }
.cols_three  { width: 25%;      float: left; }
.cols_four   { width: 33.3333%; float: left; }
.cols_five   { width: 41.6666%; float: left; }
.cols_six    { width: 50%;      float: left; }
.cols_seven  { width: 58.3333%; float: left; }
.cols_eight  { width: 66.6666%; float: left; }
.cols_nine   { width: 75%;      float: left; }
.cols_ten    { width: 83.3333%; float: left; }
.cols_eleven { width: 91.6666%; float: left; }
.cols_twelve { width: 100%;     float: left; }


/* ==============================================
   3. SPACING SYSTEM
   Horizontal padding classes for art_elements.
   8 spacing modes: spl, spr, sspl, sspr combos.
   Values change at breakpoints in responsive.css.
   ============================================== */
.spl  { padding-left: var(--space-l); }
.spr  { padding-right: var(--space-l); }
.sspl { padding-left: var(--space-s); }
.sspr { padding-right: var(--space-s); }


/* ==============================================
   4. VISIBILITY SYSTEM
   Device-dependent display toggles.
   Desktop: >1025px, Tablet: 651-1025px, Mobile: <=650px
   Overrides in cl_responsive.css at breakpoints.
   ============================================== */
.art_disp_all     { /* always visible -- no CSS needed */ }
.art_disp_mobile  { display: none; }
.art_disp_tablet  { display: block; }
.art_disp_desktop { display: block; }
.art_disp_desktab { display: block; }
.art_disp_tabmob  { display: none; }


/* ==============================================
   5. ART_ELEMENT BASE
   Common wrapper for all content elements.
   .art_element_c is the inner container.
   ============================================== */
.art_element {
    width: 100%;
    float: left;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 140px;
    position: relative;
    z-index: 1;
}

/* First art_element in content -- top margin override */
.content > .art_element:first-child {
    margin-top: 160px;
}

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

.art_element_c {
    max-width: 1270px;
    margin-left: auto;
    margin-right: auto;
}

/* Anchor link -- jump target for section links */
a.art_anchor,
.content a.art_anchor {
    position: absolute;
    top: 0;
    margin-top: 0;
    text-decoration: none;
    width: 10px;
    height: 1px;
}

/* Inner width variants -- content width constraint */
.inner_width_narrow > .art_element_c {
    max-width: 700px;
}
.inner_width_medium > .art_element_c {
    max-width: 1080px;
}
.inner_width_full_width > .art_element_c {
    max-width: 99999px;
}

/* Group container -- wider default */
.art_element.art_group > .art_element_c {
    max-width: 1440px;
}
.art_element.art_group.inner_width_full_width > .art_element_c {
    max-width: 99999px;
}
.art_element.art_group.sspl.sspr > .art_element_c {
    max-width: 1355px;
}

/* Text alignment */
.ta_center { text-align: center; }
.ta_center .art_headline { text-align: center; }
.ta_left { text-align: left; }
.ta_right { text-align: right; }

/* Vertical spacing modifiers */
.vs_medium   { margin-top: 25px !important; }
.vs_small    { margin-top: -7.5px !important; }
.vs_no_space { margin-top: 0 !important; }


/* ==============================================
   6. HEADLINES -- art_headline
   Heading levels h1-h6 with consistent styling.
   Pipe character (|) is replaced with <br> in PHP.
   ============================================== */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.art_element .art_headline,
.art_element .art_headline h3 {
    font: 400 2.625rem/120% var(--font-heading);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.art_element .art_headline h1 {
    font: 600 3.875rem/120% var(--font-heading);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary);
}

.art_element .art_headline h2 {
    font: 400 3.438rem/120% var(--font-heading);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary);
}

.art_element .art_headline h4,
.art_element.art_cols .art_col h4.coltitle {
    font: 400 1.375rem/120% var(--font-heading);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary);
}

.art_element .art_headline h5 {
    font: 400 1.188rem/122% var(--font-heading);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary);
}

.art_element .art_headline h6 {
    font: 400 0.938rem/120% var(--font-heading);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary);
}

/* Subtitle spacing */
.art_element .art_headline.sub {
    margin-bottom: 20px;
}


/* ==============================================
   7. ART_TEXT (editor_text)
   Simple text block with headline and body text.
   ============================================== */
.art_element.art_text .art_inner {
    /* Inherits .content typography */
}


/* ==============================================
   8. ART_TEXTI (editor_texti)
   Text + image element. Image left, right or full.
   50/50 split on desktop, stacks on mobile.
   ============================================== */
.art_element.art_texti > .art_element_c {
    display: flex;
    align-items: center;
}
/* Text+image content always left-aligned regardless of parent ta_center */
.art_element.art_texti .art_texti_cont {
    text-align: left;
}

/* Image left layout */
.art_element.art_texti.image_left .dv_image_left {
    width: 50%;
    order: 1;
    padding-right: 30px;
    flex-shrink: 0;
}
.art_element.art_texti.image_left .art_texti_cont {
    width: 50%;
    order: 2;
}

/* Image right layout */
.art_element.art_texti.image_right .dv_image_right {
    width: 50%;
    order: 3;
    padding-left: 30px;
    flex-shrink: 0;
}
.art_element.art_texti.image_right .art_texti_cont {
    width: 50%;
    order: 1;
}

/* Image full layout */
.art_element.art_texti.image_full .dv_image_full {
    width: 100%;
    margin-bottom: 30px;
}
.art_element.art_texti.image_full .art_texti_cont {
    width: 100%;
}

/* Text+image button */
.art_texti_btn {
    margin-top: 25px;
}


/* ==============================================
   9. ART_BUTTON (editor_button)
   Standalone button element with alignment options.
   ============================================== */
.art_element.art_button {
    margin-top: 10px;
    padding-top: 15px;
    padding-bottom: 0;
}

.art_element.art_button > .art_element_c {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.art_element.art_button.button_left > .art_element_c   { justify-content: flex-start; }
.art_element.art_button.button_mid > .art_element_c    { justify-content: center; }
.art_element.art_button.button_right > .art_element_c  { justify-content: flex-end; }

/* Shared button style -- used by art_button, art_tip, art_texti */
.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 40px;
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    transition: all ease 0.5s;
    font: 600 1.125rem/120% var(--font-body);
    color: var(--color-bg) !important;
    text-decoration: none !important;
    text-transform: none;
    text-align: center;
    letter-spacing: 0.33em;
    border-radius: 100px;
    display: inline-block;
    cursor: pointer;
}

/* Button hover/focus */
.art_element.art_button > .art_element_c > a:hover,
.art_element.art_button > .art_element_c > a:focus,
.art_element.art_tip .art_tip_btn > a:hover,
.art_element.art_tip .art_tip_btn > a:focus,
.art_element.art_texti .art_texti_btn > a:hover,
.art_element.art_texti .art_texti_btn > a:focus {
    background-color: transparent;
    color: var(--color-primary) !important;
}

/* Secondary button (outline style) */
.art_element.art_button > .art_element_c > a.second,
.art_element.art_tip .art_tip_btn > a.second,
.art_element.art_texti .art_texti_btn > a.second {
    background-color: transparent;
    color: var(--color-primary) !important;
}
.art_element.art_button > .art_element_c > a.second:hover,
.art_element.art_button > .art_element_c > a.second:focus,
.art_element.art_tip .art_tip_btn > a.second:hover,
.art_element.art_tip .art_tip_btn > a.second:focus,
.art_element.art_texti .art_texti_btn > a.second:hover,
.art_element.art_texti .art_texti_btn > a.second:focus {
    background-color: var(--color-primary);
    color: var(--color-bg) !important;
}


/* ==============================================
   9b. TEXT_LINK_BTN -- Underline animation system
   Stripped-down text link with animated underline.
   Applies across art_button, art_tip, art_texti.
   ============================================== */
.art_element.art_button.text_link_btn > a,
.art_element.art_tip.text_link_btn .art_tip_btn > a,
.art_element.art_texti.text_link_btn .art_texti_btn > a {
    padding: 0;
    background-color: transparent;
    color: var(--color-primary) !important;
    text-align: left;
    border: 0;
}

.art_element.art_button.text_link_btn > a > span,
.art_element.art_tip.text_link_btn .art_tip_btn > a > span,
.art_element.art_texti.text_link_btn .art_texti_btn > a > span {
    display: inline-block;
    padding-bottom: 3px;
    position: relative;
}

/* Animated underline -- grows from left on hover */
.art_element.art_button.text_link_btn > a > span::after,
.art_element.art_tip.text_link_btn .art_tip_btn > a > span::after,
.art_element.art_texti.text_link_btn .art_texti_btn > a > span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: all ease 0.5s;
}

.art_element.art_button.text_link_btn > a:hover,
.art_element.art_button.text_link_btn > a:focus,
.art_element.art_tip.text_link_btn .art_tip_btn > a:hover,
.art_element.art_tip.text_link_btn .art_tip_btn > a:focus,
.art_element.art_texti.text_link_btn .art_texti_btn > a:hover,
.art_element.art_texti.text_link_btn .art_texti_btn > a:focus {
    background-color: transparent;
    color: var(--color-primary) !important;
}

.art_element.art_button.text_link_btn > a:hover > span::after,
.art_element.art_button.text_link_btn > a:focus > span::after,
.art_element.art_tip.text_link_btn .art_tip_btn > a:hover > span::after,
.art_element.art_tip.text_link_btn .art_tip_btn > a:focus > span::after,
.art_element.art_texti.text_link_btn .art_texti_btn > a:hover > span::after,
.art_element.art_texti.text_link_btn .art_texti_btn > a:focus > span::after {
    width: 100%;
}


/* ==============================================
   10. ART_TABLE (editor_table)
   Data tables with header row styling.
   ============================================== */
.art_element.art_table table {
    width: 100%;
    border-collapse: collapse;
}

.art_element.art_table th,
.art_element.art_table table.mobile_table td.trtitle {
    padding: 6px 8px;
    background-color: var(--color-bg);
    font: 600 0.875rem/120% var(--font-body);
    letter-spacing: 0;
    color: var(--color-primary);
    text-align: center;
    text-transform: none;
}

.art_element.art_table th:first-child,
.art_element.art_table table.mobile_table td.trtitle:first-child {
    text-align: left;
}

.art_element.art_table td,
.art_element.art_table table.mobile_table th {
    padding: 19px 8px;
    border-bottom: 1px dashed rgba(128, 128, 128, 0.5);
    text-align: center;
    font: 600 0.875rem/120% var(--font-body);
    letter-spacing: 0;
    color: var(--color-primary);
    background-color: transparent;
}

.art_element.art_table td:first-child {
    text-align: left;
}

.art_element.art_table td:first-child em {
    font-weight: 300;
    font-style: normal;
    padding-top: 5px;
    display: inline-block;
}


/* ==============================================
   10b. ART_GALLERY — CSS-only horizontal scroll slider
   No slick JS dependency. Uses scroll-snap for
   smooth swipe experience on touch devices.
   ============================================== */
.art_element.art_gallery .galc.gal_slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px;
}
.art_element.art_gallery .galc.gal_slider::-webkit-scrollbar {
    display: none;
}
.art_element.art_gallery .gal_item {
    flex: 0 0 calc(33.333% - 11px);
    scroll-snap-align: start;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}
.art_element.art_gallery .gal_item .img_c {
    width: 100%;
    padding-bottom: 72%;
    position: relative;
}
.art_element.art_gallery .gal_item .img_c picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.art_element.art_gallery .gal_item .img_c picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==============================================
   11. ART_TIP (editor_tip)
   Layout rules are in cl_responsive.css.
   Only color/typography overrides here.
   ============================================== */
.art_element.art_tip {
    padding-bottom: 0;
}

.art_tip_btn {
    margin-top: 25px;
}


/* ==============================================
   12. ART_COLS (editor_cols)
   2 or 3 column text layout with optional titles.
   ============================================== */
.art_element.art_cols .art_inner {
    display: flex;
    flex-wrap: wrap;
}

/* Column gutter padding -- 2 columns (cols_six) */
.art_element.art_cols .art_col.cols_six {
    padding: 0 42.5px;
}
.art_element.art_cols .art_col.cols_six:first-child {
    padding: 0 85px 0 0;
}
.art_element.art_cols .art_col.cols_six:last-child {
    padding: 0 0 0 85px;
}

/* Column gutter padding -- 3 columns (cols_four) */
.art_element.art_cols .art_col.cols_four {
    padding: 0 28.33px;
}
.art_element.art_cols .art_col.cols_four:first-child {
    padding: 0 56.67px 0 0;
}
.art_element.art_cols .art_col.cols_four:last-child {
    padding: 0 0 0 56.67px;
}

.art_element.art_cols .art_col h4.coltitle {
    margin-bottom: 10px;
}


/* ==============================================
   13. ART_IMAGELINE (editor_imageline)
   1-3 images side by side.
   ============================================== */
.art_element.art_imageline .art_inner {
    display: flex;
    flex-wrap: wrap;
}

/* Image gutter padding -- 2 images (cols_six) */
.art_element.art_imageline .art_image.cols_six {
    padding: 0 21.25px;
}
.art_element.art_imageline .art_image.cols_six:first-child {
    padding: 0 42.5px 0 0;
}
.art_element.art_imageline .art_image.cols_six:last-child {
    padding: 0 0 0 42.5px;
}

/* Image gutter padding -- 3 images (cols_four) */
.art_element.art_imageline .art_image.cols_four {
    padding: 0 14.17px;
}
.art_element.art_imageline .art_image.cols_four:first-child {
    padding: 0 28.33px 0 0;
}
.art_element.art_imageline .art_image.cols_four:last-child {
    padding: 0 0 0 28.33px;
}


/* ==============================================
   14. ART_WHITESPACE (editor_whitespace)
   Empty spacer element.
   ============================================== */
.art_element.art_whitespace {
    height: 160px;
    margin-top: 0;
    padding: 0;
}


/* ==============================================
   15. ART_PLAIN (editor_plain)
   Raw HTML content without extra styling.
   ============================================== */
.art_element.art_plain .art_inner {
    /* Raw HTML -- no additional styles */
}


/* ==============================================
   16. ACCORDION CONTAINER (accitem)
   Collapsible group element with SVG toggle icon.
   ============================================== */
.art_element.art_group.accitem > .art_element_c > .art_headline > * {
    color: var(--color-primary) !important;
    transition: color ease 0.5s;
}

.art_element.art_group.accitem.closed > .art_element_c > .art_headline > * {
    color: var(--color-primary) !important;
}

.art_element.art_group.accitem .acc rect {
    fill: var(--color-primary) !important;
}

.art_element.art_group.accitem.closed .acc rect {
    fill: var(--color-primary) !important;
}


/* ==============================================
   17. IMAGE SYSTEM
   .img_c aspect ratio container for lazy loading.
   <picture> pattern: src=px.webp, data-src=actual.
   .image_item.iv: clickable image with lightbox.
   ============================================== */
.img_c {
    width: 100%;
    padding-bottom: 67.8%; /* Default 3:2 aspect ratio */
    position: relative;
    overflow: hidden;
}
.img_c.landscape { padding-bottom: 74.95%; }
.img_c.square    { padding-bottom: 100%; }
.img_c.portrait  { padding-bottom: 120%; }

.img_c picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img_c picture img,
.img_c > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lazy loading placeholder -- see JS: data-src swap */
img[src="img/px.webp"] {
    /* Placeholder 1x1 webp -- transparent until loaded */
}

/* Header/footer image fade-in after lazy load */
header img[src="img/px.webp"],
footer img[src="img/px.webp"] {
    opacity: 0;
    transition: opacity .3s;
}

/* Lightbox trigger -- clickable image */
.image_item.iv {
    cursor: pointer;
    position: relative;
}
.image_item.iv:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ==============================================
   18. ANIMATION SYSTEM
   IntersectionObserver adds .algo-animate class
   when element enters viewport.
   data-anim="fade-up" data-anim-type="all-in"
   ============================================== */

/* Base: all animated elements start hidden */
[data-anim],
[data-anim][data-anim-type="separate"] .art_col,
[data-anim][data-anim-type="separate"] .art_headline,
[data-anim][data-anim-type="separate"] .art_image,
[data-anim][data-anim-type="separate"] .art_inner,
[data-anim][data-anim-type="separate"] .art_tip_image_c,
[data-anim][data-anim-type="separate"] .dv_image_left,
[data-anim][data-anim-type="separate"] .dv_image_right {
    transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
    transition-duration: 2s;
}

/* Fade Up -- entire element at once */
@keyframes fadeInUp {
    0%   { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

[data-anim="fade-up"][data-anim-type="all-in"] {
    opacity: 0;
    transition: none;
    animation-duration: 2s;
}

[data-anim="fade-up"][data-anim-type="all-in"].algo-animate {
    animation-name: fadeInUp;
    opacity: 1;
    animation-fill-mode: none;
}

/* Fade Up -- separate child animation (staggered) */
[data-anim="fade-up"][data-anim-type="separate"] .art_col,
[data-anim="fade-up"][data-anim-type="separate"] .art_headline,
[data-anim="fade-up"][data-anim-type="separate"] .art_image,
[data-anim="fade-up"][data-anim-type="separate"] .art_inner,
[data-anim="fade-up"][data-anim-type="separate"] .art_tip_image_c,
[data-anim="fade-up"][data-anim-type="separate"] .dv_image_left,
[data-anim="fade-up"][data-anim-type="separate"] .dv_image_right {
    opacity: 0;
    transition: none;
    animation-duration: 2s;
    animation-fill-mode: both;
}

[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_col,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_headline,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_image,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_inner,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_tip_image_c,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .dv_image_left,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .dv_image_right {
    animation-name: fadeInUp;
}

/* Stagger delays for separate animation */
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_headline { animation-delay: .4s; }
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_inner    { animation-delay: .8s; }
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .dv_image_left,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .dv_image_right,
[data-anim="fade-up"][data-anim-type="separate"].algo-animate .art_tip_image_c { animation-delay: 0s; }

/* Fade In -- simple opacity animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

[data-anim="fade-in"][data-anim-type="all-in"] {
    opacity: 0;
    transition: none;
    animation-duration: 2s;
    animation-fill-mode: both;
}
[data-anim="fade-in"][data-anim-type="all-in"].algo-animate {
    animation-name: fadeIn;
}


/* ==============================================
   19. HIGHLIGHTS -- Emphasized sections
   Background color/image variants for
   full-bleed section styling.
   highlight = bg color, highlight2 = primary,
   highlight3-6 = decorative variants.
   ============================================== */

/* --- highlight (light background) --- */
.art_element.highlight {
    background-color: var(--color-bg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 125px 0;
}

/* Decorative SVG backgrounds — triggered by algo-animate (scroll-in) */
.art_element.highlight.algo-animate { background-image: url(../img/icons/vinebottle-with-hand-and-glass.svg); }

/* --- highlight2 (primary dark background) --- */
.art_element.highlight2 {
    background-color: var(--color-primary);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 125px 0;
}

/* Decorative SVG background appears after scroll-in animation */
.art_element.highlight2.algo-animate { background-image: url(../img/icons/green-highlight-01.svg); }

.art_element.highlight2 .art_headline *,
.art_element.highlight2 .art_inner {
    color: var(--color-bg) !important;
}
.art_element.highlight2 .art_inner a {
    color: var(--color-bg);
}
.art_element.highlight2 .art_inner a:hover,
.art_element.highlight2 .art_inner a:focus {
    color: var(--color-bg);
}
.art_element.highlight2 li::before {
    background-color: var(--color-bg);
}

/* Highlight2 buttons -- inverted colors */
/* Pattern: .highlight2 applied directly AND .highlight2 as container parent */
.art_element.highlight2.art_button > .art_element_c > a,
.art_element.highlight2 .art_button > .art_element_c > a,
.art_element.highlight2.art_tip .art_tip_btn > a,
.art_element.highlight2 .art_tip .art_tip_btn > a,
.art_element.highlight2.art_texti .art_texti_btn > a,
.art_element.highlight2 .art_texti .art_texti_btn > a {
    background-color: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-primary) !important;
}
.art_element.highlight2.art_button > .art_element_c > a:hover,
.art_element.highlight2 .art_button > .art_element_c > a:hover,
.art_element.highlight2.art_tip .art_tip_btn > a:hover,
.art_element.highlight2 .art_tip .art_tip_btn > a:hover,
.art_element.highlight2.art_texti .art_texti_btn > a:hover,
.art_element.highlight2 .art_texti .art_texti_btn > a:hover,
.art_element.highlight2.art_button > .art_element_c > a:focus,
.art_element.highlight2 .art_button > .art_element_c > a:focus,
.art_element.highlight2.art_tip .art_tip_btn > a:focus,
.art_element.highlight2 .art_tip .art_tip_btn > a:focus,
.art_element.highlight2.art_texti .art_texti_btn > a:focus,
.art_element.highlight2 .art_texti .art_texti_btn > a:focus {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg) !important;
}

/* Highlight2 secondary buttons */
.art_element.highlight2.art_button > .art_element_c > a.second,
.art_element.highlight2 .art_button > .art_element_c > a.second,
.art_element.highlight2.art_tip .art_tip_btn > a.second,
.art_element.highlight2 .art_tip .art_tip_btn > a.second,
.art_element.highlight2.art_texti .art_texti_btn > a.second,
.art_element.highlight2 .art_texti .art_texti_btn > a.second {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg) !important;
}
.art_element.highlight2.art_button > .art_element_c > a.second:hover,
.art_element.highlight2 .art_button > .art_element_c > a.second:hover,
.art_element.highlight2.art_tip .art_tip_btn > a.second:hover,
.art_element.highlight2 .art_tip .art_tip_btn > a.second:hover,
.art_element.highlight2.art_texti .art_texti_btn > a.second:hover,
.art_element.highlight2 .art_texti .art_texti_btn > a.second:hover,
.art_element.highlight2.art_button > .art_element_c > a.second:focus,
.art_element.highlight2 .art_button > .art_element_c > a.second:focus,
.art_element.highlight2.art_tip .art_tip_btn > a.second:focus,
.art_element.highlight2 .art_tip .art_tip_btn > a.second:focus,
.art_element.highlight2.art_texti .art_texti_btn > a.second:focus,
.art_element.highlight2 .art_texti .art_texti_btn > a.second:focus {
    background-color: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-primary) !important;
}

/* Highlight2 text_link_btn -- inverted underline color */
.art_element.highlight2.art_button.text_link_btn > a,
.art_element.highlight2 .art_button.text_link_btn > a,
.art_element.highlight2.art_tip.text_link_btn .art_tip_btn > a,
.art_element.highlight2 .art_tip.text_link_btn .art_tip_btn > a,
.art_element.highlight2.art_texti.text_link_btn .art_texti_btn > a,
.art_element.highlight2 .art_texti.text_link_btn .art_texti_btn > a {
    color: var(--color-bg) !important;
    background-color: transparent;
}

.art_element.highlight2.art_button.text_link_btn > a:hover,
.art_element.highlight2 .art_button.text_link_btn > a:hover,
.art_element.highlight2.art_button.text_link_btn > a:focus,
.art_element.highlight2 .art_button.text_link_btn > a:focus,
.art_element.highlight2.art_tip.text_link_btn .art_tip_btn > a:hover,
.art_element.highlight2 .art_tip.text_link_btn .art_tip_btn > a:hover,
.art_element.highlight2.art_tip.text_link_btn .art_tip_btn > a:focus,
.art_element.highlight2 .art_tip.text_link_btn .art_tip_btn > a:focus,
.art_element.highlight2.art_texti.text_link_btn .art_texti_btn > a:hover,
.art_element.highlight2 .art_texti.text_link_btn .art_texti_btn > a:hover,
.art_element.highlight2.art_texti.text_link_btn .art_texti_btn > a:focus,
.art_element.highlight2 .art_texti.text_link_btn .art_texti_btn > a:focus {
    color: var(--color-bg) !important;
}

.art_element.highlight2.art_button.text_link_btn > a > span::after,
.art_element.highlight2 .art_button.text_link_btn > a > span::after,
.art_element.highlight2.art_tip.text_link_btn .art_tip_btn > a > span::after,
.art_element.highlight2 .art_tip.text_link_btn .art_tip_btn > a > span::after,
.art_element.highlight2.art_texti.text_link_btn .art_texti_btn > a > span::after,
.art_element.highlight2 .art_texti.text_link_btn .art_texti_btn > a > span::after {
    background-color: var(--color-bg);
}

/* --- highlight3 (transparent with decorative background) --- */
.art_element.highlight3 {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.art_element.highlight3.algo-animate { background-image: url(../img/icons/limo-element.svg); }

/* --- highlight4 (primary with side image) --- */
.art_element.highlight4 {
    background-color: var(--color-primary);
    background-position: left bottom 13%;
    background-repeat: no-repeat;
    background-size: auto 67%;
}

.art_element.highlight4.algo-animate { background-image: url(../img/bg/highlight4.png); }

.art_element.highlight4 .art_headline *,
.art_element.highlight4 .art_inner {
    color: var(--color-bg) !important;
}

.art_element.highlight4 .art_inner a {
    color: var(--color-bg);
}

.art_element.highlight4 .art_inner a:hover,
.art_element.highlight4 .art_inner a:focus {
    color: var(--color-bg);
}

/* --- highlight5 (light bg with side image) --- */
.art_element.highlight5 {
    background-color: var(--color-bg);
    background-position: bottom right 10%;
    background-size: auto 76%;
    background-repeat: no-repeat;
}

.art_element.highlight5.algo-animate { background-image: url(../img/bg/highlight5.png); }

/* --- highlight6 (primary with wave top) --- */
.art_element.highlight6 {
    background-color: #606560;
    padding-top: calc(7.97vw + 77px);
}

.art_element.highlight6 .art_headline *,
.art_element.highlight6 .art_inner {
    color: var(--color-bg) !important;
}

.art_element.highlight6 .art_inner a {
    color: var(--color-primary);
}

.art_element.highlight6 .art_inner a:hover,
.art_element.highlight6 .art_inner a:focus {
    color: var(--color-primary);
}

.art_element.highlight6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 7.97vw;
    background-color: var(--color-bg);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.art_element.highlight6.algo-animate::before { background-image: url(../img/bg/highlight6.png); }


/* ==============================================
   20. CONTENT HIGHLIGHT -- Box-level highlights
   Dark green wrapper around art_element_c.
   ============================================== */
.art_element.content_highlight > .art_element_c {
    background-color: var(--color-primary);
    padding: 75px 90px 65px;
    color: var(--color-bg);
}

.art_element.content_highlight .art_headline *,
.art_element.content_highlight .art_inner {
    color: var(--color-bg) !important;
}

.art_element.content_highlight .art_inner a {
    color: var(--color-primary);
}

.art_element.content_highlight .art_inner a:hover,
.art_element.content_highlight .art_inner a:focus {
    color: var(--color-primary);
}

/* Content highlight2 -- dotted border variant */
.art_element.content_highlight2 > .art_element_c {
    border: 1px dotted var(--color-primary);
    border-radius: 10px;
    padding: 60px 70px 60px;
}


/* ==============================================
   21. SLIDER ARROW
   Slick slider navigation arrow background.
   ============================================== */
.art_element .slick-arrow:before {
    background-color: var(--color-primary);
}


/* ==============================================
   22. LOGOS SLIDER -- Brand bar
   Full-width slider with brand logos, dark bg.
   Uses slick/anything_slider JS.
   ============================================== */
.art_element.logos {
    background-color: var(--color-primary);
    border-bottom: 27px solid var(--color-accent);
}

.art_element.logos.vs_no_space {
    margin-top: -20px !important;
    padding-top: 30px;
}

/* Desktop: evenly spaced logos in a row */
.art_element.logos .anything_sl_c {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 30px 40px;
    gap: 20px;
}

.art_element.logos .anything_sl_c .art_imageline {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    width: auto !important;
    float: none !important;
}

.art_element.logos .anything_sl_c .art_imageline .art_element_c,
.art_element.logos .anything_sl_c .art_imageline .art_inner,
.art_element.logos .anything_sl_c .art_imageline .art_image {
    width: auto;
    float: none;
}

/* Reset the entire aspect-ratio image system for logos */
.art_element.logos .art_imageline .art_element_c,
.art_element.logos .art_imageline .art_inner,
.art_element.logos .art_imageline .art_image {
    width: auto !important;
    float: none !important;
}

.art_element.logos .art_imageline .art_image .img_c {
    padding-bottom: 0 !important;
    position: static !important;
    width: auto !important;
}

.art_element.logos .art_imageline .art_image .img_c picture {
    position: static !important;
    width: auto;
    height: auto;
}

.art_element.logos .art_imageline .art_image .img_c picture img {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: 80px;
    object-fit: contain;
}


/* ==============================================
   23. DECORATIVE CLASSES
   Background images and visual decoration classes
   for special section styling.
   ============================================== */

/* --- pipe: custom bullet icon --- */
.art_element.pipe ul li {
    padding-left: 26px;
}

.art_element.pipe ul li::before {
    border-radius: unset;
    width: 18px;
    height: 18px;
    background: url("../img/icons/pipe.svg") no-repeat center;
    background-size: 100% 100%;
    top: 5px;
}

/* --- notes: list background icon --- */
.art_element.notes {
    background-repeat: no-repeat;
    background-size: 25% auto;
    background-position: right -4% center;
}

/* .art_element.notes.visible { background-image: url(../img/icons/list.svg); } */

/* --- cork: decorative cork background --- */
.art_element.cork {
    background-repeat: no-repeat;
    background-size: 22.18% auto;
    background-position: right -11% center;
}

/* .art_element.cork.visible { background-image: url(../img/icons/korken.svg); } */

/* --- stain: wine stain background --- */
.art_element.stain {
    background-repeat: no-repeat;
    background-size: 21% auto;
    background-position: bottom 0 left -12%;
    padding-bottom: 160px;
}

/* .art_element.stain.visible { background-image: url(../img/icons/bg_stain.svg); } */

/* --- ice: ice cubes background --- */
.art_element.ice {
    background-repeat: no-repeat;
    background-position: top 93px right 53px;
    padding-top: 220px;
    background-size: 14% auto;
}

/* .art_element.ice.visible { background-image: url(../img/icons/ice-cubes.svg); } */

/* --- grape: vine glass background --- */
.art_element.grape {
    background-repeat: no-repeat;
    background-size: 43% auto;
    background-position: bottom left;
}

/* .art_element.grape.visible { background-image: url(../img/icons/vine-glass.svg); } */

/* --- badge: rotating badge overlay on texti images --- */
.art_element.art_texti.badge {
    overflow: visible;
    padding-top: 65px !important;
    background-color: transparent;
}

.art_element.art_texti.badge .dv_image_left,
.art_element.art_texti.badge .dv_image_right {
    overflow: visible;
}

.art_element.art_texti.badge .dv_image_left::after,
.art_element.art_texti.badge .dv_image_right::after {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(73px, -60px);
    width: 148px;
    height: 148px;
    content: '';
    background: url("../img/icons/badge.svg") no-repeat;
    background-size: 100% 100%;
    transition: transform ease 0.5s;
}

.art_element.art_texti.badge .dv_image_right::after {
    right: auto;
    left: 0;
    transform: translate(-73px, -60px);
}

.art_element.art_texti.badge .dv_image_left:hover::after,
.art_element.art_texti.badge .dv_image_left:focus::after {
    transform: translate(73px, -60px) rotate(15deg);
}

.art_element.art_texti.badge .dv_image_right:hover::after,
.art_element.art_texti.badge .dv_image_right:focus::after {
    transform: translate(-73px, -60px) rotate(-15deg);
}


/* ==============================================
   24. GALLERY — Arrow navigation & slider
   JS injects .gal_arrow buttons, CSS styles them.
   ============================================== */
.gal_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    font-size: 3rem;
    color: var(--color-primary);
    cursor: pointer;
    z-index: 5;
    transition: opacity 0.3s ease;
    line-height: 1;
    padding: 0;
}
.gal_arrow:hover {
    color: var(--color-accent);
}
.gal_prev {
    left: -55px;
}
.gal_next {
    right: -55px;
}


/* ==============================================
   25. UTILITIES
   Helper classes for spacing and layout.
   ============================================== */
.mb_40 { margin-bottom: 40px; }
.mt_40 { margin-top: 40px; }


/* ==============================================
   26. RESPONSIVE -- Content-specific breakpoints
   Only content element responsive rules here.
   Frame/layout responsive rules in cl_responsive.css.
   ============================================== */

/* --- 1550px: full-width texti image contain --- */
@media (max-width: 1550px) {
    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_right img,
    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_left img {
        object-fit: contain;
    }
}

/* --- 1025px: Tablet --- */
@media (max-width: 1025px) {
    /* Headlines -- tablet sizes */
    .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;
    }

    /* Logos -- tablet: horizontal scroll, 3 visible */
    .art_element.logos.vs_no_space {
        margin-top: -20px !important;
        padding-top: 30px;
    }

    .art_element.logos .anything_sl_c {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 25px 30px;
    }
    .art_element.logos .anything_sl_c::-webkit-scrollbar { display: none; }

    .art_element.logos .anything_sl_c .art_imageline {
        flex: 0 0 calc(100% / 3);
        scroll-snap-align: start;
        display: flex;
        justify-content: center;
    }

    /* notes -- tablet */
    .art_element.notes {
        background-size: 25% auto;
        background-position: right -4% center;
    }

    /* cork -- tablet */
    .art_element.cork {
        background-size: 22.18% auto;
        background-position: right -11% center;
    }

    /* stain -- tablet */
    .art_element.stain {
        padding-bottom: 120px;
    }

    /* ice -- tablet */
    .art_element.ice {
        background-position: top 69px right 32px;
        padding-top: 80px;
        background-size: 14% auto;
    }

    /* grape -- tablet */
    .art_element.grape {
        background-size: 43% auto;
    }

    /* badge -- tablet */
    .art_element.art_texti.badge {
        padding-top: 50px !important;
    }

    .art_element.art_texti.badge .dv_image_left::after,
    .art_element.art_texti.badge .dv_image_right::after {
        transform: translate(59px, -49px);
        width: 121px;
        height: 121px;
    }

    .art_element.art_texti.badge .dv_image_right::after {
        transform: translate(-59px, -49px);
    }

    .art_element.art_texti.badge .dv_image_left:hover::after,
    .art_element.art_texti.badge .dv_image_left:focus::after {
        transform: translate(59px, -49px) rotate(15deg);
    }

    .art_element.art_texti.badge .dv_image_right:hover::after,
    .art_element.art_texti.badge .dv_image_right:focus::after {
        transform: translate(-59px, -49px) rotate(-15deg);
    }

    /* tip -- tablet */
    .art_element.art_tip > .art_element_c {
        min-height: 795px;
    }

    .art_element.art_tip .art_tip_cont {
        padding: 60px;
    }

    /* gallery -- tablet: 2 visible */
    .art_element.art_gallery .gal_item {
        flex: 0 0 calc(50% - 8px);
    }
}

/* --- 850px: Small tablet --- */
@media (max-width: 850px) {
    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_right,
    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_left {
        width: 30%;
        margin-bottom: -50%;
    }

    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_right {
        margin-left: 70%;
    }

    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_right img,
    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_left img {
        object-fit: cover;
    }

    /* Logos -- small tablet: keep 3 visible */
    .art_element.logos .anything_sl_c .art_imageline {
        flex: 0 0 calc(100% / 3);
    }

    /* highlight background size adjustment */
    .art_element.highlight,
    .art_element.highlight2,
    .art_element.highlight3 {
        background-size: 100% auto;
    }

    /* gallery -- small tablet: still 2 visible */
    .art_element.art_gallery .gal_item {
        flex: 0 0 calc(50% - 8px);
    }

    /* grape -- hide bg on texti, use pseudo-element instead */
    .art_element.grape.art_texti,
    .art_element.grape.art_texti.visible {
        background-image: none;
    }

    .art_element.grape.art_texti .art_texti_cont {
        position: relative;
    }

    .art_element.grape.art_texti .art_texti_cont::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: -60px;
        width: 100%;
        height: 100%;
        background: url(../img/icons/vine-glass.svg) no-repeat bottom left;
        background-size: 76% auto;
    }

    /* switch_mobile_order -- reorder texti children */
    .art_element.switch_mobile_order.art_texti .art_texti_cont {
        order: 1;
    }

    .art_element.switch_mobile_order.art_texti .dv_image_right,
    .art_element.switch_mobile_order.art_texti .dv_image_left {
        order: 2;
    }
}

/* --- 650px: Mobile --- */
@media (max-width: 650px) {
    /* 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 -- mobile: full width, tighter 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-width texti -- hide images on mobile */
    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_right,
    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_left {
        display: none;
        width: 45%;
        margin-bottom: -50%;
    }

    .art_element.art_texti.inner_width_full_width.entire_image .dv_image_right {
        margin-left: 55%;
    }

    /* Logos -- mobile: 2 visible, swipeable */
    .art_element.logos .anything_sl_c {
        padding: 20px 15px;
        gap: 10px;
    }

    .art_element.logos .anything_sl_c .art_imageline {
        flex: 0 0 calc(50% - 10px);
    }

    .art_element.logos .art_imageline .art_image .img_c picture img {
        max-height: 60px;
    }

    /* notes -- mobile */
    .art_element.notes {
        background-size: 35% auto;
        background-position: right -4% center;
    }

    /* cork -- mobile */
    .art_element.cork {
        background-size: 39.44% auto;
        background-position: right -7.8125% center;
    }

    /* stain -- mobile */
    .art_element.stain {
        background-size: 26.64% auto;
        background-position: bottom left -16%;
        padding-bottom: 80px;
    }

    /* ice -- mobile */
    .art_element.ice {
        background-position: top 46px right 11px;
        background-size: 26.17% auto;
    }

    /* badge -- mobile */
    .art_element.art_texti.badge {
        padding-top: 45px !important;
    }

    .art_element.art_texti.badge .dv_image_left::after,
    .art_element.art_texti.badge .dv_image_right::after {
        transform: translate(45px, -38px);
        width: 94px;
        height: 94px;
    }

    .art_element.art_texti.badge .dv_image_right::after {
        transform: translate(-45px, -38px);
    }

    .art_element.art_texti.badge .dv_image_left:hover::after,
    .art_element.art_texti.badge .dv_image_left:focus::after {
        transform: translate(45px, -38px) rotate(15deg);
    }

    .art_element.art_texti.badge .dv_image_right:hover::after,
    .art_element.art_texti.badge .dv_image_right:focus::after {
        transform: translate(-45px, -38px) rotate(-15deg);
    }

    /* tip -- mobile */
    .art_element.art_tip .art_tip_cont {
        padding: 65px 60px 40px;
    }

    /* gallery -- mobile: 1 visible, full width */
    .art_element.art_gallery .gal_item {
        flex: 0 0 calc(100% - 8px);
    }
}

/* --- 390px: Extra small -- tip min-height override --- */
@media (max-width: 390px) {
    .art_element.art_tip > .art_element_c {
        min-height: 1065px;
    }
}