/* ===== Before / After Slider ===== */

.ba-section {
    padding: 40px 0 60px;
}

.ba-section-intro {
    max-width: 760px;
    margin: 0 auto 36px;
    text-align: center;
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
}

.ba-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 900px) {
    .ba-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .ba-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Card */
.ba-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(201,166,102,.28);
    box-shadow: 0 4px 20px rgba(31,41,55,.09);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.ba-card:hover {
    border-color: rgba(201,166,102,.62);
    box-shadow: 0 8px 28px rgba(31,41,55,.15);
    transform: translateY(-2px);
}

.ba-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(201,166,102,.18);
    text-align: center;
    line-height: 1.4;
}

/* <picture> — layout-transparent so slider JS/CSS works unchanged */
.ba-picture {
    display: contents;
}

/* Slider container — fixed aspect ratio, no layout shift */
.ba-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    cursor: col-resize;
    background: #e8e8e8;
}

/* Both images fill container */
.ba-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

/* After image is clipped by the reveal wrapper */
.ba-after-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: 50%;
}

.ba-after-wrap .ba-img {
    width: 100vw;
    max-width: none;
    /* overridden dynamically by JS to match slider.offsetWidth */
}

/* Divider line — gold accent */
.ba-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(201,166,102,.92);
    box-shadow: 0 0 0 1px rgba(255,255,255,.38);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

/* Handle circle — navy background, gold border */
.ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    background: var(--pa-primary, #374151);
    border: 2px solid var(--pa-accent, #c9a666);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ba-slider:hover .ba-handle {
    background: var(--pa-accent, #c9a666);
    border-color: var(--pa-primary, #374151);
    box-shadow: 0 6px 18px rgba(0,0,0,.32);
}

.ba-handle::before,
.ba-handle::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
}

/* left arrow */
.ba-handle::before {
    border-width: 5px 7px 5px 0;
    border-color: transparent var(--pa-accent, #c9a666) transparent transparent;
    right: 54%;
}

/* right arrow */
.ba-handle::after {
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--pa-accent, #c9a666);
    left: 54%;
}

.ba-slider:hover .ba-handle::before {
    border-color: transparent var(--pa-primary-dark, #1f2937) transparent transparent;
}

.ba-slider:hover .ba-handle::after {
    border-color: transparent transparent transparent var(--pa-primary-dark, #1f2937);
}

/* Range input — invisible but interactive */
.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: col-resize;
    z-index: 10;
    -webkit-appearance: none;
}

/* Labels bar */
.ba-labels {
    display: flex;
    justify-content: space-between;
    padding: 7px 12px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #fff;
    border-top: 1px solid rgba(201,166,102,.22);
}

.ba-label-before { color: var(--pa-primary,      #374151); }
.ba-label-after  { color: var(--pa-accent-dark, #b8935a); }

/* ===== Gallery section inside the branded (hr-*) page rhythm =====
   On /de/davor-danach + /ru/...-mainmenu the grid sits inside an
   .hr-section (home-redesign.css). Give the grid a little breathing
   room under the intro, and offset the anchor jump for the sticky
   header (mirrors #calc_form's scroll-margin-top in style.min.css). */
.vn-gallery .ba-grid { margin-top: 8px; }
#vorher-nachher-galerie { scroll-margin-top: 90px; }
@media (max-width: 768px) {
    #vorher-nachher-galerie { scroll-margin-top: 80px; }
}

/* Smooth same-page scroll to the gallery — scoped to the Vorher/Nachher
   page only (no global change to the rest of the site). Graceful: browsers
   without :has() simply jump instantly. */
html:has(.vn-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html:has(.vn-page) { scroll-behavior: auto; }
}

/* ===== Hero (intro) — light atmospheric background ==============
   Enriches the first hr-section with the "modernes Design / LED-
   Lichtlinien" ceiling photo as a full-cover background, faded via
   a CSS mask so the left zone stays clean for the dark navy text —
   same light register as Design RU. Desktop/tablet: image revealed
   on the right; mobile: soft low-opacity wash at the bottom so the
   photo still shows without ever hurting readability. */
.vn-page .hr-section--first {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, #fbf9f4 0%, #f6f2ea 55%, #efe7d8 100%);
    border-bottom: 1px solid var(--pa-border, #e5e7eb);
    padding: 48px 0 52px;
}
.vn-page .hr-section--first .uibox-container {
    position: relative;
    z-index: 2;
}
.vn-page .hr-section--first::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("/images/GallerySigPlus/Gallery-DE/modernes-design-led-lichtlinien-farben-und-formen.jpg");
    background-image: -webkit-image-set(
        url("/images/GallerySigPlus/Gallery-DE/optimized/modernes-design-led-lichtlinien-farben-und-formen-1280.webp") 1x);
    background-image: image-set(
        url("/images/GallerySigPlus/Gallery-DE/optimized/modernes-design-led-lichtlinien-farben-und-formen-1280.avif") type("image/avif"),
        url("/images/GallerySigPlus/Gallery-DE/optimized/modernes-design-led-lichtlinien-farben-und-formen-1280.webp") type("image/webp"));
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,.85) 66%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,.85) 66%, #000 100%);
}
@media (min-width: 769px) {
    .vn-page .hr-section--first .hr-intro { max-width: 600px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .vn-page .hr-section--first::after {
        opacity: .4;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.8) 60%, #000 100%);
                mask-image: linear-gradient(90deg, transparent 0%, transparent 20%, rgba(0,0,0,.8) 60%, #000 100%);
    }
}
@media (max-width: 768px) {
    .vn-page .hr-section--first { padding: 30px 0 34px; }
    .vn-page .hr-section--first::after {
        opacity: .22;
        background-position: center bottom;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(0,0,0,.8) 100%);
                mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(0,0,0,.8) 100%);
    }
}

/* ===== Hero CTA row — two buttons, single column on phones =========
   Only the thematic hero (.hr-section--first); the page's other CTA
   bands keep their own behaviour. */
@media (max-width: 560px) {
    .vn-page .hr-section--first .hr-cta-row { flex-direction: column; align-items: stretch; }
    .vn-page .hr-section--first .hr-cta-row .hr-btn { width: 100%; }
}

/* ===== Trust strip — tidy single row, marquee on overflow =========
   loads after home-redesign.css → wins on equal specificity.
   JS adds .vn-ready (force one row) and .is-marquee (scroll when the
   content is wider than the container) at ANY breakpoint. */
.vn-page .hr-trust {
    background:    var(--pa-bg-alt, #f9f8f6);
    border-top:    1px solid var(--pa-border, #e5e7eb);
    border-bottom: 1px solid var(--pa-border, #e5e7eb);
    padding:       12px 0;
    gap:           8px 24px;
    font-size:     13.5px;
    margin:        24px 0 4px;
}
.vn-page .hr-trust.vn-ready {
    flex-wrap: nowrap;
    overflow:  hidden;
}
.vn-page .hr-trust.vn-ready .trust-track {
    display:     flex;
    align-items: center;
    gap:         0 24px;
    width:       max-content;
    flex-shrink: 0;
    /* a11y: trust-track may be <ul> (when source .hr-trust was a <ul>);
       reset UA list styles so layout matches the legacy <div> variant. */
    list-style:  none;
    padding:     0;
    margin:      0;
}
.vn-page .hr-trust.is-marquee .trust-track {
    animation:   hr-trust-scroll 30s linear infinite;
    will-change: transform;
}
.vn-page .hr-trust.is-marquee:hover .trust-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .vn-page .hr-trust.is-marquee { overflow-x: auto; }
    .vn-page .hr-trust.is-marquee .trust-track { animation: none; }
}