/*
Theme Name: Schimmer theme
*/

/* =========================================================
   Global Variables (Farben, Abstände)
========================================================= */
:root {
    --blue-100: #E7F0FF;
    --blue-200: #BBD1FF;
    --blue-300: #7FAEFF;
    --blue-400: #4D8DFF;
    --blue-500: #1C6FFF;
    --blue-600: #0B3D91;

    --gray-50: #F6F8FB;
    --gray-100: #EEF2F7;
    --gray-200: #D8DFEA;
    --gray-300: #B0B9C8;

    --text-dark: #0F1E3D;
    --text-light: #ffffff;

    --transition: 0.25s ease;
}


/* =========================================================
   1) HEADER SLIDER (vc_header_slider)
========================================================= */

/* =========================================================
   HEADER SLIDER (CLEAN VERSION)
========================================================= */
   
   .vc_header_slider {
       position: relative;
       background: var(--color-primary);
       color: var(--text-light);
       overflow: hidden;
   
       padding: 160px 0;
       border-radius: var(--radius);
       margin: 100px auto;
       max-width: 1320px;
   
       min-height: 420px;
   }
   
   /* =========================
      WRAPPER
   ========================= */
   
   .vc_header_slider .slider-wrapper {
       position: relative;
       z-index: 2;
   }
   
   /* =========================
      SLIDES (CORE FIX)
      → kein display switching mehr!
      → nur opacity system
   ========================= */
   
   .vc_header_slider .slide {
       position: absolute;
       inset: 0;
   
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 60px;
   
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
   
       transition: opacity 0.6s ease, transform 0.6s ease;
   }
   
   /* ACTIVE STATE */
   .vc_header_slider .slide.active {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
       position: relative;
   }
   
   /* =========================
      TEXT
   ========================= */
   
   .vc_header_slider .slide-content {
       max-width: 520px;
       padding-left: clamp(42px, 6vw, 10%);
       z-index: 2;
   }
   
   .vc_header_slider .topline {
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: 13px;
       opacity: 0.7;
       margin-bottom: 16px;
       font-weight: 400;
   }
   
   .vc_header_slider h1 {
       line-height: 1.2;
       margin-bottom: 20px;
       color: var(--text-light);
   }
   
   .vc_header_slider p {
       font-size: 18px;
       max-width: 520px;
   }
   
   /* =========================
      IMAGE
   ========================= */
   
   .vc_header_slider .slide-media {
       position: relative;
       width: clamp(280px, 35vw, 420px);
       height: clamp(280px, 35vw, 420px);
       margin-right: clamp(24px, 4vw, 60px);
   }
   
   .vc_header_slider .slide-media img {
       width: 100%;
       transform: translateX(-32px);
       height: 100%;
       object-fit: cover;
       border-radius: var(--radius);
       z-index: 10;
       box-shadow: 0 20px 40px rgba(0,0,0,0.15);
   }
   
   /* =========================
      BUTTONS
   ========================= */
   
   .vc_header_slider .btn-group {
       margin-top: 30px;
       display: flex;
       gap: 16px;
   }
   
   .vc_btn_primary {
       background: var(--color-secondary);
       color: var(--text-light);
       padding: 14px 28px;
       border-radius: var(--radius);
       text-decoration: none;
       font-weight: 400;
       transition: var(--transition);
   }
   
   @media (hover: hover) and (pointer: fine) {
.vc_btn_primary:hover {
       background: var(--text-light);
       color: var(--color-secondary);
   }
}
   
   .vc_btn_secondary {
       background: transparent;
       border: 2px solid var(--text-light);
       color: var(--text-light);
       padding: 12px 26px;
       border-radius: var(--radius);
       text-decoration: none;
       font-weight: 400;
       transition: var(--transition);
   }
   
   @media (hover: hover) and (pointer: fine) {
.vc_btn_secondary:hover {
       background: var(--text-light);
       color: var(--color-secondary);
   }
}
   
   
.slider-nav {
       position: absolute;
       top: 50%;
       transform: translateY(-50%) translateY(1px);
       transition: transform 0.3s ease-in-out;
   
       width: 44px;
       height: 44px;
   
       display: flex;
       align-items: center;
       justify-content: center;
   
       border-radius: 50%;
       background: transparent;
   
       font-size: 28px;
       border: none;
       padding: 0;
       color: #ffffff;
   
       line-height: 1;
       font-family: system-ui, sans-serif;
   
       z-index: 20;
       cursor: pointer;
   }
   @media (hover: hover) and (pointer: fine) {
.slider-nav:hover {
    transform: translateY(-50%) translateY(1px) scale(1.4);
}
}
   
   
   /* LEFT */
   .slider-nav.prev {
       left: 20px;
   }
   
   /* RIGHT */
   .slider-nav.next {
       right: 20px;
   }
   
   /* =========================
      DOTS
   ========================= */
.slider-dots {
       position: absolute;
       bottom: 24px;
       left: 50%;
       transform: translateX(-50%);
   
       display: flex;
       gap: 8px;
   
       width: 250px;        /* 🔥 FIX: max 100px */
       max-width: 250px;
   
       justify-content: center;
       align-items: center;
   
       z-index: 10;
   }
   
   /* BAR */
   .slider-dots .dot {
       flex: 1;
       height: 3px;
       background: rgba(255,255,255,0.25);
       overflow: hidden;
       position: relative;
       border-radius: var(--radius);
   }
   
   /* ACTIVE PROGRESS ANIMATION */
   .slider-dots .dot.active::after {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: 100%;
       background: #fff;
       transform: scaleX(0);
       transform-origin: left;
       animation: progressBar 10s linear forwards;
   }
   
   @keyframes progressBar {
       from { transform: scaleX(0); }
       to { transform: scaleX(1); }
   }
   
   /* =========================
      BACKGROUND SHAPES
   ========================= */
   
   .vc_header_slider::before,
   .vc_header_slider::after {
       content: "";
       position: absolute;
       right: -100px;
       top: 0;
       width: 400px;
       height: 100%;
       background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
       transform: skewX(-25deg);
       opacity: 0.6;
       z-index: 0;
   }
   
   .vc_header_slider::after {
       right: 80px;
       width: 300px;
       background: var(--blue-300);
       opacity: 0.4;
   }
   
   


/* =========================================================
   2) CTA BUTTON (vc_button)
========================================================= */

.vc_button {
    display: inline-block;
    font-weight: 400;
    padding: 14px 28px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: var(--transition);
}

/* Styles */
.vc_button--primary {
    background: var(--color-primary);
    color: var(--text-light);
}
@media (hover: hover) and (pointer: fine) {
.vc_button--primary:hover {
    background: var(--color-secondary);
}
}

.vc_button--outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);

}
@media (hover: hover) and (pointer: fine) {
.vc_button--outline:hover {
    background: var(--color-primary);
    color: var(--text-light);
}
}


/* =========================================================
   PICTURE ICONBOX (OPTIMIERT)
========================================================= */
.vc_picture_iconbox {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);

    width: 100%;
    max-width: none;

    height: 500px;

    z-index: 10;
    cursor: pointer;
}

/* IMAGE */
.vc_picture_iconbox .iconbox-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.6s ease;
}

/* ICON */
.vc_picture_iconbox .iconbox-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 4;
}

.vc_picture_iconbox .iconbox-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
.vc_picture_iconbox:hover .iconbox-icon img {
    transform: scale(1.08);
}
}

/* OVERLAY (leicht – oben & unten wie vorher) */
.vc_picture_iconbox::before,
.vc_picture_iconbox::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: all 0.5s ease;
}

.vc_picture_iconbox::after {
    background: linear-gradient(
        to top,
        rgba(var(--color-primary-rgb), 1) 0%,
        rgba(var(--color-primary-rgb), 0.4) 40%,
        rgba(var(--color-primary-rgb), 0.1) 70%,
        transparent 100%
    );
}

.vc_picture_iconbox::before {
    background: linear-gradient(
        to bottom,
        rgba(var(--color-primary-rgb), 0.6) 0%,
        rgba(var(--color-primary-rgb), 0.1) 40%,
        transparent 90%
    );
}
/* 🔥 NEU: FULL OVERLAY (Primary, fährt hoch) */
.vc_picture_iconbox .iconbox-bg {
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    z-index: 2;

    transform: translateY(100%);
    transition: transform 0.5s ease;
}

/* CONTENT WRAPPER */
.vc_picture_iconbox .iconbox-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    align-items: flex-end;

    padding: 24px;
}

/* CONTENT */
.vc_picture_iconbox .iconbox-content {
    position: relative; /* wichtig für absolute Positionierung */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* HEADLINE FIXED POSITION */
.vc_picture_iconbox .iconbox-content h3 {
    position: absolute;
    left: 0;
    bottom: 24px; /* fixe Position */

    margin: 0;
    color: #fff;

    transition: transform 0.5s ease;
}

.vc_picture_iconbox .iconbox-content p {
    position: absolute;
    left: 0;
    right: 0;

    top: 100%; /* außerhalb starten */
    
    color: #fff;
    font-size: 15px;

    opacity: 0;
    transition: all 0.5s ease;
}

/* =========================
   HOVER STATE
========================= */

/* Bild leicht skalieren */
@media (hover: hover) and (pointer: fine) {
.vc_picture_iconbox:hover .iconbox-image {
    transform: scale(1.05);
}
}

/* Overlay fährt hoch */
@media (hover: hover) and (pointer: fine) {
.vc_picture_iconbox:hover .iconbox-bg {
    transform: translateY(0);
}
}

/* Headline nach oben */
@media (hover: hover) and (pointer: fine) {
.vc_picture_iconbox:hover .iconbox-content h3 {
    transform: translateY(-70px);
}
}

/* Paragraph kommt rein */
@media (hover: hover) and (pointer: fine) {
.vc_picture_iconbox:hover .iconbox-content p {
    top: calc(100% - 90px); /* feinjustieren */
    opacity: 1;
}
}

/* leichte Overlays ausblenden */
@media (hover: hover) and (pointer: fine) {
.vc_picture_iconbox:hover::before,
.vc_picture_iconbox:hover::after {
    opacity: 0;
}
}


/* =========================================================
   4) SERVICE ICONBOX (vc_service_iconbox)
      Hover: Hellgrau -> Blau
========================================================= */
.vc_service_iconbox {
    position: relative;
    background: var(--color-bright);
    padding: 50px 24px 24px;
    border-radius: var(--radius);
    transition: var(--transition);
    min-height: 300px;
    margin: 50px 0 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Content unten */
.vc_service_iconbox .iconbox-content {
    opacity: 1;
    margin-top: auto;
    position: relative;
    z-index: 2; /* 🔥 verhindert Überlagerung */
}


/* Hover */
@media (hover: hover) and (pointer: fine) {
.vc_service_iconbox:hover {
    background: var(--color-primary);
    color: var(--text-light);
    transform: translateY(-6px);
}
}

/* Link */
.vc_service_iconbox .readmore {
    font-weight: 400;
    text-decoration: none;
    transition: var(--transition);
    color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
.vc_service_iconbox:hover .readmore {
    color: var(--text-light);
}
}

/* ICON */
.vc_service_iconbox .iconbox-icon {
    z-index: 1;
    pointer-events: none;
}

/* 🔥 WICHTIG: überschreibt SVG eigene Farben */
.vc_service_iconbox .iconbox-icon svg,
.vc_service_iconbox .iconbox-icon svg * {
    fill: var(--color-primary);
    transition: var(--transition);
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
.vc_service_iconbox:hover .iconbox-icon svg,
.vc_service_iconbox:hover .iconbox-icon svg * {
    fill: var(--text-light);
}
}


/* =========================
   ICON
========================= */

/* großes SVG */
.vc_service_iconbox .iconbox-icon svg {
    width: 80px;
    height: 80px;

    fill: var(--color-primary);
    transition: var(--transition);
}

/* Hover: Icon weiß */
@media (hover: hover) and (pointer: fine) {
.vc_service_iconbox:hover .iconbox-icon svg {
    fill: var(--text-light);
}
}

/* leichter Hover-Effekt */
@media (hover: hover) and (pointer: fine) {
.vc_service_iconbox:hover .iconbox-icon svg {
    transform: scale(1.08);
}
}

/* 🔥 Headline default */
.vc_service_iconbox h4 {
    color: var(--text-dark);
    transition: var(--transition);
}

/* 🔥 Headline Hover */
@media (hover: hover) and (pointer: fine) {
.vc_service_iconbox:hover h4 {
    color: var(--text-light);
}
}

/* =========================
   ICON
========================= */

.vc_service_iconbox .iconbox-icon {
    position: absolute;
    top: 24px;
    right: 24px;
}

.vc_service_iconbox .iconbox-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

/* Optional: Icon Hover Effekt */
@media (hover: hover) and (pointer: fine) {
.vc_service_iconbox:hover .iconbox-icon img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}
}

/* =========================================================
   5) SECTION TITLE (vc_section_title)
      Topline – Headline – Rechts Beschreibung
========================================================= */

.vc_section_title {
    max-width: 1320px;
    margin: 0 auto 32px auto;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px; /* mehr Luft */
}
.vc_section_title .topline {
    color: var(--blue-500);
}

.vc_section_title .left {
    max-width: 30%;
}


.vc_section_title .desc {
    max-width: 50%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark);
    transform: translateY(-30px);

    padding-left: 20px;
    border-left: 2px solid var(--color-secondary);
}

/* =========================
   BANNER BASE
========================= */

.vc_banner {
    position: relative;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 140px 0;
    overflow: hidden;
}

.vc_banner.stretch {
    width: 100%;
}

/* =========================
   INNER LAYOUT
========================= */

.vc_banner .banner-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;

    position: relative;
    z-index: 2;
}

.banner-content {
    max-width: 600px;
}

/* =========================
   TYPO
========================= */

.vc_banner .topline {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 16px;
}

.vc_banner h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 20px;
    color: var(--color-white);
}

.vc_banner p {
    font-size: 18px;
    margin-bottom: 30px;
    color: var(--color-white);
}

/* =========================
   IMAGE
========================= */

.banner-image {
    position: relative;
    flex-shrink: 0;
}

.banner-image img {
    width: 420px;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
    position: relative;
    z-index: 2;
}

/* =========================
   SHAPES (WASSERZEICHEN)
========================= */

.banner-shapes .shape {
    position: absolute;
    height: 100%;
    transform: skewX(-25deg);
    z-index: 1;
    border-radius: var(--radius);
}
.banner-shapes .shape-1 {
    right: 8%;
    top: 100px;
    width: 200px;
    height: 600px;
    background: var(--color-secondary);
    opacity: 0.5;
}

.banner-shapes .shape-2 {
    right: 2%;
    top: 400px;
    width: 200px;
    height: 600px;
    background: var(--color-accent);
    opacity: 0.4;
}

.banner-shapes .shape-3 {
    right: 25%;
    top: 500px;
    width: 200px;
    height: 600px;
    background: var(--color-bright);
    opacity: 0.6;
}
.banner-shapes .shape {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* =========================
   BUTTON FIX (optional)
========================= */

.vc_banner .vc_btn_primary {
    background: var(--color-secondary);
}

@media (hover: hover) and (pointer: fine) {
.vc_banner .vc_btn_primary:hover {
    background: var(--color-white);
    color: var(--color-secondary);
}
}
.schimmer-sc .schimmer-sc__rotation { display: none; }
.site-main .schimmer-sc.is-catalog-sidebar :is(
  .schimmer-sc__series-title,
  .schimmer-sc__content,
  .schimmer-sc__controls
) {
  width: 100%;
  padding-right: 12px;
}

.site-main .schimmer-sc.is-catalog-sidebar .schimmer-sc__listen {
  margin-right: 12px;
}

.site-main .vc_row:has([data-release-catalog]) .schimmer-sc__series:last-child {
  padding-bottom: var(--sc-gap);
  border-bottom: 1px solid var(--sc-border);
}

body.has-release-backdrop .site-main .vc_row:has([data-release-catalog]) .schimmer-sc__series:last-child {
  border-bottom-color: var(--color-primary);
}

.site-main .schimmer-sc.is-catalog-sidebar .schimmer-sc__navigation {
  min-width: 0;
  margin-left: auto;
}

.site-main .schimmer-sc.is-catalog-sidebar .schimmer-sc__position {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Frontpage sections share the catalogue's cards, controls and glass surfaces. */
.schimmer-frontpage-section,
.schimmer-content-overview,
.site-main .schimmer-contact {
  min-width: 0;
  margin-block: clamp(28px, 4vw, 56px);
  color: var(--color-primary);
}
.schimmer-frontpage-heading,
.schimmer-content-overview__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.schimmer-frontpage-heading h2,
.schimmer-content-overview__heading h2,
.site-main .schimmer-contact .schimmer-contact-title {
  max-width: none;
  font-size: var(--type-commerce-page-title);
  line-height: 1.3;
}
.schimmer-frontpage-heading p,
.schimmer-content-overview__heading .section-lead {
  margin: 8px 0 0;
  font-size: var(--type-meta);
  line-height: 1.5;
}
.schimmer-frontpage-actions,
.schimmer-frontpage-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}
.schimmer-frontpage-navigation[hidden] { display: none; }
.schimmer-release-carousel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.schimmer-release-carousel-footer .schimmer-frontpage-navigation { margin-left: auto; }
.schimmer-release-carousel-footer .schimmer-release-carousel-count {
  margin: 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--color-muted);
}
.schimmer-frontpage-link,
.schimmer-content-overview__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  color: var(--color-primary);
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--type-meta);
  line-height: 1.4;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition), background-color var(--transition);
}
.schimmer-frontpage-navigation button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-primary);
  background: var(--player-panel-background);
  cursor: pointer;
}
.schimmer-frontpage-navigation .release-icon { width: 16px; height: 16px; }
.schimmer-frontpage-navigation button:disabled { opacity: .4; cursor: default; }
:is(.schimmer-frontpage-link, .schimmer-content-overview__link, .schimmer-frontpage-navigation button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.schimmer-release-carousel {
  --release-carousel-gap: 18px;
  --release-carousel-width: calc((100% - 54px) / 4);
  overflow: clip;
  padding-bottom: 36px;
  /* Keep the padded card area in flow so footer arrows clear the purchase controls. */
  margin-bottom: 0;
}
.schimmer-release-carousel .swiper-slide {
  width: var(--release-carousel-width);
  height: auto;
  scroll-snap-align: start;
}
.schimmer-release-carousel.swiper-initialized { overflow: hidden; }
:is(.is-carousel-fallback, .is-carousel-static) .schimmer-release-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
:is(.is-carousel-fallback, .is-carousel-static) .swiper-wrapper {
  gap: var(--release-carousel-gap);
  transform: none !important;
}
.schimmer-content-overview :is(.schimmer-sc, .schimmer-ra-events) { margin-top: 0; }
.site-main .schimmer-content-overview .schimmer-sc {
  --sc-text: var(--color-primary);
  --sc-accent: var(--color-primary);
  color: var(--color-primary);
}
.site-main .schimmer-content-overview .schimmer-sc__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.schimmer-content-overview .schimmer-sc .schimmer-sc__series {
  height: 100%;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--player-panel-radius);
  background: var(--player-panel-background);
  -webkit-backdrop-filter: blur(var(--player-panel-blur));
  backdrop-filter: blur(var(--player-panel-blur));
}
.schimmer-content-overview .schimmer-sc .schimmer-sc__series-title {
  margin-bottom: 14px;
  font-size: var(--type-subsection);
  letter-spacing: 0;
}
.schimmer-content-overview .schimmer-sc .schimmer-sc__series--with-artwork {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.schimmer-content-overview .schimmer-ra-events__widget { border-radius: var(--player-panel-radius); overflow: hidden; }
.schimmer-newsletter-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  align-items: start;
  gap: clamp(24px, 5vw, 80px);
  padding-top: 0;
}
.schimmer-newsletter-section__layout > .schimmer-newsletter-section__form { grid-column: -2 / -1; }
.schimmer-newsletter-section__heading .schimmer-newsletter-section__lead {
  flex: 0 1 520px;
  margin: 0 0 0 auto;
  text-align: left;
}
.schimmer-newsletter-section__heading .schimmer-newsletter-section__copy h2 { margin-bottom: 0; }
.schimmer-newsletter-section__copy { min-width: 0; }
.schimmer-newsletter-section__kicker {
  margin: 0 0 12px;
  color: var(--color-muted);
  font-size: var(--type-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.schimmer-newsletter-section__copy h2 {
  max-width: none;
  margin: 0 0 12px;
  font-size: var(--type-commerce-page-title);
  line-height: 1.3;
}
.schimmer-newsletter-section__lead {
  max-width: 42rem;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--type-meta);
  line-height: 1.5;
}
.schimmer-newsletter-section__form {
  min-width: 0;
  padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid var(--color-border);
  border-radius: var(--player-panel-radius);
  background: var(--player-panel-background);
  -webkit-backdrop-filter: blur(var(--player-panel-blur));
  backdrop-filter: blur(var(--player-panel-blur));
}
.schimmer-newsletter-section__lead p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}
.schimmer-newsletter-section__lead p + p { margin-top: .4em; }
.schimmer-newsletter-section__watermark {
  align-self: stretch;
  min-height: 240px;
  opacity: .1;
  background: var(--color-primary);
  mask: url('../svg/newsletter.svg') left center / min(90%, 460px) auto no-repeat;
  -webkit-mask: url('../svg/newsletter.svg') left center / min(90%, 460px) auto no-repeat;
}
.site-main :is(.schimmer-frontpage-heading, .schimmer-content-overview__heading) {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
}
body .site-main :is(.schimmer-frontpage-heading, .schimmer-content-overview__heading) h2 {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: var(--type-commerce-page-title);
  line-height: 1.15;
}
.schimmer-sc__logo {
  display: inline-block;
  width: 26px;
  height: 18px;
  flex: 0 0 26px;
  background: currentColor;
  mask: url('../svg/soundcloud.svg') center / contain no-repeat;
  -webkit-mask: url('../svg/soundcloud.svg') center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
body .schimmer-sc .schimmer-sc__profile:hover { text-decoration: none; }
}
body .schimmer-sc .schimmer-sc__controls .schimmer-sc__play {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
body .schimmer-sc .schimmer-sc__controls .schimmer-sc__play:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
}
@media (hover: hover) and (pointer: fine) {
body .schimmer-sc .schimmer-sc__play:hover .schimmer-sc__play-icon { color: inherit; }
}
.schimmer-frontpage-navigation button { transition: background-color 180ms ease, color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
.schimmer-frontpage-navigation button:not(:disabled):hover {
  background: var(--color-primary);
  color: var(--color-white);
}
}
body .release-spotlight :is(.release-catalog-caption, .release-spotlight__tracklist, .player-release-head) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.release-spotlight__tracklist { position: relative; }
.release-spotlight__tracklist.has-more-tracks::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.08));
}
.site-main .schimmer-contact .schimmer-contact-title {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* SVGs remain external images; masks preserve the previous forced monochrome fill. */
.vc_service_iconbox .schimmer-service-svg {
    display: block;
    width: 80px;
    height: 80px;
    background-color: var(--color-primary);
    -webkit-mask: var(--schimmer-icon) center / contain no-repeat;
    mask: var(--schimmer-icon) center / contain no-repeat;
    transition: var(--transition);
}
@media (hover: hover) and (pointer: fine) {
    .vc_service_iconbox:hover .schimmer-service-svg {
        background-color: var(--text-light);
        transform: scale(1.08);
    }
}