/* =====================================================
   SILVERADO RESPONSIVE SYSTEM
   Desktop -> Notebook -> Tablet -> Mobile
===================================================== */

/*
 * Alle responsiven Overrides werden zentral in dieser Datei gepflegt.
 * style.css und vc_elements.css enthalten ausschließlich Basis- und Desktop-Regeln.
 */

/* =====================================================
   FLUID DESKTOP BASE
===================================================== */
:root {
  --content-max: 1540px;
  --page-gutter: clamp(20px, 3vw, 56px);
  --column-gutter: clamp(14px, 1.6vw, 28px);
  --section-space: clamp(72px, 8vw, 140px);
  --h1-size: clamp(4.75rem, 6.2vw, 7rem);
  --h2-size: clamp(3.5rem, 4.8vw, 5rem);
  --h3-size: clamp(1.5rem, 1.8vw, 1.9rem);
  --h4-size: clamp(1.35rem, 1.55vw, 1.75rem);
  --h6-size: clamp(1.15rem, 1.2vw, 1.4rem);
  --hero-min-height: 100svh;
  --hero-padding-top: clamp(130px, 10vw, 200px);
  --hero-padding-bottom: clamp(32px, 4vw, 64px);
  --hero-gap: clamp(32px, 5vw, 88px);
  --mobile-control-rail-width: 0px;
  --mobile-header-height: 0px;
}


h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
}

h4,
h5 {
  font-size: var(--h4-size);
}

h6 {
  font-size: var(--h6-size);
}

.copy,
.text-copy {
  font-size: var(--copy-size);
  line-height: var(--line-height-copy);
}

.section {
  padding: var(--section-space) var(--page-gutter);
}

.vc_row.section,
.vc_section.section {
  max-width: var(--content-max);
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.vc_row.section > .vc_column_container > .vc_column-inner,
.vc_section.section > .vc_row > .vc_column_container > .vc_column-inner {
  padding-left: var(--column-gutter);
  padding-right: var(--column-gutter);
}

.vc_row.section > .vc_column_container:first-child > .vc_column-inner,
.vc_section.section > .vc_row > .vc_column_container:first-child > .vc_column-inner {
  padding-left: var(--column-gutter);
}

.vc_row.section > .vc_column_container:last-child > .vc_column-inner,
.vc_section.section > .vc_row > .vc_column_container:last-child > .vc_column-inner {
  padding-right: var(--column-gutter);
}

#hero-wrapper {
  min-height: var(--hero-min-height);
  padding: var(--hero-padding-top) var(--page-gutter) var(--hero-padding-bottom);
}

#hero-wrapper .hero {
  align-items: center;
  gap: var(--hero-gap);
  margin: auto;
  padding: 0;
}

#hero-wrapper .hero-paragraph {
  font-size: var(--copy-size);
  line-height: var(--line-height-copy);
  max-width: 28ch;
}

#hero {
  height: auto;
  min-height: var(--hero-min-height);
}

#hero .silverado-hero {
  height: auto;
  min-height: 100%;
  max-height: none;
}

#hero.section {
  display: flex;
  align-items: center;
  min-height: var(--hero-min-height);
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);
}

.event-box {
  min-height: clamp(260px, 22vw, 340px);
  max-height: none;
  overflow: visible;
}

.product-4-content {
  min-height: clamp(360px, 34vw, 520px);
  max-height: none;
  overflow: visible;
}

.event-box,
.product-4-content {
  padding-left: clamp(22px, 3vw, 48px);
  padding-right: clamp(22px, 3vw, 48px);
}

/* =====================================================
   BREAKPOINT: (max-width: 1512px)
===================================================== */
@media (max-width: 1512px) {
  /* =====================================================
   RESPONSIVE BACKEND SPACING UTILITIES
   Normalize WPBakery/backend classes such as px80, py80,
   p80, pl80 and pr80 to the active responsive grid.
  ===================================================== */
  /* Generic nested elements use the responsive column gutter. */
  :is(
    [class~="px20"],
    [class~="px30"],
    [class~="px40"],
    [class~="px50"],
    [class~="px60"],
    [class~="px70"],
    [class~="px80"],
    [class~="px90"],
    [class~="px100"],
    [class~="px120"],
    [class~="px140"],
    [class~="px160"]
  ) {
    padding-left: var(--column-gutter);
    padding-right: var(--column-gutter);
  }

  :is(
    [class~="pl20"],
    [class~="pl30"],
    [class~="pl40"],
    [class~="pl50"],
    [class~="pl60"],
    [class~="pl70"],
    [class~="pl80"],
    [class~="pl90"],
    [class~="pl100"],
    [class~="pl120"],
    [class~="pl140"],
    [class~="pl160"]
  ) {
    padding-left: var(--column-gutter);
  }

  :is(
    [class~="pr20"],
    [class~="pr30"],
    [class~="pr40"],
    [class~="pr50"],
    [class~="pr60"],
    [class~="pr70"],
    [class~="pr80"],
    [class~="pr90"],
    [class~="pr100"],
    [class~="pr120"],
    [class~="pr140"],
    [class~="pr160"]
  ) {
    padding-right: var(--column-gutter);
  }

  /* Full padding utilities retain vertical rhythm but use grid-aligned sides. */
  :is(
    [class~="p20"],
    [class~="p30"],
    [class~="p40"],
    [class~="p50"],
    [class~="p60"],
    [class~="p70"],
    [class~="p80"],
    [class~="p90"],
    [class~="p100"],
    [class~="p120"],
    [class~="p140"],
    [class~="p160"]
  ) {
    padding-left: var(--column-gutter);
    padding-right: var(--column-gutter);
  }

  /* Section and row utilities align to the outer page grid instead. */
  :is(.section, .vc_row, .vc_section):is(
    [class~="px20"],
    [class~="px30"],
    [class~="px40"],
    [class~="px50"],
    [class~="px60"],
    [class~="px70"],
    [class~="px80"],
    [class~="px90"],
    [class~="px100"],
    [class~="px120"],
    [class~="px140"],
    [class~="px160"],
    [class~="p20"],
    [class~="p30"],
    [class~="p40"],
    [class~="p50"],
    [class~="p60"],
    [class~="p70"],
    [class~="p80"],
    [class~="p90"],
    [class~="p100"],
    [class~="p120"],
    [class~="p140"],
    [class~="p160"]
  ) {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  /* Vertical backend utilities follow the section rhythm on wrappers. */
  :is(.section, .vc_row, .vc_section):is(
    [class~="py20"],
    [class~="py30"],
    [class~="py40"],
    [class~="py50"],
    [class~="py60"],
    [class~="py70"],
    [class~="py80"],
    [class~="py90"],
    [class~="py100"],
    [class~="py120"],
    [class~="py140"],
    [class~="py160"],
    [class~="p20"],
    [class~="p30"],
    [class~="p40"],
    [class~="p50"],
    [class~="p60"],
    [class~="p70"],
    [class~="p80"],
    [class~="p90"],
    [class~="p100"],
    [class~="p120"],
    [class~="p140"],
    [class~="p160"]
  ) {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  /* =====================================================
   LARGE DESKTOP / NOTEBOOK
   1512px and below
  ===================================================== */
  :root {
    --page-gutter: clamp(52px, 6.2vw, 96px);
    --column-gutter: clamp(16px, 1.8vw, 28px);
    --section-space: clamp(48px, 5.5vw, 82px);
    --h1-size: clamp(3.1rem, 4.8vw, 5rem);
    --h2-size: clamp(2.6rem, 4vw, 4rem);
    --h3-size: clamp(1.4rem, 1.8vw, 1.8rem);
    --h4-size: clamp(1.2rem, 1.5vw, 1.5rem);
    --copy-size: clamp(0.95rem, 1.15vw, 1.08rem);
    --hero-min-height: 100svh;
    --hero-padding-top: clamp(110px, 10vw, 150px);
    --hero-padding-bottom: clamp(40px, 5vw, 72px);
    --hero-gap: clamp(22px, 3.5vw, 48px);
  }

  body {
    font-size: 15px;
  }

  .section,
  .vc_row.section,
  .vc_section.section {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  .vc_row.section > .vc_column_container > .vc_column-inner,
  .vc_section.section > .vc_row > .vc_column_container > .vc_column-inner {
    padding-left: var(--column-gutter);
    padding-right: var(--column-gutter);
  }

  #hero-wrapper .hero {
    max-width: 1120px;
    gap: var(--hero-gap);
  }

  #hero-wrapper .hero-paragraph {
    max-width: 25ch;
  }

  .hero-video-wrapper {
    height: clamp(280px, 37vw, 440px);
  }

  .event-box {
    min-height: clamp(210px, 22vw, 285px);
  }

  .product-4-content {
    min-height: clamp(280px, 31vw, 410px);
  }

  .event-box,
  .product-4-content {
    padding-left: clamp(18px, 2.2vw, 34px);
    padding-right: clamp(18px, 2.2vw, 34px);
  }

  .eventbox-picture {
    width: 118%;
    padding-top: 2rem;
  }

  .eventbox-picture-5 {
    width: 90%;
  }

  .void-watermark {
    width: clamp(430px, 46vw, 640px);
    left: 31%;
  }

  .glass-circle {
    width: clamp(300px, 34vw, 430px);
    height: clamp(300px, 34vw, 430px);
    left: 92%;
  }

  .glass-circle-event {
    width: clamp(220px, 26vw, 320px);
    height: clamp(220px, 26vw, 320px);
    left: 102%;
  }

  #ceo-wrapper .ceo-text {
    padding-right: 2%;
    margin-right: 0;
  }

  #ceo-wrapper .button-gallery {
    margin-top: clamp(56px, 7vw, 96px);
  }
}

/* =====================================================
   BREAKPOINT: (max-width: 1280px)
===================================================== */
@media (max-width: 1280px) {
  /* =====================================================
   NOTEBOOK / SMALL DESKTOP
   1280px and below
  ===================================================== */
  :root {
    --page-gutter: clamp(48px, 6vw, 76px);
    --column-gutter: clamp(14px, 1.8vw, 24px);
    --section-space: clamp(44px, 5vw, 72px);
    --h1-size: clamp(2.8rem, 5vw, 4.2rem);
    --h2-size: clamp(2.35rem, 4.4vw, 3.5rem);
    --h3-size: clamp(1.3rem, 1.9vw, 1.7rem);
    --hero-gap: clamp(20px, 3vw, 38px);
  }

  body {
    font-size: 14px;
  }

  #hero-wrapper .hero {
    max-width: 980px;
    gap: var(--hero-gap);
  }

  .hero-video-wrapper {
    height: clamp(250px, 34vw, 370px);
  }

  .eventbox-picture {
    width: 108%;
    padding-top: 1rem;
  }

  .eventbox-picture-5 {
    width: 84%;
  }

  .void-watermark {
    width: clamp(380px, 44vw, 540px);
  }

  .glass-circle {
    width: clamp(270px, 32vw, 380px);
    height: clamp(270px, 32vw, 380px);
  }

  .glass-circle-event {
    width: clamp(200px, 24vw, 290px);
    height: clamp(200px, 24vw, 290px);
  }

  .button-event {
    transform: translateY(3rem);
  }
}

/* =====================================================
   BREAKPOINT: (max-width: 1100px)
===================================================== */
@media (max-width: 1100px) {
  /* =====================================================
   EVENTPAKETE – RESPONSIVE BASIS
  ===================================================== */
  .silverado-eventpakete__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 40%);
        gap: 40px;
    }

    .silverado-eventpaket__meta-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   BREAKPOINT: (max-width: 1024px)
===================================================== */
@media (max-width: 1024px) {
  /* =====================================================
   TABLET LANDSCAPE
   1024px and below
  ===================================================== */
  :root {
    --page-gutter: clamp(44px, 7vw, 68px);
    --column-gutter: clamp(12px, 1.8vw, 20px);
    --section-space: clamp(40px, 5vw, 64px);
    --h1-size: clamp(2.45rem, 5.4vw, 3.6rem);
    --h2-size: clamp(2.1rem, 4.8vw, 3rem);
    --h3-size: clamp(1.2rem, 2.1vw, 1.55rem);
    --hero-gap: clamp(24px, 4vw, 40px);
  }

  #hero-wrapper .hero,
  .event-5.product-4-content {
    flex-direction: column;
    align-items: flex-start;
  }

  #hero-wrapper .hero > *,
  .event-5 .eventbox-picture-5,
  .event-5 .eventbox-content,
  .event-5 .eventbox-text {
    width: 100%;
    flex-basis: auto;
  }

  #hero-wrapper .hero {
    max-width: 860px;
    gap: var(--hero-gap);
  }

  .hero-video-wrapper {
    height: clamp(240px, 42vw, 360px);
  }

  .vc_row.section {
    row-gap: clamp(30px, 5vw, 52px);
  }

  .event-box,
  .product-4-content {
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  .eventbox-picture {
    width: 100%;
    padding-top: 0;
  }

  .eventbox-picture-5 {
    width: 80%;
  }

  .glass-circle,
  .glass-circle-event {
    opacity: 0.62;
  }

  /* The parent section/row already provides the mobile page gutter. */
  .event-package,
  .event-package:is(
    .p20,
    .p30,
    .p40,
    .p50,
    .p60,
    .p70,
    .p80,
    .p90,
    .p100,
    .p120,
    .p140,
    .p160,
    .px20,
    .px30,
    .px40,
    .px50,
    .px60,
    .px70,
    .px80,
    .px90,
    .px100,
    .px120,
    .px140,
    .px160
  ) {
    padding-left: 0;
    padding-right: 0;
  }

  .event-package > .event-package-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .event-package-content {
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vw, 48px);
  }

  .event-package-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }

  .event-package-description,
  .event-package-description p {
    max-width: 46ch;
  }

  .event-package-visual {
    min-height: clamp(300px, 48vw, 430px);
  }

  .event-package .floating-images {
    transform: scale(0.84);
    transform-origin: center;
  }

  .event-package .thought-wrap {
    transform: scale(0.86);
    transform-origin: center;
  }
}

/* =====================================================
   BREAKPOINT: (max-width: 991px)
===================================================== */
@media (max-width: 991px) {
  :root {
    --mobile-control-rail-width:
      calc(60px + env(safe-area-inset-right, 0px));
    --mobile-header-height: 64px;
  }

  /*
   * A moving backdrop-filter is repainted on every scroll step in
   * mobile Safari and causes the glass circle to flicker.
   */
  .glass-circle {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
  }

  /*
   * Fixed interaction rail for the burger and social links.
   * The line spans the viewport and continues behind the header.
   */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    right: var(--mobile-control-rail-width);
    bottom: 0;
    z-index: 998;
    width: 1px;
    background: var(--theme-accent);
    pointer-events: none;
  }

  body.mobile-menu-open::after {
    display: none;
  }

  .my-page-wrapper,
  .site-footer {
    width: calc(
      100% - var(--mobile-control-rail-width)
    );
    max-width: calc(
      100% - var(--mobile-control-rail-width)
    );
    margin-right: var(--mobile-control-rail-width);
    margin-left: 0;
    box-sizing: border-box;
  }

  .my-page-wrapper {
    z-index: auto;
  }

  .site-header {
    z-index: 1002;
  }

  .silverado-eventpakete__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /*
     * Package separators bleed across the complete physical viewport.
     * Their actual left inset is measured by eventpakete.js, so this
     * also remains exact inside nested WPBakery rows.
     */
    .silverado-eventpaket::after,
    .silverado-eventpaket:first-child::before {
        left: calc(
            0px - var(--eventpakete-mobile-left-bleed, var(--page-gutter))
        );
        width: 100vw;
    }

    .silverado-eventpakete__stage {
        --eventpakete-mobile-stage-height: clamp(
            240px,
            42svh,
            380px
        );
        --eventpakete-mobile-stage-padding-top: clamp(
            28px,
            5svh,
            52px
        );
        position: relative;
        top: auto;
        order: -1;
        z-index: 100;
        min-height: var(
            --eventpakete-mobile-stage-height
        );
        height: var(
            --eventpakete-mobile-stage-height
        );
        overflow: visible;
    }

    .silverado-eventpakete__stage-sticky {
        position: relative;
        top: auto;
        left: calc(
            0px - var(--eventpakete-mobile-left-bleed, var(--page-gutter))
        );
        width: calc(
            100%
            + var(--eventpakete-mobile-left-bleed, var(--page-gutter))
            + var(--eventpakete-mobile-right-bleed, var(--page-gutter))
        );
        height: 100%;
        min-height: 0;
        margin-left: 0;
        overflow: hidden;
        isolation: isolate;
        background: var(--theme-bg, #e9e9e9);
        border-bottom: 1px solid
            var(--theme-accent, var(--highlight-color));
        box-sizing: border-box;
        transition: background-color 0.3s ease;
    }

    .silverado-eventpakete__stage-sticky.is-fixed {
        position: fixed;
        top: var(--mobile-header-height, 64px);
        right: var(--mobile-control-rail-width);
        left: 0;
        width: auto !important;
        height: var(--eventpakete-mobile-stage-height);
        min-height: var(--eventpakete-mobile-stage-height);
        margin-left: 0;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
        box-shadow:
            0
            calc(-1 * var(--mobile-header-height, 64px))
            0
            var(--theme-bg, #e9e9e9);
        z-index: 100;
    }

    /*
     * Mobile Safari keeps the fixed stage sharper and more stable when
     * only opacity is transitioned. Scaling the complete image stack
     * forces repeated rasterisation while the page is scrolling.
     */
    .silverado-eventpakete__visual-slot,
    .silverado-eventpakete__visual-slot.is-visible {
        transform: none;
    }

    .silverado-eventpakete__visual-slot {
        transition: opacity 360ms ease-out;
        will-change: opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .silverado-eventpakete__visual-slot:not(.is-visible)
    .silverado-eventpakete__visual-image {
        animation-play-state: paused;
    }

    .silverado-eventpakete__visual-image {
        will-change: auto;
    }

    .silverado-eventpakete__stage-sticky.is-exiting
    .silverado-eventpakete__visual-image {
        animation-play-state: paused;
    }

    .silverado-eventpakete__visuals,
    .silverado-eventpakete__thought-bubble {
        top: var(--eventpakete-mobile-stage-padding-top);
    }

    .silverado-eventpakete__bubble-large {
        top: 50%;
        left: 50%;
        width: min(
            70vw,
            calc(
                var(--eventpakete-mobile-stage-height)
                - var(--eventpakete-mobile-stage-padding-top)
                - 24px
            ),
            300px
        );
        height: auto;
        aspect-ratio: 1;
        translate: -50% -50%;
    }

    .silverado-eventpakete__visual-slot[data-position='void']
    .silverado-eventpakete__visual-image {
        left: 50%;
        top: 16%;
        max-width: 24%;
    }

    .silverado-eventpakete__visual-slot[data-position='cdj']
    .silverado-eventpakete__visual-image {
        left: 24%;
        top: 22%;
        max-width: 16%;
    }

    .silverado-eventpakete__visual-slot[data-position='dj']
    .silverado-eventpakete__visual-image {
        right: 22%;
        top: 9%;
        max-width: 22%;
    }

    .silverado-eventpakete__visual-slot[data-position='silverado']
    .silverado-eventpakete__visual-image {
        right: 30%;
        top: 42%;
        max-width: 30%;
    }

    .silverado-eventpakete__list {
        position: relative;
        z-index: 1;
    }

    .silverado-eventpaket:first-child::before {
        display: none;
    }

    .silverado-eventpaket:first-child
    .silverado-eventpaket__toggle {
        padding-top: clamp(18px, 3vw, 26px);
    }

    .silverado-eventpaket__panel-inner {
        padding-right: 0;
    }

  .accordion-root {
    grid-template-columns: minmax(0, 1fr);
  }

  .accordion-left .content {
    padding-right: 0 !important;
  }

  .accordion-left .content p {
    padding-right: 0 !important;
  }

  .accordion-right {
        justify-content: flex-end;
        isolation: isolate;
        background-color: var(--theme-bg);
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .accordion-icon {
        margin-left: auto;
    }

    .accordion-icon img {
        object-position: right center;
    }

    .accordion-icon.icon-open img {
        transform-origin: right center;
    }

  /*
   * Fully remove the inactive SVG itself. Mobile Safari can otherwise
   * retain a thin painted fragment of the previously scaled open icon.
   */
  .accordion-root input:not(:checked)
    ~ .accordion-right .icon-open,
  .accordion-root input:checked
    ~ .accordion-right .icon-closed,
  .accordion-root input:not(:checked)
    ~ .accordion-right .icon-open img,
  .accordion-root input:checked
    ~ .accordion-right .icon-closed img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    transform: none !important;
    pointer-events: none;
  }

  /* Use the theme's main breakpoint for every WPBakery row. */
  .vc_row > .wpb_column,
    .vc_row > .vc_column_container {
        float: none;
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }

  /*
   * Stacked WPBakery inner columns behave like direct content:
   * no additional horizontal gutter on either side.
   */
  .vc_row.vc_inner > .vc_column_container,
  .vc_row.vc_inner > .vc_column_container > .vc_column-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
   * #banner has one additional outer WPBakery column before its
   * .vc_inner.section. Remove that column's default 15px gutter so
   * the inner section uses exactly one --page-gutter.
   */
  #banner > .vc_column_container,
  #banner > .vc_column_container > .vc_column-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #banner > .vc_column_container {
    z-index: auto;
  }

  #banner {
        left: 0 !important;
        width: calc(
            100% + var(--mobile-control-rail-width)
        ) !important;
        max-width: calc(
            100% + var(--mobile-control-rail-width)
        ) !important;
        margin-top: 96px;
        margin-right: 0 !important;
        margin-bottom: 96px;
        margin-left: 0 !important;
        box-sizing: border-box;
        isolation: auto;
        z-index: auto;
    }

    /*
     * Override WPBakery's inline full-width values so the banner box
     * reaches the physical viewport edge, including the control rail.
     */
    #banner[data-vc-full-width='true'] {
        left: 0 !important;
        width: calc(
            100% + var(--mobile-control-rail-width)
        ) !important;
        max-width: calc(
            100% + var(--mobile-control-rail-width)
        ) !important;
    }

    #banner .vc_row.vc_inner.section {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: var(--page-gutter) !important;
        padding-left: var(--page-gutter) !important;
        box-sizing: border-box;
        z-index: 1001;
    }

    #banner .banner-text,
    #banner .banner-text p {
        max-width: 100%;
        box-sizing: border-box;
    }

    #banner::before {
        left: 0;
        width: 100%;
        top: -48px;
        height: calc(100% + 96px);
        transform: none;
        will-change: auto;
    }

  .section-border-overflow::after,
  .section-border-top-overflow::before {
    left: 0;
    width: 100%;
  }

  /* Align border-mounted Glass CTAs with the mobile text edge. */
  .section-border:has(.button-gallery--glass) .button-gallery--glass,
    .section-border-overflow:has(.button-gallery--glass) .button-gallery--glass {
        left: var(--page-gutter, 20px) !important;
        right: auto !important;
        max-width: calc(
            100% -
            var(--page-gutter, 20px) -
            var(--page-gutter, 20px)
        );
        transform: translate(0, 50%) !important;
    }

  /* =====================================================
   WPBAKERY MOBILE COLUMN ORDER
   Extra class name on the row: mobile-columns-reverse
   ===================================================== */
  .vc_row.mobile-columns-reverse {
        display: flex;
        flex-direction: column;
    }

    .vc_row.mobile-columns-reverse > .wpb_column,
    .vc_row.mobile-columns-reverse > .vc_column_container {
        width: 100%;
    }

    .vc_row.mobile-columns-reverse > .wpb_column:first-child,
    .vc_row.mobile-columns-reverse > .vc_column_container:first-child {
        order: 2;
    }

    .vc_row.mobile-columns-reverse > .wpb_column:last-child,
    .vc_row.mobile-columns-reverse > .vc_column_container:last-child {
        order: 1;
    }

  /* =====================================================
   MAIN MOBILE BREAKPOINT – SECTION RHYTHM
  ===================================================== */
  body .section,
  body .vc_row.section,
  body .vc_section.section {
    padding-top: clamp(32px, 5vw, 48px) !important;
    padding-bottom: clamp(32px, 5vw, 48px) !important;
  }
}

/* =====================================================
   BREAKPOINT: (min-width: 540px) and (max-width: 991px)
===================================================== */
@media (min-width: 540px) and (max-width: 991px) {
  /* Keep the stacked hero animation proportional on tablet-sized screens. */
  #hero .silverado-hero-animation,
    #hero-wrapper .silverado-hero-animation {
        width: 100%;
        max-width: 520px;
        height: 320px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* =====================================================
   BREAKPOINT: (max-width: 900px)
===================================================== */
@media (max-width: 900px) {
  .custom-gallery {
        max-width: 1100px;
    }

    .gallery-item.active {
        transform: translateY(0) scale(1.08);
    }

  /* =====================================================
   TABLET PORTRAIT
   900px and below
  ===================================================== */
  :root {
    --page-gutter: clamp(42px, 7.5vw, 62px);
    --column-gutter: 14px;
    --section-space: clamp(36px, 5vw, 54px);
    --h1-size: clamp(2.25rem, 5.8vw, 3.15rem);
    --h2-size: clamp(1.95rem, 5vw, 2.65rem);
    --copy-size: clamp(0.92rem, 1.9vw, 1rem);
    --hero-gap: 24px;
  }

  #hero-wrapper .hero {
    gap: var(--hero-gap);
  }

  .hero-video-wrapper {
    height: clamp(220px, 44vw, 320px);
  }

  .eventbox-picture-5 {
    width: 74%;
  }

  .button-event {
    transform: translateY(1.5rem);
  }

  .event-package-visual {
    min-height: clamp(280px, 54vw, 380px);
  }

  .event-package .floating-images {
    transform: scale(0.78);
  }

  .event-package .thought-wrap {
    transform: scale(0.8);
  }
}

/* =====================================================
   BREAKPOINT: (max-width: 768px)
===================================================== */
@media (max-width: 768px) {
  .event-package-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .event-package-visual {
        min-height: 180px;
    }

    .event-package-action {
        justify-content: flex-start;
        align-self: start;
        padding-bottom: 0;
    }

    .accordion-left .content {
        padding-right: 0;
    }

    /* The parent WPBakery row/column owns the mobile page gutter. */
    .event-package,
    .event-package[class*=" p"],
    .event-package[class^="p"] {
        padding-left: 0;
        padding-right: 0;
    }


    .event-package > .event-package-content {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }

    .event-package-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .event-package-text,
    .event-package-visual,
    .event-package-action {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .event-package-text {
        padding-left: 0;
        padding-right: 0;
    }

    .event-package-description,
    .event-package-description p {
        width: 100%;
        max-width: none;
    }

    .event-package-action,
    .event-package-action-inline {
        margin-left: 0;
        margin-right: 0;
    }

  .custom-gallery {
        max-width: 100%;
    }

    .gallery-item.active {
        transform: translateY(0) scale(1.03);
    }
}

/* =====================================================
   BREAKPOINT: (max-width: 767px)
===================================================== */
@media (max-width: 767px) {
  .referenzenbanner {
        --referenzen-card-width: 100%;
        overflow: hidden;
    }

    .referenzenbanner-inner,
    .rinker-referenzen-swiper,
    .rinker-referenzen-swiper .swiper-wrapper,
    .rinker-referenzen-swiper .swiper-slide {
        max-width: 100%;
        min-width: 0;
    }

    .referenz-card {
        min-height: 300px;
        padding: 30px 20px 28px;
        border: 1px solid
            var(--theme-accent, var(--highlight-color));
        border-radius: 14px;
    }

    .referenz-card::before {
        right: 0;
        left: 0;
    }

    .referenz-card-image {
        margin-bottom: 34px;
        opacity: 0.5;
        transition: opacity 0.35s ease-in-out;
    }

    .rinker-referenzen-swiper
    .swiper-slide.swiper-slide-active
    .referenz-card-image {
        opacity: 1;
    }

    .referenz-card-content {
        width: 100%;
        max-width: none;
    }

    .referenz-card-title {
        font-size: clamp(1.1rem, 5vw, 1.35rem);
    }

    .referenz-card-text {
        font-size: clamp(0.72rem, 3.1vw, 0.82rem);
    }

    .referenz-card-more {
        font-size: clamp(0.72rem, 3.1vw, 0.82rem);
    }

    .rinker-referenzen-swiper-controls {
        margin-top: clamp(52px, 12vw, 72px);
    }

    .referenzenbanner-inner .swiper-button-prev,
    .referenzenbanner-inner .swiper-button-next {
        width: 26px;
        height: 40px;
    }

  .fluentform_wrapper_1 .ff-el-group {
        margin-bottom: 26px;
    }

    .fluentform_wrapper_1 .ff-t-container {
        display: block;
        margin-bottom: 26px;
    }

    .fluentform_wrapper_1 .ff-t-container .ff-el-group {
        margin-bottom: 26px;
    }

    .fluentform_wrapper_1 .ff-t-container .ff-t-cell:last-child .ff-el-group {
        margin-bottom: 0;
    }

    .fluentform_wrapper_1 .ff-el-form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
        font-size: 1rem;
    }

    .fluentform_wrapper_1 .ff_submit_btn_wrapper {
        margin-top: 32px;
    }

  /* On mobile, nested backend padding must not create a second page gutter. */
  :is(
    [class~="px20"],
    [class~="px30"],
    [class~="px40"],
    [class~="px50"],
    [class~="px60"],
    [class~="px70"],
    [class~="px80"],
    [class~="px90"],
    [class~="px100"],
    [class~="px120"],
    [class~="px140"],
    [class~="px160"],
    [class~="pl20"],
    [class~="pl30"],
    [class~="pl40"],
    [class~="pl50"],
    [class~="pl60"],
    [class~="pl70"],
    [class~="pl80"],
    [class~="pl90"],
    [class~="pl100"],
    [class~="pl120"],
    [class~="pl140"],
    [class~="pl160"],
    [class~="pr20"],
    [class~="pr30"],
    [class~="pr40"],
    [class~="pr50"],
    [class~="pr60"],
    [class~="pr70"],
    [class~="pr80"],
    [class~="pr90"],
    [class~="pr100"],
    [class~="pr120"],
    [class~="pr140"],
    [class~="pr160"],
    [class~="p20"],
    [class~="p30"],
    [class~="p40"],
    [class~="p50"],
    [class~="p60"],
    [class~="p70"],
    [class~="p80"],
    [class~="p90"],
    [class~="p100"],
    [class~="p120"],
    [class~="p140"],
    [class~="p160"]
  ) {
    padding-left: 0;
    padding-right: 0;
  }

  :is(.section, .vc_row, .vc_section):is(
    [class~="px20"],
    [class~="px30"],
    [class~="px40"],
    [class~="px50"],
    [class~="px60"],
    [class~="px70"],
    [class~="px80"],
    [class~="px90"],
    [class~="px100"],
    [class~="px120"],
    [class~="px140"],
    [class~="px160"],
    [class~="p20"],
    [class~="p30"],
    [class~="p40"],
    [class~="p50"],
    [class~="p60"],
    [class~="p70"],
    [class~="p80"],
    [class~="p90"],
    [class~="p100"],
    [class~="p120"],
    [class~="p140"],
    [class~="p160"]
  ) {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  /* =====================================================
   MOBILE
   767px and below
  ===================================================== */
  :root {
    --page-gutter: clamp(22px, 6.5vw, 34px);
    --column-gutter: 0px;
    --section-space: clamp(32px, 9vw, 56px);
    --h1-size: clamp(2.1rem, 10vw, 3rem);
    --h2-size: clamp(1.8rem, 8vw, 2.5rem);
    --h3-size: clamp(1.15rem, 4.8vw, 1.4rem);
    --h4-size: clamp(1.1rem, 4.8vw, 1.4rem);
    --copy-size: clamp(0.94rem, 4vw, 1.02rem);
    --hero-min-height: auto;
    --hero-padding-top: clamp(96px, 22vw, 130px);
    --hero-padding-bottom: clamp(30px, 8vw, 48px);
    --hero-gap: 22px;
  }

  h1,
  h1.silverado-heading-title {
    font-size: clamp(1.75rem, 7vw, 2.2rem) !important;
  }

  h2,
  h2.silverado-heading-title {
    font-size: clamp(1.45rem, 5.5vw, 1.8rem) !important;
  }

  body {
    font-size: 14px;
  }

  .section,
  .vc_row.section,
  .vc_section.section {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  body .section,
  body .vc_row.section,
  body .vc_section.section {
    padding-top: clamp(28px, 8vw, 40px) !important;
    padding-bottom: clamp(28px, 8vw, 40px) !important;
  }

  .vc_row.section > .vc_column_container > .vc_column-inner,
  .vc_section.section > .vc_row > .vc_column_container > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
  }

  #hero-wrapper .hero {
    gap: var(--hero-gap);
  }

  #hero-wrapper .hero-paragraph {
    max-width: 100%;
  }

  .hero-video-wrapper {
    height: clamp(210px, 62vw, 320px);
  }

  .event-box,
  .product-4-content {
    padding-left: 0;
    padding-right: 0;
  }

  .eventbox-picture,
  .eventbox-picture-5 {
    width: 100%;
    transform: none;
  }

  .void-watermark {
    width: 88vw;
    left: 50%;
    transform: translate3d(
        -40%,
        calc(-50% + var(--void-parallax-y, 0px)),
        0
    );
    -webkit-transform: translate3d(
        -40%,
        calc(-50% + var(--void-parallax-y, 0px)),
        0
    );
  }

  .glass-circle {
    width: 72vw;
    height: 72vw;
    left: 78%;
    transform: translate3d(
        -50%,
        calc(-50% + var(--glass-parallax-y, 0px)),
        0
    );
    -webkit-transform: translate3d(
        -50%,
        calc(-50% + var(--glass-parallax-y, 0px)),
        0
    );
  }

  .glass-circle-event {
    width: 54vw;
    height: 54vw;
    left: 86%;
  }

  /* The outer section/row owns the mobile page gutter. */
  .event-package,
  .event-package[class*="event-package-"] {
    padding-left: 0;
    padding-right: 0;
  }

  .event-package > .event-package-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .event-package-content {
    gap: clamp(22px, 7vw, 36px);
  }

  .event-package-label {
    font-size: 0.76rem;
  }

  .event-package-title {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
    line-height: 1;
  }

  .event-package-description,
  .event-package-description p {
    max-width: 100%;
  }

  .event-package-visual {
    min-height: clamp(250px, 72vw, 350px);
  }

  .event-package .floating-images {
    transform: scale(0.72);
  }

  .event-package .thought-wrap {
    transform: scale(0.74);
  }

  .event-package-action,
  .event-package-action-inline {
    justify-content: flex-start;
    text-align: left;
    margin-top: 16px;
  }

  .button-event {
    transform: none;
  }

  /* Compact VC buttons for narrow screens. */
  .button-gallery,
  .button-gallery--glass,
  .fluentform_wrapper_1 .ff-btn-submit {
    max-width: 100%;
    gap: 6px !important;
    font-size: 15px !important;
  }

  .button-gallery {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .button-gallery--glass,
  .fluentform_wrapper_1 .ff-btn-submit {
    display: flex !important;
    width: min(170px, 100%) !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  .button-gallery::after,
  .button-gallery--glass::after,
  .fluentform_wrapper_1 .ff-btn-submit::after {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .fluentform_wrapper_1 .ff_submit_btn_wrapper {
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }
}



/* =====================================================
   BREAKPOINT: (max-width: 600px)
===================================================== */
@media (max-width: 600px) {
  .silverado-eventpaket__toggle {
        grid-template-columns:
            minmax(0, 1fr)
            28px;
        gap: 16px;
        padding: 28px 0;
    }

    .silverado-eventpaket:first-child
    .silverado-eventpaket__toggle {
        padding-top: 18px;
    }

    .silverado-eventpaket__meta-grid {
        gap: 3px 0;
    }

    .silverado-eventpakete__stage,
    .silverado-eventpakete__stage-sticky {
        min-height: var(
            --eventpakete-mobile-stage-height
        );
        height: var(
            --eventpakete-mobile-stage-height
        );
    }

    .silverado-eventpakete__visual-slot[data-position='void']
    .silverado-eventpakete__visual-image {
        left: 48%;
        top: 18%;
        max-width: 42%;
    }

    .silverado-eventpakete__visual-slot[data-position='cdj']
    .silverado-eventpakete__visual-image {
        left: 5%;
        top: 22%;
        max-width: 28%;
    }

    .silverado-eventpakete__visual-slot[data-position='dj']
    .silverado-eventpakete__visual-image {
        right: 5%;
        top: 8%;
        max-width: 42%;
    }

    .silverado-eventpakete__visual-slot[data-position='silverado']
    .silverado-eventpakete__visual-image {
        right: 12%;
        top: 48%;
        max-width: 52%;
    }
}

/* =====================================================
   BREAKPOINT: (max-width: 500px)
===================================================== */
@media (max-width: 500px) {
  .event-package-visual {
        min-height: 170px;
    }

    .event-package .floating-images img,
    .event-package .floating-images .float {
        max-width: 36%;
        max-height: 145px;
    }

    .event-package .floating-images .f1 {
        max-width: 28%;
        max-height: 110px;
    }

    .event-package .floating-images .f2 {
        max-width: 39%;
        max-height: 160px;
    }

    .event-package .floating-images .f3 {
        max-width: 48%;
        max-height: 185px;
    }
}

/* =====================================================
   BREAKPOINT: (max-width: 480px)
===================================================== */
@media (max-width: 480px) {
  /* =====================================================
   SMALL MOBILE
   480px and below
  ===================================================== */
  :root {
    --page-gutter: 20px;
    --section-space: 32px;
    --h1-size: clamp(1.95rem, 10.5vw, 2.55rem);
    --h2-size: clamp(1.7rem, 8.5vw, 2.2rem);
    --h3-size: clamp(1.1rem, 5vw, 1.3rem);
    --copy-size: 0.95rem;
    --hero-padding-top: 88px;
    --hero-padding-bottom: 28px;
  }

  .hero-video-wrapper {
    height: clamp(190px, 64vw, 270px);
  }

  .event-package-visual {
    min-height: clamp(220px, 74vw, 300px);
  }

  .event-package .floating-images {
    transform: scale(0.66);
  }

  .event-package .thought-wrap {
    transform: scale(0.68);
  }
}


/* =====================================================
   BREAKPOINT: (max-width: 360px)
===================================================== */
@media (max-width: 360px) {
  /* =====================================================
   VERY SMALL MOBILE
   360px and below
  ===================================================== */
  :root {
    --page-gutter: 16px;
    --h1-size: 1.85rem;
    --h2-size: 1.62rem;
    --h3-size: 1.08rem;
    --copy-size: 0.92rem;
  }

  .hero-video-wrapper {
    height: 200px;
  }

  .event-package-visual {
    min-height: 210px;
  }

  .event-package .floating-images {
    transform: scale(0.6);
  }

  .event-package .thought-wrap {
    transform: scale(0.62);
  }
}