/* Nav Position Fix - Grossmann Theme v21 - Stronger selectors */

/* ==========================================================
   POPPINS FONT - Global Override
   ========================================================== */
html,
body,
* {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    overflow-x: hidden !important;
}

html {
    overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
}

p, span, a, li, td, th, label, input, button, select, textarea {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ==========================================================
   GLOBAL MOBILE OVERRIDES - Must be outside media queries
   to override ThemeWare's global display:none rules
   ========================================================== */

/* Show header-actions-col (contains hamburger menu) - ThemeWare hides it globally */
html body header.header-main .header-actions-col,
html body header.header-main .col-12.header-actions-col,
html body .header-main .header-row .header-actions-col {
    display: block !important;
    visibility: visible !important;
}

/* Show the hamburger menu button */
html body header.header-main .nav-main-toggle-btn,
html body header.header-main button.nav-main-toggle-btn,
html body .header-main .menu-button .btn {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Show menu-button container */
html body header.header-main .menu-button,
html body .header-main .d-block.d-lg-none {
    display: block !important;
    visibility: visible !important;
}

/* On the homepage .header-logo-col happens to render shrink-to-content
   (flex-grow:0) so the burger fits beside it on the same row. On every other
   page type it renders flex-grow:1 (stretches to the FULL row width), leaving
   no room for the burger, which wraps to a second row below the logo. Make
   every page match the homepage: shrink both columns so burger sits beside
   the logo everywhere. (v=690) */
@media (max-width: 991px) {
    html body .header-main .header-logo-col {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
    html body .header-main .header-actions-col {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ==========================================================
   END GLOBAL MOBILE OVERRIDES
   ========================================================== */

/* Hide hamburger on desktop (lg and up) - restore ThemeWare behavior */
@media (min-width: 992px) {
    html body header.header-main .header-actions-col,
    html body .header-main .menu-button,
    html body .header-main .d-block.d-lg-none {
        display: none !important;
    }
}

/* HEADER - Semi-transparent, fixed position */
html body .header-main,
html body.is-ctl-navigation .header-main,
html body.is-act-home .header-main,
body.is-ctl-navigation header.header-main,
body.is-act-home header.header-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
    height: auto !important;
    min-height: 70px !important;
    background: rgb(30, 58, 95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    z-index: 9999 !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Header inner elements - all transparent */
html body .header-main .header-row,
html body .header-main .container,
html body .header-main .row,
html body .header-main .col,
html body .header-main [class*="col-"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override Bootstrap utility classes on header-logo-col that cause padding shifts */
html body .header-main .header-logo-col,
html body .header-main .header-logo-col.pb-sm-2,
html body .header-main .header-logo-col.my-3,
html body .header-main .header-logo-col.m-lg-0,
.header-main .header-logo-col[class*="pb-"],
.header-main .header-logo-col[class*="my-"],
.header-main .header-logo-col[class*="m-lg-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin: 0 !important;
    transition: none !important;
}

/* NAV-MAIN - Force same background, fixed position at 75px */
/* Include .show class for ThemeWare's scroll-up reveal feature */
html body div.nav-main,
body div.nav-main,
body.is-ctl-navigation div.nav-main,
body.is-act-home div.nav-main,
.nav-main,
.nav-main.show,
.nav-main.header-solid.show,
.nav-main.ready.show,
.nav-main.header-solid.ready.show,
div.nav-main.show {
    position: fixed !important;
    top: 75px !important;
    left: 0 !important;
    right: 0 !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    background: rgb(30, 58, 95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    /* separator line between the logo row and the menu bar — visible in the
       SOLID navy state (scrolled / other pages). In the glass state the inline
       border-top from gltApplyGlass() overrides this with the same look. (v=661) */
    border-top: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow: none !important;
    z-index: 9998 !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Force nav-main to have solid background and proper compositing */
html body div.nav-main,
.nav-main {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
}

/* Clip page content to prevent overflow into header area */
.content-main {
    clip-path: inset(0px 0px 0px 0px) !important;
    -webkit-clip-path: inset(0px 0px 0px 0px) !important;
    contain: paint !important;
}

/* Force page content below header - but NOT the hero text content */
.cms-page,
.cms-sections,
.cms-section,
.cms-block,
.logos-wrapper {
    z-index: 1 !important;
}

/* Reference logos on DESKTOP (>991px, where none of the mobile media queries
   below apply): the theme's own all.css sets `#reference-logos img { height:70px }`
   (90px for the first logo) but never touches width or object-fit. Since these
   img tags carry width="380" height="130" attributes (added for CLS prevention),
   the browser falls back to the literal width="380" attribute once height is
   overridden by author CSS, instead of recalculating it from the image's ratio --
   stretching every logo to fill a mismatched 380-wide x 70/90-tall box. Force
   width back to auto so it's computed from the still-intact intrinsic ratio. */
#reference-logos img {
    width: auto !important;
    object-fit: contain !important;
}

/* Ensure main content wrapper has lower z-index */
main.content-main,
.content-main {
    position: relative !important;
    z-index: 1 !important;
}

/* Section-intro specific fix - override inline position:relative that causes stacking issues */
#section-intro,
#section-intro > div,
#section-intro > div > div,
#section-intro [style*="position: relative"],
#section-intro [style*="position:relative"],
#section-intro [style*="z-index"] {
    position: static !important;
    z-index: auto !important;
}

/* Force all section-intro descendants to not create stacking contexts */
#section-intro * {
    z-index: auto !important;
    isolation: auto !important;
}

/* Override any position:relative elements that might create stacking issues */
.cms-page [style*="position: relative"],
.cms-page [style*="position:relative"],
.cms-sections [style*="position"],
#section-intro {
    z-index: 1 !important;
}

/* MAIN NAVIGATION MENU - position at top of nav-main */
html body #main-navigation-menu,
body #main-navigation-menu,
#main-navigation-menu,
html body nav#main-navigation-menu,
html body .main-navigation-menu,
nav.main-navigation-menu,
.nav-main.show #main-navigation-menu,
.nav-main.ready.show #main-navigation-menu {
    position: relative !important;
    top: 0 !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Inner containers transparent */
html body #main-navigation-menu .container,
html body #main-navigation-menu .navbar-collapse,
html body #main-navigation-menu .navbar-nav,
.nav-main .container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix navbar-nav height - this element was 50px causing the jump */
html body #main-navigation-menu .navbar-nav,
html body .navbar-nav.main-navigation-menu-list,
.navbar-nav.main-navigation-menu-list,
#main-navigation-menu .navbar-nav,
.nav-main .navbar-nav,
.nav-main.show .navbar-nav,
.nav-main.header-solid .navbar-nav,
.nav-main.header-solid.show .navbar-nav {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    line-height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* SCROLLED STATE - Solid background, same position */
html body.nav-scrolled .header-main,
html body.nav-scrolled.is-ctl-navigation .header-main,
html body.nav-scrolled.is-act-home .header-main {
    top: 0 !important;
    position: fixed !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
    height: auto !important;
    min-height: 70px !important;
    background: rgb(15, 40, 75) !important;
    transition: background 0.3s ease !important;
}

html body.nav-scrolled div.nav-main,
body.nav-scrolled div.nav-main,
body.nav-scrolled.is-ctl-navigation div.nav-main,
body.nav-scrolled.is-act-home div.nav-main,
html body.nav-scrolled div.nav-main.show,
body.nav-scrolled div.nav-main.show,
html body.nav-scrolled div.nav-main.header-solid,
body.nav-scrolled div.nav-main.header-solid,
html body.nav-scrolled div.nav-main.header-solid.show,
body.nav-scrolled div.nav-main.header-solid.show,
html body.nav-scrolled div.nav-main.header-solid.ready.show,
body.nav-scrolled div.nav-main.header-solid.ready.show {
    top: 75px !important;
    position: fixed !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    background: rgb(15, 40, 75) !important;
    transition: background 0.3s ease !important;
}

/* Add transition to default state too */
html body .header-main,
html body div.nav-main {
    transition: background 0.3s ease !important;
}

/* Lock down ALL inner element paddings/margins AND transitions - prevent any changes on scroll */
/* Target all states: default, nav-scrolled, header-solid */
html body .header-main .header-row,
html body.nav-scrolled .header-main .header-row,
html body .header-main.header-solid .header-row,
.header-main.header-solid .header-row,
header.header-solid .header-row {
    padding: 0 !important;
    margin: 0 auto !important;
    transition: none !important;
    height: 50px !important;
}

html body .header-main .header-logo-col,
html body.nav-scrolled .header-main .header-logo-col,
html body .header-main.header-solid .header-logo-col,
.header-main.header-solid .header-logo-col,
header.header-solid .header-logo-col {
    padding: 0 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    transition: none !important;
    height: 50px !important;
}

html body .header-main .header-logo-main-link,
html body.nav-scrolled .header-main .header-logo-main-link,
html body .header-main.header-solid .header-logo-main-link,
.header-main.header-solid .header-logo-main-link,
header.header-solid .header-logo-main-link {
    transition: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .header-main .header-logo-main-link img,
html body.nav-scrolled .header-main .header-logo-main-link img,
html body .header-main.header-solid .header-logo-main-link img,
.header-main.header-solid .header-logo-main-link img,
header.header-solid .header-logo-main-link img {
    transition: none !important;
    max-height: 50px !important;
    height: auto !important;
}

html body .nav-main .container,
html body.nav-scrolled .nav-main .container,
html body .nav-main.header-solid .container,
.nav-main.header-solid .container,
div.nav-main.header-solid .container {
    padding: 0 20px !important;
    transition: none !important;
}

html body #main-navigation-menu,
html body.nav-scrolled #main-navigation-menu,
html body .header-solid #main-navigation-menu,
.header-solid #main-navigation-menu,
.nav-main.header-solid #main-navigation-menu {
    transition: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* HEADER-SOLID CLASS - Lock down header and nav when this class is added */
.header-main.header-solid,
header.header-main.header-solid {
    padding-top: 15px !important;
    padding-bottom: 10px !important;
    height: auto !important;
    min-height: 70px !important;
    transition: background 0.3s ease !important;
}

.nav-main.header-solid,
div.nav-main.header-solid,
.nav-main.header-solid.show,
div.nav-main.header-solid.show,
.nav-main.show,
div.nav-main.show {
    top: 75px !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    padding: 0 !important;
    transition: background 0.3s ease !important;
}

/* Lock down nav link text properties - prevent any changes on scroll */
/* CRITICAL: ThemeWare sets body.is-sticky-nav-main .nav-main .main-navigation-link to 50px - override it! */
body.is-sticky-nav-main .nav-main .main-navigation-link,
body.is-sticky-nav-main .nav-main .nav-link,
html body.is-sticky-nav-main .nav-main .main-navigation-link,
html body.is-sticky-nav-main .nav-main .nav-link,
#main-navigation-menu .nav-link,
#main-navigation-menu .main-navigation-link,
html body #main-navigation-menu .nav-link,
html body #main-navigation-menu .main-navigation-link,
html body.nav-scrolled #main-navigation-menu .nav-link,
html body.nav-scrolled #main-navigation-menu .main-navigation-link,
html body .header-solid #main-navigation-menu .nav-link,
.header-solid #main-navigation-menu .nav-link,
.nav-main.header-solid #main-navigation-menu .nav-link,
.nav-main.show .main-navigation-link,
.nav-main.show .nav-link {
    font-size: 15px !important;
    letter-spacing: normal !important;
    word-spacing: 0px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 10px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    border-radius: 4px !important;
}

/* Menu hover - yellow background, white text */
#main-navigation-menu .nav-link:hover,
#main-navigation-menu .main-navigation-link:hover,
html body #main-navigation-menu .nav-link:hover,
html body #main-navigation-menu .main-navigation-link:hover,
.nav-main .nav-link:hover,
.nav-main .main-navigation-link:hover {
    background: #0f284b !important;
    color: #ffffff !important;
}

#main-navigation-menu .nav-item,
html body #main-navigation-menu .nav-item,
html body.nav-scrolled #main-navigation-menu .nav-item,
html body .header-solid #main-navigation-menu .nav-item,
.header-solid #main-navigation-menu .nav-item,
.nav-main.header-solid #main-navigation-menu .nav-item {
    transition: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prevent ThemeWare from changing any element transitions */
.header-main *,
.nav-main *,
.header-main.header-solid *,
.nav-main.header-solid * {
    transition: none !important;
}

/* Hero diagonal split container - must be above overlay (overlay is z-index 2) */
.hero-diagonal-split,
#hero-overlay-content {
    z-index: 100 !important;
    position: absolute !important;
}

/* Diagonal glass - glass effect only, compact around text */
.diagonal-glass,
.hero-diagonal-split .diagonal-glass {
    position: absolute !important;
    top: 120px !important;
    left: 0 !important;
    width: 42% !important;
    height: calc(100% - 80px) !important;  /* Extend down to reference logos */
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    clip-path: polygon(0 0, 90% 0, 75% 100%, 0 100%) !important;
    z-index: 101 !important;
    padding: 30px 50px 40px 40px !important;
    box-sizing: border-box !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Position content in upper-middle area */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 140px !important;
}

/* Hero text content - higher z-index to appear above overlay */
.diagonal-glass .tag,
.diagonal-glass h2,
.diagonal-glass p,
.diagonal-glass .hero-bullets,
.diagonal-glass .btn-group,
.hero-diagonal-split .diagonal-glass .tag,
.hero-diagonal-split .diagonal-glass h2,
.hero-diagonal-split .diagonal-glass p,
.hero-diagonal-split .diagonal-glass .hero-bullets,
.hero-diagonal-split .diagonal-glass .btn-group {
    position: relative !important;
    z-index: 102 !important;
}

/* Hero text content padding */
.hero-diagonal-split .tag {
    margin-bottom: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* German flag - hide CSS pseudo-element completely, HTML element is used instead */
.hero-diagonal-split .tag::before {
    display: none !important;
    content: none !important;
}

.hero-diagonal-split h2 {
    margin-bottom: 20px !important;
}

.hero-diagonal-split p {
    margin-bottom: 25px !important;
}

.hero-diagonal-split .hero-bullets {
    margin-bottom: 20px !important;
}

.hero-diagonal-split-OLD .hero-bullets {
    margin-bottom: 20px !important;
}

.hero-diagonal-split .hero-bullets li {
    margin-bottom: 12px !important;
}

.hero-diagonal-split .btn-group {
    margin-bottom: 35px !important;
    margin-top: 15px !important;
}

/* Video - match old site sizing for better quality appearance */
.cms-block-text-hero video,
#hero-video {
    width: 177.78vh !important;  /* 16:9 aspect ratio */
    height: 100vh !important;
    min-width: 100% !important;
    min-height: 100vh !important;
    object-fit: cover !important;
    object-position: center center !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
}

/* Dark overlay covering entire video */
.cms-block-text-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 22, 40, 0.5) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}


/* Bottom gradient overlay */
.cms-block-text-hero::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 150px !important;
    background: linear-gradient(to bottom, transparent 0%, rgba(15, 40, 75, 0.6) 100%) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* Hide 20+ Jahre Erfahrung badge */
.right-decoration {
    display: none !important;
}

/* CRITICAL FIX: ThemeWare shows .header-cart.sticky when .show class is added - keep it hidden */
/* This is what was causing the height jump! */
.nav-main .header-cart.sticky,
.nav-main.show .header-cart.sticky,
.nav-main.ready.show .header-cart.sticky,
.nav-main.header-solid.show .header-cart.sticky,
div.nav-main.show .header-cart.sticky,
.nav-main #sticky-logo,
.nav-main.show #sticky-logo {
    display: none !important;
}

/* ==========================================================
   HOMEPAGE SECTIONS - Glass-morphism Design System
   ========================================================== */

/* ===== SECTION 2: PRODUCT SHOWCASE ===== */
.product-showcase {
    background: #0f284b !important; border: none !important;
    padding: 80px 0 !important;
    position: relative !important;
}

.product-showcase-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.product-showcase .section-title {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

.product-showcase .section-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
}

.product-card-glass {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.product-card-glass:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(225, 181, 46, 0.15) !important;
    border-color: rgba(225, 181, 46, 0.3) !important;
}

.product-card-glass .product-image {
    width: 100% !important;
    height: 180px !important;
    object-fit: contain !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
}

.product-card-glass .product-image-placeholder {
    width: 100% !important;
    height: 180px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px !important;
}

.product-card-glass .product-name {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.product-card-glass .product-spec {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    margin-bottom: 15px !important;
    min-height: 40px !important;
}

.product-card-glass .product-price {
    color: #E1B52E !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.product-card-glass .btn-product {
    background: transparent !important;
    border: 2px solid #E1B52E !important;
    color: #E1B52E !important;
    padding: 12px 28px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.product-card-glass .btn-product:hover {
    background: #0f284b !important;
    color: #ffffff !important;
}

/* ===== SECTION 3: USP/BENEFITS SECTION ===== */
.usp-section {
    background: linear-gradient(180deg, #0f284b 0%, #0a1e3a 100%) !important;
    padding: 70px 0 !important;
}

.usp-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.usp-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
}

.usp-card-glass {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 35px 25px !important;
    text-align: center !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.usp-card-glass:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(225, 181, 46, 0.3) !important;
}

.usp-card-glass .usp-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(225, 181, 46, 0.15) !important;
    border-radius: 50% !important;
    color: #E1B52E !important;
    font-size: 28px !important;
}

.usp-card-glass .usp-icon svg,
.usp-card-glass .usp-icon img {
    width: 32px !important;
    height: 32px !important;
    fill: none !important;
}

.usp-card-glass .usp-title {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.usp-card-glass .usp-text {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ===== SECTION 4: WHY GLT / WHY CHOOSE US ===== */
.why-glt-section {
    background: #0f284b !important; border: none !important;
    padding: 100px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.why-glt-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

.why-glt-media {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.why-glt-media img,
.why-glt-media video {
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    display: block !important;
}

.why-glt-media-placeholder {
    width: 100% !important;
    height: 400px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 16px !important;
}

.why-glt-content {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 45px !important;
}

.why-glt-content .section-label {
    color: #E1B52E !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
}

.why-glt-content .section-title {
    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 30px !important;
    line-height: 1.2 !important;
}

.why-glt-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.why-glt-checklist li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 18px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.why-glt-checklist li::before {
    content: "✓" !important;
    color: #E1B52E !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(225, 181, 46, 0.15) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== SECTION 5: CUSTOMER REVIEWS ===== */
.reviews-section {
    background: linear-gradient(180deg, #0a1e3a 0%, #0f284b 100%) !important;
    padding: 90px 0 !important;
}

.reviews-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

.reviews-header {
    text-align: center !important;
    margin-bottom: 50px !important;
}

.reviews-header .section-title {
    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.reviews-header .google-rating {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 16px !important;
}

.reviews-header .stars {
    color: #fbbc04 !important;
    font-size: 22px !important;
    letter-spacing: 2px !important;
}

.reviews-header .rating-text {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.reviews-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

.review-card-glass {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 35px !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.review-card-glass:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(251, 188, 4, 0.3) !important;
}

.review-card-glass .review-stars {
    color: #fbbc04 !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
}

.review-card-glass .review-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 25px !important;
    font-style: italic !important;
}

.review-card-glass .review-author {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.review-card-glass .author-avatar {
    width: 45px !important;
    height: 45px !important;
    background: rgba(225, 181, 46, 0.2) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #E1B52E !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.review-card-glass .author-name {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

.reviews-footer {
    text-align: center !important;
    margin-top: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
}

.reviews-footer img {
    height: 20px !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    opacity: 0.7 !important;
}

/* ===== SECTION 6: CTA BANNER ===== */
.cta-banner {
    background: #0a1e3a !important;
    position: relative !important;
    padding: 100px 0 !important;
    overflow: hidden !important;
}

.cta-banner::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(225, 181, 46, 0.08) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.cta-banner-inner {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.cta-banner .cta-title {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}

.cta-banner .cta-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;
    margin-bottom: 40px !important;
}

.cta-banner .btn-cta {
    background: #0f284b !important;
    color: #ffffff !important;
    padding: 18px 45px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.cta-banner .btn-cta:hover {
    background: #c9a127 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(225, 181, 46, 0.3) !important;
}

.cta-banner .cta-phone {
    margin-top: 30px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 16px !important;
}

.cta-banner .cta-phone a {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 22px !important;
}

.cta-banner .cta-phone a:hover {
    color: #E1B52E !important;
}

/* ===== REFERENCE LOGOS SECTION (Enhancement) ===== */
.reference-section {
    background: #0f284b !important; border: none !important;
    padding: 60px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.reference-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    text-align: center !important;
}

.reference-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 30px !important;
}

/* Reference logos must be ABOVE hero diagonal (z-index 100) */
#reference-logos,
div#reference-logos {
    z-index: 110 !important;
}

.reference-logos {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 50px !important;
    flex-wrap: wrap !important;
}

.reference-logos img {
    height: 40px !important;
    opacity: 0.6 !important;
    filter: grayscale(100%) brightness(2) !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.reference-logos img:hover {
    opacity: 1 !important;
    filter: grayscale(0%) brightness(1) !important;
}

/* ===== HERO SECTION BUTTONS ===== */
.btn-hero {
    padding: 16px 32px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.btn-hero.btn-primary,
.btn-hero-primary {
    background: #E1B52E !important;
    color: #0f284b !important;
    border: 2px solid #E1B52E !important;
    box-shadow: none !important;
}

.btn-hero.btn-primary:hover,
.btn-hero-primary:hover {
    background: #c9a127 !important;
    border-color: #c9a127 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(225, 181, 46, 0.4) !important;
}

.btn-hero.btn-secondary,
.btn-hero-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.btn-hero.btn-secondary:hover,
.btn-hero-secondary:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.btn-group {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

/* ===== MOBILE & TABLET RESPONSIVE STYLES ===== */

/* Tablet (max-width 991px) */
@media (max-width: 991px) {
    /* Remove diagonal glass effect on tablet - no clip-path, no blur */
    .diagonal-glass,
    .hero-diagonal-split .diagonal-glass,
    div.diagonal-glass {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        width: 60% !important;
        padding-top: 100px !important;
        top: 80px !important;
    }

    /* Remove overflow hidden on tablet */
    .cms-block-text-hero,
    .hero-diagonal-split {
        overflow: visible !important;
    }

    /* Smaller header on tablet */
    html body .header-main,
    html body.is-ctl-navigation .header-main,
    html body.is-act-home .header-main,
    html body.is-ctl-product .header-main {
        padding-top: 10px !important;
        padding-bottom: 8px !important;
        min-height: 60px !important;
    }

    html body .header-main .header-row,
    html body.nav-scrolled .header-main .header-row {
        height: 40px !important;
    }

    html body .header-main .header-logo-col {
        height: 40px !important;
    }

    html body .header-main .header-logo-main-link img {
        max-height: 40px !important;
    }

    /* Adjust nav-main position for smaller header */
    html body div.nav-main,
    .nav-main,
    .nav-main.show,
    .nav-main.header-solid.show {
        top: 60px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    html body.nav-scrolled div.nav-main,
    body.nav-scrolled div.nav-main.show {
        top: 60px !important;
    }

    /* Reference logos - stack vertically on tablet */
    #reference-logos,
    div#reference-logos {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #reference-logos .logos-wrapper,
    #reference-logos div.logos-wrapper,
    .logos-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
    }

    #reference-logos .logos-wrapper .ref-label,
    .logos-wrapper .ref-label,
    .logos-wrapper span.ref-label {
        margin-bottom: 10px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    #reference-logos .logos-wrapper img,
    .logos-wrapper img {
        height: 30px !important;
        max-width: 120px !important;
        object-fit: contain !important;
    }

    /* ===== NEW SECTIONS - TABLET RESPONSIVE ===== */

    /* Product Showcase - 2 columns on tablet */
    .product-showcase {
        padding: 60px 0 !important;
    }

    .product-showcase-inner {
        padding: 0 25px !important;
    }

    .product-showcase .section-title {
        font-size: 34px !important;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }

    /* USP Section - 2 columns on tablet */
    .usp-section {
        padding: 50px 0 !important;
    }

    .usp-inner {
        padding: 0 25px !important;
    }

    .usp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Why GLT - stack vertically on tablet */
    .why-glt-section {
        padding: 70px 0 !important;
    }

    .why-glt-inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 25px !important;
    }

    .why-glt-content .section-title {
        font-size: 30px !important;
    }

    /* Reviews - 2 columns on tablet */
    .reviews-section {
        padding: 60px 0 !important;
    }

    .reviews-inner {
        padding: 0 25px !important;
    }

    .reviews-header .section-title {
        font-size: 30px !important;
    }

    .reviews-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }

    /* CTA Banner - smaller on tablet */
    .cta-banner {
        padding: 70px 0 !important;
    }

    .cta-banner-inner {
        padding: 0 25px !important;
    }

    .cta-banner .cta-title {
        font-size: 32px !important;
    }

    /* Reference section */
    .reference-section {
        padding: 40px 0 !important;
    }

    .reference-inner {
        padding: 0 25px !important;
    }

    .reference-logos {
        gap: 30px !important;
    }
}

/* Mobile (max-width 767px) */
@media (max-width: 767px) {
    /* Compact header on mobile */
    html body .header-main,
    html body.is-ctl-navigation .header-main,
    html body.is-act-home .header-main,
    html body.is-ctl-product .header-main,
    html body.is-ctl-blog .header-main,
    html body.is-ctl-videos .header-main,
    html body.is-ctl-info .header-main {
        padding-top: 8px !important;
        padding-bottom: 6px !important;
        min-height: 50px !important;
    }

    html body .header-main .header-row,
    html body.nav-scrolled .header-main .header-row {
        height: 35px !important;
    }

    html body .header-main .header-logo-col {
        height: 35px !important;
        padding: 0 10px !important;
    }

    html body .header-main .header-logo-main-link img {
        max-height: 35px !important;
    }

    /* Hide the horizontal nav-main on mobile - hamburger menu is used instead */
    html body div.nav-main,
    .nav-main,
    .nav-main.show {
        display: none !important;
    }

    /* FORCE hamburger menu PARENT CONTAINERS to be visible - maximum specificity */
    html body .header-actions-col,
    html body .col-12.header-actions-col,
    html body .header-main .header-actions-col,
    html body div.header-actions-col,
    html body .header-row .header-actions-col,
    body .header-actions-col {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
    }

    html body .d-block.d-lg-none,
    html body .d-block.d-lg-none.col,
    html body div.d-block.d-lg-none,
    body .d-block.d-lg-none,
    .header-actions-col .d-block {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* FORCE hamburger menu button container to be visible */
    .menu-button,
    div.menu-button {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* FORCE the actual button to be visible */
    .nav-main-toggle-btn,
    button.nav-main-toggle-btn,
    .header-actions-btn,
    .menu-button .btn,
    .menu-button button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
    }

    /* Remove diagonal glass effect completely on mobile - no clip-path, no blur */
    .diagonal-glass,
    .hero-diagonal-split .diagonal-glass,
    div.diagonal-glass {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        width: 100% !important;
        padding: 20px 20px 20px 20px !important;
        top: 60px !important;
    }

    /* Remove overflow hidden that cuts off content */
    .cms-block-text-hero,
    .hero-diagonal-split {
        overflow: visible !important;
    }

    /* Hero content - AGGRESSIVELY remove all spacing */
    .cms-block-text-hero,
    .cms-block-text-hero .position-absolute,
    .cms-block-text-hero .col-11,
    .cms-block-text-hero .col-md-10,
    .cms-block-text-hero [class*="col-"],
    .cms-block-text-hero .container,
    .cms-block-text-hero .row,
    .hero-diagonal-split,
    .hero-diagonal-split .row {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Only the outermost hero block needs minimal top padding for header */
    html body .cms-block-text-hero,
    body .cms-block-text-hero,
    .cms-block-text-hero {
        padding-top: 10px !important;
        margin-top: 50px !important; /* Push below fixed header */
    }

    /* Remove any extra spacing on ALL inner elements */
    .cms-block-text-hero .cms-element-text,
    .cms-block-text-hero h1,
    .cms-block-text-hero h2,
    .cms-block-text-hero .badge,
    .cms-block-text-hero [class*="badge"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .cms-block-text-hero h1,
    .cms-block-text-hero h2,
    .hero-diagonal-split h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }

    .cms-block-text-hero .hero-bullets,
    .hero-diagonal-split .hero-bullets {
    margin-bottom: 20px !important;
}

.hero-diagonal-split-OLD .hero-bullets {
        margin-bottom: 20px !important;
    }

    .cms-block-text-hero .hero-bullets li,
    .hero-diagonal-split .hero-bullets li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* Reference logos - compact layout for mobile */
    #reference-logos,
    div#reference-logos {
        padding: 15px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #reference-logos .logos-wrapper,
    #reference-logos div.logos-wrapper,
    .logos-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        padding: 15px 10px !important;
        box-sizing: border-box !important;
    }

    #reference-logos .logos-wrapper .ref-label,
    .logos-wrapper .ref-label,
    .logos-wrapper span.ref-label {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    #reference-logos .logos-wrapper img,
    .logos-wrapper img {
        height: 32px !important;
        max-width: 100px !important;
        object-fit: contain !important;
    }


    /* Buttons smaller on mobile */
    .cms-block-text-hero .btn,
    .hero-diagonal-split .btn-hero {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* ===== NEW SECTIONS - MOBILE RESPONSIVE ===== */

    /* Product Showcase - single column on mobile */
    .product-showcase {
        padding: 50px 0 !important;
    }

    .product-showcase-inner {
        padding: 0 20px !important;
    }

    .product-showcase .section-title {
        font-size: 28px !important;
        margin-bottom: 10px !important;
    }

    .product-showcase .section-subtitle {
        font-size: 15px !important;
        margin-bottom: 35px !important;
    }

    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .product-card-glass {
        padding: 20px !important;
    }

    .product-card-glass .product-image,
    .product-card-glass .product-image-placeholder {
        height: 150px !important;
    }

    .product-card-glass .product-name {
        font-size: 18px !important;
    }

    .product-card-glass .product-price {
        font-size: 20px !important;
    }

    /* USP Section - single column on mobile */
    .usp-section {
        padding: 40px 0 !important;
    }

    .usp-inner {
        padding: 0 20px !important;
    }

    .usp-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .usp-card-glass {
        padding: 25px 20px !important;
    }

    /* Why GLT - mobile adjustments */
    .why-glt-section {
        padding: 50px 0 !important;
    }

    .why-glt-inner {
        padding: 0 20px !important;
        gap: 30px !important;
    }

    .why-glt-media-placeholder {
        height: 250px !important;
    }

    .why-glt-content {
        padding: 30px 25px !important;
    }

    .why-glt-content .section-title {
        font-size: 26px !important;
    }

    .why-glt-checklist li {
        font-size: 15px !important;
        gap: 12px !important;
    }

    /* Reviews - single column on mobile */
    .reviews-section {
        padding: 50px 0 !important;
    }

    .reviews-inner {
        padding: 0 20px !important;
    }

    .reviews-header .section-title {
        font-size: 26px !important;
    }

    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .review-card-glass {
        padding: 25px !important;
    }

    /* CTA Banner - mobile */
    .cta-banner {
        padding: 50px 0 !important;
    }

    .cta-banner-inner {
        padding: 0 20px !important;
    }

    .cta-banner .cta-title {
        font-size: 26px !important;
    }

    .cta-banner .cta-subtitle {
        font-size: 16px !important;
    }

    .cta-banner .btn-cta {
        padding: 15px 35px !important;
        font-size: 14px !important;
    }

    .cta-banner .cta-phone a {
        font-size: 20px !important;
    }

    /* Reference section mobile */
    .reference-section {
        padding: 30px 0 !important;
    }

    .reference-inner {
        padding: 0 20px !important;
    }

    .reference-logos {
        gap: 25px !important;
    }

    .reference-logos img {
        height: 30px !important;
    }

    /* Button group - stack on mobile */
    .btn-group {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .btn-hero {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 25px !important;
    }
}

/* ===== BENEFITS SECTION V2 - Clean Professional Design ===== */
.benefits-section-v2 {
    background: #f8f9fa !important;
    padding: 80px 20px !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
}

.benefits-header {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 50px !important;
}

.benefits-header h2 {
    color: #1e3a5f !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.benefits-header p {
    color: #5a6a7a !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

.benefits-grid-v2,
.benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.benefit-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.benefit-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

.benefit-check {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #E1B52E 0%, #c9a127 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.benefit-text strong {
    display: block !important;
    color: #1e3a5f !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

.benefit-text span {
    display: block !important;
    color: #6a7a8a !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ===== LASER TITLE ANIMATION - Exact CodePen Style ===== */
/* Dark background for laser effect - multiple selectors for specificity */
html body .benefits-section-v2 .benefits-header,
html body div.benefits-header,
html body .benefits-header,
.cms-page .benefits-header,
.cms-section .benefits-header,
.cms-block .benefits-header,
.cms-element-text .benefits-header {
    background: #E1B52E !important; border: none !important;
    padding: 60px 40px 35px 40px !important;
    border-radius: 16px !important;
    margin-bottom: 50px !important;
    max-width: 900px !important;
}

html body .benefits-section-v2 .benefits-header p,
html body div.benefits-header p,
html body .benefits-header p,
.benefits-header > p,
.cms-page .benefits-header p,
.cms-section .benefits-header p,
.cms-block .benefits-header p,
.cms-element-text .benefits-header p {
    color: #0f284b !important;
    font-weight: 600 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure h2 and laser-title are visible even before animation starts */
html body .benefits-section-v2 .benefits-header h2,
html body div.benefits-header h2,
html body .benefits-header h2,
.benefits-header > h2,
.cms-page .benefits-header h2,
.cms-section .benefits-header h2,
.cms-block .benefits-header h2,
.cms-element-text .benefits-header h2 {
    color: #0f284b !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.laser-title {
    position: relative !important;
    display: block !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #0f284b !important;
}

.laser-title .text {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.laser-title .write {
    color: #0f284b !important;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    animation: laser-write 12s linear infinite !important;
    animation-play-state: paused !important;
}

.laser-title .laser {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    color: #ffffff !important;
    background: transparent !important;
    filter: none !important;
    text-shadow:
        0 0 2px #ffffff,
        0 0 4px #ffffff,
        0 0 8px #ffffff,
        0 0 12px #ffffff !important;
    clip-path: polygon(0 0, 1% 0, 1% 100%, 0 100%);
    animation: laser-beam 12s linear infinite !important;
    animation-play-state: paused !important;
    pointer-events: none !important;
}

/* Play laser animations when section is visible */
.benefits-section-v2.in-view .laser-title .write,
.benefits-section-v2.in-view .laser-title .laser {
    animation-play-state: running !important;
}

@keyframes laser-write {
    0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    85% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
}

@keyframes laser-beam {
    0% { clip-path: polygon(0 0, 1% 0, 1% 100%, 0 100%); }
    15% { clip-path: polygon(99% 0, 100% 0, 100% 100%, 99% 100%); }
    85% { clip-path: polygon(99% 0, 100% 0, 100% 100%, 99% 100%); }
    100% { clip-path: polygon(0 0, 1% 0, 1% 100%, 0 100%); }
}

/* Benefits responsive - tablet */
@media (max-width: 991px) {
    .benefits-grid-v2,
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .benefits-header h2,
    .laser-title {
        font-size: 30px !important;
    }
}

/* Benefits responsive - mobile */
@media (max-width: 767px) {
    .benefits-section-v2 {
        padding: 50px 15px !important;
    }

    /* Override JS inline styles on benefits header */
    .benefits-header {
        padding: 30px 20px !important;
        margin-bottom: 30px !important;
        max-width: 100% !important;
    }

    .benefits-grid-v2,
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .benefits-header h2,
    .laser-title {
        font-size: 26px !important;
    }

    .benefit-item {
        padding: 20px !important;
    }
}

/* Small mobile (max-width 480px) */
@media (max-width: 480px) {
    /* Even more compact */
    html body .header-main {
        padding-top: 6px !important;
        padding-bottom: 4px !important;
        min-height: 45px !important;
    }

    html body .header-main .header-row {
        height: 30px !important;
    }

    html body .header-main .header-logo-main-link img {
        max-height: 30px !important;
    }

    /* Hero text even smaller */
    .cms-block-text-hero h1,
    .cms-block-text-hero h2,
    .hero-diagonal-split h2 {
        font-size: 24px !important;
    }

    /* Reference logos - 2 per row on small screens */
    #reference-logos .logos-wrapper,
    #reference-logos div.logos-wrapper,
    .logos-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px 20px !important;
        box-sizing: border-box !important;
    }

    #reference-logos .logos-wrapper img,
    .logos-wrapper img {
        height: 32px !important;
        max-width: 92px !important;
        flex: 0 0 auto !important;
        object-fit: contain !important;
    }

    #reference-logos .logos-wrapper .ref-label,
    .logos-wrapper .ref-label,
    .logos-wrapper span.ref-label {
        width: 100% !important;
        text-align: center !important;
        font-size: 11px !important;
        flex: 0 0 100% !important;
    }

    /* ===== NEW SECTIONS - SMALL MOBILE ===== */

    .product-showcase .section-title,
    .reviews-header .section-title,
    .why-glt-content .section-title,
    .cta-banner .cta-title {
        font-size: 22px !important;
    }

    .product-card-glass .product-image,
    .product-card-glass .product-image-placeholder {
        height: 130px !important;
    }

    .usp-card-glass .usp-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .why-glt-media-placeholder {
        height: 200px !important;
    }

    .why-glt-content {
        padding: 25px 20px !important;
    }

    .review-card-glass {
        padding: 20px !important;
    }

    .cta-banner .btn-cta {
        padding: 14px 30px !important;
        font-size: 13px !important;
    }
}

/* ===== FIX: Hide ALL .tag::before flags - maximum specificity ===== */
.tag::before,
span.tag::before,
.diagonal-glass .tag::before,
.hero-diagonal-split .tag::before,
.hero-diagonal-split .diagonal-glass .tag::before,
#hero-overlay-content .tag::before,
html body .tag::before {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* ===== FIX: Benefits header text colors - maximum specificity ===== */
html body .benefits-header h2,
html body .benefits-header .laser-title,
html body .benefits-section-v2 .benefits-header h2,
body .benefits-header h2,
.benefits-header h2 {
    color: #0f284b !important;
}

html body .benefits-header p,
html body .benefits-section-v2 .benefits-header p,
body .benefits-header p,
.benefits-header p {
    color: #0f284b !important;
}

/* ===== HERO BADGE - replaces .tag to avoid ThemeWare interference ===== */
.hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin-bottom: 30px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.hero-badge::before {
    display: none !important;
    content: none !important;
}

/* ===== BENEFIT ITEMS V2 - Icon on top, vertical layout ===== */
.benefit-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 35px 25px !important;
}

.benefit-item .benefit-check {
    display: none !important;
}

.benefit-item .benefit-icon {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0f284b !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(15, 40, 75, 0.3) !important;
}

.benefit-item .benefit-icon svg {
    width: 40px !important;
    height: 40px !important;
    fill: none !important;
    stroke: #e1b52e !important;
    stroke-width: 1.8 !important;
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
}

/* Icon animations - paused by default, play when section is visible */
.benefit-item:nth-child(1) .benefit-icon svg { animation: iconDraw 8s ease-in-out infinite; animation-delay: 0s; animation-play-state: paused; }
.benefit-item:nth-child(2) .benefit-icon svg { animation: iconDraw 9s ease-in-out infinite; animation-delay: -2s; animation-play-state: paused; }
.benefit-item:nth-child(3) .benefit-icon svg { animation: iconDraw 7s ease-in-out infinite; animation-delay: -1s; animation-play-state: paused; }
.benefit-item:nth-child(4) .benefit-icon svg { animation: iconDraw 10s ease-in-out infinite; animation-delay: -4s; animation-play-state: paused; }
.benefit-item:nth-child(5) .benefit-icon svg { animation: iconDraw 8s ease-in-out infinite; animation-delay: -3s; animation-play-state: paused; }
.benefit-item:nth-child(6) .benefit-icon svg { animation: iconDraw 9s ease-in-out infinite; animation-delay: -5s; animation-play-state: paused; }

/* When section is visible, play animations */
.benefits-section-v2.in-view .benefit-item .benefit-icon svg {
    animation-play-state: running !important;
}

@keyframes iconDraw {
    0%, 65% {
        stroke-dashoffset: 0;
        filter: none;
    }
    67% {
        stroke-dashoffset: 200;
        filter: none;
    }
    68% {
        stroke-dashoffset: 200;
        filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 15px #e1b52e) drop-shadow(0 0 25px #fff);
    }
    72% {
        stroke-dashoffset: 160;
        filter: drop-shadow(0 0 4px #e1b52e);
    }
    80% {
        stroke-dashoffset: 80;
        filter: none;
    }
    90%, 100% {
        stroke-dashoffset: 0;
        filter: none;
    }
}

.benefit-item .benefit-text {
    text-align: center !important;
}

.benefit-item .benefit-text strong {
    display: block !important;
    margin-bottom: 10px !important;
    font-size: 18px !important;
}

.benefit-item .benefit-text span {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* =============================================================
   ANWENDUNGSBEREICHE SECTION - Industry Applications Grid
   Inspired by xTool "We Inspire Every Dreamer, Every Field"
   ============================================================= */

/* ============================================
   ANWENDUNGEN SECTION - xTool Style Horizontal Carousel
   ============================================ */
.anwendungen-section {
    display: block !important;
    padding: 80px 0 60px 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.anwendungen-section .section-header {
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto 50px auto !important;
    padding: 0 20px !important;
}

.anwendungen-section .section-header h2 {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #0f284b !important;
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
}

.anwendungen-section .section-header p {
    font-size: 18px !important;
    color: #5a6a7a !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}

.anwendungen-section .section-header a {
    color: #2563eb !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.3s ease !important;
}

.anwendungen-section .section-header a:hover {
    color: #1d4ed8 !important;
}

/* Horizontal Scrolling Carousel */
.anwendungen-carousel {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 20px 20px 20px !important;
}

.anwendungen-carousel::-webkit-scrollbar {
    display: none !important;
}

/* Individual Carousel Card - Tall Portrait Style */
.anwendung-card {
    position: relative !important;
    flex: 0 0 280px !important;
    height: 420px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    scroll-snap-align: start !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.anwendung-card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Card Image - Full Cover */
.anwendung-card .card-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}

.anwendung-card:hover .card-image {
    transform: scale(1.05) !important;
}

/* Card Overlay - Subtle Bottom Gradient */
.anwendung-card .card-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Card Content - Bottom Positioned */
.anwendung-card .card-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 25px 20px !important;
    z-index: 2 !important;
    color: #ffffff !important;
}

/* Hide the icon in carousel style */
.anwendung-card .card-icon {
    display: none !important;
}

.anwendung-card .card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.anwendung-card .card-subtitle {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Responsive Carousel */
@media (max-width: 900px) {
    .anwendungen-section .section-header h2 {
        font-size: 32px !important;
    }
    .anwendung-card {
        flex: 0 0 250px !important;
        height: 380px !important;
    }
}

@media (max-width: 600px) {
    .anwendungen-section {
        padding: 50px 0 40px 0 !important;
    }
    .anwendungen-section .section-header h2 {
        font-size: 26px !important;
    }
    .anwendung-card {
        flex: 0 0 220px !important;
        height: 340px !important;
    }
    .anwendung-card .card-title {
        font-size: 18px !important;
    }
}

/* =============================================================
   LASER VIDEO SHOWCASE SECTION - Glass Overlay Design
   ============================================================= */
/* =============================================================
   LASER VIDEO SHOWCASE SECTION - Glass Overlay Design v2
   ============================================================= */
.laser-video-section {
    position: relative !important;
    overflow: hidden !important;
    min-height: 550px !important;
    background: #0a1628 !important;
}

/* Video Background - Full width, absolute positioned */
.laser-video-section .video-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1 !important;
}
/* mobile (no heavy video): clean navy gradient backdrop instead of the 1280px video */
.laser-video-section .video-background.no-video {
    background: linear-gradient(135deg, #0f284b 0%, #16365f 60%, #0f284b 100%) !important;
}

.laser-video-section .video-background video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
}

/* Dark overlay on video */
.laser-video-section .video-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg,
        rgba(15, 40, 75, 0.4) 0%,
        rgba(10, 22, 40, 0.25) 50%,
        rgba(15, 40, 75, 0.4) 100%) !important;
    z-index: 2 !important;
}

/* Content container - centers and constrains the glass panel */
.laser-video-section .content-container {
    position: relative !important;
    z-index: 3 !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 60px 40px !important;
    min-height: 550px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Glass Panel */
.laser-video-section .glass-panel {
    width: 520px !important;
    max-width: 90% !important;
    padding: 45px 40px !important;
    background: rgba(15, 40, 75, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.laser-video-section .glass-panel .section-title {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    line-height: 1.2 !important;
}

.laser-video-section .glass-panel .section-title .highlight {
    color: #e1b52e !important;
}

.laser-video-section .feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
}

.laser-video-section .feature-list li {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 15px !important;
    padding: 14px 0 !important;
    padding-left: 32px !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    line-height: 1.4 !important;
}

.laser-video-section .feature-list li:last-child {
    border-bottom: none !important;
}

.laser-video-section .feature-list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    color: #e1b52e !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

.laser-video-section .cta-button {
    display: inline-block !important;
    background: #e1b52e !important;
    color: #0f284b !important;
    padding: 16px 35px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.laser-video-section .cta-button:hover {
    background: #fff !important;
    color: #0f284b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(225, 181, 46, 0.4) !important;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .laser-video-section {
        min-height: 500px !important;
    }

    .laser-video-section .content-container {
        justify-content: center !important;
        padding: 40px 20px !important;
        min-height: 500px !important;
    }

    .laser-video-section .glass-panel {
        width: 100% !important;
        max-width: 600px !important;
        padding: 35px 30px !important;
    }

    .laser-video-section .glass-panel .section-title {
        font-size: 28px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .laser-video-section {
        min-height: 450px !important;
    }

    .laser-video-section .content-container {
        padding: 30px 15px !important;
        min-height: 450px !important;
    }

    .laser-video-section .glass-panel {
        padding: 30px 25px !important;
        border-radius: 16px !important;
    }

    .laser-video-section .glass-panel .section-title {
        font-size: 24px !important;
    }

    .laser-video-section .feature-list li {
        font-size: 14px !important;
        padding: 12px 0 12px 28px !important;
    }

    .laser-video-section .cta-button {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 25px !important;
    }
}

/* ============================================
   PRODUCT SHOWCASE SECTION - Zigzag Rows
   ============================================ */

.product-showcase-section {
    background: #0f284b !important;
    padding: 80px 0 100px 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.product-showcase-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(225, 181, 46, 0.3), transparent) !important;
}

.product-showcase-section .section-header {
    text-align: center !important;
    margin-bottom: 80px !important;
    padding: 0 40px !important;
    position: relative !important;
    z-index: 1 !important;
}

.product-showcase-section .section-header h2 {
    color: #fff !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin: 0 0 15px 0 !important;
    letter-spacing: -0.5px !important;
}

.product-showcase-section .section-header h2 .highlight {
    color: #e1b52e !important;
}

.product-showcase-section .section-header p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px !important;
    margin: 0 auto !important;
    max-width: 600px !important;
}

.product-showcase-section .products-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Last product spans full width if odd number of products */
.product-showcase-section .products-container .product-row:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Product Card - 2 Column Grid */
.product-row {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important;
    padding: 40px 35px 45px 35px !important;
    position: relative !important;
    transition: all 0.4s ease !important;
    overflow: visible !important;
}

.product-row.reverse {
    direction: ltr !important;
}

.product-row::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 30px !important;
    right: 30px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(225, 181, 46, 0.3), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

.product-row:hover {
    border-color: rgba(225, 181, 46, 0.2) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-5px) !important;
}

.product-row:hover::before {
    opacity: 1 !important;
}

/* Reverse layout for alternating rows */
.product-row.reverse {
    direction: rtl !important;
}

.product-row.reverse > * {
    direction: ltr !important;
}

/* Product Image Side */
.product-row .product-image {
    position: relative !important;
    text-align: center !important;
    padding: 20px !important;
}

.product-row .product-image img {
    max-width: 100% !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.5s ease !important;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4)) !important;
}

.product-row:hover .product-image img {
    transform: scale(1.05) !important;
}

.product-row .product-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(225, 181, 46, 0.15) !important;
    color: #e1b52e !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 1px solid rgba(225, 181, 46, 0.3) !important;
    white-space: nowrap !important;
}

/* Product Content */
.product-row .product-content {
    padding: 20px 10px 0 10px !important;
    text-align: center !important;
}

.product-row .product-title {
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.5px !important;
}

.product-row .product-subtitle {
    color: #e1b52e !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 20px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.product-row .product-description {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin: 0 0 25px 0 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    display: block !important;
    text-overflow: clip !important;
}

/* Product Features List */
.product-row .product-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    text-align: left !important;
    display: inline-block !important;
}

.product-row .product-features li {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    padding-left: 24px !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.product-row .product-features li:last-child {
    border-bottom: none !important;
}

.product-row .product-features li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: #e1b52e !important;
    font-weight: 700 !important;
}

/* Product Price */
.product-row .product-price {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 5px !important;
    overflow: visible !important;
    height: auto !important;
}

.product-row .price-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
}

.product-row .price-value {
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 700 !important;
}

.product-row .price-currency {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.product-row .delivery-time {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    margin-bottom: 25px !important;
}

/* Product CTA Button */
.product-row .product-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #e1b52e !important;
    border: none !important;
    color: #0f284b !important;
    padding: 16px 32px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

.product-row .product-cta:hover {
    background: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 30px rgba(225, 181, 46, 0.3) !important;
}

.product-row .product-cta svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform 0.3s ease !important;
}

.product-row:hover .product-cta svg {
    transform: translateX(5px) !important;
}

/* Footer Note */
.product-showcase-section .section-footer {
    text-align: center !important;
    margin-top: 50px !important;
    padding: 0 20px !important;
}

.product-showcase-section .section-footer p {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .product-showcase-section .products-container {
        grid-template-columns: 1fr !important;
        padding: 0 30px !important;
        gap: 25px !important;
    }

    .product-row {
        padding: 35px 30px !important;
    }

    .product-row .product-image {
        order: 1 !important;
    }

    .product-row .product-content {
        order: 2 !important;
        text-align: center !important;
    }

    .product-row .product-price {
        justify-content: center !important;
    }

    .product-row .product-features li {
        text-align: left !important;
    }

    .product-showcase-section .section-header h2 {
        font-size: 32px !important;
    }

    .product-row .product-title {
        font-size: 26px !important;
    }

    .product-row .price-value {
        font-size: 30px !important;
    }

    .product-row .product-image img {
        max-height: 250px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .product-showcase-section {
        padding: 60px 0 !important;
    }

    .product-showcase-section .products-container {
        padding: 0 15px !important;
        gap: 30px !important;
    }

    .product-showcase-section .section-header {
        margin-bottom: 50px !important;
    }

    .product-showcase-section .section-header h2 {
        font-size: 26px !important;
    }

    .product-showcase-section .section-header p {
        font-size: 16px !important;
    }

    .product-row {
        padding: 30px 20px !important;
        gap: 25px !important;
    }

    .product-row .product-title {
        font-size: 22px !important;
    }

    .product-row .product-subtitle {
        font-size: 13px !important;
    }

    .product-row .product-description {
        font-size: 15px !important;
    }

    .product-row .price-value {
        font-size: 26px !important;
    }

    .product-row .product-image img {
        max-height: 200px !important;
    }

    .product-row .product-cta {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
    }
}

/* ==========================================================
   CONTACT CTA SECTION - Clean White Design
   ========================================================== */
.contact-cta-section {
    background: #ffffff !important;
    padding: 100px 40px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
}

.contact-cta-section .cta-background-pattern {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(15, 40, 75, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(225, 181, 46, 0.04) 0%, transparent 40%) !important;
    pointer-events: none !important;
}

.contact-cta-section .cta-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.contact-cta-section .cta-headline {
    color: #0f284b !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 45px 0 !important;
    letter-spacing: -0.5px !important;
}

.contact-cta-section .cta-headline .highlight {
    color: #0f284b !important;
    display: block !important;
    position: relative !important;
}

/* Static yellow underline bar - no animation */
.contact-cta-section .cta-headline .highlight::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 340px !important;
    height: 10px !important;
    background: #e1b52e !important;
    z-index: -1 !important;
    border-radius: 2px !important;
}

.contact-cta-section .cta-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #0f284b !important;
    color: #fff !important;
    padding: 20px 50px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 25px rgba(15, 40, 75, 0.2) !important;
}

.contact-cta-section .cta-button:hover {
    background: #1a3d66 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 35px rgba(15, 40, 75, 0.3) !important;
}

.contact-cta-section .cta-button svg {
    transition: transform 0.3s ease !important;
    stroke: #fff !important;
}

.contact-cta-section .cta-button:hover svg {
    transform: translateX(5px) !important;
}

.contact-cta-section .cta-divider {
    color: #7a8a9e !important;
    font-size: 16px !important;
    margin: 45px 0 30px 0 !important;
    font-weight: 400 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
}

.contact-cta-section .cta-divider::before,
.contact-cta-section .cta-divider::after {
    content: '' !important;
    width: 60px !important;
    height: 1px !important;
    background: #dde3eb !important;
}

.contact-cta-section .cta-phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
    color: #0f284b !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.contact-cta-section .cta-phone:hover {
    color: #e1b52e !important;
}

.contact-cta-section .cta-phone svg {
    stroke: #e1b52e !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
}

/* CTA Section Responsive - Tablet */
@media (max-width: 991px) {
    .contact-cta-section {
        padding: 80px 30px !important;
    }

    .contact-cta-section .cta-headline {
        font-size: 36px !important;
    }

    .contact-cta-section .cta-headline .highlight::after {
        width: 240px !important;
        height: 12px !important;
    }

    .contact-cta-section .cta-phone {
        font-size: 26px !important;
    }

    .contact-cta-section .cta-divider::before,
    .contact-cta-section .cta-divider::after {
        width: 40px !important;
    }
}

/* CTA Section Responsive - Mobile */
@media (max-width: 767px) {
    .contact-cta-section {
        padding: 60px 20px !important;
    }

    .contact-cta-section .cta-headline {
        font-size: 28px !important;
    }

    .contact-cta-section .cta-headline .highlight {
        display: inline !important;
    }

    .contact-cta-section .cta-headline .highlight::after {
        display: none !important;
    }

    .contact-cta-section .cta-button {
        padding: 18px 35px !important;
        font-size: 14px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .contact-cta-section .cta-divider {
        font-size: 14px !important;
        margin: 35px 0 25px 0 !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .contact-cta-section .cta-divider::before,
    .contact-cta-section .cta-divider::after {
        display: none !important;
    }

    .contact-cta-section .cta-phone {
        font-size: 22px !important;
    }

    .contact-cta-section .cta-phone svg {
        width: 26px !important;
        height: 26px !important;
    }
}

/* CTA Section Responsive - Small Mobile */
@media (max-width: 480px) {
    .contact-cta-section {
        padding: 50px 15px !important;
    }

    .contact-cta-section .cta-headline {
        font-size: 22px !important;
    }

    .contact-cta-section .cta-phone {
        font-size: 18px !important;
    }

    .contact-cta-section .cta-phone svg {
        width: 22px !important;
        height: 22px !important;
    }

    .contact-cta-section .cta-button {
        padding: 16px 25px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================
   SOFTWARE SECTION - Lasersoftware für Beschriftungslaser
   ========================================================== */
.software-section {
    background: linear-gradient(135deg, #0f284b 0%, #1a3d66 100%) !important;
    padding: 100px 40px !important;
    position: relative !important;
    overflow: hidden !important;
}

.software-section .software-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 80px !important;
}

.software-section .software-image {
    flex: 0 0 45% !important;
    max-width: 45% !important;
}

.software-section .software-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
}

.software-section .software-content {
    flex: 1 !important;
}

.software-section .software-title {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 15px 0 !important;
    letter-spacing: -0.5px !important;
}

.software-section .software-subtitle {
    color: #e1b52e !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    margin: 0 0 40px 0 !important;
}

.software-section .software-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.software-section .software-features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

.software-section .software-features li svg {
    flex-shrink: 0 !important;
    margin-top: 4px !important;
    opacity: 0;
    transform: scale(0);
    animation: checkmark-pop 0.5s ease-out forwards;
    filter: drop-shadow(0 0 4px #e1b52e);
}

/* Staggered animation delays for each checkmark */
.software-section .software-features li:nth-child(1) svg { animation-delay: 0.2s; }
.software-section .software-features li:nth-child(2) svg { animation-delay: 0.4s; }
.software-section .software-features li:nth-child(3) svg { animation-delay: 0.6s; }
.software-section .software-features li:nth-child(4) svg { animation-delay: 0.8s; }
.software-section .software-features li:nth-child(5) svg { animation-delay: 1.0s; }
.software-section .software-features li:nth-child(6) svg { animation-delay: 1.2s; }

@keyframes checkmark-pop {
    0% {
        opacity: 0;
        transform: scale(0);
        filter: drop-shadow(0 0 15px #e1b52e) drop-shadow(0 0 25px #fff);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
        filter: drop-shadow(0 0 12px #e1b52e) drop-shadow(0 0 20px #fff);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 4px #e1b52e);
    }
}

.software-section .software-features li span {
    flex: 1 !important;
}

/* Software Section Responsive */
@media (max-width: 991px) {
    .software-section {
        padding: 80px 30px !important;
    }

    .software-section .software-container {
        flex-direction: column !important;
        gap: 50px !important;
    }

    .software-section .software-image {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .software-section .software-image img {
        max-width: 500px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .software-section .software-title {
        font-size: 32px !important;
        text-align: center !important;
    }

    .software-section .software-subtitle {
        text-align: center !important;
        font-size: 18px !important;
    }
}

@media (max-width: 576px) {
    .software-section {
        padding: 60px 20px !important;
    }

    .software-section .software-title {
        font-size: 26px !important;
    }

    .software-section .software-subtitle {
        font-size: 16px !important;
    }

    .software-section .software-features li {
        font-size: 15px !important;
        gap: 12px !important;
    }

    .software-section .software-image img {
        max-width: 100% !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    .software-section {
        padding: 50px 15px !important;
    }

    .software-section .software-title {
        font-size: 22px !important;
    }

    .software-section .software-subtitle {
        font-size: 14px !important;
        margin: 0 0 30px 0 !important;
    }

    .software-section .software-features li {
        font-size: 14px !important;
        padding: 10px 0 !important;
        gap: 10px !important;
    }

    .software-section .software-features li svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ==========================================================
   GLOBAL DARK THEME - All Pages
   Ensures every page (legal, CMS, category, product, etc.)
   uses the dark navy background and white text consistently.
   Added: 2026-04-09
   ========================================================== */

/* --- 1. Global dark background for ALL pages --- */
body, html {
    background: #0f284b !important;
    color: rgba(255,255,255,0.85) !important;
}

/* --- 2. Content area styling (CMS, category, product pages) --- */
.content-main,
.cms-page,
.product-detail,
.category-page {
    background: #0f284b !important;
}

/* --- 3. CMS text elements (legal pages, info pages) --- */
.cms-element-text,
.cms-element-text p,
.cms-element-text li,
.cms-element-text td,
.cms-element-text span {
    color: rgba(255,255,255,0.85) !important;
}

.cms-element-text h1,
.cms-element-text h2,
.cms-element-text h3,
.cms-element-text h4 {
    color: #E1B52E !important;
}

.cms-element-text a {
    color: #E1B52E !important;
}

.cms-element-text a:hover {
    color: #ffd700 !important;
}

/* --- 4. Product detail page --- */
.product-detail-content,
.product-detail-tabs,
.product-detail-description {
    background: #0f284b !important;
    color: rgba(255,255,255,0.85) !important;
}

.product-detail-name,
.product-detail-price {
    color: #fff !important;
}

/* --- 5. Footer dark styling --- */
.footer-main,
footer,
.footer-bottom {
    background: #0a1e38 !important;
    color: rgba(255,255,255,0.7) !important;
}

footer a {
    color: rgba(255,255,255,0.7) !important;
}

footer a:hover {
    color: #E1B52E !important;
}

footer h5, footer .footer-headline {
    color: #E1B52E !important;
}

/* --- 6. Breadcrumb styling --- */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
    color: rgba(255,255,255,0.5) !important;
}
.breadcrumb-item.active {
    color: rgba(255,255,255,0.7) !important;
}

/* --- 7. Category listing / CMS sections transparent --- */
.cms-section,
.cms-section-default {
    background: transparent !important;
}

/* --- 8. Form elements (contact, login, etc.) --- */
.form-control,
.form-select {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #E1B52E !important;
    box-shadow: 0 0 0 0.2rem rgba(225,181,46,0.25) !important;
}

.form-label,
label {
    color: rgba(255,255,255,0.85) !important;
}

/* --- 9. Button styling (gold primary) --- */
.btn-primary {
    background: #E1B52E !important;
    border-color: #E1B52E !important;
    color: #0f284b !important;
}

.btn-primary:hover {
    background: #ffd700 !important;
    border-color: #ffd700 !important;
}

/* --- 10. Shopware default white overrides --- */
.product-detail-media,
.product-detail-tabs-content,
.tab-content,
.tab-pane,
.card,
.card-body,
.alert,
.modal-content {
    background: rgba(255,255,255,0.04) !important;
    color: rgba(255,255,255,0.85) !important;
    border-color: rgba(255,255,255,0.08) !important;
}


/* ── Fix: No text jump on nav hover — remove padding/margin shift ── */
.main-navigation-menu-list > .nav-item > .main-navigation-link.glt-hover {
    background: transparent !important;
    color: #f0a500 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Fix: Show gold underline on hover instead of button ── */
.main-navigation-link.glt-hover .main-navigation-link-text {
    border-bottom-color: #f0a500 !important;
}

/* ── Fix: Hide "Zur Kategorie" button in flyout dropdown ── */
.twt-top-navigation-flyout .navigation-flyout-category-link {
    display: none !important;
}

/* =====================================================================
   GROSSMANN BUY BOX — Compact & Exclusive (2026-04-16)
   Targets: product detail page buy widget
   ===================================================================== */

/* Container refinement — glassmorphic card feel */
.product-detail-buy,
.product-detail-buy[class*=""],
div[class^="product-detail-buy-"],
div[class*=" product-detail-buy-"] {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    padding: 26px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Hide legacy bits that might leak through */
.buy-widget-benefits:not(.glt-buybox-benefits):not([class*="glt-"]),
.badge-made-in-germany,
.product-detail-form-container:not(.glt-buybox-actions),
.product-detail-buy .product-delivery-information,
.product-detail-buy .delivery-information,
.product-detail-buy .product-detail-delivery-information {
    display: none !important;
}

/* ────── Price section ────── */
.glt-buybox-price {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}

.glt-buybox-price__label {
    font-size: 11px !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.42) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

.glt-buybox-price__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    width: fit-content !important;
    padding: 0 !important;
    background: transparent !important;
}

.glt-buybox-price__value {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #E1B52E !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
}

.glt-buybox-price__link:hover .glt-buybox-price__value,
.glt-buybox-price__link:focus .glt-buybox-price__value {
    color: #ffd043 !important;
}

.glt-buybox-price__arrow {
    color: #E1B52E !important;
    transform: translateX(0);
    transition: transform 0.22s ease, color 0.2s ease;
    flex-shrink: 0;
}

.glt-buybox-price__link:hover .glt-buybox-price__arrow {
    transform: translateX(4px);
    color: #ffd043 !important;
}

.glt-buybox-price__subtitle {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-style: italic !important;
    text-shadow: none !important;
}

/* ────── Divider ────── */
.glt-buybox-divider {
    height: 1px !important;
    background: linear-gradient(90deg, rgba(225, 181, 46, 0.45) 0%, rgba(255, 255, 255, 0.08) 35%, transparent 100%) !important;
    margin: 20px 0 !important;
    border: none !important;
}

/* ────── Benefits list ────── */
.glt-buybox-benefits {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.glt-buybox-benefits li {
    position: relative !important;
    padding-left: 18px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1.55 !important;
    margin-bottom: 7px !important;
    text-shadow: none !important;
}

.glt-buybox-benefits li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 11px !important;
    width: 8px !important;
    height: 1px !important;
    background: #E1B52E !important;
}

.glt-buybox-benefits li:last-child {
    margin-bottom: 0 !important;
}

/* ────── Action buttons ────── */
.glt-buybox-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 22px !important;
}

.glt-buybox-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 20px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-shadow: none !important;
    letter-spacing: 0.2px !important;
}

.glt-buybox-btn--primary {
    background: #E1B52E !important;
    color: #0f284b !important;
    border: 1px solid #E1B52E !important;
}

.glt-buybox-btn--primary:hover,
.glt-buybox-btn--primary:focus {
    background: #ffd043 !important;
    border-color: #ffd043 !important;
    color: #0f284b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 22px rgba(225, 181, 46, 0.25) !important;
}

.glt-buybox-btn--ghost {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.glt-buybox-btn--ghost:hover,
.glt-buybox-btn--ghost:focus {
    border-color: rgba(225, 181, 46, 0.55) !important;
    color: #E1B52E !important;
    background: rgba(225, 181, 46, 0.04) !important;
}

/* ────── Trust factors ────── */
.glt-buybox-trust {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.glt-buybox-trust li {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.glt-buybox-trust__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    color: #E1B52E !important;
}

.glt-buybox-trust__icon--flag {
    display: inline-block !important;
    width: 22px !important;
    height: 14px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: linear-gradient(to bottom, #000 0%, #000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCC00 66.66%, #FFCC00 100%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

/* Responsive */
@media (max-width: 767px) {
    .product-detail-buy,
    div[class^="product-detail-buy-"],
    div[class*=" product-detail-buy-"] {
        padding: 22px !important;
    }

    .glt-buybox-price__value {
        font-size: 23px !important;
    }

    .glt-buybox-btn {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
}

/* =====================================================================
   BUY BOX — LIGHT THEME FIX (2026-04-16)
   Page has white background, not dark. Override earlier rgba-white colors
   with high-contrast dark colors. Keep gold accent.
   ===================================================================== */

.product-detail-buy,
.product-detail-buy[class*=""],
div[class^="product-detail-buy-"],
div[class*=" product-detail-buy-"] {
    background: #ffffff !important;
    border: 1px solid rgba(30, 58, 95, 0.18) !important;
    border-radius: 14px !important;
    padding: 28px !important;
    box-shadow: 0 2px 18px rgba(15, 40, 75, 0.06) !important;
    color: #2a3441 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ────── Price section ────── */
.glt-buybox-price__label {
    color: #8a94a3 !important;
}

.glt-buybox-price__value {
    color: #E1B52E !important;
}

.glt-buybox-price__link:hover .glt-buybox-price__value,
.glt-buybox-price__link:focus .glt-buybox-price__value {
    color: #c99a1e !important;
}

.glt-buybox-price__arrow {
    color: #E1B52E !important;
}

.glt-buybox-price__link:hover .glt-buybox-price__arrow {
    color: #c99a1e !important;
}

.glt-buybox-price__subtitle {
    color: #6c757d !important;
}

/* ────── Divider ────── */
.glt-buybox-divider {
    background: linear-gradient(90deg, rgba(225, 181, 46, 0.55) 0%, rgba(30, 58, 95, 0.15) 35%, transparent 100%) !important;
}

/* ────── Benefits list ────── */
.glt-buybox-benefits li {
    color: #2a3441 !important;
}

.glt-buybox-benefits li::before {
    background: #E1B52E !important;
}

/* ────── Action buttons ────── */
.glt-buybox-btn--primary {
    background: #E1B52E !important;
    color: #0f284b !important;
    border: 1px solid #E1B52E !important;
}

.glt-buybox-btn--primary:hover,
.glt-buybox-btn--primary:focus {
    background: #c99a1e !important;
    border-color: #c99a1e !important;
    color: #0f284b !important;
    box-shadow: 0 6px 22px rgba(225, 181, 46, 0.3) !important;
}

.glt-buybox-btn--ghost {
    background: transparent !important;
    color: #1e3a5f !important;
    border: 1px solid rgba(30, 58, 95, 0.25) !important;
}

.glt-buybox-btn--ghost:hover,
.glt-buybox-btn--ghost:focus {
    border-color: #E1B52E !important;
    color: #c99a1e !important;
    background: rgba(225, 181, 46, 0.06) !important;
}

/* ────── Trust factors ────── */
.glt-buybox-trust li {
    color: #4a5866 !important;
}

.glt-buybox-trust__icon {
    color: #E1B52E !important;
}

/* Mobile */
@media (max-width: 767px) {
    .product-detail-buy,
    div[class^="product-detail-buy-"],
    div[class*=" product-detail-buy-"] {
        padding: 22px !important;
    }
}

/* =====================================================================
   MENU TEXT — Bigger font for main navigation (2026-04-16)
   ===================================================================== */

.nav-main .main-navigation-link,
.nav-main .nav-link,
.nav-main .nav-item > a,
.nav-main a.main-navigation-link,
nav[aria-label="Hauptnavigation"] .main-navigation-link,
nav[aria-label="Hauptnavigation"] .nav-link,
#main-navigation-menu .main-navigation-link,
#main-navigation-menu .nav-link {
    font-size: 17.5px !important;
    letter-spacing: 0.3px !important;
}

.nav-main .main-navigation-link-text,
.nav-main .main-navigation-link .main-navigation-link-text,
nav[aria-label="Hauptnavigation"] .main-navigation-link-text,
#main-navigation-menu .main-navigation-link-text {
    font-size: 17.5px !important;
    letter-spacing: 0.3px !important;
}

/* Mobile: keep slightly smaller */
@media (max-width: 991px) {
    .nav-main .main-navigation-link,
    .nav-main .nav-link,
    .nav-main .main-navigation-link-text {
        font-size: 16px !important;
        letter-spacing: 0.2px !important;
    }
}

/* =====================================================================
   MENU TEXT — Bigger font (HIGH SPECIFICITY OVERRIDE) 2026-04-16
   ===================================================================== */

html body .nav-main .main-navigation-link,
html body .nav-main .main-navigation-link.nav-link,
html body .nav-main a.nav-link,
html body .nav-main a.main-navigation-link,
html body nav[aria-label="Hauptnavigation"] .main-navigation-link,
html body nav[aria-label="Hauptnavigation"] .nav-link,
html body #main-navigation-menu .main-navigation-link,
html body #main-navigation-menu .nav-link,
html body .nav-main .nav-item > a {
    font-size: 17.5px !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
}

html body .nav-main .main-navigation-link .main-navigation-link-text,
html body .nav-main .main-navigation-link-text,
html body .nav-main span.main-navigation-link-text,
html body .nav-main a span.main-navigation-link-text,
html body .nav-main a.main-navigation-link span.main-navigation-link-text,
html body nav[aria-label="Hauptnavigation"] .main-navigation-link-text,
html body nav[aria-label="Hauptnavigation"] span.main-navigation-link-text,
html body #main-navigation-menu .main-navigation-link-text,
html body #main-navigation-menu span.main-navigation-link-text {
    font-size: 17.5px !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
}

@media (max-width: 991px) {
    html body .nav-main .main-navigation-link,
    html body .nav-main .main-navigation-link-text,
    html body .nav-main a {
        font-size: 16px !important;
        letter-spacing: 0.2px !important;
    }
}

/* =====================================================================
   MENU TEXT — Bigger font in SCROLLED state too (2026-04-16)
   Override the existing rules at lines ~395 of nav-fix2.css
   that force font-size:15px when body has .nav-scrolled / .header-solid
   ===================================================================== */

html body.is-sticky-nav-main #main-navigation-menu .main-navigation-link,
html body.is-sticky-nav-main #main-navigation-menu .nav-link,
html body.nav-scrolled #main-navigation-menu .main-navigation-link,
html body.nav-scrolled #main-navigation-menu .nav-link,
html body .nav-main.header-solid #main-navigation-menu .main-navigation-link,
html body .nav-main.header-solid #main-navigation-menu .nav-link,
html body .header-solid #main-navigation-menu .main-navigation-link,
html body .header-solid #main-navigation-menu .nav-link,
html body div.nav-main.show #main-navigation-menu .main-navigation-link,
html body div.nav-main.show #main-navigation-menu .nav-link,
html body div.nav-main.show .main-navigation-link,
html body div.nav-main.show .nav-link,
html body div.nav-main.header-solid .main-navigation-link,
html body div.nav-main.header-solid .nav-link {
    font-size: 17.5px !important;
    letter-spacing: 0.3px !important;
    line-height: 40px !important;
}

html body.is-sticky-nav-main #main-navigation-menu .main-navigation-link-text,
html body.nav-scrolled #main-navigation-menu .main-navigation-link-text,
html body .nav-main.header-solid #main-navigation-menu .main-navigation-link-text,
html body .header-solid #main-navigation-menu .main-navigation-link-text,
html body div.nav-main.show #main-navigation-menu .main-navigation-link-text,
html body div.nav-main.show .main-navigation-link-text,
html body div.nav-main.header-solid .main-navigation-link-text {
    font-size: 17.5px !important;
    letter-spacing: 0.3px !important;
}

/* Mobile keeps 16px even when scrolled */
@media (max-width: 991px) {
    html body.nav-scrolled #main-navigation-menu .main-navigation-link,
    html body .nav-main.header-solid #main-navigation-menu .main-navigation-link,
    html body div.nav-main.show .main-navigation-link {
        font-size: 16px !important;
    }
}

/* =====================================================================
   FLYOUT SUBMENU — Bigger text + tighter horizontal padding (2026-04-16)
   Override base.scss line ~278: padding: 11px 16px / font-size: 14px
   ===================================================================== */

html body .twt-top-navigation-flyout .navigation-flyout-link,
html body .twt-top-navigation-flyout .nav-link,
html body .twt-top-navigation-flyout a.nav-link,
html body .dropdown-menu.twt-top-navigation-flyout .navigation-flyout-link,
html body .dropdown-menu.twt-top-navigation-flyout .nav-link {
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 11px 10px !important;
    gap: 8px !important;
    letter-spacing: 0.2px !important;
}

/* Slightly bigger gold dot to match larger text */
html body .twt-top-navigation-flyout .navigation-flyout-link::before,
html body .twt-top-navigation-flyout a.nav-link::before {
    width: 6px !important;
    height: 6px !important;
}

/* Mobile keeps it readable */
@media (max-width: 991px) {
    html body .twt-top-navigation-flyout .navigation-flyout-link,
    html body .twt-top-navigation-flyout .nav-link {
        font-size: 15px !important;
        padding: 10px 12px !important;
    }
}

/* =====================================================================
   FLYOUT — Laser beam icon + tighter padding (2026-04-16)
   ===================================================================== */

/* Tighter flyout container padding */
html body .twt-top-navigation-flyout,
html body .dropdown-menu.twt-top-navigation-flyout,
html body header .dropdown .dropdown-menu.twt-top-navigation-flyout {
    padding: 5px !important;
}

/* Tighter link padding + bigger gap for laser */
html body .twt-top-navigation-flyout .navigation-flyout-link,
html body .twt-top-navigation-flyout .nav-link,
html body .twt-top-navigation-flyout a.nav-link,
html body .dropdown-menu.twt-top-navigation-flyout .navigation-flyout-link,
html body .dropdown-menu.twt-top-navigation-flyout .nav-link {
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 10px 6px !important;
    gap: 10px !important;
    letter-spacing: 0.2px !important;
    align-items: center !important;
}

/* ── LASER BEAM ICON (always visible, animated) ── */
html body .twt-top-navigation-flyout .navigation-flyout-link::before,
html body .twt-top-navigation-flyout a.nav-link::before,
html body .twt-top-navigation-flyout .nav-link::before {
    content: "" !important;
    width: 18px !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(240, 165, 0, 0.35) 15%,
        #f0a500 50%,
        #ffe066 75%,
        #ffffff 95%,
        transparent 100%) !important;
    border-radius: 1px !important;
    box-shadow:
        0 0 4px rgba(240, 165, 0, 0.75),
        0 0 9px rgba(240, 165, 0, 0.4) !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    transform: translateX(0) !important;
    transition: width 0.25s ease, opacity 0.2s ease, box-shadow 0.25s ease, transform 0.3s ease !important;
    align-self: center !important;
    animation: glt-laser-pulse 3s ease-in-out infinite !important;
    border: none !important;
}

@keyframes glt-laser-pulse {
    0%, 100% {
        opacity: 0.55;
        box-shadow:
            0 0 3px rgba(240, 165, 0, 0.5),
            0 0 7px rgba(240, 165, 0, 0.25);
    }
    50% {
        opacity: 0.85;
        box-shadow:
            0 0 5px rgba(240, 165, 0, 0.85),
            0 0 11px rgba(240, 165, 0, 0.5),
            0 0 18px rgba(240, 165, 0, 0.25);
    }
}

/* Hover: laser intensifies & extends */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover::before,
html body .twt-top-navigation-flyout a.nav-link:hover::before,
html body .twt-top-navigation-flyout .nav-link:hover::before {
    opacity: 1 !important;
    width: 24px !important;
    transform: translateX(2px) !important;
    box-shadow:
        0 0 6px #ffe066,
        0 0 14px rgba(240, 165, 0, 0.85),
        0 0 24px rgba(240, 165, 0, 0.5) !important;
    animation: none !important;
}

/* Mobile */
@media (max-width: 991px) {
    html body .twt-top-navigation-flyout .navigation-flyout-link,
    html body .twt-top-navigation-flyout .nav-link {
        font-size: 15px !important;
        padding: 9px 8px !important;
        gap: 8px !important;
    }
    html body .twt-top-navigation-flyout .navigation-flyout-link::before,
    html body .twt-top-navigation-flyout a.nav-link::before {
        width: 14px !important;
    }
}

/* =====================================================================
   FLYOUT — TIGHTER spacing + slightly wider for one-line items
   2026-04-16 final tweaks
   ===================================================================== */

/* Container: minimal padding + slightly wider so items dont wrap */
html body .twt-top-navigation-flyout,
html body .dropdown-menu.twt-top-navigation-flyout,
html body header .dropdown .dropdown-menu.twt-top-navigation-flyout,
html body .twt-top-navigation-flyout.dropdown-menu {
    padding: 3px !important;
    width: 280px !important;
    max-width: 280px !important;
}

/* Links: very tight horizontal padding */
html body .twt-top-navigation-flyout .navigation-flyout-link,
html body .twt-top-navigation-flyout .nav-link,
html body .twt-top-navigation-flyout a.nav-link,
html body .dropdown-menu.twt-top-navigation-flyout .navigation-flyout-link,
html body .dropdown-menu.twt-top-navigation-flyout .nav-link {
    padding: 9px 5px !important;
    gap: 9px !important;
}

/* Mobile */
@media (max-width: 991px) {
    html body .twt-top-navigation-flyout,
    html body .dropdown-menu.twt-top-navigation-flyout {
        width: auto !important;
        max-width: 280px !important;
    }
    html body .twt-top-navigation-flyout .navigation-flyout-link,
    html body .twt-top-navigation-flyout .nav-link {
        padding: 8px 6px !important;
    }
}

/* Final flyout width tweak — fit all items on one line */
html body .twt-top-navigation-flyout,
html body .dropdown-menu.twt-top-navigation-flyout,
html body header .dropdown .dropdown-menu.twt-top-navigation-flyout,
html body .twt-top-navigation-flyout.dropdown-menu {
    width: 310px !important;
    max-width: 310px !important;
}

/* All items single line */
html body .twt-top-navigation-flyout,
html body .dropdown-menu.twt-top-navigation-flyout,
html body header .dropdown .dropdown-menu.twt-top-navigation-flyout {
    width: 325px !important;
    max-width: 325px !important;
}

/* =====================================================================
   FLYOUT LASER — Hover-only animated reveal (2026-04-16)
   Override previous always-visible behavior.
   ===================================================================== */

/* DEFAULT STATE — hidden, no animation */
html body .twt-top-navigation-flyout .navigation-flyout-link::before,
html body .twt-top-navigation-flyout a.nav-link::before,
html body .twt-top-navigation-flyout .nav-link::before {
    content: "" !important;
    width: 0 !important;
    height: 2px !important;
    opacity: 0 !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(240, 165, 0, 0.4) 15%,
        #f0a500 45%,
        #ffe066 70%,
        #ffffff 92%,
        transparent 100%) !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    transform: translateX(-6px) !important;
    transition:
        width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.18s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease !important;
    align-self: center !important;
    animation: none !important;
    border: none !important;
    pointer-events: none !important;
}

/* HOVER — laser fires in with overshoot, then subtle shimmer */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover::before,
html body .twt-top-navigation-flyout a.nav-link:hover::before,
html body .twt-top-navigation-flyout .nav-link:hover::before {
    width: 24px !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    box-shadow:
        0 0 6px #ffe066,
        0 0 14px rgba(240, 165, 0, 0.85),
        0 0 24px rgba(240, 165, 0, 0.5) !important;
    animation: glt-laser-shimmer 1.4s ease-in-out 0.35s infinite !important;
}

/* Subtle continuous shimmer while hovered — only animates the glow */
@keyframes glt-laser-shimmer {
    0%, 100% {
        box-shadow:
            0 0 5px #ffe066,
            0 0 12px rgba(240, 165, 0, 0.75),
            0 0 22px rgba(240, 165, 0, 0.4);
    }
    50% {
        box-shadow:
            0 0 8px #ffffff,
            0 0 18px rgba(240, 165, 0, 1),
            0 0 32px rgba(240, 165, 0, 0.7);
    }
}

/* =====================================================================
   FLYOUT LASER — Underline-style + laser-write animation (2026-04-16)
   Design matches main menu hover underline (gold 2px line)
   Animation matches homepage .laser-title clip-path write effect
   ===================================================================== */

/* DEFAULT — completely hidden */
html body .twt-top-navigation-flyout .navigation-flyout-link::before,
html body .twt-top-navigation-flyout a.nav-link::before,
html body .twt-top-navigation-flyout .nav-link::before {
    content: "" !important;
    width: 22px !important;
    height: 2px !important;
    opacity: 0 !important;
    background: #f0a500 !important;
    background-image: none !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    border: none !important;
    flex-shrink: 0 !important;
    transform: none !important;
    align-self: center !important;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) !important;
    transition: opacity 0.18s ease !important;
    animation: none !important;
    pointer-events: none !important;
}

/* HOVER — laser writes from left to right, then gentle glow pulse */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover::before,
html body .twt-top-navigation-flyout a.nav-link:hover::before,
html body .twt-top-navigation-flyout .nav-link:hover::before {
    opacity: 1 !important;
    animation:
        glt-flyout-laser-write 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
        glt-flyout-laser-glow 1.6s ease-in-out 0.45s infinite !important;
}

/* Write-in: clip-path reveals the bar from left to right */
@keyframes glt-flyout-laser-write {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        box-shadow: none;
    }
    60% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        box-shadow:
            0 0 6px #ffffff,
            0 0 14px rgba(240, 165, 0, 0.9),
            0 0 24px rgba(240, 165, 0, 0.5);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        box-shadow:
            0 0 4px rgba(240, 165, 0, 0.7),
            0 0 10px rgba(240, 165, 0, 0.4);
    }
}

/* Continuous gentle glow shimmer after write completes */
@keyframes glt-flyout-laser-glow {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(240, 165, 0, 0.6),
            0 0 9px rgba(240, 165, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 6px #ffe066,
            0 0 13px rgba(240, 165, 0, 0.8),
            0 0 20px rgba(240, 165, 0, 0.4);
    }
}

/* =====================================================================
   FLYOUT LASER FIX — scaleX approach (clip-path blocked by !important)
   2026-04-16 final
   ===================================================================== */

/* DEFAULT — collapsed (scaleX 0), invisible */
html body .twt-top-navigation-flyout .navigation-flyout-link::before,
html body .twt-top-navigation-flyout a.nav-link::before,
html body .twt-top-navigation-flyout .nav-link::before {
    content: "" !important;
    width: 22px !important;
    height: 2px !important;
    background: #f0a500 !important;
    background-image: none !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    border: none !important;
    flex-shrink: 0 !important;
    opacity: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    -webkit-transform-origin: left center !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    align-self: center !important;
    transition:
        opacity 0.15s ease,
        transform 0.18s ease,
        box-shadow 0.2s ease !important;
    animation: none !important;
    pointer-events: none !important;
}

/* HOVER — laser writes from left to right (scaleX 0 -> 1) + glow shimmer */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover::before,
html body .twt-top-navigation-flyout a.nav-link:hover::before,
html body .twt-top-navigation-flyout .nav-link:hover::before {
    opacity: 1 !important;
    transform: scaleX(1) !important;
    transition:
        opacity 0.18s ease,
        transform 0.42s cubic-bezier(0.45, 0, 0.25, 1) !important;
    animation: glt-flyout-laser-glow 1.6s ease-in-out 0.42s infinite !important;
}

/* Continuous gentle glow shimmer after write completes */
@keyframes glt-flyout-laser-glow {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(240, 165, 0, 0.6),
            0 0 9px rgba(240, 165, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 6px #ffe066,
            0 0 14px rgba(240, 165, 0, 0.85),
            0 0 22px rgba(240, 165, 0, 0.45);
    }
}

/* =====================================================================
   FLYOUT LASER UNDERLINE — Below the text only (2026-04-16)
   Replaces the left-side bar with a writing underline UNDER the text.
   Requires JS (wrapFlyoutText) to wrap text in <span class="glt-flyout-text">
   ===================================================================== */

/* Hide the previous left-side ::before laser bar */
html body .twt-top-navigation-flyout .navigation-flyout-link::before,
html body .twt-top-navigation-flyout a.nav-link::before,
html body .twt-top-navigation-flyout .nav-link::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

/* The wrapped text span needs to be inline-block + relative for the underline */
html body .twt-top-navigation-flyout .glt-flyout-text {
    position: relative !important;
    display: inline-block !important;
    line-height: 1.3 !important;
}

/* DEFAULT — invisible underline below the text */
html body .twt-top-navigation-flyout .glt-flyout-text::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -4px !important;
    width: 100% !important;
    height: 2px !important;
    background: #f0a500 !important;
    border-radius: 1px !important;
    opacity: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    -webkit-transform-origin: left center !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.2s ease !important;
    animation: none !important;
}

/* HOVER — laser writes from left to right, then gentle glow shimmer */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover .glt-flyout-text::after,
html body .twt-top-navigation-flyout a.nav-link:hover .glt-flyout-text::after,
html body .twt-top-navigation-flyout .nav-link:hover .glt-flyout-text::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
    transition:
        opacity 0.18s ease,
        transform 0.42s cubic-bezier(0.45, 0, 0.25, 1) !important;
    animation: glt-flyout-laser-glow 1.6s ease-in-out 0.42s infinite !important;
}

/* Continuous gentle glow shimmer (already defined earlier, redefine just in case) */
@keyframes glt-flyout-laser-glow {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(240, 165, 0, 0.6),
            0 0 9px rgba(240, 165, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 6px #ffe066,
            0 0 14px rgba(240, 165, 0, 0.85),
            0 0 22px rgba(240, 165, 0, 0.45);
    }
}

/* =====================================================================
   FLYOUT LASER UNDERLINE — Use existing span[itemprop="name"] (2026-04-16)
   No JS wrapping needed — Shopware already wraps flyout text in this span
   ===================================================================== */

/* Reset: hide the previous .glt-flyout-text approach */
html body .twt-top-navigation-flyout .glt-flyout-text::after {
    display: none !important;
    content: none !important;
}

/* The text span needs relative + inline-block for the underline */
html body .twt-top-navigation-flyout .navigation-flyout-link span[itemprop="name"],
html body .twt-top-navigation-flyout a.nav-link span[itemprop="name"],
html body .twt-top-navigation-flyout .nav-link span[itemprop="name"] {
    position: relative !important;
    display: inline-block !important;
    line-height: 1.3 !important;
}

/* DEFAULT — invisible underline below text */
html body .twt-top-navigation-flyout .navigation-flyout-link span[itemprop="name"]::after,
html body .twt-top-navigation-flyout a.nav-link span[itemprop="name"]::after,
html body .twt-top-navigation-flyout .nav-link span[itemprop="name"]::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -4px !important;
    width: 100% !important;
    height: 2px !important;
    background: #f0a500 !important;
    border-radius: 1px !important;
    opacity: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    -webkit-transform-origin: left center !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.2s ease !important;
    animation: none !important;
}

/* HOVER — laser writes from left to right + glow shimmer */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover span[itemprop="name"]::after,
html body .twt-top-navigation-flyout a.nav-link:hover span[itemprop="name"]::after,
html body .twt-top-navigation-flyout .nav-link:hover span[itemprop="name"]::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
    transition:
        opacity 0.18s ease,
        transform 0.42s cubic-bezier(0.45, 0, 0.25, 1) !important;
    animation: glt-flyout-laser-glow 1.6s ease-in-out 0.42s infinite !important;
}

/* =====================================================================
   FLYOUT THUMBNAILS — Show product image under text on hover (2026-04-16)
   ===================================================================== */

/* Convert links to vertical layout so thumbnail can sit under text */
html body .twt-top-navigation-flyout .navigation-flyout-link,
html body .twt-top-navigation-flyout a.nav-link,
html body .twt-top-navigation-flyout .nav-link {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* Thumbnail — hidden by default, animated reveal on hover */
html body .twt-top-navigation-flyout .glt-flyout-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 0 !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    display: block !important;
    pointer-events: none !important;
    transform: scale(0.96) !important;
    transform-origin: top center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(240, 165, 0, 0.15) !important;
    transition:
        max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease 0.05s,
        transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) 0.05s,
        margin-top 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s ease !important;
}

/* HOVER — thumbnail expands and fades in */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover .glt-flyout-thumb,
html body .twt-top-navigation-flyout a.nav-link:hover .glt-flyout-thumb,
html body .twt-top-navigation-flyout .nav-link:hover .glt-flyout-thumb {
    max-height: 110px !important;
    opacity: 1 !important;
    margin-top: 10px !important;
    transform: scale(1) !important;
    border-color: rgba(240, 165, 0, 0.45) !important;
}

/* Slightly tighter padding on links since they now contain images */
html body .twt-top-navigation-flyout .navigation-flyout-link,
html body .twt-top-navigation-flyout a.nav-link {
    padding: 8px 6px !important;
}

/* =====================================================================
   FLYOUT THUMBNAIL — Show full image, not cropped (2026-04-16)
   Override object-fit: cover with contain so the whole product is visible
   ===================================================================== */

html body .twt-top-navigation-flyout .glt-flyout-thumb {
    object-fit: contain !important;
    max-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 6px !important;
}

html body .twt-top-navigation-flyout .navigation-flyout-link:hover .glt-flyout-thumb,
html body .twt-top-navigation-flyout a.nav-link:hover .glt-flyout-thumb,
html body .twt-top-navigation-flyout .nav-link:hover .glt-flyout-thumb {
    max-height: 160px !important;
}

/* =====================================================================
   FLYOUT THUMBNAIL — Smoother animation (2026-04-16)
   Single ease-out-quint curve, synced timings, GPU-accelerated
   ===================================================================== */

html body .twt-top-navigation-flyout .glt-flyout-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    transform: translateY(-6px) scale(0.94) !important;
    transform-origin: center top !important;
    object-fit: contain !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 6px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(240, 165, 0, 0) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0) !important;
    display: block !important;
    pointer-events: none !important;
    will-change: max-height, opacity, transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    /* All properties share one smooth ease-out-quint curve and synced timings */
    transition:
        max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
        border-color 0.4s ease 0.1s,
        box-shadow 0.45s ease 0.1s !important;
    animation: none !important;
}

/* HOVER — single coordinated animation */
html body .twt-top-navigation-flyout .navigation-flyout-link:hover .glt-flyout-thumb,
html body .twt-top-navigation-flyout a.nav-link:hover .glt-flyout-thumb,
html body .twt-top-navigation-flyout .nav-link:hover .glt-flyout-thumb {
    max-height: 160px !important;
    opacity: 1 !important;
    margin-top: 10px !important;
    transform: translateY(0) scale(1) !important;
    border-color: rgba(240, 165, 0, 0.4) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Smoother layout shifts: when sibling items move, they should ease too */
html body .twt-top-navigation-flyout .navigation-flyout-link,
html body .twt-top-navigation-flyout a.nav-link {
    transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Make the flyout container expand smoothly when items grow */
html body .twt-top-navigation-flyout,
html body .dropdown-menu.twt-top-navigation-flyout {
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* =====================================================================
   ░░ PRODUCT DETAIL — HOMEPAGE-STYLE COMPLETE REDESIGN (2026-04-26) ░░
   Diagonal-Glass Hero · Alternating Sections · Final Gold-CTA
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   DESIGN TOKENS (scoped to product detail body class)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product {
    --ph-navy:        #0f284b;
    --ph-navy-deep:   #0a1e3a;
    --ph-navy-mid:    #1e3a5f;
    --ph-gold:        #E1B52E;
    --ph-gold-dark:   #c9a127;
    --ph-gold-bright: #ffd043;
    --ph-light:       #f8f9fa;
    --ph-text-dark:   rgba(255, 255, 255, 0.78);
    --ph-text-dark-soft: rgba(255, 255, 255, 0.6);
    --ph-text-strong: #1e3a5f;
    --ph-text-body:   #6a7a8a;
    --ph-glass:       rgba(255, 255, 255, 0.05);
    --ph-glass-border: rgba(255, 255, 255, 0.1);
    --ph-card-shadow: 0 4px 14px rgba(15, 40, 75, 0.06);
    --ph-card-shadow-hover: 0 14px 36px rgba(15, 40, 75, 0.12);
}

/* ─────────────────────────────────────────────────────────────────────
   HIDE DEFAULT SHOPWARE BLOCKS (replaced by hero)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .product-detail-name,
html body.is-ctl-product h1.product-detail-name,
html body.is-ctl-product .product-detail-buy,
html body.is-ctl-product div[class^="product-detail-buy-"],
html body.is-ctl-product div[class*=" product-detail-buy-"],
html body.is-ctl-product .product-detail-ordernumber-container {
    display: none !important;
}

/* Move default media offscreen so gallery JS still works,
   but it's not visible on page */
html body.is-ctl-product .product-detail-main > .row > .product-detail-media,
html body.is-ctl-product .product-detail-main > .row > .col-lg-7,
html body.is-ctl-product .product-detail-main > .row > .col-md-7 {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Make the main row collapsed so the hero takes over */
html body.is-ctl-product .product-detail-main > .row {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Get rid of the empty container space the row would leave */
html body.is-ctl-product .product-detail-main {
    padding: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO SECTION — Diagonal Glass Split (mirrors homepage)
   ───────────────────────────────────────────────────────────────────── */
.glt-product-hero {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: linear-gradient(135deg, #0a1e3a 0%, #0f284b 50%, #1e3a5f 100%) !important;
    padding: 100px 0 120px !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
}

.glt-product-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -300px !important;
    right: -200px !important;
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(circle, rgba(225, 181, 46, 0.12) 0%, transparent 60%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.glt-product-hero::after {
    content: '' !important;
    position: absolute !important;
    bottom: -100px !important;
    left: -200px !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(225, 181, 46, 0.05) 0%, transparent 60%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.glt-hero-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    display: grid !important;
    grid-template-columns: 47% 53% !important;
    align-items: center !important;
    gap: 30px !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 540px !important;
}

/* LEFT — Diagonal glass card with content */
.glt-hero-glass {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 60px 70px 60px 50px !important;
    clip-path: polygon(0 0, 92% 0, 78% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, 92% 0, 78% 100%, 0 100%) !important;
    position: relative !important;
    margin-left: -10px !important;
}

/* A sitewide `h1,h2,h3...{font-weight:600 !important}` rule elsewhere beats
   glt-content.css's `.glt-hero h1{font-weight:800}` (glt-content.css never uses
   !important), so Blog/Videos/Info headings rendered semi-bold instead of the
   intended extra-bold -- reassert here to match GLT-Lasersysteme's h1. */
.glt-hero h1 { font-weight: 800 !important; }

/* Old subtle-pill eyebrow design (11px, gold-08%-bg chip) removed -- it was an
   unscoped bare-class rule with !important, silently beating glt-content.css's
   current dash-style .glt-hero-eyebrow (13px, gradient lines, no fill) on
   Blog/Videos/Info since glt-content.css doesn't use !important. Removing lets
   the dash style (matching GLT-Lasersysteme) render as authored everywhere. */

.glt-hero-title {
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 18px !important;
    text-shadow: none !important;
}

.glt-hero-title .glt-hero-accent {
    color: var(--ph-gold) !important;
    display: block !important;
}

.glt-hero-tagline {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    margin: 0 0 28px !important;
    max-width: 420px !important;
}

.glt-hero-bullets {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px !important;
}

.glt-hero-bullets li {
    position: relative !important;
    padding: 7px 0 7px 32px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    list-style: none !important;
}

.glt-hero-bullets li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 11px !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--ph-gold) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 14px rgba(225, 181, 46, 0.4) !important;
}

.glt-hero-bullets li::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 15px !important;
    width: 10px !important;
    height: 5px !important;
    border-left: 2px solid var(--ph-navy-deep) !important;
    border-bottom: 2px solid var(--ph-navy-deep) !important;
    transform: rotate(-45deg) !important;
}

.glt-hero-made-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    margin-bottom: 28px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}

.glt-hero-made-pill .glt-flag-de {
    display: inline-block !important;
    width: 22px !important;
    height: 14px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: linear-gradient(to bottom, #000 0%, #000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCC00 66.66%, #FFCC00 100%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.glt-hero-cta-row {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
}

.glt-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 30px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

.glt-hero-cta--primary {
    background: var(--ph-gold) !important;
    color: var(--ph-navy-deep) !important;
    border: 2px solid var(--ph-gold) !important;
}

.glt-hero-cta--primary:hover {
    background: var(--ph-gold-dark) !important;
    border-color: var(--ph-gold-dark) !important;
    color: var(--ph-navy-deep) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(225, 181, 46, 0.4) !important;
}

.glt-hero-cta--ghost {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.glt-hero-cta--ghost:hover {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* RIGHT — Hero image */
.glt-hero-image-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.glt-hero-image-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at center, rgba(225, 181, 46, 0.12) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

.glt-hero-image-wrap img {
    max-width: 100% !important;
    max-height: 480px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 80px rgba(225, 181, 46, 0.1)) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   INFO STRIP — 4 cards on light bg
   ───────────────────────────────────────────────────────────────────── */
.glt-info-strip {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: var(--ph-light) !important;
    padding: 50px 0 !important;
    position: relative !important;
    z-index: 1 !important;
    border-bottom: 1px solid rgba(15, 40, 75, 0.06) !important;
}

.glt-info-strip-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}

.glt-info-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 24px 26px !important;
    border-top: 3px solid var(--ph-gold) !important;
    box-shadow: var(--ph-card-shadow) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.glt-info-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ph-card-shadow-hover) !important;
}

.glt-info-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: rgba(225, 181, 46, 0.12) !important;
    color: var(--ph-gold-dark) !important;
    margin-bottom: 12px !important;
}

.glt-info-card small {
    display: block !important;
    color: var(--ph-text-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.glt-info-card strong {
    display: block !important;
    color: var(--ph-text-strong) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
}

.glt-info-card em {
    display: block !important;
    color: var(--ph-text-body) !important;
    font-size: 13px !important;
    font-style: normal !important;
    line-height: 1.4 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TABS — dark navy bg + gold underline
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .product-detail-tabs {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: var(--ph-navy) !important;
    padding: 0 !important;
    border: none !important;
}

html body.is-ctl-product .product-detail-tabs-navigation,
html body.is-ctl-product ul.nav-tabs.product-detail-tabs-navigation,
html body.is-ctl-product .product-detail-tabs > .nav,
html body.is-ctl-product .nav-tabs {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    border: none !important;
    background: transparent !important;
}

html body.is-ctl-product .product-detail-tabs .nav-link,
html body.is-ctl-product .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.55) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    padding: 22px 28px !important;
    transition: all 0.25s ease !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

html body.is-ctl-product .product-detail-tabs .nav-link:hover {
    color: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(225, 181, 46, 0.35) !important;
}

html body.is-ctl-product .product-detail-tabs .nav-link.active,
html body.is-ctl-product .nav-tabs .nav-link.active {
    color: var(--ph-gold) !important;
    border-bottom-color: var(--ph-gold) !important;
    background: transparent !important;
}

/* TAB CONTENT — full width, transparent so sections show their bg */
html body.is-ctl-product .product-detail-tabs-content,
html body.is-ctl-product .product-detail-tabs > .card-body,
html body.is-ctl-product .product-detail-tabs.card,
html body.is-ctl-product .card.product-detail-tabs {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* The .tab-pane white-bg pain-point — multiple very specific selectors */
html body.is-ctl-product div.tab-pane,
html body.is-ctl-product div.tab-pane.fade,
html body.is-ctl-product div.tab-pane.show,
html body.is-ctl-product div.tab-pane.active,
html body.is-ctl-product div.tab-pane.fade.show,
html body.is-ctl-product div.tab-pane.fade.show.active,
html body.is-ctl-product .tab-pane[role="tabpanel"],
html body.is-ctl-product div.tab-pane#description-tab-pane,
html body.is-ctl-product div#description-tab-pane.tab-pane.fade.show.active {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Hide the "Produktinformationen 'XYZ'" auto heading */
html body.is-ctl-product .product-detail-description-title,
html body.is-ctl-product .tab-pane > h3:first-child,
html body.is-ctl-product .tab-pane h3.product-detail-description-title {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   GLT PRODUCT CONTENT WRAPPER (sits inside tab-pane)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-product-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--ph-text-strong) !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: none !important;
}

html body.is-ctl-product .glt-product-content::before,
html body.is-ctl-product .glt-product-content::after {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   SECTION BASE — alternating dark/light, full-width
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section {
    width: 100vw !important;
    margin: 0 0 0 calc(-50vw + 50%) !important;
    padding: 90px 0 !important;
    position: relative !important;
}

html body.is-ctl-product .glt-section-inner {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
}

/* If twig didn't render glt-section-inner wrappers, add fallback */
html body.is-ctl-product .glt-section > *:not(.glt-section-inner) {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}

html body.is-ctl-product .glt-section > .glt-section-inner > *:not(.glt-section-inner) {
    /* re-allow children of inner to be full-width within inner */
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== DARK SECTIONS ===== */
html body.is-ctl-product .glt-section--dark {
    background: linear-gradient(135deg, #0a1e3a 0%, #0f284b 50%, #1e3a5f 100%) !important;
    color: var(--ph-text-dark) !important;
}

html body.is-ctl-product .glt-section--dark::before {
    content: '' !important;
    position: absolute !important;
    top: -150px !important;
    right: -150px !important;
    width: 400px !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(225, 181, 46, 0.07) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

html body.is-ctl-product .glt-section--dark h2 {
    color: #ffffff !important;
}

html body.is-ctl-product .glt-section--dark h3,
html body.is-ctl-product .glt-section--dark h4 {
    color: var(--ph-gold) !important;
}

html body.is-ctl-product .glt-section--dark p,
html body.is-ctl-product .glt-section--dark li {
    color: var(--ph-text-dark) !important;
}

html body.is-ctl-product .glt-section--dark strong {
    color: #ffffff !important;
}

/* ===== LIGHT SECTIONS ===== */
html body.is-ctl-product .glt-section--light {
    background: var(--ph-light) !important;
    color: var(--ph-text-body) !important;
}

html body.is-ctl-product .glt-section--light h2,
html body.is-ctl-product .glt-section--light h3,
html body.is-ctl-product .glt-section--light h4 {
    color: var(--ph-text-strong) !important;
}

html body.is-ctl-product .glt-section--light p,
html body.is-ctl-product .glt-section--light li {
    color: var(--ph-text-body) !important;
}

html body.is-ctl-product .glt-section--light strong {
    color: var(--ph-text-strong) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   COMMON HEADINGS
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 28px !important;
    padding-bottom: 22px !important;
    position: relative !important;
    text-shadow: none !important;
    max-width: 800px !important;
}

html body.is-ctl-product .glt-section h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 80px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--ph-gold) 0%, transparent 100%) !important;
    border-radius: 2px !important;
}

html body.is-ctl-product .glt-section h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 2.5rem 0 1.2rem !important;
}

html body.is-ctl-product .glt-section h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
}

html body.is-ctl-product .glt-section p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    margin: 0 0 1rem !important;
    text-shadow: none !important;
}

html body.is-ctl-product .glt-section .glt-section-lead {
    font-size: 18px !important;
    line-height: 1.65 !important;
    margin-bottom: 2.5rem !important;
    max-width: 800px !important;
}

html body.is-ctl-product .glt-section--dark .glt-section-lead {
    color: rgba(255, 255, 255, 0.85) !important;
}

html body.is-ctl-product .glt-section--light .glt-section-lead {
    color: var(--ph-text-strong) !important;
}

/* Eyebrow inside sections */
html body.is-ctl-product .glt-section .glt-eyebrow {
    display: inline-block !important;
    color: var(--ph-gold-dark) !important;
    background: rgba(225, 181, 46, 0.08) !important;
    border: 1px solid rgba(225, 181, 46, 0.3) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    margin-bottom: 20px !important;
}

html body.is-ctl-product .glt-section--dark .glt-eyebrow {
    color: var(--ph-gold) !important;
    background: rgba(225, 181, 46, 0.06) !important;
    border-color: rgba(225, 181, 46, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   INTRO SECTION (image + text grid)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-intro-grid {
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

html body.is-ctl-product .glt-section .glt-intro-image img {
    width: 100% !important;
    border-radius: 16px !important;
    display: block !important;
}

html body.is-ctl-product .glt-section--dark .glt-intro-image img {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(225, 181, 46, 0.18), 0 0 80px rgba(225, 181, 46, 0.05) !important;
}

html body.is-ctl-product .glt-section--light .glt-intro-image img {
    box-shadow: 0 18px 40px rgba(15, 40, 75, 0.12), 0 1px 3px rgba(15, 40, 75, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   CONTENT IMAGES (single, centered)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-content-img {
    display: block !important;
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    margin: 2rem auto !important;
    border-radius: 14px !important;
}

html body.is-ctl-product .glt-section--dark .glt-content-img {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(225, 181, 46, 0.2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 12px !important;
}

html body.is-ctl-product .glt-section--light .glt-content-img {
    box-shadow: 0 14px 36px rgba(15, 40, 75, 0.1), 0 0 0 1px rgba(15, 40, 75, 0.08) !important;
    background: #ffffff !important;
    padding: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   SPECS GRID (Abmessungen)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-specs-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    margin-top: 2.5rem !important;
}

html body.is-ctl-product .glt-section .glt-spec {
    padding: 28px !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
}

html body.is-ctl-product .glt-section--dark .glt-spec {
    background: var(--ph-glass) !important;
    border: 1px solid var(--ph-glass-border) !important;
    backdrop-filter: blur(8px) !important;
}

html body.is-ctl-product .glt-section--dark .glt-spec:hover {
    border-color: rgba(225, 181, 46, 0.4) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 0 30px rgba(225, 181, 46, 0.15) !important;
}

html body.is-ctl-product .glt-section--light .glt-spec {
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.06) !important;
    box-shadow: var(--ph-card-shadow) !important;
}

html body.is-ctl-product .glt-section--light .glt-spec:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--ph-card-shadow-hover) !important;
    border-color: rgba(225, 181, 46, 0.3) !important;
}

html body.is-ctl-product .glt-section .glt-spec-label {
    display: block !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}

html body.is-ctl-product .glt-section--dark .glt-spec-label {
    color: var(--ph-text-dark-soft) !important;
}

html body.is-ctl-product .glt-section--light .glt-spec-label {
    color: var(--ph-text-body) !important;
}

html body.is-ctl-product .glt-section .glt-spec-value {
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

html body.is-ctl-product .glt-section--dark .glt-spec-value {
    color: #ffffff !important;
}

html body.is-ctl-product .glt-section--light .glt-spec-value {
    color: var(--ph-text-strong) !important;
}

html body.is-ctl-product .glt-section .glt-spec-meta {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

html body.is-ctl-product .glt-section--dark .glt-spec-meta {
    color: rgba(255, 255, 255, 0.65) !important;
}

html body.is-ctl-product .glt-section--light .glt-spec-meta {
    color: var(--ph-text-body) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   CHECKLIST
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-checklist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
    gap: 16px 30px !important;
}

html body.is-ctl-product .glt-section .glt-checklist li {
    position: relative !important;
    padding-left: 34px !important;
    line-height: 1.55 !important;
    font-size: 15px !important;
    list-style: none !important;
}

html body.is-ctl-product .glt-section .glt-checklist li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--ph-gold) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(225, 181, 46, 0.4) !important;
}

html body.is-ctl-product .glt-section .glt-checklist li::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 9px !important;
    width: 10px !important;
    height: 5px !important;
    border-left: 2px solid var(--ph-navy-deep) !important;
    border-bottom: 2px solid var(--ph-navy-deep) !important;
    transform: rotate(-45deg) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   OPTIONS LIST (2 cols, dash markers)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-options-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    columns: 2 !important;
    column-gap: 40px !important;
}

html body.is-ctl-product .glt-section .glt-options-list li {
    position: relative !important;
    padding: 10px 0 10px 24px !important;
    font-size: 15px !important;
    break-inside: avoid !important;
    list-style: none !important;
}

html body.is-ctl-product .glt-section--dark .glt-options-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html body.is-ctl-product .glt-section--light .glt-options-list li {
    border-bottom: 1px solid rgba(15, 40, 75, 0.08) !important;
}

html body.is-ctl-product .glt-section .glt-options-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 19px !important;
    width: 14px !important;
    height: 2px !important;
    background: var(--ph-gold) !important;
    border-radius: 1px !important;
}

/* Callout box */
html body.is-ctl-product .glt-section .glt-callout {
    display: flex !important;
    gap: 18px !important;
    align-items: flex-start !important;
    background: linear-gradient(135deg, rgba(225, 181, 46, 0.1) 0%, rgba(225, 181, 46, 0.03) 100%) !important;
    border: 1px solid rgba(225, 181, 46, 0.35) !important;
    border-radius: 14px !important;
    padding: 22px 26px !important;
    margin-top: 2.5rem !important;
}

html body.is-ctl-product .glt-section .glt-callout svg {
    color: var(--ph-gold-dark) !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

html body.is-ctl-product .glt-section .glt-callout p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   MATERIALS GRID (3 cols)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-materials-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 22px !important;
    margin-top: 2.5rem !important;
}

html body.is-ctl-product .glt-section .glt-material-col {
    padding: 32px !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

html body.is-ctl-product .glt-section--dark .glt-material-col {
    background: var(--ph-glass) !important;
    border: 1px solid var(--ph-glass-border) !important;
    backdrop-filter: blur(8px) !important;
}

html body.is-ctl-product .glt-section--dark .glt-material-col:hover {
    border-color: rgba(225, 181, 46, 0.4) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 0 30px rgba(225, 181, 46, 0.15) !important;
}

html body.is-ctl-product .glt-section--light .glt-material-col {
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.06) !important;
    box-shadow: var(--ph-card-shadow) !important;
}

html body.is-ctl-product .glt-section--light .glt-material-col:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ph-card-shadow-hover) !important;
    border-color: rgba(225, 181, 46, 0.3) !important;
}

html body.is-ctl-product .glt-section .glt-material-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--ph-gold) 0%, var(--ph-gold-dark) 100%) !important;
    color: var(--ph-navy-deep) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 22px !important;
    box-shadow: 0 8px 22px rgba(225, 181, 46, 0.25) !important;
}

html body.is-ctl-product .glt-section .glt-material-col h4 {
    margin: 0 0 18px !important;
    padding-bottom: 14px !important;
    font-size: 19px !important;
}

html body.is-ctl-product .glt-section--dark .glt-material-col h4 {
    border-bottom: 1px solid rgba(225, 181, 46, 0.25) !important;
}

html body.is-ctl-product .glt-section--light .glt-material-col h4 {
    border-bottom: 1px solid rgba(15, 40, 75, 0.1) !important;
}

html body.is-ctl-product .glt-section .glt-material-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body.is-ctl-product .glt-section .glt-material-col li {
    padding-left: 20px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    list-style: none !important;
}

html body.is-ctl-product .glt-section .glt-material-col li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    width: 7px !important;
    height: 7px !important;
    background: var(--ph-gold) !important;
    border-radius: 50% !important;
}

/* ─────────────────────────────────────────────────────────────────────
   MARKIERFELD GRID
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-markierfeld-sizes {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    margin: 2rem 0 !important;
}

html body.is-ctl-product .glt-section .glt-markierfeld-sizes figure {
    margin: 0 !important;
    text-align: center !important;
    padding: 22px 16px !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
}

html body.is-ctl-product .glt-section--dark .glt-markierfeld-sizes figure {
    background: var(--ph-glass) !important;
    border: 1px solid var(--ph-glass-border) !important;
}

html body.is-ctl-product .glt-section--light .glt-markierfeld-sizes figure {
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.06) !important;
    box-shadow: var(--ph-card-shadow) !important;
}

html body.is-ctl-product .glt-section .glt-markierfeld-sizes figure:hover {
    transform: translateY(-5px) !important;
    border-color: var(--ph-gold) !important;
}

html body.is-ctl-product .glt-section--dark .glt-markierfeld-sizes figure:hover {
    box-shadow: 0 0 30px rgba(225, 181, 46, 0.2) !important;
}

html body.is-ctl-product .glt-section--light .glt-markierfeld-sizes figure:hover {
    box-shadow: 0 14px 36px rgba(225, 181, 46, 0.15) !important;
}

html body.is-ctl-product .glt-section .glt-markierfeld-sizes img {
    width: 75% !important;
    max-width: 90px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

html body.is-ctl-product .glt-section .glt-markierfeld-sizes figcaption {
    margin-top: 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

html body.is-ctl-product .glt-section--dark .glt-markierfeld-sizes figcaption {
    color: var(--ph-gold) !important;
}

html body.is-ctl-product .glt-section--light .glt-markierfeld-sizes figcaption {
    color: var(--ph-text-strong) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   TECH GRID (image + text split)
   ───────────────────────────────────────────────────────────────────── */
html body.is-ctl-product .glt-section .glt-tech-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

html body.is-ctl-product .glt-section .glt-tech-grid--reverse {
    grid-template-columns: 1.1fr 1fr !important;
}

html body.is-ctl-product .glt-section .glt-tech-grid--reverse .glt-tech-image {
    order: 2 !important;
}

html body.is-ctl-product .glt-section .glt-tech-image img {
    width: 100% !important;
    border-radius: 16px !important;
    display: block !important;
}

html body.is-ctl-product .glt-section--dark .glt-tech-image img {
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(225, 181, 46, 0.2) !important;
}

html body.is-ctl-product .glt-section--light .glt-tech-image img {
    box-shadow: 0 14px 40px rgba(15, 40, 75, 0.12), 0 0 0 1px rgba(15, 40, 75, 0.08) !important;
}

/* Inline checklist (drunter im Galvanometer) */
html body.is-ctl-product .glt-section .glt-checklist--inline {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px 24px !important;
    margin-top: 1.5rem !important;
}

html body.is-ctl-product .glt-section .glt-checklist--inline li {
    font-size: 14px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   FINAL CTA — Gold gradient with diagonal cut top
   ───────────────────────────────────────────────────────────────────── */
.glt-final-cta {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: linear-gradient(135deg, #c9a127 0%, #E1B52E 50%, #ffd043 100%) !important;
    padding: 130px 0 110px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    color: var(--ph-navy-deep) !important;
}

.glt-final-cta::before {
    content: '' !important;
    position: absolute !important;
    top: -200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    height: 400px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

.glt-final-cta-inner {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    position: relative !important;
    z-index: 2 !important;
}

.glt-final-cta h2 {
    color: var(--ph-navy-deep) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
    margin: 0 0 20px !important;
    padding-bottom: 0 !important;
    text-shadow: none !important;
}

.glt-final-cta h2::after {
    display: none !important;
}

.glt-final-cta p {
    color: rgba(10, 30, 58, 0.85) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin: 0 auto 36px !important;
    max-width: 580px !important;
}

.glt-final-cta-row {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.glt-final-cta .glt-hero-cta--primary {
    background: var(--ph-navy-deep) !important;
    color: #ffffff !important;
    border: 2px solid var(--ph-navy-deep) !important;
}

.glt-final-cta .glt-hero-cta--primary:hover {
    background: var(--ph-navy) !important;
    border-color: var(--ph-navy) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(10, 30, 58, 0.4) !important;
}

.glt-final-cta .glt-hero-cta--ghost {
    background: transparent !important;
    color: var(--ph-navy-deep) !important;
    border: 2px solid rgba(10, 30, 58, 0.4) !important;
}

.glt-final-cta .glt-hero-cta--ghost:hover {
    border-color: var(--ph-navy-deep) !important;
    background: rgba(10, 30, 58, 0.08) !important;
    color: var(--ph-navy-deep) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    html body.is-ctl-product .glt-product-hero {
        padding: 70px 0 80px !important;
    }
    .glt-hero-inner {
        /* plain "1fr" has an implicit min-width:auto, so a wide image (or other
           intrinsically-sized content) in this column can force the whole grid
           track WIDER than the container -> horizontal overflow. minmax(0, 1fr)
           removes that implicit minimum so the track (and the image inside it)
           actually shrinks to fit. */
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 40px !important;
    }
    .glt-hero-glass {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        padding: 40px 32px !important;
        border-radius: 16px !important;
        margin-left: 0 !important;
    }
    .glt-hero-image-wrap img {
        max-height: 360px !important;
    }
    .glt-hero-title {
        font-size: 42px !important;
    }
    html body.is-ctl-product .glt-section h2 {
        font-size: 32px !important;
    }
    html body.is-ctl-product .glt-section .glt-intro-grid,
    html body.is-ctl-product .glt-section .glt-tech-grid,
    html body.is-ctl-product .glt-section .glt-tech-grid--reverse {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    html body.is-ctl-product .glt-section .glt-tech-grid--reverse .glt-tech-image {
        order: 0 !important;
    }
    html body.is-ctl-product .glt-section .glt-options-list {
        columns: 1 !important;
    }
    html body.is-ctl-product .glt-section .glt-markierfeld-sizes {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .glt-info-strip-inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .glt-hero-title {
        font-size: 34px !important;
    }
    .glt-info-strip-inner {
        grid-template-columns: 1fr !important;
    }
    html body.is-ctl-product .glt-section {
        padding: 60px 0 !important;
    }
    html body.is-ctl-product .glt-section h2 {
        font-size: 26px !important;
    }
    .glt-final-cta h2 {
        font-size: 30px !important;
    }
    .glt-hero-cta {
        width: 100% !important;
    }
}

/* =====================================================================
   CMS-LAYOUT-AWARE FIX (2026-04-26)
   Real DOM uses .cms-block-container-row, not .product-detail-main.
   ===================================================================== */

/* Hide the entire CMS row that contains gallery + buy-box on detail page */
html body.is-ctl-product .cms-block:has(.product-detail-media),
html body.is-ctl-product .cms-block:has(.product-detail-buy) {
    display: none !important;
}

/* Also hide the cms-element-product-name (default title block) */
html body.is-ctl-product .cms-element-product-name {
    display: none !important;
}

/* Reset the absolute positioning fallback we had before — not needed now */
html body.is-ctl-product .product-detail-main > .row > .product-detail-media,
html body.is-ctl-product .product-detail-main > .row > .col-lg-7,
html body.is-ctl-product .product-detail-main > .row > .col-md-7 {
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* =====================================================================
   IMAGE SIZING FIX (2026-04-26)
   The .glt-section-inner > * override unintentionally undoes max-width
   on .glt-content-img and other media. Re-constrain explicitly.
   ===================================================================== */

html body.is-ctl-product .glt-section .glt-section-inner .glt-content-img,
html body.is-ctl-product .glt-section-inner img.glt-content-img {
    max-width: 680px !important;
    width: 100% !important;
    margin: 2rem auto !important;
    display: block !important;
}

/* The markierfeld grid images (small squares) — keep them small */
html body.is-ctl-product .glt-section .glt-markierfeld-sizes img {
    max-width: 90px !important;
    width: 75% !important;
}

/* Tech grid images (image+text split) full width within their column */
html body.is-ctl-product .glt-section .glt-section-inner .glt-tech-image img {
    max-width: 100% !important;
    width: 100% !important;
}

/* Intro grid image */
html body.is-ctl-product .glt-section .glt-section-inner .glt-intro-image img {
    max-width: 100% !important;
    width: 100% !important;
}

/* =====================================================================
   HERO EXTENSION FIX (2026-04-26)
   1) Pull hero UP under the menu (no white gap)
   2) Diagonal Glass extends to viewport-LEFT edge
   3) Glass goes UP behind the (semi-transparent) header
   ===================================================================== */

/* Remove top padding from the cms-section that contains the hero */
html body.is-ctl-product main .cms-section:first-of-type,
html body.is-ctl-product .cms-page .cms-sections .cms-section:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Pull hero up under the fixed header & extend padding for content */
html body.is-ctl-product .glt-product-hero {
    margin-top: -75px !important;       /* pull up under the 75px header */
    padding-top: 160px !important;      /* keep content below header bottom */
    padding-bottom: 100px !important;
    overflow: visible !important;       /* let glass extend if needed */
}

/* Glass card: extend to viewport-left edge */
html body.is-ctl-product .glt-hero-glass {
    position: relative !important;
    /* push left edge to viewport (negative margin spans gutter + container half) */
    margin-left: calc(-1 * (50vw - 50%)) !important;
    /* compensate width so the right edge stays where it was (in the column) */
    width: calc(100% + (50vw - 50%)) !important;
    max-width: none !important;
    /* keep visual content where it was: pad left enough so text starts at the column position */
    padding-left: calc((50vw - 50%) + 50px) !important;
    padding-right: 110px !important;
    padding-top: 50px !important;
    padding-bottom: 60px !important;
    /* extend clip-path so diagonal still cuts the right edge */
    clip-path: polygon(0 0, calc(100% - 100px) 0, calc(100% - 250px) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 100px) 0, calc(100% - 250px) 100%, 0 100%) !important;
}

/* Make sure the inner grid container's content stays above the glass z-index */
html body.is-ctl-product .glt-hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Make the glass cover full visible height (including overflow up to header) */
html body.is-ctl-product .glt-hero-glass {
    z-index: 1 !important;
}

/* Mobile: revert the extending behavior (use normal padding) */
@media (max-width: 1100px) {
    html body.is-ctl-product .glt-product-hero {
        margin-top: 0 !important;
        padding-top: 80px !important;
    }
    html body.is-ctl-product .glt-hero-glass {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 40px 32px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
}

/* =====================================================================
   HERO GAP CLOSE FIX (2026-04-26)
   Pull hero further up to fully cover the area under the header
   ===================================================================== */

/* Remove all padding/margin from any wrapper that adds space above hero */
html body.is-ctl-product .cms-page,
html body.is-ctl-product .cms-sections,
html body.is-ctl-product main .cms-section:first-of-type,
html body.is-ctl-product main .cms-section.cms-section-default {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove any top padding on .content-main that creates space under fixed header */
html body.is-ctl-product .content-main,
html body.is-ctl-product main.content-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Pull hero further up to fully close the gap */
html body.is-ctl-product .glt-product-hero {
    margin-top: -120px !important;       /* extends ~120px under the header */
    padding-top: 175px !important;       /* keep content below header bottom */
    padding-bottom: 110px !important;
}

/* Glass: extend to viewport-LEFT and UP behind menu */
html body.is-ctl-product .glt-hero-glass {
    /* expand UP into the negative-margin region */
    margin-top: -50px !important;
    padding-top: 90px !important;
}

@media (max-width: 1100px) {
    html body.is-ctl-product .glt-product-hero {
        margin-top: 0 !important;
        padding-top: 80px !important;
    }
    html body.is-ctl-product .glt-hero-glass {
        margin-top: 0 !important;
        padding-top: 40px !important;
    }
}

/* =====================================================================
   DIAGONAL ADJUST (2026-04-26)
   Make the diagonal cut less aggressive so text doesn't get clipped.
   Move cut further to the right + give text more right-padding clearance.
   ===================================================================== */

html body.is-ctl-product .glt-hero-glass {
    /* More right-padding so text wraps before the diagonal */
    padding-right: 220px !important;
    /* Diagonal: cut further right (smaller subtraction = closer to 100%) */
    clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 140px) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 140px) 100%, 0 100%) !important;
}

@media (max-width: 1100px) {
    html body.is-ctl-product .glt-hero-glass {
        padding-right: 32px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
}

/* =====================================================================
   HERO TEXT WIDTH FIX (2026-04-26)
   Give the hero text more horizontal breathing room.
   ===================================================================== */

/* Reduce right padding inside glass so text uses more width */
html body.is-ctl-product .glt-hero-glass {
    padding-right: 120px !important;
}

/* Remove max-width constraints on tagline so it uses available width */
html body.is-ctl-product .glt-hero-tagline {
    max-width: none !important;
}

/* Bullets too — let them use full available width */
html body.is-ctl-product .glt-hero-bullets li {
    max-width: none !important;
    padding-right: 20px !important;
}

/* Adjust diagonal cut to compensate for new padding */
html body.is-ctl-product .glt-hero-glass {
    clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 110px) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 110px) 100%, 0 100%) !important;
}

/* Slightly more left padding so text starts a bit further right (cleaner alignment) — adjust if needed */
html body.is-ctl-product .glt-hero-glass {
    padding-left: calc((50vw - 50%) + 70px) !important;
}

@media (max-width: 1100px) {
    html body.is-ctl-product .glt-hero-glass {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* =====================================================================
   HERO SIMPLIFY (2026-04-26) — clean wide layout, no calc() tricks
   ===================================================================== */

/* New grid: 60% text, 40% image — gives text proper breathing room */
html body.is-ctl-product .glt-hero-inner {
    grid-template-columns: 1.55fr 1fr !important;
    gap: 50px !important;
    max-width: 1380px !important;
    padding: 0 50px !important;
}

/* Glass: simpler — sits in the grid cell, but extends to viewport-left for the diagonal */
html body.is-ctl-product .glt-hero-glass {
    /* extend LEFT to viewport edge using simple negative margin */
    margin-left: calc(-50vw + 50%) !important;
    width: calc(100% + (50vw - 50%)) !important;
    /* simple padding from container's left edge */
    padding-left: calc((50vw - 50%) + 50px) !important;
    padding-right: 60px !important;
    padding-top: 90px !important;
    padding-bottom: 60px !important;
    margin-top: -50px !important;
    /* simpler diagonal that doesn't cut text */
    clip-path: polygon(0 0, calc(100% - 20px) 0, calc(100% - 80px) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, calc(100% - 80px) 100%, 0 100%) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
}

/* BIGGER text — make the hero feel premium */
html body.is-ctl-product .glt-hero-title {
    font-size: 64px !important;
    line-height: 1 !important;
    margin-bottom: 22px !important;
}

html body.is-ctl-product .glt-hero-tagline {
    font-size: 20px !important;
    line-height: 1.5 !important;
    max-width: 600px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    margin-bottom: 32px !important;
}

html body.is-ctl-product .glt-hero-bullets li {
    font-size: 16px !important;
    max-width: 580px !important;
    padding-right: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Image is positioned naturally in the right grid cell */
html body.is-ctl-product .glt-hero-image-wrap {
    padding: 0 !important;
}

html body.is-ctl-product .glt-hero-image-wrap img {
    max-height: 540px !important;
}

@media (max-width: 1100px) {
    html body.is-ctl-product .glt-hero-inner {
        /* minmax(0, 1fr), not plain 1fr: a plain 1fr track has an implicit
           min-width:auto, so on products whose hero image is intrinsically wide
           the track (and image) get pushed wider than the viewport instead of
           shrinking to fit -> horizontal overflow/clipped text (seen on the
           Gebrauchte & Vorführgeräte page). minmax(0, ...) removes that floor. */
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
        padding: 0 24px !important;
    }
    html body.is-ctl-product .glt-hero-glass {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 32px 24px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        text-align: center !important;
        /* .glt-hero-glass is display:flex/flex-direction:column (desktop), with
           align-items:flex-start -> every child (eyebrow, title, tagline...) shrinks
           to its own text width and sits pinned to the LEFT of the column, so
           text-align:center alone had nothing to center within. Center the flex
           items themselves so each shrink-wrapped box sits in the middle. */
        align-items: center !important;
    }
    /* The "::before" glass-shine layer carries its OWN diagonal clip-path (separate
       from .glt-hero-glass's own clip-path above) -> resetting the box's clip-path
       alone left this diagonal sliver visible on mobile. Hide it entirely; the
       flattened mobile hero has no glass-card visual to shine on. */
    html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass::before {
        display: none !important;
    }
    html body.is-ctl-product .glt-hero-title {
        font-size: 42px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Long single-word product names (e.g. "GEBRAUCHTGERÄTE") can be wider than
           this box at 42px; let them break instead of overflowing past the edge. */
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    html body.is-ctl-product .glt-hero-tagline {
        font-size: 17px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body.is-ctl-product .glt-hero-eyebrow {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Checklist: center each row as a whole (icon+text stay paired) instead of
       centering the text alone, which would strand the icon at the left edge */
    html body.is-ctl-product .glt-hero-bullets {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    html body.is-ctl-product .glt-hero-bullets li {
        text-align: left !important;
    }
    html body.is-ctl-product .glt-hero-made-pill {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    html body.is-ctl-product .glt-hero-cta-row {
        justify-content: center !important;
    }
}

/* =====================================================================
   GLASS FULL HEIGHT + TEXT TOP PADDING (2026-04-26)
   ===================================================================== */

/* Glass extends UP to match the hero background height */
html body.is-ctl-product .glt-hero-glass {
    /* Match hero margin-top (-120) + grid offset (padding-top of hero=175) so glass top = hero top */
    margin-top: -175px !important;
    /* More top padding so text starts comfortably below the (translucent) header */
    padding-top: 220px !important;
    padding-bottom: 70px !important;
}

/* Hero padding-top a bit more for headroom on content */
html body.is-ctl-product .glt-product-hero {
    padding-top: 0 !important;       /* hero padding goes to 0 since glass handles its own */
    padding-bottom: 110px !important;
}

@media (max-width: 1100px) {
    html body.is-ctl-product .glt-hero-glass {
        margin-top: 0 !important;
        padding-top: 50px !important;
    }
    html body.is-ctl-product .glt-product-hero {
        padding-top: 100px !important;
    }
}

/* =====================================================================
   GLASS EXTENDED — without media-query interference (2026-04-26)
   Use min-width to override mobile rules + apply desktop rule explicitly
   ===================================================================== */

/* Apply desktop styling even if window.innerWidth reports oddly */
@media (min-width: 600px) {
    html body.is-ctl-product .glt-hero-glass {
        margin-top: -180px !important;
        padding-top: 220px !important;
        padding-bottom: 70px !important;
    }
    html body.is-ctl-product .glt-product-hero {
        padding-top: 0 !important;
        padding-bottom: 110px !important;
    }
}

/* =====================================================================
   GLASS STRETCH FIX (2026-04-26)
   No more negative margin tricks. Use grid stretch so glass fills hero.
   ===================================================================== */

/* Reset all the negative margin gymnastics on glass */
@media (min-width: 600px) {
    html body.is-ctl-product .glt-hero-inner {
        align-items: stretch !important;  /* glass cell fills full row height */
    }

    html body.is-ctl-product .glt-hero-glass {
        margin-top: 0 !important;          /* no more negative pull */
        padding-top: 200px !important;     /* text starts comfortably below header */
        padding-bottom: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Hero: keep extending UP behind header but no padding-top needed (glass owns top spacing) */
    html body.is-ctl-product .glt-product-hero {
        padding-top: 0 !important;
        padding-bottom: 110px !important;
        margin-top: -120px !important;
    }

    /* Image stays centered vertically — override the stretch on its cell */
    html body.is-ctl-product .glt-hero-image-wrap {
        align-self: center !important;
    }
}

/* =====================================================================
   GLASS UNCONDITIONAL — no media queries, applies always (2026-04-26)
   Use very high specificity to win over earlier rules
   ===================================================================== */

html body.is-ctl-product .glt-product-hero {
    margin-top: -120px !important;
    padding-top: 0 !important;
    padding-bottom: 110px !important;
}

html body.is-ctl-product .glt-product-hero .glt-hero-inner {
    align-items: stretch !important;
    min-height: 600px !important;
}

html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    margin-top: 0 !important;
    padding-top: 200px !important;
    padding-bottom: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-image-wrap {
    align-self: center !important;
}

/* Real mobile rules: only when actual screen is small */
@media screen and (max-width: 700px) {
    /* .glt-product-hero's own margin-top/padding-top are set near the end of the
       file (search "eyebrow clears the header completely") by an UNCONDITIONAL
       rule that comes later in this file, so it always wins over this earlier
       ≤700px block regardless of viewport — a margin-top/padding-top here would
       be dead code. The actual mobile padding-top override lives right after
       that unconditional rule instead. */
    html body.is-ctl-product .glt-product-hero .glt-hero-inner {
        align-items: flex-start !important;
        min-height: auto !important;
    }
    html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
}

/* =====================================================================
   GLASS FIX REAL — fix stretched pills + extend up + visible diagonal
   2026-04-26
   ===================================================================== */

/* Stop stretching inline pills */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    align-items: flex-start !important;
    /* extend UP to match hero margin-top extension behind menu */
    margin-top: -120px !important;
    padding-top: 220px !important;
}

/* Pills must NOT be full width — they're rounded badges */
html body.is-ctl-product .glt-hero-eyebrow,
html body.is-ctl-product .glt-hero-made-pill {
    align-self: flex-start !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* CTA row keeps buttons inline */
html body.is-ctl-product .glt-hero-cta-row {
    align-self: flex-start !important;
    width: auto !important;
}

/* Restore visible diagonal cut */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 130px) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 130px) 100%, 0 100%) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* =====================================================================
   GLASS CORRECT POSITIONING (2026-04-26 final)
   Glass extends UP behind header BUT text starts well below header
   ===================================================================== */

html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    /* Glass top reaches hero top (which is -120 behind header) */
    margin-top: -120px !important;
    /* Text padding-top must be > 120 (margin) + 75 (header) + breathing → 230px */
    padding-top: 230px !important;
    padding-bottom: 80px !important;
    align-items: flex-start !important;
}

/* Push text content well below the menu */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    margin-top: -120px !important;
    padding-top: 280px !important;  /* push text far below header */
    padding-bottom: 70px !important;
}

/* Ensure inner grid items align top so text starts at padding-top, not centered */
html body.is-ctl-product .glt-product-hero .glt-hero-inner {
    align-items: stretch !important;
    min-height: auto !important;
}

/* Glass content stays at top */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    justify-content: flex-start !important;
}

/* Image stays vertically centered in its cell */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-image-wrap {
    align-self: center !important;
    padding-top: 80px !important;
    padding-bottom: 0 !important;
}

html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    padding-top: 230px !important;
    padding-bottom: 60px !important;
}

/* Reduce eyebrow margin so total content fits more compactly */
html body.is-ctl-product .glt-hero-eyebrow {
    margin-bottom: 22px !important;
}

html body.is-ctl-product .glt-hero-title {
    margin-bottom: 18px !important;
}

/* Reduce hero overall extension up so content has less to push down */
html body.is-ctl-product .glt-product-hero {
    margin-top: -90px !important;
}

html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    margin-top: -90px !important;
    padding-top: 195px !important;
}

/* =====================================================================
   GLASS via PSEUDO-ELEMENT (2026-04-26)
   Glass visual extends UP via pseudo-element, content stays where it is
   ===================================================================== */

/* Reset glass to behave normally — no margin tricks */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass {
    margin-top: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    position: relative !important;
    align-items: flex-start !important;
}

/* The glass visual — extends UP to cover full hero including behind header */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass::before {
    content: '' !important;
    position: absolute !important;
    top: -120px !important;          /* match hero margin-top so glass starts at hero top */
    bottom: -110px !important;       /* match hero padding-bottom so glass goes to hero bottom */
    left: calc(-1 * (50vw - 50% + 50px)) !important;  /* extend to viewport-left */
    right: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 130px) 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 130px) 100%, 0 100%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Content sits above the pseudo-glass */
html body.is-ctl-product .glt-product-hero .glt-hero-inner .glt-hero-glass > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Hero: standard padding-top so text stays well below header */
html body.is-ctl-product .glt-product-hero {
    margin-top: -120px !important;
    padding-top: 130px !important;     /* keeps content below 75px header */
    padding-bottom: 110px !important;
}

/* Hero padding-top bigger so eyebrow clears the header completely */
html body.is-ctl-product .glt-product-hero {
    margin-top: -120px !important;
    padding-top: 180px !important;       /* was 130px → +50px to push content down */
    padding-bottom: 110px !important;
}

/* MOBILE: on phones the content sat only ~36px under the fixed header (barely
   more than the desktop-oriented 180px above once margin-top:-120 is applied on
   a short viewport) and read as touching it. This selector is UNCONDITIONAL and
   therefore already wins over every earlier ≤1100px/≤700px media-scoped
   padding-top override in this file (plain media queries add zero specificity,
   so a later unconditional rule always beats an earlier conditional one) — that
   is why those earlier mobile overrides (search "padding-top" above this line)
   have had no visible effect and are effectively dead. Placing THIS rule after
   the unconditional one, still scoped to mobile, is what actually wins. */
@media screen and (max-width: 700px) {
    html body.is-ctl-product .glt-product-hero {
        padding-top: 220px !important;
    }
}

/* =====================================================================
   TABS REDESIGN (2026-04-26) — bigger, on dark navy bg, no card frame
   ===================================================================== */

/* Tabs CARD wrapper — kill all frame/borders, full-width dark bg */
html body.is-ctl-product .product-detail-tabs,
html body.is-ctl-product .product-detail-tabs.card,
html body.is-ctl-product .card.product-detail-tabs,
html body.is-ctl-product .card-tabs.product-detail-tabs {
    background: linear-gradient(180deg, #0f284b 0%, #15304d 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

html body.is-ctl-product .product-detail-tabs > .card-header,
html body.is-ctl-product .card.product-detail-tabs > .card-header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Tabs nav container */
html body.is-ctl-product .product-detail-tabs-navigation,
html body.is-ctl-product .product-detail-tabs .nav-tabs,
html body.is-ctl-product ul.nav-tabs.product-detail-tabs-navigation {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    gap: 0 !important;
    list-style: none !important;
}

/* Each tab button */
html body.is-ctl-product .product-detail-tabs .nav-link,
html body.is-ctl-product .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.55) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 24px 32px !important;
    transition: all 0.25s ease !important;
    margin-bottom: -1px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    position: relative !important;
}

html body.is-ctl-product .product-detail-tabs .nav-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(225, 181, 46, 0.4) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

html body.is-ctl-product .product-detail-tabs .nav-link.active,
html body.is-ctl-product .nav-tabs .nav-link.active {
    color: #ffffff !important;
    background: transparent !important;
    border-bottom-color: #E1B52E !important;
}

/* Active glow effect */
html body.is-ctl-product .product-detail-tabs .nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 32px !important;
    right: 32px !important;
    height: 3px !important;
    background: #E1B52E !important;
    box-shadow: 0 0 16px rgba(225, 181, 46, 0.5) !important;
    pointer-events: none !important;
}

/* Wrap nav-item correctly */
html body.is-ctl-product .nav-tabs .nav-item {
    margin: 0 !important;
}

/* Make sure .card-body holding the tab content is also flush */
html body.is-ctl-product .product-detail-tabs > .card-body {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* =====================================================================
   TABS — Make CMS wrapper hierarchy dark too (2026-04-26)
   ===================================================================== */

/* The CMS wrapper that contains the tabs */
html body.is-ctl-product .cms-element-product-description-reviews,
html body.is-ctl-product .cms-block-product-description-reviews,
html body.is-ctl-product .product-detail-tabs.cms-element-product-description-reviews {
    background: linear-gradient(180deg, #0f284b 0%, #15304d 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* The cms-block container around it */
html body.is-ctl-product .cms-block:has(.product-detail-tabs),
html body.is-ctl-product .cms-block:has(.cms-element-product-description-reviews) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make the column transparent so dark bg shows */
html body.is-ctl-product .product-detail .col-12:has(.product-detail-tabs),
html body.is-ctl-product .col-12:has(.cms-element-product-description-reviews) {
    padding: 0 !important;
}

/* =====================================================================
   FIX: Remove overflow from CMS wrapper, use bg only
   2026-04-26
   ===================================================================== */

/* Don't make CMS wrapper 100vw wide — that overflows */
html body.is-ctl-product .cms-element-product-description-reviews,
html body.is-ctl-product .cms-block-product-description-reviews,
html body.is-ctl-product .product-detail-tabs.cms-element-product-description-reviews {
    background: linear-gradient(180deg, #0f284b 0%, #15304d 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;          /* normal full width of parent */
    margin-left: 0 !important;
    position: relative !important;
}

/* Use a pseudo-element for the full-width dark bg behind tabs (no overflow) */
html body.is-ctl-product .cms-element-product-description-reviews::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: calc(-1 * (50vw - 50%)) !important;
    right: calc(-1 * (50vw - 50%)) !important;
    background: linear-gradient(180deg, #0f284b 0%, #15304d 100%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Children sit above the pseudo-bg */
html body.is-ctl-product .cms-element-product-description-reviews > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Tabs nav and tab content same — no overflow */
html body.is-ctl-product .product-detail-tabs,
html body.is-ctl-product .product-detail-tabs.card,
html body.is-ctl-product .card.product-detail-tabs {
    background: transparent !important;  /* parent provides the bg */
    width: 100% !important;
    margin-left: 0 !important;
}

/* Make sure the .row containing this isn't broken by overflow */
html body.is-ctl-product .product-detail .row > .col-12:has(.cms-element-product-description-reviews) {
    overflow: visible !important;
}

/* =====================================================================
   FIX: .card.card-tabs has white bg — make it transparent
   2026-04-26
   ===================================================================== */

html body.is-ctl-product .card.card-tabs,
html body.is-ctl-product .product-detail-tabs .card.card-tabs,
html body.is-ctl-product .cms-element-product-description-reviews .card.card-tabs {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

html body.is-ctl-product .cms-card-header,
html body.is-ctl-product .card-tabs > .card-header,
html body.is-ctl-product .cms-card-header.card-header.product-detail-tab-navigation {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* The actual nav-tabs UL — wrap nicely in container */
html body.is-ctl-product .product-detail-tab-navigation-list,
html body.is-ctl-product ul.nav.nav-tabs.product-detail-tab-navigation-list {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    background: transparent !important;
    border: none !important;
    list-style: none !important;
    display: flex !important;
}

/* Fix nav-link colors so they're properly visible */
html body.is-ctl-product .product-detail-tab-navigation-list .nav-link {
    color: rgba(255, 255, 255, 0.55) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    padding: 24px 32px !important;
    transition: all 0.25s ease !important;
    margin-bottom: -1px !important;
    line-height: 1 !important;
}

html body.is-ctl-product .product-detail-tab-navigation-list .nav-link:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: rgba(225, 181, 46, 0.4) !important;
}

html body.is-ctl-product .product-detail-tab-navigation-list .nav-link.active {
    color: #ffffff !important;
    background: transparent !important;
    border-bottom-color: #E1B52E !important;
}

/* =====================================================================
   FIX: Tab text is in <span> inside nav-link — color the spans too
   2026-04-26
   ===================================================================== */

html body.is-ctl-product .product-detail-tab-navigation-list .nav-link span {
    color: inherit !important;
}

html body.is-ctl-product .product-detail-tab-navigation-list .nav-link.active,
html body.is-ctl-product .product-detail-tab-navigation-list .nav-link.active span,
html body.is-ctl-product .product-detail-tab-navigation-list a.nav-link.active span,
html body.is-ctl-product .product-detail-tab-navigation-list a.description-tab.active,
html body.is-ctl-product .product-detail-tab-navigation-list a.description-tab.active span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.is-ctl-product .product-detail-tab-navigation-list .nav-link:not(.active),
html body.is-ctl-product .product-detail-tab-navigation-list .nav-link:not(.active) span,
html body.is-ctl-product .product-detail-tab-navigation-list a.review-tab,
html body.is-ctl-product .product-detail-tab-navigation-list a.review-tab span {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

html body.is-ctl-product .product-detail-tab-navigation-list .nav-link:not(.active):hover,
html body.is-ctl-product .product-detail-tab-navigation-list .nav-link:not(.active):hover span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =====================================================================
   INFO STRIP CARDS — Remove icons, refined typography (2026-04-26)
   ===================================================================== */

/* Hide the icon containers */
html body.is-ctl-product .glt-info-card-icon,
html body.is-ctl-product .glt-info-card .glt-info-card-icon {
    display: none !important;
}

/* Refine card styling without icons */
html body.is-ctl-product .glt-info-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.06) !important;
    border-top: none !important;
    border-left: 3px solid #E1B52E !important;       /* gold accent on left */
    border-radius: 4px !important;
    padding: 28px 28px 26px !important;
    box-shadow: 0 4px 14px rgba(15, 40, 75, 0.06) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

html body.is-ctl-product .glt-info-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 36px rgba(15, 40, 75, 0.12) !important;
    border-left-color: #c9a127 !important;
}

/* Subtle gold dot accent at top right */
html body.is-ctl-product .glt-info-card::after {
    content: '' !important;
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    width: 6px !important;
    height: 6px !important;
    background: #E1B52E !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
}

/* Label — bigger, gold accent, more letterspacing */
html body.is-ctl-product .glt-info-card small {
    display: block !important;
    color: #c9a127 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2.4px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
}

/* Big value — bold navy */
html body.is-ctl-product .glt-info-card strong {
    display: block !important;
    color: #0f284b !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.3px !important;
}

/* Asterisk subtle gold */
html body.is-ctl-product .glt-info-card strong sup {
    color: #E1B52E !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* Subtitle/note — smaller muted */
html body.is-ctl-product .glt-info-card em {
    display: block !important;
    color: #6a7a8a !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(15, 40, 75, 0.06) !important;
    margin-top: 4px !important;
}

/* Strip section gets a tiny top border for visual separation */
html body.is-ctl-product .glt-info-strip {
    border-top: 1px solid rgba(15, 40, 75, 0.05) !important;
    padding: 60px 0 70px !important;
}

/* =====================================================================
   EYEBROW PILLS + SECTION HEADER PADDING (2026-04-26)
   More breathing room around 'DAS PRODUKT', 'TECHNISCHE DATEN' etc.
   ===================================================================== */

/* Bigger eyebrow pills with more internal padding */
html body.is-ctl-product .glt-product-content .glt-eyebrow,
html body.is-ctl-product .glt-section .glt-eyebrow {
    padding: 10px 22px !important;          /* was 6px 14px */
    font-size: 11px !important;
    letter-spacing: 2.4px !important;
    margin-bottom: 28px !important;          /* more space below pill */
    border-width: 1.5px !important;
}

/* Light section eyebrow */
html body.is-ctl-product .glt-section--light .glt-eyebrow {
    color: #c9a127 !important;
    background: rgba(225, 181, 46, 0.08) !important;
    border: 1.5px solid rgba(225, 181, 46, 0.4) !important;
}

/* Dark section eyebrow */
html body.is-ctl-product .glt-section--dark .glt-eyebrow {
    color: #E1B52E !important;
    background: rgba(225, 181, 46, 0.1) !important;
    border: 1.5px solid rgba(225, 181, 46, 0.5) !important;
}

/* Eyebrow hover/glow effect */
html body.is-ctl-product .glt-section .glt-eyebrow {
    box-shadow: 0 2px 12px rgba(225, 181, 46, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* More padding for ALL section content */
html body.is-ctl-product .glt-section .glt-section-inner {
    padding: 0 40px !important;
    max-width: 1240px !important;
}

/* More space between eyebrow and h2 below it */
html body.is-ctl-product .glt-section .glt-eyebrow + h2,
html body.is-ctl-product .glt-section .glt-eyebrow + .glt-intro-grid h2 {
    margin-top: 6px !important;
}

/* More section padding overall */
html body.is-ctl-product .glt-section {
    padding: 110px 0 !important;
}

/* Section h2 has more padding-bottom to space the gold underline */
html body.is-ctl-product .glt-section h2 {
    padding-bottom: 26px !important;
    margin-bottom: 32px !important;
}

/* Bigger gold underline for visual weight */
html body.is-ctl-product .glt-section h2::after {
    width: 100px !important;
    height: 4px !important;
}

/* =====================================================================
   EYEBROW PILLS — BIGGER, more padding, more presence (2026-04-26)
   ===================================================================== */

html body.is-ctl-product .glt-product-content .glt-eyebrow,
html body.is-ctl-product .glt-section .glt-eyebrow,
html body.is-ctl-product .glt-product-hero .glt-hero-eyebrow {
    padding: 14px 28px !important;        /* much more padding */
    font-size: 12px !important;
    letter-spacing: 3px !important;
    margin-bottom: 36px !important;
    border-radius: 999px !important;
    border-width: 2px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Hero eyebrow same treatment */
html body.is-ctl-product .glt-product-hero .glt-hero-eyebrow {
    margin-bottom: 32px !important;
}

/* More space before section content (pill not glued to top) */
html body.is-ctl-product .glt-section {
    padding: 130px 0 !important;
}

/* Light section eyebrow */
html body.is-ctl-product .glt-section--light .glt-eyebrow {
    color: #c9a127 !important;
    background: rgba(225, 181, 46, 0.08) !important;
    border: 2px solid rgba(225, 181, 46, 0.45) !important;
    box-shadow: 0 4px 16px rgba(225, 181, 46, 0.12) !important;
}

/* Dark section eyebrow */
html body.is-ctl-product .glt-section--dark .glt-eyebrow {
    color: #E1B52E !important;
    background: rgba(225, 181, 46, 0.12) !important;
    border: 2px solid rgba(225, 181, 46, 0.55) !important;
    box-shadow: 0 4px 18px rgba(225, 181, 46, 0.2) !important;
}

/* Hover effect on eyebrows */
html body.is-ctl-product .glt-section .glt-eyebrow {
    transition: all 0.3s ease !important;
}

html body.is-ctl-product .glt-section--light .glt-eyebrow:hover {
    background: rgba(225, 181, 46, 0.15) !important;
    transform: translateY(-1px) !important;
}

html body.is-ctl-product .glt-section--dark .glt-eyebrow:hover {
    background: rgba(225, 181, 46, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Even more space between eyebrow and h2 */
html body.is-ctl-product .glt-section h2 {
    margin-top: 8px !important;
}

/* =====================================================================
   PRODUCT CONTENT IMAGES — Clean & Consistent (2026-04-26)
   Minimal styling: shadow + border-radius. No box-in-box visual noise.
   ===================================================================== */

/* === Default content images (glt-content-img) — no bg, no padding, just shadow === */
html body.is-ctl-product .glt-section .glt-content-img,
html body.is-ctl-product .glt-section .glt-section-inner .glt-content-img,
html body.is-ctl-product .glt-section-inner img.glt-content-img {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    max-width: 680px !important;
    width: 100% !important;
    height: auto !important;
    margin: 2.5rem auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Dark section: subtle gold-tinted shadow */
html body.is-ctl-product .glt-section--dark .glt-content-img {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 60px rgba(225, 181, 46, 0.05) !important;
}

/* Light section: soft navy shadow */
html body.is-ctl-product .glt-section--light .glt-content-img {
    box-shadow: 0 16px 40px rgba(15, 40, 75, 0.12) !important;
}

/* === Intro image (hero-style featured) === */
html body.is-ctl-product .glt-section .glt-section-inner .glt-intro-image img,
html body.is-ctl-product .glt-section .glt-intro-image img {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

html body.is-ctl-product .glt-section--dark .glt-intro-image img {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 90px rgba(225, 181, 46, 0.06) !important;
}

html body.is-ctl-product .glt-section--light .glt-intro-image img {
    box-shadow: 0 24px 50px rgba(15, 40, 75, 0.14) !important;
}

/* === Tech grid images (image + text split) === */
html body.is-ctl-product .glt-section .glt-section-inner .glt-tech-image img,
html body.is-ctl-product .glt-section .glt-tech-image img {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

html body.is-ctl-product .glt-section--dark .glt-tech-image img {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 80px rgba(225, 181, 46, 0.06) !important;
}

html body.is-ctl-product .glt-section--light .glt-tech-image img {
    box-shadow: 0 24px 48px rgba(15, 40, 75, 0.14) !important;
}

/* === Markierfeld diagram (the wireframe-style image needs bg+padding to be visible) === */
html body.is-ctl-product .glt-section--light .glt-section--markierfeld .glt-content-img,
html body.is-ctl-product .glt-section--markierfeld .glt-content-img {
    background: #ffffff !important;
    padding: 24px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(15, 40, 75, 0.08) !important;
    box-shadow: 0 16px 40px rgba(15, 40, 75, 0.1) !important;
    max-width: 720px !important;
}

/* === Markierfeld 5 squares — simpler card style === */
html body.is-ctl-product .glt-section .glt-markierfeld-sizes figure {
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.08) !important;
    padding: 24px 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(15, 40, 75, 0.06) !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    text-align: center !important;
}

html body.is-ctl-product .glt-section .glt-markierfeld-sizes figure:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(225, 181, 46, 0.4) !important;
    box-shadow: 0 12px 28px rgba(225, 181, 46, 0.15) !important;
}

/* Dark section override for markierfeld figures (keep glass style if there) */
html body.is-ctl-product .glt-section--dark .glt-markierfeld-sizes figure {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* === Detail section single image (last one) === */
html body.is-ctl-product .glt-section--detail img,
html body.is-ctl-product .glt-section--detail .glt-content-img {
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* =====================================================================
   COMPACT SECTIONS + SUBTLE IMAGE FRAMES (2026-04-26)
   ===================================================================== */

/* Kompakter Section-Padding — war 130px, jetzt 70px */
html body.is-ctl-product .glt-section {
    padding: 70px 0 !important;
}

/* Eyebrow pill margin-bottom reduziert */
html body.is-ctl-product .glt-section .glt-eyebrow,
html body.is-ctl-product .glt-product-content .glt-eyebrow {
    margin-bottom: 22px !important;
}

/* H2 margin-bottom kleiner damit Section nicht so streckt */
html body.is-ctl-product .glt-section h2 {
    margin-bottom: 24px !important;
    padding-bottom: 20px !important;
}

/* === Content images: subtle frame zurueck === */
html body.is-ctl-product .glt-section .glt-content-img,
html body.is-ctl-product .glt-section .glt-section-inner .glt-content-img,
html body.is-ctl-product .glt-section-inner img.glt-content-img {
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 14px !important;
    border: 1px solid rgba(225, 181, 46, 0.18) !important;
    border-radius: 14px !important;
    margin: 1.8rem auto !important;
}

html body.is-ctl-product .glt-section--dark .glt-content-img {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(225, 181, 46, 0.22) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}

html body.is-ctl-product .glt-section--light .glt-content-img {
    background: #ffffff !important;
    border-color: rgba(15, 40, 75, 0.08) !important;
    box-shadow: 0 8px 24px rgba(15, 40, 75, 0.08) !important;
}

/* === GRAVIS Abmasse (technical drawing): let the drawing FILL the card —
   remove the 14px inner padding gap so it reaches the card edges (v=663).
   High specificity to beat `.glt-section .glt-section-inner .glt-content-img`. === */
html body.is-ctl-product .glt-section--light .glt-section-inner .glt-section-image-wrap img.glt-content-img[src*="Abmasse"],
html body.is-ctl-product .glt-section .glt-section-inner .glt-section-image-wrap img.glt-content-img[src*="Abmasse"] {
    padding: 0 !important;
    height: auto !important;
    object-fit: contain !important;
}

/* === Intro image (das mit dem Lasermaschinen-Bild rechts neben Text) === */
html body.is-ctl-product .glt-section .glt-section-inner .glt-intro-image img,
html body.is-ctl-product .glt-section .glt-intro-image img {
    padding: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    border: none !important;
}

html body.is-ctl-product .glt-section--dark .glt-intro-image img {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(225, 181, 46, 0.15) !important;
}

html body.is-ctl-product .glt-section--light .glt-intro-image img {
    box-shadow: 0 18px 40px rgba(15, 40, 75, 0.12), 0 0 0 1px rgba(15, 40, 75, 0.08) !important;
}

/* === Tech-grid images (gleicher Stil wie intro) === */
html body.is-ctl-product .glt-section .glt-section-inner .glt-tech-image img,
html body.is-ctl-product .glt-section .glt-tech-image img {
    padding: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    border: none !important;
}

html body.is-ctl-product .glt-section--dark .glt-tech-image img {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(225, 181, 46, 0.15) !important;
}

html body.is-ctl-product .glt-section--light .glt-tech-image img {
    box-shadow: 0 18px 40px rgba(15, 40, 75, 0.12), 0 0 0 1px rgba(15, 40, 75, 0.08) !important;
}

/* === Intro section: weniger top/bottom-padding fuer den Grid === */
html body.is-ctl-product .glt-section .glt-intro-grid {
    gap: 50px !important;
}

/* === Markierfeld diagram bleibt mit Card-Style === */
html body.is-ctl-product .glt-section--markierfeld .glt-content-img {
    padding: 20px !important;
    background: #ffffff !important;
}

/* Spec grid margin-top reduzieren */
html body.is-ctl-product .glt-section .glt-specs-grid {
    margin-top: 1.8rem !important;
}

/* Intro/Tech grids: align content to TOP, not center */
html body.is-ctl-product .glt-section .glt-intro-grid,
html body.is-ctl-product .glt-section .glt-tech-grid,
html body.is-ctl-product .glt-section .glt-tech-grid--reverse {
    align-items: start !important;
}

/* Image staerker constraint damit es nicht zu hoch wird */
html body.is-ctl-product .glt-section .glt-intro-image img,
html body.is-ctl-product .glt-section .glt-tech-image img {
    max-height: 480px !important;
    object-fit: contain !important;
    width: 100% !important;
}

/* Eyebrow weiter weg vom Top der Section */
html body.is-ctl-product .glt-section .glt-section-inner {
    padding-top: 10px !important;
}

/* Less gap between eyebrow and the intro-grid content */
html body.is-ctl-product .glt-section .glt-eyebrow {
    margin-bottom: 20px !important;
}

/* Text padding right damit Image und Text mehr getrennt sind */
html body.is-ctl-product .glt-section .glt-intro-text {
    padding-right: 30px !important;
}

/* Reduce gap fuer ausgewogener look */
html body.is-ctl-product .glt-section .glt-intro-grid {
    gap: 40px !important;
}

/* Section padding wieder bisschen mehr — 70 war zu wenig zwischen sections */
html body.is-ctl-product .glt-section {
    padding: 80px 0 !important;
}

/* =====================================================================
   YOUTUBE VIDEO EMBEDS (2026-05-15)
   ===================================================================== */

html body.is-ctl-product .glt-section .glt-video-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 28px !important;
    margin-top: 2rem !important;
}

html body.is-ctl-product .glt-section .glt-video-card {
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.08) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 40, 75, 0.08) !important;
    transition: all 0.3s ease !important;
}

html body.is-ctl-product .glt-section .glt-video-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(225, 181, 46, 0.4) !important;
    box-shadow: 0 14px 36px rgba(225, 181, 46, 0.18) !important;
}

html body.is-ctl-product .glt-section .glt-video-embed {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;  /* 16:9 aspect ratio */
    height: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #000 !important;
}

html body.is-ctl-product .glt-section .glt-video-embed iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 10px !important;
}

html body.is-ctl-product .glt-section .glt-video-card figcaption {
    margin-top: 14px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e3a5f !important;
    line-height: 1.4 !important;
    padding: 0 8px 6px !important;
}

/* Dark section variant (in case we use it on dark sections later) */
html body.is-ctl-product .glt-section--dark .glt-video-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(225, 181, 46, 0.2) !important;
}

html body.is-ctl-product .glt-section--dark .glt-video-card figcaption {
    color: #ffffff !important;
}

/* =====================================================================
   EYEBROW PILLS — EDITORIAL LEADING-DASH STYLE (2026-05-16, v=540)
   Removes the boxy outlined-rectangle look — uses a thin gold dash +
   uppercase letter-spaced label. Premium / luxury editorial treatment.
   ===================================================================== */

html body.is-ctl-product .glt-product-content .glt-eyebrow,
html body.is-ctl-product .glt-section .glt-eyebrow,
html body.is-ctl-product .glt-product-hero .glt-hero-eyebrow {
    /* Strip box look */
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    /* Typography */
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 3.2px !important;
    text-transform: uppercase !important;

    /* Spacing under the label */
    margin-bottom: 22px !important;
}

/* Leading dash */
html body.is-ctl-product .glt-product-content .glt-eyebrow::before,
html body.is-ctl-product .glt-section .glt-eyebrow::before,
html body.is-ctl-product .glt-product-hero .glt-hero-eyebrow::before {
    content: "" !important;
    display: inline-block !important;
    width: 36px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent 0%, #E1B52E 100%) !important;
    flex: 0 0 auto !important;
}

/* Dark section: brighter gold */
html body.is-ctl-product .glt-section--dark .glt-eyebrow,
html body.is-ctl-product .glt-product-hero .glt-hero-eyebrow {
    color: #E1B52E !important;
}
html body.is-ctl-product .glt-section--dark .glt-eyebrow::before,
html body.is-ctl-product .glt-product-hero .glt-hero-eyebrow::before {
    background: linear-gradient(90deg, transparent 0%, #E1B52E 100%) !important;
}

/* Light section: deeper gold for contrast */
html body.is-ctl-product .glt-section--light .glt-eyebrow {
    color: #b8881f !important;
}
html body.is-ctl-product .glt-section--light .glt-eyebrow::before {
    background: linear-gradient(90deg, transparent 0%, #b8881f 100%) !important;
}

/* Reset hover transforms — minimal style needs no movement */
html body.is-ctl-product .glt-section--dark .glt-eyebrow:hover,
html body.is-ctl-product .glt-section--light .glt-eyebrow:hover {
    background: transparent !important;
    transform: none !important;
}

/* Callout reverted to original boxed style (see line ~5574) — v=541 overrides removed */

/* =====================================================================
   CALLOUT PADDING FIX — icon was flush to the left border (v=543)
   ===================================================================== */
html body.is-ctl-product .glt-section .glt-section-inner .glt-callout,
html body.is-ctl-product .glt-section .glt-callout {
    padding-top: 24px !important;
    padding-right: 32px !important;
    padding-bottom: 24px !important;
    padding-left: 32px !important;
    gap: 20px !important;
}
html body.is-ctl-product .glt-section .glt-callout svg {
    margin-left: 0 !important;
    margin-right: 4px !important;
    flex: 0 0 auto !important;
}

/* =====================================================================
   MARKIERFELD DIAGRAM — image has white lines, needs dark bg (v=544)
   ===================================================================== */
html body.is-ctl-product .glt-section--markierfeld .glt-content-img,
html body.is-ctl-product .glt-section--light .glt-section--markierfeld .glt-content-img {
    background: linear-gradient(135deg, #0f284b 0%, #1a3866 100%) !important;
    border: 1px solid rgba(225, 181, 46, 0.25) !important;
    border-radius: 14px !important;
    padding: 36px !important;
    box-shadow: 0 14px 40px rgba(15, 40, 75, 0.18) !important;
}

/* =====================================================================
   MARKIERFELD — dark bg now baked into images; reset wrapper bg (v=545)
   The white-line images now ship with #0f284b composited in, so the
   wrapper card should NOT add another bg/padding behind them.
   ===================================================================== */
html body.is-ctl-product .glt-section--markierfeld .glt-content-img,
html body.is-ctl-product .glt-section--light .glt-section--markierfeld .glt-content-img {
    background: transparent !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 40, 75, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 40px rgba(15, 40, 75, 0.18) !important;
    overflow: hidden !important;
}

/* Small square cards — the .png files have dark bg baked in.
   So the figure wrapper shouldn't add white bg behind them. */
html body.is-ctl-product .glt-section--light .glt-markierfeld-sizes figure,
html body.is-ctl-product .glt-section .glt-markierfeld-sizes figure {
    background: transparent !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 40, 75, 0.12) !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}
html body.is-ctl-product .glt-section .glt-markierfeld-sizes img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}
html body.is-ctl-product .glt-section .glt-markierfeld-sizes figcaption {
    background: #0f284b !important;
    color: #E1B52E !important;
    padding: 12px 8px !important;
    margin-top: 0 !important;
    font-weight: 700 !important;
}

/* =====================================================================
   TECH-IMAGE — let image set its own height, no empty box space (v=546)
   The previous max-height: 480px + object-fit: contain left empty
   navy space on the sides/top of taller images.
   ===================================================================== */
html body.is-ctl-product .glt-section .glt-tech-image,
html body.is-ctl-product .glt-section .glt-section-inner .glt-tech-image {
    line-height: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}
html body.is-ctl-product .glt-section .glt-tech-image img,
html body.is-ctl-product .glt-section .glt-section-inner .glt-tech-image img {
    max-height: none !important;
    height: auto !important;
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
}

/* =====================================================================
   GALVANOMETER IMAGE — white card on dark section (v=547)
   ===================================================================== */
html body.is-ctl-product .glt-section--galvanometer .glt-tech-image {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(225, 181, 46, 0.18) !important;
    line-height: 0 !important;
    overflow: hidden !important;
}
html body.is-ctl-product .glt-section--galvanometer .glt-tech-image img {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}

/* =====================================================================
   FINAL CTA — fix dark button text & extend yellow to bottom (v=548)
   ===================================================================== */
/* Primary button: force white text on the navy bg (incl. span children) */
html body.is-ctl-product .glt-final-cta .glt-hero-cta--primary,
html body.is-ctl-product .glt-final-cta .glt-hero-cta--primary *,
html body.is-ctl-product .glt-final-cta .glt-hero-cta--primary span,
html body.is-ctl-product .glt-final-cta .glt-hero-cta--primary svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}
html body.is-ctl-product .glt-final-cta .glt-hero-cta--primary svg path,
html body.is-ctl-product .glt-final-cta .glt-hero-cta--primary svg polyline {
    stroke: #ffffff !important;
}

/* Extend gold gradient all the way to the bottom — kill any trailing white gap */
html body.is-ctl-product .glt-final-cta {
    margin-bottom: 0 !important;
    padding-bottom: 100px !important;
}
/* Hide white space below the CTA — any following section margin that creates a gap */
html body.is-ctl-product .glt-final-cta + * {
    margin-top: 0 !important;
}
/* The Shopware footer follows after the description tabs; pull the CTA flush */
html body.is-ctl-product .glt-final-cta::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -2px !important;
    height: 4px !important;
    background: var(--ph-gold, #E1B52E) !important;
    z-index: 2 !important;
}

/* v=549 aggressive overrides removed — they created huge empty white space at page bottom */

/* =====================================================================
   FOOTER NEWSLETTER — strip white cms-block bg behind the form (v=550)
   The Shopware default .cms-block.cms-block-form has white bg, which
   shows as an oversized white slab inside the dark navy footer column.
   ===================================================================== */
.footer-column-newsletter .cms-block,
.footer-column-newsletter .cms-block-form,
.footer-column-newsletter .cms-block-container,
.footer-column-newsletter .cms-element-form {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Make the input visible/legible on dark bg */
.footer-column-newsletter input.form-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
.footer-column-newsletter input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* =====================================================================
   FOOTER NEWSLETTER — beat ThemeWare's body.is-ctl-product .cms-block
   white background. Higher specificity needed (v=551).
   ===================================================================== */
html body.is-ctl-product .footer-column-newsletter .cms-block,
html body.is-ctl-product .footer-column-newsletter .cms-block.cms-block-form,
html body.is-ctl-product .footer-column-newsletter .cms-block-container,
html body.is-ctl-product .footer-column-newsletter .cms-element-form,
html body.is-ctl-product .footer-column-newsletter .cms-element {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Force the form layout to fit cleanly */
html body.is-ctl-product .footer-column-newsletter form {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body.is-ctl-product .footer-column-newsletter .input-group {
    background: transparent !important;
}
html body.is-ctl-product .footer-column-newsletter input.form-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    height: 45px !important;
}
html body.is-ctl-product .footer-column-newsletter input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* =====================================================================
   FOOTER NEWSLETTER — checkbox + tighten gaps + darker input (v=553)
   ===================================================================== */
/* Make the input bg less translucent-white, more navy with gold rim */
html body.is-ctl-product .footer-column-newsletter input.form-control {
    background: rgba(15, 40, 75, 0.6) !important;
    border: 1px solid rgba(225, 181, 46, 0.35) !important;
    color: #ffffff !important;
    height: 48px !important;
    border-radius: 10px !important;
}
html body.is-ctl-product .footer-column-newsletter input.form-control:focus {
    border-color: var(--ph-gold, #E1B52E) !important;
    box-shadow: 0 0 0 3px rgba(225, 181, 46, 0.18) !important;
}

/* Hide the redundant "Datenschutz" legend label — checkbox+text is enough */
html body.is-ctl-product .footer-column-newsletter legend.privacy-notice-title {
    display: none !important;
}
html body.is-ctl-product .footer-column-newsletter fieldset.privacy-notice {
    padding: 0 !important;
    margin-top: 12px !important;
    border: 0 !important;
}
html body.is-ctl-product .footer-column-newsletter fieldset.privacy-notice br {
    display: none !important;
}

/* The injected checkbox + label row */
html body.is-ctl-product .glt-newsletter-consent-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    text-align: left !important;
    padding: 4px 0 !important;
}
html body.is-ctl-product input.glt-newsletter-consent {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 2px !important;
    border: 2px solid rgba(225, 181, 46, 0.7) !important;
    border-radius: 4px !important;
    background: rgba(15, 40, 75, 0.4) !important;
    cursor: pointer !important;
    position: relative !important;
    flex: 0 0 18px !important;
}
html body.is-ctl-product input.glt-newsletter-consent:checked {
    background: var(--ph-gold, #E1B52E) !important;
    border-color: var(--ph-gold, #E1B52E) !important;
}
html body.is-ctl-product input.glt-newsletter-consent:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 0 !important;
    width: 6px !important;
    height: 11px !important;
    border-right: 2px solid #0f284b !important;
    border-bottom: 2px solid #0f284b !important;
    transform: rotate(45deg) !important;
}
html body.is-ctl-product .glt-newsletter-consent-row > div {
    color: rgba(255, 255, 255, 0.85) !important;
}
html body.is-ctl-product .glt-newsletter-consent-row .btn-link-inline {
    color: var(--ph-gold, #E1B52E) !important;
    text-decoration: underline !important;
    padding: 0 !important;
    background: transparent !important;
}

/* =====================================================================
   KILL THE WHITE STRIP BELOW GOLD CTA (v=554 — surgical, no side-effects)
   Don't touch the cms-section bg (that breaks the description area).
   Just bleed a gold strip below the CTA via ::after to cover the 43px
   gap created by .cms-block-container's padding-bottom: 20px + the
   parent section's white bg.
   ===================================================================== */
html body.is-ctl-product .glt-final-cta {
    position: relative !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}
html body.is-ctl-product .glt-final-cta::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -120px !important;
    width: 100vw !important;
    height: 120px !important;
    background: linear-gradient(180deg, #c9a127 0%, #a8801c 60%, #8c6515 100%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}
/* The parent block has overflow:hidden which clips the gold pseudo —
   override so the gold strip can bleed down to the footer. */
html body.is-ctl-product .cms-block.cms-block-product-description-reviews {
    overflow: visible !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
html body.is-ctl-product .cms-block-container:has(.glt-final-cta) {
    padding-bottom: 0 !important;
}

/* =====================================================================
   NEWSLETTER SUBMIT BUTTON — spacing + premium styling (v=558)
   ===================================================================== */
/* Gap between input and button — input+button live inside .col-12 of
   .twt-form-newsletter-email-submit. Reset form-content to block so
   the privacy notice stacks vertically below. */
html body.is-ctl-product .footer-column-newsletter .form-content {
    display: block !important;
}
html body.is-ctl-product .footer-column-newsletter .twt-form-newsletter-email-submit > .col-12 {
    display: flex !important;
    gap: 14px !important;
    align-items: stretch !important;
    width: 100% !important;
}
html body.is-ctl-product .footer-column-newsletter .twt-form-newsletter-email-submit .form-group {
    flex: 1 1 auto !important;
    margin: 0 !important;
}
html body.is-ctl-product .footer-column-newsletter input.form-control {
    flex: 1 1 auto !important;
    height: 50px !important;
    width: 100% !important;
}

/* Restyled button — gold gradient pill with hover transform */
html body.is-ctl-product .footer-column-newsletter button.btn-primary,
html body.is-ctl-product .footer-column-newsletter button[type="submit"] {
    background: linear-gradient(135deg, #E1B52E 0%, #c9a127 100%) !important;
    color: #0f284b !important;
    border: none !important;
    border-radius: 10px !important;
    height: 50px !important;
    min-height: 50px !important;
    min-width: 70px !important;
    padding: 0 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(225, 181, 46, 0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body.is-ctl-product .footer-column-newsletter button.btn-primary:hover,
html body.is-ctl-product .footer-column-newsletter button[type="submit"]:hover {
    background: linear-gradient(135deg, #f0c54a 0%, #d6ad32 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(225, 181, 46, 0.45), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
html body.is-ctl-product .footer-column-newsletter button.btn-primary:active,
html body.is-ctl-product .footer-column-newsletter button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* The chevron icon stronger / bigger */
html body.is-ctl-product .footer-column-newsletter button.btn-primary .icon,
html body.is-ctl-product .footer-column-newsletter button.btn-primary svg {
    width: 18px !important;
    height: 18px !important;
    color: #0f284b !important;
    stroke: #0f284b !important;
    fill: #0f284b !important;
    transition: transform 0.18s ease !important;
}
html body.is-ctl-product .footer-column-newsletter button.btn-primary:hover .icon,
html body.is-ctl-product .footer-column-newsletter button.btn-primary:hover svg {
    transform: translateX(2px) !important;
}

/* =====================================================================
   GLT FOOTER REDESIGN — 4-column editorial grid (v=561)
   Hides ThemeWare's cluttered 11-column footer, leaves only the
   newsletter band. The new 4-column grid is injected after the
   newsletter row via JS in base.html.twig.
   ===================================================================== */

/* 1. Hide all original footer-main columns except the newsletter */
html body .footer-main .footer-column-hotline,
html body .footer-main .footer-column-footernav,
html body .footer-main .footer-column-benefits,
html body .footer-main .footer-column-shipping,
html body .footer-main .footer-column-payment,
html body .footer-main .footer-column-location,
html body .footer-main .footer-column-awards,
html body .footer-main .footer-column-about,
html body .footer-main .footer-column:not(.footer-column-newsletter) {
    display: none !important;
}

/* Hide ThemeWare's default bottom row (it duplicates copyright/payment info) */
html body .footer-bottom,
html body .footer-copyright,
html body .footer-shipping-payment,
html body .footer-main + .footer-bottom {
    display: none !important;
}

/* 2. Footer-main: dark navy bg, tight padding */
html body .footer-main {
    background: #0f284b !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0 !important;
}
html body .footer-main > .container,
html body .footer-main > div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* The newsletter row sits ABOVE the grid as a band */
html body .footer-column-newsletter {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 56px 24px 36px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(225, 181, 46, 0.18) !important;
}
html body .footer-column-newsletter .footer-column-headline {
    text-align: center !important;
    font-size: 14px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--ph-gold, #E1B52E) !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    text-decoration: none !important;
}
html body .footer-column-newsletter .twt-anchor + .footer-column-headline {
    border-bottom: none !important;
}
html body .footer-column-newsletter .footer-column-toggle {
    display: none !important;
}

/* 3. The new 4-column grid */
.glt-footer-grid {
    display: grid !important;
    grid-template-columns: 1.3fr 1.3fr 1fr 1.2fr !important;
    gap: 56px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 56px 24px 48px !important;
}
.glt-footer-col {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}
.glt-footer-headline {
    color: var(--ph-gold, #E1B52E) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin: 0 0 22px !important;
    padding-bottom: 12px !important;
    position: relative !important;
}
.glt-footer-headline::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 32px !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--ph-gold, #E1B52E) 0%, transparent 100%) !important;
}
.glt-footer-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.glt-footer-list li {
    margin: 0 0 10px !important;
}
.glt-footer-list a {
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
    display: inline-block !important;
}
.glt-footer-list a:hover {
    color: var(--ph-gold, #E1B52E) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: rgba(225, 181, 46, 0.6) !important;
}

/* Blog list — dates as small subtitles */
.glt-footer-list--blog li {
    margin-bottom: 18px !important;
}
.glt-footer-list--blog a {
    display: block !important;
    line-height: 1.4 !important;
}
.glt-footer-list--blog a span {
    display: block !important;
    color: rgba(225, 181, 46, 0.55) !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    letter-spacing: 0.3px !important;
}

/* Contact list — icon prefix */
.glt-footer-list--contact li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 12px !important;
}
.glt-footer-list--contact li svg {
    color: var(--ph-gold, #E1B52E) !important;
    flex: 0 0 auto !important;
}
.glt-footer-list--contact li a {
    color: rgba(255, 255, 255, 0.78) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.glt-footer-list--contact li a svg { flex: 0 0 auto !important; }

/* Opening hours */
.glt-footer-hours {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.glt-footer-hours > div {
    display: flex !important;
    justify-content: space-between !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
}
.glt-footer-hours > div span:first-child {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500 !important;
}

/* Social icons */
.glt-footer-social {
    margin-top: 24px !important;
    display: flex !important;
    gap: 10px !important;
}
.glt-footer-social a {
    width: 38px !important;
    height: 38px !important;
    /* SWAPPED (v=664): default is now the filled gold look; hover is the outline look */
    background: var(--ph-gold, #E1B52E) !important;
    border: 1px solid var(--ph-gold, #E1B52E) !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0f284b !important;
    transition: all 0.18s ease !important;
}
.glt-footer-social a:hover {
    background: transparent !important;
    color: rgba(225, 181, 46, 0.85) !important;
    border-color: rgba(225, 181, 46, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   BLOG & VIDEOS — remove the gradient "box"/band behind the title so the
   title sits flat on the navy page. (v=666)
   ============================================================ */
html body.is-ctl-blog .glt-hero,
html body.is-ctl-videos .glt-hero {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   INFO & LASERGRAVURSERVICE (body.is-ctl-info) — INVERTED palette (v=671):
   navy PAGE background (#0f284b, like the blog — a touch deeper than the
   menu, which stays #1e3a5f) + WHITE content boxes with DARK text.
   ============================================================ */

/* 1) PAGE surfaces -> navy. SCOPED to .content-main so the header / nav / USP-bar /
   footer / cookie-banner (which also use the generic .container class) are NOT
   repainted and stay IDENTICAL to the blog. (body stays navy = same as blog body) */
html body.is-ctl-info,
html body.is-ctl-info main.content-main,
html body.is-ctl-info .content-main .container,
html body.is-ctl-info .content-main .container-main,
html body.is-ctl-info .content-main [class$="-page"],
html body.is-ctl-info .content-main .glt-info-article {
    background-color: #0f284b !important;
    background-image: none !important;
}
html body.is-ctl-info main.content-main > .container > .container-main,
html body.is-ctl-info .content-main div.container-main {
    background: #0f284b !important;
    background-color: #0f284b !important;
}

/* 2) text that sits DIRECTLY on the navy page -> light (scoped to content only,
   so footer / cookie / header text is untouched). Boxes re-darken theirs in 4–5. */
html body.is-ctl-info .content-main [class$="-page"],
html body.is-ctl-info .content-main .glt-info-article,
html body.is-ctl-info .content-main .gla-body {
    color: rgba(255, 255, 255, 0.88) !important;
}
html body.is-ctl-info .content-main h1, html body.is-ctl-info .content-main h2,
html body.is-ctl-info .content-main h3, html body.is-ctl-info .content-main h4,
html body.is-ctl-info .content-main h5, html body.is-ctl-info .content-main h6 {
    color: #ffffff !important;
}
/* all body copy on the navy page -> light (boxes re-darken theirs in 4 & 5) */
html body.is-ctl-info .content-main p, html body.is-ctl-info .content-main li,
html body.is-ctl-info .content-main dd, html body.is-ctl-info .content-main dt,
html body.is-ctl-info .content-main td, html body.is-ctl-info .content-main strong,
html body.is-ctl-info .content-main em, html body.is-ctl-info .content-main blockquote,
html body.is-ctl-info .content-main figcaption {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 3) BOXES -> white surface (both the navy ones we flip + the already-white) */
html body.is-ctl-info section[class*="-hero"],
html body.is-ctl-info .glt-info-card,
html body.is-ctl-info .glk-class,
html body.is-ctl-info .glk-scale,
html body.is-ctl-info .gsv-pillar,
html body.is-ctl-info .gsv-review,
html body.is-ctl-info .guv-field,
html body.is-ctl-info .guv-product,
html body.is-ctl-info .gla-product,
html body.is-ctl-info .lss-product,
html body.is-ctl-info .lss-cta,
html body.is-ctl-info .lss-brand {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: rgba(15, 40, 75, 0.12) !important;
}

/* 4) text inside the FLIPPED (navy-origin) boxes was white -> make it dark.
   The .container-main prefix raises specificity to (0,3,3) so it beats the
   page's CMS inline color rules (e.g. `.glt-hero h1`, which tie my plain
   selectors at (0,2,3) and win on source order -> left "Alles rund um" white). */
html body.is-ctl-info .container-main section[class*="-hero"] *,
html body.is-ctl-info .container-main .glt-info-card-body,
html body.is-ctl-info .container-main .glt-info-card-body *,
html body.is-ctl-info .container-main .guv-product, html body.is-ctl-info .container-main .guv-product *,
html body.is-ctl-info .container-main .gla-product, html body.is-ctl-info .container-main .gla-product *,
html body.is-ctl-info .container-main .lss-product, html body.is-ctl-info .container-main .lss-product *,
html body.is-ctl-info .container-main .lss-cta, html body.is-ctl-info .container-main .lss-cta *,
html body.is-ctl-info .container-main .lss-brand, html body.is-ctl-info .container-main .lss-brand * {
    color: #0f284b !important;
}
/* the navy icon BADGE inside the (now white) info card stays navy -> keep glyph white */
html body.is-ctl-info .container-main .glt-info-card .glt-info-card-iconwrap,
html body.is-ctl-info .container-main .glt-info-card .glt-info-card-iconwrap * {
    color: #ffffff !important;
}
/* Removed: this blanket rule forced a filled gold CHIP on the bespoke Info
   sub-pages' .eyebrow (Service/Faserlaser/UV-Laser/Laserklassen/Lasersicherheit).
   Each of those templates ALREADY has its own correct dash-style .eyebrow CSS
   (gradient lines, no fill) inline -- this override was the only thing turning
   it back into a pill. Removed so those templates render as originally authored,
   matching the shared .glt-hero-eyebrow dash style below. */
/* Info-hub hero eyebrow (.glt-hero-eyebrow, shared with Blog/Videos) -> DASH
   style like the rest of the family: no fill, gold-dark text on the white card.
   glt-content.css already supplies the ::before/::after gradient lines; this
   just has to stop the old gold-chip fill from this higher-specificity rule. */
html body.is-ctl-info .container-main section[class*="-hero"] .glt-hero-eyebrow {
    background: none !important;
    border: 0 !important;
    color: #c9a127 !important;
    -webkit-text-fill-color: #c9a127 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* Bespoke Info sub-pages' .eyebrow text -- the wildcard rule above (part 4,
   "text inside FLIPPED boxes -> dark") forces navy on every descendant of the
   hero section, including this one, now that the old pill-fill override (which
   used to also set color) is gone. Reassert gold-dark to match the dash lines. */
html body.is-ctl-info .container-main section[class*="-hero"] .eyebrow {
    color: #c9a127 !important;
    -webkit-text-fill-color: #c9a127 !important;
}

/* 5) already-white boxes: re-darken their headings/copy (step 2 whitened them);
   target text tags only — leave spans/divs so gold badges/tags/icons keep colour */
html body.is-ctl-info .content-main .glk-class :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,strong,em,blockquote,figcaption),
html body.is-ctl-info .content-main .glk-scale :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,strong,em,blockquote,figcaption),
html body.is-ctl-info .content-main .gsv-pillar :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,strong,em,blockquote,figcaption),
html body.is-ctl-info .content-main .gsv-review :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,strong,em,blockquote,figcaption),
html body.is-ctl-info .content-main .guv-field :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,strong,em,blockquote,figcaption) {
    color: #0f284b !important;
}
/* page-level meta spans/labels that sit on the navy page -> light
   (Google rating on the service page; gallery sub-labels on the faserlaser page) */
html body.is-ctl-info .gsv-page .gsv-rating,
html body.is-ctl-info .gsv-page .gsv-rating-label,
html body.is-ctl-info .glt-info-article .gla-sublabel,
html body.is-ctl-info .glt-info-article .gla-label {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* ============================================================
   GLT-LASERSYSTEME category (body.is-ctl-navigation) — (v=676)
   1) flatten the hero "box" under the header (was a lighter-navy #1e3a5f
      rounded-bottom band) so it blends into the navy page.
   2) drop the white (#f8f9fa) tile behind the product images — the images
      are TRANSPARENT webp (machine only), so the navy card shows through.
   ============================================================ */
html body.is-ctl-navigation .content-main .cms-block.pos-0 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* kill the gold radial glow on the hero block ::before (residual box sheen) */
html body.is-ctl-navigation .content-main .cms-block.pos-0::before {
    background: none !important;
    background-image: none !important;
    display: none !important;
}
/* hero is now a white card (not flat text on navy): a bit more internal
   padding for breathing room, plus a small top margin so the card doesn't
   touch the fixed header (was 130px / 70px padding, then flattened to 40/28). */
html body.is-ctl-navigation .glt-cat-hero {
    padding-top: 56px !important;
    padding-bottom: 44px !important;
    margin-top: 20px !important;
}
/* also tighten the big gap below the hero: the sort/actions bar (was 40px pad)
   and the product-grid top padding (was 40px) */
html body.is-ctl-navigation .content-main .cms-block.pos-0 { margin-bottom: 4px !important; }
html body.is-ctl-navigation .content-main .cms-element-product-listing .cms-element-product-listing-actions {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
html body.is-ctl-navigation .content-main .cms-element-product-listing .cms-listing-row {
    padding-top: 12px !important;
}
/* CTA section ("Beratung & Angebot") — remove its background box (gradient + glow)
   so it sits flat on the navy page like the rest */
html body.is-ctl-navigation .glt-cat-end-cta {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body.is-ctl-navigation .glt-cat-end-cta::before,
html body.is-ctl-navigation .glt-cat-end-cta::after {
    display: none !important;
    background: none !important;
    background-image: none !important;
}
html body.is-ctl-navigation:not(.is-act-home) .product-box .product-image-wrapper,
html body.is-ctl-navigation .product-image-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Product FAQ fix: the FAQ items are WHITE boxes inside a .glt-section--dark, so
   the dark-section rule (`.glt-section--dark strong { color:#fff }`) turned the
   answer <strong> (e.g. the price "ab ca. 49.000 € netto") white-on-white = invisible.
   Force strong/b/em inside the white FAQ boxes back to dark navy. */
html body.is-ctl-product .glt-section--faq .glt-faq-item strong,
html body.is-ctl-product .glt-section--faq .glt-faq-item b,
html body.is-ctl-product .glt-section--faq .glt-faq-item em {
    color: #0f284b !important;
}

/* Info-Hub cards (.glt-info-card) INVERT to navy on hover (CMS rule sets bg navy + text
   white). But the inverted-white-card dark-text rule (.container-main .glt-info-card-body *)
   has higher specificity and kept the text dark -> it vanished on the navy hover bg.
   Re-assert WHITE text on hover (the gold icon lives outside .glt-info-card-body, stays gold). */
html body.is-ctl-info .container-main .glt-info-card:hover .glt-info-card-body,
html body.is-ctl-info .container-main .glt-info-card:hover .glt-info-card-body *,
html body.is-ctl-info .container-main a.glt-info-card:hover .glt-info-card-body,
html body.is-ctl-info .container-main a.glt-info-card:hover .glt-info-card-body * {
    color: #ffffff !important;
}
/* on hover: the icon glyph (gold stroke) -> WHITE (matches the white text), and the
   pulsing round rings (gold border) -> BLUE so they stay clearly visible on the navy card */
html body.is-ctl-info .container-main .glt-info-card:hover .glt-info-card-iconwrap svg,
html body.is-ctl-info .container-main .glt-info-card:hover .glt-info-card-iconwrap svg *,
html body.is-ctl-info .container-main a.glt-info-card:hover .glt-info-card-iconwrap svg,
html body.is-ctl-info .container-main a.glt-info-card:hover .glt-info-card-iconwrap svg * {
    stroke: #ffffff !important;
}
html body.is-ctl-info .container-main .glt-info-card:hover .glt-info-card-iconwrap::before,
html body.is-ctl-info .container-main .glt-info-card:hover .glt-info-card-iconwrap::after,
html body.is-ctl-info .container-main a.glt-info-card:hover .glt-info-card-iconwrap::before,
html body.is-ctl-info .container-main a.glt-info-card:hover .glt-info-card-iconwrap::after {
    border-color: rgba(96,165,250,0.65) !important;
}

/* 4. Bottom bar (copyright + SEO) */
.glt-footer-bottom {
    background: #0a1d3a !important;
    border-top: 1px solid rgba(225, 181, 46, 0.12) !important;
    padding: 20px 24px !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 13px !important;
    text-align: center !important;
}
.glt-footer-bottom-inner {
    max-width: 1300px !important;
    margin: 0 auto !important;
}
.glt-footer-copyright {
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, 0.72) !important;
}
.glt-footer-seo {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.4) !important;
}
.glt-footer-credit {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-top: 4px !important;
}
.glt-footer-credit a {
    color: rgba(225, 181, 46, 0.85) !important;
    text-decoration: none !important;
    transition: color .18s ease !important;
}
.glt-footer-credit a:hover {
    color: #E1B52E !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* 5. Responsive */
@media (max-width: 991px) {
    .glt-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }
}
@media (max-width: 600px) {
    .glt-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 40px 20px !important;
    }
}

/* =====================================================================
   FOOTER REDESIGN — kill leftover white "row footer-columns" strip (v=562)
   ===================================================================== */
html body .footer-main .row.footer-columns,
html body .footer-main .footer-columns {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
/* But keep the newsletter column inside it visible */
html body .footer-main .row.footer-columns .footer-column-newsletter {
    display: block !important;
}

/* =====================================================================
   NEWSLETTER CHECKBOX ROW — center the consent line (v=563)
   ===================================================================== */
html body.is-ctl-product .footer-column-newsletter .twt-form-newsletter-privacy,
html body .footer-column-newsletter .twt-form-newsletter-privacy {
    text-align: center !important;
}
html body.is-ctl-product .footer-column-newsletter fieldset.privacy-notice,
html body .footer-column-newsletter fieldset.privacy-notice {
    text-align: center !important;
}
html body.is-ctl-product .glt-newsletter-consent-row,
html body .glt-newsletter-consent-row {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: left !important;
}
html body.is-ctl-product .glt-newsletter-consent-row > div,
html body .glt-newsletter-consent-row > div {
    text-align: left !important;
}

/* =====================================================================
   PRODUCT DETAIL — kill the leftover light-gray strip under info-strip
   The original Shopware gallery cms-block was hidden but its container
   still showed a light-gray background. Force all product-detail
   sections to dark navy so nothing leaks. (v=564)
   ===================================================================== */

/* Hide the empty media cms-block completely so it takes no space */
html body.is-ctl-product .cms-block:has(.product-detail-media),
html body.is-ctl-product .cms-block.cms-block-gallery-buybox {
    display: none !important;
}

/* The outer page section + body bg → dark navy so any tiny seam blends */
html body.is-ctl-product,
html body.is-ctl-product .content-main,
html body.is-ctl-product .cms-page,
html body.is-ctl-product .cms-sections,
html body.is-ctl-product .cms-section.cms-section-default,
html body.is-ctl-product section.cms-section-default {
    background: #0f284b !important;
    background-color: #0f284b !important;
}

/* Products using Shopware's plain default CMS layout (no custom .glt-product-hero
   markup -- e.g. LightBurn-CORE/PRO license keys) never got a companion text-color
   fix for this navy background: Shopware's native description text ships #333
   (correct on white, unreadable on navy), and this file's own --ph-text-strong
   navy-mid was even worse on links/bold text. Match the dark-theme color language
   used everywhere else on this site (white body copy, gold links). */
html body.is-ctl-product .product-detail-description-text,
html body.is-ctl-product .product-detail-description-text p,
html body.is-ctl-product .product-detail-description-text li,
html body.is-ctl-product .product-detail-description-text td,
html body.is-ctl-product .product-detail-description-text th,
html body.is-ctl-product .product-detail-properties-table {
    color: rgba(255, 255, 255, 0.85) !important;
}
html body.is-ctl-product .product-detail-description-text h1,
html body.is-ctl-product .product-detail-description-text h2,
html body.is-ctl-product .product-detail-description-text h3,
html body.is-ctl-product .product-detail-description-text h4,
html body.is-ctl-product .product-detail-description-text strong,
html body.is-ctl-product .product-detail-description-text b {
    color: #ffffff !important;
}
html body.is-ctl-product .product-detail-description-text a {
    color: var(--ph-gold, #E1B52E) !important;
}

/* The wrapping section's white bg killed (this was creating the light strip) */
html body.is-ctl-product .cms-section.pos-0,
html body.is-ctl-product .cms-section.cms-section-default.boxed {
    background: transparent !important;
    background-color: transparent !important;
}

/* The info-strip sits on the dark hero — kill any padding-bottom on its
   wrapping cms-block-container so it sits flush with the description */
html body.is-ctl-product .cms-block-container:has(.glt-info-strip) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure the description-reviews cms-block starts immediately with no gap */
html body.is-ctl-product .cms-block.cms-block-product-description-reviews {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =====================================================================
   INFO-STRIP — dark navy bg instead of light gray (v=565)
   The cards (white bg with gold accent) pop better against navy.
   ===================================================================== */
html body.is-ctl-product .glt-info-strip,
.glt-info-strip {
    background: #0f284b !important;
    background-color: #0f284b !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding: 60px 0 70px !important;
}

/* The white cards already have a gold left-border accent —
   slightly stronger shadow now on dark bg */
html body.is-ctl-product .glt-info-strip .glt-info-card,
.glt-info-strip .glt-info-card {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(225, 181, 46, 0.15) !important;
}


/* =====================================================================
   BEWERTUNGEN (REVIEWS) TAB - dark-theme makeover (v=566)
   ===================================================================== */
html body.is-ctl-product .product-detail-reviews,
html body.is-ctl-product #review-tab-pane {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 32px 24px 48px !important;
}

html body.is-ctl-product .product-detail-review-list-headline,
html body.is-ctl-product .product-detail-reviews h2,
html body.is-ctl-product .product-detail-reviews h3 {
    color: #ffffff !important;
    font-family: "Poppins", sans-serif !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.is-ctl-product .product-detail-reviews-overview {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(225, 181, 46, 0.2) !important;
    border-radius: 16px !important;
    padding: 28px 28px !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html body.is-ctl-product .product-detail-reviews-rating,
html body.is-ctl-product .product-detail-reviews-overview-rating,
html body.is-ctl-product .product-detail-reviews-overview-headline {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600 !important;
}

html body.is-ctl-product .product-detail-reviews-overview .point-total {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.is-ctl-product .product-detail-reviews .point-star,
html body.is-ctl-product .product-detail-reviews .icon-star {
    color: rgba(225, 181, 46, 0.25) !important;
    fill: rgba(225, 181, 46, 0.25) !important;
}
html body.is-ctl-product .product-detail-reviews .point-star.is-active,
html body.is-ctl-product .product-detail-reviews .point-star-active,
html body.is-ctl-product .product-detail-reviews .point-star.point-star-on {
    color: #E1B52E !important;
    fill: #E1B52E !important;
}

html body.is-ctl-product .product-detail-reviews-overview-points,
html body.is-ctl-product .product-detail-reviews-overview-rating-row {
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
html body.is-ctl-product .product-detail-reviews .progress {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
html body.is-ctl-product .product-detail-reviews .progress-bar {
    background: linear-gradient(90deg, #E1B52E 0%, #c9a127 100%) !important;
}

html body.is-ctl-product .product-detail-reviews input[type="radio"],
html body.is-ctl-product .product-detail-reviews input[type="checkbox"] {
    accent-color: #E1B52E !important;
}

html body.is-ctl-product .product-detail-review-rating-form,
html body.is-ctl-product .product-detail-review-form {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(225, 181, 46, 0.2) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-top: 24px !important;
}
html body.is-ctl-product .product-detail-review-rating-form *,
html body.is-ctl-product .product-detail-review-form * {
    color: rgba(255, 255, 255, 0.92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
}

html body.is-ctl-product .product-detail-review-rating-form button,
html body.is-ctl-product .product-detail-review-rating-form .btn-primary,
html body.is-ctl-product .product-detail-reviews button.btn-primary {
    background: linear-gradient(135deg, #E1B52E 0%, #c9a127 100%) !important;
    color: #0f284b !important;
    -webkit-text-fill-color: #0f284b !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(225, 181, 46, 0.3) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
html body.is-ctl-product .product-detail-review-rating-form button:hover,
html body.is-ctl-product .product-detail-reviews button.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(225, 181, 46, 0.45) !important;
}

html body.is-ctl-product .product-detail-review-list,
html body.is-ctl-product .product-detail-review-list-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html body.is-ctl-product .product-detail-review-list-sorting,
html body.is-ctl-product .product-detail-review-list-sorting select,
html body.is-ctl-product .product-detail-reviews-sort-select,
html body.is-ctl-product .product-detail-review-list-sorting .form-select {
    background: rgba(15, 40, 75, 0.6) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(225, 181, 46, 0.35) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-weight: 500 !important;
}
html body.is-ctl-product .product-detail-review-list-sorting select option {
    background: #0f284b !important;
    color: #ffffff !important;
}

html body.is-ctl-product .product-detail-review-list-headline,
html body.is-ctl-product .product-detail-review-list-count {
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
}

html body.is-ctl-product .product-detail-review,
html body.is-ctl-product .product-detail-reviews-list > div,
html body.is-ctl-product .product-detail-review-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid #E1B52E !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    margin-bottom: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}
html body.is-ctl-product .product-detail-review:hover {
    border-color: rgba(225, 181, 46, 0.45) !important;
    transform: translateX(2px) !important;
}

html body.is-ctl-product .product-detail-review-meta,
html body.is-ctl-product .product-detail-review-date {
    color: rgba(225, 181, 46, 0.7) !important;
    -webkit-text-fill-color: rgba(225, 181, 46, 0.7) !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
}

html body.is-ctl-product .product-detail-review-headline,
html body.is-ctl-product .product-detail-review-title,
html body.is-ctl-product .product-detail-review h4,
html body.is-ctl-product .product-detail-review h5 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 4px 0 12px !important;
    font-family: "Poppins", sans-serif !important;
}

html body.is-ctl-product .product-detail-review-content,
html body.is-ctl-product .product-detail-review-text,
html body.is-ctl-product .product-detail-review p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.65 !important;
    font-size: 15px !important;
    margin: 0 !important;
}

html body.is-ctl-product .product-detail-reviews .pagination .page-link {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(225, 181, 46, 0.2) !important;
    border-radius: 6px !important;
}
html body.is-ctl-product .product-detail-reviews .pagination .active .page-link {
    background: var(--ph-gold, #E1B52E) !important;
    color: #0f284b !important;
    border-color: var(--ph-gold, #E1B52E) !important;
}


/* =====================================================================
   TAB NAV — clean up partial border lines & box the reviews (v=567)
   ===================================================================== */

/* Remove the partial gold border-bottom on .cms-card-header that didn't
   span the full screen — and any sibling top borders */
html body.is-ctl-product .cms-card-header,
html body.is-ctl-product .card.card-tabs > .card-header,
html body.is-ctl-product .card-tabs > .card-header,
html body.is-ctl-product .product-detail-tab-navigation {
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
}

/* If a thin separator under the tab nav is desired, render it as a
   full-bleed pseudo so it spans 100vw — but keep things clean: do not
   show any line at all for now. */
html body.is-ctl-product .cms-card-header::before,
html body.is-ctl-product .cms-card-header::after {
    display: none !important;
}

/* Active tab keeps its solid 3px gold underline (set elsewhere) — that
   is the only visual divider needed. */

/* Box the reviews tab pane content — center with max-width like the
   description content */
html body.is-ctl-product #review-tab-pane,
html body.is-ctl-product .tab-pane.product-detail-reviews,
html body.is-ctl-product .tab-pane:has(.product-detail-reviews-overview) {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 24px 56px !important;
}

/* Two-column layout: overview (left, 360px) + reviews list (right, fluid) */
html body.is-ctl-product .product-detail-reviews,
html body.is-ctl-product #review-tab-pane > div,
html body.is-ctl-product .tab-pane.product-detail-reviews > div {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Constrain inner row to centered layout */
html body.is-ctl-product .product-detail-reviews .row,
html body.is-ctl-product .product-detail-reviews-content .row {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Also constrain the description tab the same way for consistency */
html body.is-ctl-product #description-tab-pane,
html body.is-ctl-product .tab-pane.product-detail-description-tab-pane {
    max-width: 1300px !important;
    margin: 0 auto !important;
}


/* =====================================================================
   NAV-MAIN — always solid navy bg, never translucent (v=569)
   nav-scrolled is disabled by JS, so this rule must apply at all
   scroll positions, not only when scrolled.
   ===================================================================== */
html body .nav-main,
html body .nav-main.ready,
html body .nav-main.show,
html body .nav-main.ready.show,
html body .nav-main.header-solid,
html body .nav-main.header-solid.show,
html body .nav-main.header-solid.ready.show,
html body.is-ctl-product .nav-main,
html body.is-ctl-product .nav-main.ready,
html body.is-ctl-product .nav-main.show,
html body.is-ctl-product .nav-main.ready.show {
    background: rgb(30, 58, 95) !important;
    background-color: rgb(30, 58, 95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* =====================================================================
   CUSTOM VIDEO PLAYER — intro + feature video (v=571)
   - Autoplay, muted, looped on load
   - No YouTube chrome (raw mp4)
   - Controls visible only on hover
   - Full-width responsive, gold/dark theme
   ===================================================================== */

.glt-video-player {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #000 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(225, 181, 46, 0.2) !important;
    line-height: 0 !important;
}

.glt-video-player video.glt-vp-video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: #000 !important;
}

/* Controls bar — hidden by default, fades in on hover */
.glt-vp-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.glt-video-player:hover .glt-vp-controls,
.glt-video-player:focus-within .glt-vp-controls,
.glt-video-player.is-paused .glt-vp-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Control buttons */
.glt-vp-btn {
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
    flex: 0 0 auto !important;
}
.glt-vp-btn:hover {
    color: #E1B52E !important;
    transform: scale(1.08) !important;
}
.glt-vp-btn svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* Progress bar */
.glt-vp-progress {
    flex: 1 1 auto !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}
.glt-vp-progress-fill {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 0% !important;
    background: linear-gradient(90deg, #E1B52E 0%, #c9a127 100%) !important;
    transition: width 0.1s linear !important;
}

/* Time label */
.glt-vp-time {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    min-width: 78px !important;
    text-align: center !important;
    flex: 0 0 auto !important;
}

/* Volume slider */
.glt-vp-volume {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 70px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 2px !important;
    outline: none !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
}
.glt-vp-volume::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #E1B52E !important;
    cursor: pointer !important;
}
.glt-vp-volume::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #E1B52E !important;
    cursor: pointer !important;
    border: 0 !important;
}

/* --- INTRO PLAYER: replaces the image in .glt-intro-image --- */
.glt-section--intro .glt-intro-image .glt-video-player {
    aspect-ratio: 16 / 9 !important;
    max-height: 460px !important;
}
.glt-section--intro .glt-intro-image .glt-video-player video.glt-vp-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- FEATURE PLAYER: large centered single video --- */
.glt-video-feature {
    max-width: 1080px !important;
    margin: 32px auto 0 !important;
    text-align: center !important;
}
.glt-video-feature .glt-video-player--feature {
    aspect-ratio: 16 / 9 !important;
    max-height: 620px !important;
}
.glt-video-feature .glt-video-player--feature video.glt-vp-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.glt-video-caption {
    color: rgba(15, 40, 75, 0.85) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 18px !important;
    letter-spacing: 0.3px !important;
}
html body.is-ctl-product .glt-section--dark .glt-video-caption {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fullscreen mode tweak — make controls always visible in fullscreen */
.glt-video-player:fullscreen .glt-vp-controls,
.glt-video-player video.glt-vp-video:fullscreen + .glt-vp-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.glt-video-player video.glt-vp-video:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important;
}


/* =====================================================================
   HEADER LOCKDOWN — kill all transitions / animations on the header
   so the nav text never appears to shift on scroll. (v=572)
   ===================================================================== */

html body .header-main,
html body .header-main *,
html body .nav-main,
html body .nav-main *,
html body .header-row,
html body .header-row *,
html body .header-logo-col,
html body .header-logo-col *,
html body .main-navigation-link,
html body .nav-main-link {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Force the header to ALWAYS have identical positioning regardless of state */
html body .header-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 75px !important;
    min-height: 75px !important;
    max-height: 75px !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    z-index: 1000 !important;
}

html body .nav-main,
html body .nav-main.ready,
html body .nav-main.show,
html body .nav-main.ready.show,
html body .nav-main.header-solid,
html body .nav-main.header-solid.show,
html body .nav-main.header-solid.ready.show {
    position: fixed !important;
    top: 75px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    z-index: 999 !important;
}

/* The menu link row itself: identical spacing always */
html body .main-navigation-menu,
html body ul.main-navigation-menu,
html body .nav-main-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .main-navigation-link,
html body .nav-main-link {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 45px !important;
    display: inline-flex !important;
    align-items: center !important;
}


/* =====================================================================
   INTEGRA-SPECIFIC: app grid, options list, credit (v=573)
   ===================================================================== */

/* --- Application gallery grid (6 cards) --- */
html body.is-ctl-product .glt-app-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-top: 36px !important;
}
@media (max-width: 991px) {
    html body.is-ctl-product .glt-app-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    html body.is-ctl-product .glt-app-grid {
        grid-template-columns: 1fr !important;
    }
}

html body.is-ctl-product .glt-app-card {
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 8px 24px rgba(15, 40, 75, 0.08) !important;
}
html body.is-ctl-product .glt-section--dark .glt-app-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html body.is-ctl-product .glt-app-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(225, 181, 46, 0.45) !important;
    box-shadow: 0 18px 36px rgba(225, 181, 46, 0.15) !important;
}
html body.is-ctl-product .glt-app-card img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}
html body.is-ctl-product .glt-app-card figcaption {
    padding: 14px 16px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    color: var(--ph-navy-deep, #0f284b) !important;
    background: #ffffff !important;
    margin: 0 !important;
}
html body.is-ctl-product .glt-section--dark .glt-app-card figcaption {
    background: #0f284b !important;
    color: var(--ph-gold, #E1B52E) !important;
}

/* --- Section lead paragraph (below H2) --- */
html body.is-ctl-product .glt-section .glt-section-lead {
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: rgba(15, 40, 75, 0.78) !important;
    margin: -8px 0 24px !important;
    max-width: 720px !important;
}
html body.is-ctl-product .glt-section--dark .glt-section-lead {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* --- Options list (configurable features) --- */
html body.is-ctl-product .glt-options-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 28px !important;
}
@media (max-width: 700px) {
    html body.is-ctl-product .glt-options-list {
        grid-template-columns: 1fr !important;
    }
}
html body.is-ctl-product .glt-options-list li {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(15, 40, 75, 0.08) !important;
    border-left: 3px solid var(--ph-gold, #E1B52E) !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ph-navy-deep, #0f284b) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
html body.is-ctl-product .glt-section--dark .glt-options-list li {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left-color: var(--ph-gold, #E1B52E) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
html body.is-ctl-product .glt-options-list li:hover {
    transform: translateX(2px) !important;
    box-shadow: 0 8px 22px rgba(225, 181, 46, 0.12) !important;
}
html body.is-ctl-product .glt-options-list li strong {
    color: var(--ph-gold-dark, #c9a127) !important;
    margin-right: 4px !important;
}
html body.is-ctl-product .glt-section--dark .glt-options-list li strong {
    color: var(--ph-gold, #E1B52E) !important;
}

/* --- Credit line (Ferk Metallbau attribution) --- */
html body.is-ctl-product .glt-credit {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(15, 40, 75, 0.08) !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: rgba(15, 40, 75, 0.6) !important;
}
html body.is-ctl-product .glt-section--dark .glt-credit {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* --- Laserstrahlung warning icon in interlock section: smaller, framed --- */
html body.is-ctl-product .glt-section--interlock .glt-tech-image {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    border: 1px solid rgba(225, 181, 46, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body.is-ctl-product .glt-section--interlock .glt-tech-image img {
    max-width: 240px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- Two-column checklist for highlights (12 items) --- */
html body.is-ctl-product .glt-checklist.glt-checklist--two-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 32px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 24px 0 28px !important;
}
@media (max-width: 700px) {
    html body.is-ctl-product .glt-checklist.glt-checklist--two-col {
        grid-template-columns: 1fr !important;
    }
}
html body.is-ctl-product .glt-checklist.glt-checklist--two-col li {
    position: relative !important;
    padding-left: 28px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}
html body.is-ctl-product .glt-checklist.glt-checklist--two-col li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E1B52E'><circle cx='12' cy='12' r='10' opacity='0.18'/><path stroke='%23E1B52E' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M7 12l3.5 3.5L17 9'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* --- INTEGRA intro image: nice frame (since it's an application photo) --- */
html body.is-ctl-product .glt-section--intro .glt-intro-image img.glt-content-img {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(225, 181, 46, 0.2) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35) !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}


/* =====================================================================
   MATERIALS GRID — 2-col side-by-side with chip-style items (v=574)
   ===================================================================== */
html body.is-ctl-product .glt-section .glt-material-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    margin-top: 28px !important;
}
@media (max-width: 800px) {
    html body.is-ctl-product .glt-section .glt-material-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Reset old single-column wrapper styles */
html body.is-ctl-product .glt-section .glt-material-col {
    padding: 28px 28px 32px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.25s ease, border-color 0.25s ease !important;
    position: relative !important;
}

/* GOOD column — green/gold accent + checkmark badge */
html body.is-ctl-product .glt-section .glt-material-col--good {
    border-left: 3px solid #5fd370 !important;
}
html body.is-ctl-product .glt-section .glt-material-col--good:hover {
    border-color: rgba(95, 211, 112, 0.55) !important;
    border-left-color: #5fd370 !important;
    transform: translateY(-3px) !important;
}
html body.is-ctl-product .glt-section .glt-material-col--good h4 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #5fd370 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 20px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid rgba(95, 211, 112, 0.25) !important;
}
html body.is-ctl-product .glt-section .glt-material-col--good h4::before {
    content: '' !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235fd370'><circle cx='12' cy='12' r='12'/><path d='M10 16.2L5.8 12l-1.4 1.4L10 19 20 9l-1.4-1.4z' fill='white'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex: 0 0 26px !important;
}

/* BAD column — red accent + X badge */
html body.is-ctl-product .glt-section .glt-material-col--bad {
    border-left: 3px solid #e85a5a !important;
}
html body.is-ctl-product .glt-section .glt-material-col--bad:hover {
    border-color: rgba(232, 90, 90, 0.5) !important;
    border-left-color: #e85a5a !important;
    transform: translateY(-3px) !important;
}
html body.is-ctl-product .glt-section .glt-material-col--bad h4 {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #e85a5a !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
}
html body.is-ctl-product .glt-section .glt-material-col--bad h4::before {
    content: '' !important;
    display: inline-block !important;
    width: 26px !important;
    height: 26px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e85a5a'><circle cx='12' cy='12' r='12'/><path d='M16.6 6.7L12 11.3 7.4 6.7 6 8.1 10.6 12.7 6 17.3l1.4 1.4 4.6-4.6 4.6 4.6 1.4-1.4-4.6-4.6 4.6-4.6z' fill='white'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex: 0 0 26px !important;
}

html body.is-ctl-product .glt-section .glt-material-col--bad .glt-material-note {
    color: rgba(232, 90, 90, 0.7) !important;
    font-size: 13px !important;
    font-style: italic !important;
    margin: 0 0 18px 38px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid rgba(232, 90, 90, 0.2) !important;
    letter-spacing: 0.3px !important;
}

/* Chip-style material list (replaces bullets) */
html body.is-ctl-product .glt-section .glt-material-chips {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
html body.is-ctl-product .glt-section .glt-material-chips li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 100px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    transition: all 0.18s ease !important;
    margin: 0 !important;
}
html body.is-ctl-product .glt-section .glt-material-col--good .glt-material-chips li {
    border-color: rgba(95, 211, 112, 0.3) !important;
    background: rgba(95, 211, 112, 0.08) !important;
}
html body.is-ctl-product .glt-section .glt-material-col--good .glt-material-chips li:hover {
    background: rgba(95, 211, 112, 0.18) !important;
    border-color: rgba(95, 211, 112, 0.55) !important;
    transform: translateY(-1px) !important;
}
html body.is-ctl-product .glt-section .glt-material-col--bad .glt-material-chips li {
    border-color: rgba(232, 90, 90, 0.3) !important;
    background: rgba(232, 90, 90, 0.08) !important;
}
html body.is-ctl-product .glt-section .glt-material-col--bad .glt-material-chips li:hover {
    background: rgba(232, 90, 90, 0.18) !important;
    border-color: rgba(232, 90, 90, 0.55) !important;
    transform: translateY(-1px) !important;
}


/* =====================================================================
   FIX MATERIALS CHIPS & OPTIONS CARDS (v=575)
   ===================================================================== */

/* Remove the gold dot ::before pseudo on material chips (inherited from global li rule) */
html body.is-ctl-product .glt-section .glt-material-chips li::before,
html body.is-ctl-product .glt-section .glt-material-chips li::marker {
    content: none !important;
    display: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
}
html body.is-ctl-product .glt-section .glt-material-chips li {
    padding: 10px 16px !important;
    font-size: 14px !important;
}

/* ----- OPTIONS CARDS REDESIGN -----
   Replace bracket-looking gold left-bar with a clean numbered card style:
   gold-numbered circle prefix + flat translucent card + bold label + body */

html body.is-ctl-product .glt-options-list {
    counter-reset: option-num !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 24px !important;
}
@media (max-width: 700px) {
    html body.is-ctl-product .glt-options-list {
        grid-template-columns: 1fr !important;
    }
}

html body.is-ctl-product .glt-options-list li,
html body.is-ctl-product .glt-section--light .glt-options-list li,
html body.is-ctl-product .glt-section--dark .glt-options-list li {
    counter-increment: option-num !important;
    position: relative !important;
    display: block !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.08) !important;
    border-left: 0 !important;  /* kill bracket-style left border */
    border-radius: 14px !important;
    padding: 18px 22px 18px 76px !important;  /* room for circle on left */
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ph-navy-deep, #0f284b) !important;
    box-shadow: 0 6px 18px rgba(15, 40, 75, 0.06) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    min-height: 72px !important;
}
html body.is-ctl-product .glt-options-list li:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(225, 181, 46, 0.45) !important;
    box-shadow: 0 14px 32px rgba(225, 181, 46, 0.18) !important;
}

/* Numbered circle prefix */
html body.is-ctl-product .glt-section .glt-options-list li::before,
html body.is-ctl-product .glt-section--light .glt-options-list li::before,
html body.is-ctl-product .glt-section--dark .glt-options-list li::before {
    content: counter(option-num, decimal-leading-zero) !important;
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: linear-gradient(135deg, #E1B52E 0%, #c9a127 100%) !important;
    color: #0f284b !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(225, 181, 46, 0.35) !important;
}

html body.is-ctl-product .glt-options-list li strong {
    color: var(--ph-navy-deep, #0f284b) !important;
    font-weight: 700 !important;
    margin-right: 6px !important;
    display: inline !important;
}

/* =====================================================================
   CHECKLIST ON LIGHT SECTIONS — dark text (v=578)
   The .glt-checklist--two-col was styled for dark sections only.
   ===================================================================== */
html body.is-ctl-product .glt-section--light .glt-checklist.glt-checklist--two-col li,
html body.is-ctl-product .glt-section--light .glt-checklist--light li {
    color: rgba(15, 40, 75, 0.85) !important;
    -webkit-text-fill-color: rgba(15, 40, 75, 0.85) !important;
}
html body.is-ctl-product .glt-section--light .glt-checklist.glt-checklist--two-col li strong,
html body.is-ctl-product .glt-section--light .glt-checklist--light li strong {
    color: #0f284b !important;
    -webkit-text-fill-color: #0f284b !important;
}
/* Keep the gold checkmark icon — but on light bg use a slightly different opacity */
html body.is-ctl-product .glt-section--light .glt-checklist.glt-checklist--two-col li::before,
html body.is-ctl-product .glt-section--light .glt-checklist--light li::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E1B52E'><circle cx='12' cy='12' r='10'/><path stroke='%230f284b' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M7 12l3.5 3.5L17 9'/></svg>") !important;
}

/* =====================================================================
   Remove the duplicate checkmark (::after) — the ::before gold circle
   already contains the check icon, so the older ::after overlay is
   redundant and visually overlaps. (v=579)
   ===================================================================== */
html body.is-ctl-product .glt-section .glt-checklist li::after,
html body.is-ctl-product .glt-section .glt-checklist.glt-checklist--two-col li::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* =====================================================================
   CHECKLIST CHECKMARK FIX — single SVG with gold circle + check (v=580)
   The older rule made ::before a solid gold circle and ::after the
   check via borders. v=579 killed the ::after. Now we replace ::before
   bg with a unified SVG that contains BOTH the circle and the check.
   ===================================================================== */
html body.is-ctl-product .glt-section .glt-checklist li::before,
html body.is-ctl-product .glt-section--dark .glt-checklist li::before,
html body.is-ctl-product .glt-section--dark .glt-checklist--two-col li::before {
    background-color: transparent !important;
    background: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23E1B52E'/><path d='M7 12.5l3 3 7-7' stroke='%230f284b' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
}

/* Light section variant — same SVG but with deeper navy check */
html body.is-ctl-product .glt-section--light .glt-checklist li::before,
html body.is-ctl-product .glt-section--light .glt-checklist--two-col li::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23E1B52E'/><path d='M7 12.5l3 3 7-7' stroke='%230f284b' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}


/* =====================================================================
   MOPA SPEC TABLE + FAQ ACCORDION (v=581)
   ===================================================================== */

/* --- MOPA tech-specs table --- */
html body.is-ctl-product .glt-mopa-table-title {
    color: var(--ph-gold, #E1B52E) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin: 36px 0 18px !important;
}
html body.is-ctl-product .glt-spec-table-wrap {
    overflow-x: auto !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(225, 181, 46, 0.2) !important;
}
html body.is-ctl-product .glt-spec-table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
}
html body.is-ctl-product .glt-spec-table thead th {
    background: rgba(225, 181, 46, 0.08) !important;
    color: var(--ph-gold, #E1B52E) !important;
    -webkit-text-fill-color: var(--ph-gold, #E1B52E) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 16px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(225, 181, 46, 0.35) !important;
}
html body.is-ctl-product .glt-spec-table tbody td {
    padding: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
html body.is-ctl-product .glt-spec-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
html body.is-ctl-product .glt-spec-table tbody tr:hover td {
    background: rgba(225, 181, 46, 0.06) !important;
}
html body.is-ctl-product .glt-spec-table tbody td strong {
    color: var(--ph-gold, #E1B52E) !important;
    -webkit-text-fill-color: var(--ph-gold, #E1B52E) !important;
}

/* --- FAQ accordion --- */
html body.is-ctl-product .glt-section--faq .glt-faq-list {
    max-width: 920px !important;
    margin: 32px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
html body.is-ctl-product .glt-faq-item {
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.1) !important;
    border-left: 3px solid var(--ph-gold, #E1B52E) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html body.is-ctl-product .glt-faq-item[open] {
    border-color: rgba(225, 181, 46, 0.45) !important;
    box-shadow: 0 12px 28px rgba(225, 181, 46, 0.12) !important;
}
html body.is-ctl-product .glt-faq-item summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--ph-navy-deep, #0f284b) !important;
    -webkit-text-fill-color: var(--ph-navy-deep, #0f284b) !important;
    transition: color 0.18s ease !important;
}
html body.is-ctl-product .glt-faq-item summary::-webkit-details-marker,
html body.is-ctl-product .glt-faq-item summary::marker {
    display: none !important;
    content: '' !important;
}
html body.is-ctl-product .glt-faq-item summary:hover {
    color: var(--ph-gold-dark, #c9a127) !important;
}
html body.is-ctl-product .glt-faq-q {
    flex: 1 1 auto !important;
}
html body.is-ctl-product .glt-faq-icon {
    flex: 0 0 20px !important;
    color: var(--ph-gold, #E1B52E) !important;
    transition: transform 0.25s ease !important;
}
html body.is-ctl-product .glt-faq-item[open] .glt-faq-icon {
    transform: rotate(180deg) !important;
}
html body.is-ctl-product .glt-faq-a {
    padding: 0 22px 20px !important;
    color: rgba(15, 40, 75, 0.8) !important;
    line-height: 1.65 !important;
    font-size: 15px !important;
    border-top: 1px solid rgba(15, 40, 75, 0.06) !important;
    padding-top: 16px !important;
}
html body.is-ctl-product .glt-faq-a p {
    margin: 0 0 10px !important;
    color: rgba(15, 40, 75, 0.82) !important;
}
html body.is-ctl-product .glt-faq-a ul {
    margin: 8px 0 4px !important;
    padding-left: 22px !important;
}
html body.is-ctl-product .glt-faq-a ul li {
    margin-bottom: 4px !important;
    color: rgba(15, 40, 75, 0.82) !important;
    list-style: disc !important;
}


/* =====================================================================
   GLT-LASERSYSTEME CATEGORY PAGE — dark/gold redesign (v=582)
   ===================================================================== */

/* Apply only on navigation/category pages with class for our category */
html body.is-ctl-navigation {
    background: #0f284b !important;
}
html body.is-ctl-navigation .content-main,
html body.is-ctl-navigation .cms-page,
html body.is-ctl-navigation .cms-sections,
html body.is-ctl-navigation .cms-section,
html body.is-ctl-navigation main {
    background: #0f284b !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Page H1 + intro text */
html body.is-ctl-navigation .cms-block-text {
    text-align: center !important;
    padding: 100px 24px 50px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
html body.is-ctl-navigation h1,
html body.is-ctl-navigation .cms-block-text h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin: 0 0 24px !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
}
html body.is-ctl-navigation .cms-block-text h1::before {
    content: 'INDUSTRIELASER · MADE IN GERMANY' !important;
    display: block !important;
    color: #E1B52E !important;
    -webkit-text-fill-color: #E1B52E !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
html body.is-ctl-navigation .cms-block-text h2,
html body.is-ctl-navigation .cms-block-text h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
}
html body.is-ctl-navigation .cms-block-text p {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    max-width: 760px !important;
    margin: 0 auto 16px !important;
}

/* Hide the bulky banner image block — too generic */
html body.is-ctl-navigation .cms-block-image {
    display: none !important;
}

/* Hide the sidebar that breaks the layout on most categories */
html body.is-ctl-navigation .cms-block-sidebar,
html body.is-ctl-navigation .sidebar-main {
    display: none !important;
}

/* Product listing block: full width grid */
html body.is-ctl-navigation .cms-block-product,
html body.is-ctl-navigation .cms-block-product-listing,
html body.is-ctl-navigation .cms-element-product-listing,
html body.is-ctl-navigation .cms-element-product-box,
html body.is-ctl-navigation .col-lg-9.has-sidebar,
html body.is-ctl-navigation .product-detail-content-area {
    background: #0f284b !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 24px 80px !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* Force grid 3-col with proper spacing */
html body.is-ctl-navigation .cms-listing-row,
html body.is-ctl-navigation .product-listing,
html body.is-ctl-navigation [class*="cms-element-product"] .row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    margin: 0 !important;
}
@media (max-width: 991px) {
    html body.is-ctl-navigation .cms-listing-row,
    html body.is-ctl-navigation .product-listing {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    html body.is-ctl-navigation .cms-listing-row,
    html body.is-ctl-navigation .product-listing {
        grid-template-columns: 1fr !important;
    }
}

/* Cancel Bootstrap col widths so grid gap works */
html body.is-ctl-navigation .cms-listing-row > [class*="col-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* Product card — dark glass with gold hover */
html body.is-ctl-navigation .product-box,
html body.is-ctl-navigation .card.product-box {
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
}
html body.is-ctl-navigation .product-box:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(225, 181, 46, 0.5) !important;
    box-shadow: 0 24px 56px rgba(225, 181, 46, 0.18) !important;
}

html body.is-ctl-navigation .product-box .card-body {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Hide the cluttered badge row + ratings */
html body.is-ctl-navigation .product-box .product-badges,
html body.is-ctl-navigation .product-box .product-rating,
html body.is-ctl-navigation .product-box .product-variant-characteristics,
html body.is-ctl-navigation .product-box .badge-stock,
html body.is-ctl-navigation .product-box .badge-shipping-free {
    display: none !important;
}

/* Image wrapper — fixed aspect with cover (bg now transparent; images are transparent webp) */
html body.is-ctl-navigation .product-box .product-image-wrapper {
    background: transparent !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    height: auto !important;
    max-height: none !important;
}
html body.is-ctl-navigation .product-box .product-image {
    max-width: 100% !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.4s ease !important;
}
html body.is-ctl-navigation .product-box:hover .product-image {
    transform: scale(1.06) !important;
}

/* Product info area below image */
html body.is-ctl-navigation .product-box .product-info {
    padding: 24px 26px 28px !important;
    background: transparent !important;
}

/* Product name */
html body.is-ctl-navigation .product-box .product-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.2px !important;
}
html body.is-ctl-navigation .product-box:hover .product-name {
    color: #E1B52E !important;
    -webkit-text-fill-color: #E1B52E !important;
}

/* Description below name */
html body.is-ctl-navigation .product-box .product-description {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Price info row — keep but restyle */
html body.is-ctl-navigation .product-box .product-price-info {
    border-top: 1px solid rgba(225, 181, 46, 0.18) !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
}
html body.is-ctl-navigation .product-box .product-price,
html body.is-ctl-navigation .product-box .product-price-wrapper {
    color: #E1B52E !important;
    -webkit-text-fill-color: #E1B52E !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    background: transparent !important;
}
html body.is-ctl-navigation .product-box .price-on-request-link,
html body.is-ctl-navigation .product-box .product-cheapest-price {
    color: #E1B52E !important;
    -webkit-text-fill-color: #E1B52E !important;
    font-size: 16px !important;
    background: transparent !important;
}

/* "Mehr erfahren →" CTA injected via ::after on the stretched-link */
html body.is-ctl-navigation .product-box::after {
    content: 'Mehr erfahren →' !important;
    position: absolute !important;
    bottom: 24px !important;
    right: 26px !important;
    color: #E1B52E !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0.7 !important;
}
html body.is-ctl-navigation .product-box:hover::after {
    transform: translateX(4px) !important;
    opacity: 1 !important;
}
html body.is-ctl-navigation .product-box {
    position: relative !important;
}

/* Hide the filter sidebar widgets / sorting bar above products (cluttered) */
html body.is-ctl-navigation .cms-element-product-listing-config,
html body.is-ctl-navigation .listing-filter-bar,
html body.is-ctl-navigation .filter-panel-wrapper,
html body.is-ctl-navigation .product-detail-action-bar {
    display: none !important;
}

/* Page count / sort widget — keep but style */
html body.is-ctl-navigation .listing-actions {
    display: none !important;
}

/* Pagination if any */
html body.is-ctl-navigation .pagination .page-link {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(225, 181, 46, 0.2) !important;
}
html body.is-ctl-navigation .pagination .active .page-link {
    background: #E1B52E !important;
    color: #0f284b !important;
    border-color: #E1B52E !important;
}

/* v=583 — beat ThemeWare's body.is-ctl-navigation:not(.is-act-home) specificity */
html body.is-ctl-navigation.themeware,
html body.is-ctl-navigation.twt-modern,
html body.is-ctl-navigation.is-act-index,
html body.is-ctl-navigation:not(.is-act-home) {
    background: #0f284b !important;
    background-color: #0f284b !important;
}
html body.is-ctl-navigation.themeware .content-main,
html body.is-ctl-navigation.themeware .cms-page,
html body.is-ctl-navigation.themeware main {
    background: #0f284b !important;
    background-color: #0f284b !important;
}

/* v=584 — bump product-box specificity for category page */
html body.is-ctl-navigation.themeware .product-box,
html body.is-ctl-navigation.themeware .card.product-box,
html body.is-ctl-navigation .product-box.card {
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html body.is-ctl-navigation.themeware .product-box .card-body {
    background: transparent !important;
}

/* v=585 — bump product name + text colors on category page */
html body.is-ctl-navigation.themeware .product-box .product-name,
html body.is-ctl-navigation.themeware .product-box a.product-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body.is-ctl-navigation.themeware .product-box:hover .product-name {
    color: #E1B52E !important;
    -webkit-text-fill-color: #E1B52E !important;
}
html body.is-ctl-navigation.themeware .product-box .product-description,
html body.is-ctl-navigation.themeware .product-box .product-description * {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}
html body.is-ctl-navigation.themeware .product-box .product-price,
html body.is-ctl-navigation.themeware .product-box .product-price-wrapper,
html body.is-ctl-navigation.themeware .product-box .price-on-request-link,
html body.is-ctl-navigation.themeware .product-box .product-cheapest-price {
    color: #E1B52E !important;
    -webkit-text-fill-color: #E1B52E !important;
}

/* =====================================================================
   CATEGORY PAGE — REVERT aggressive layout overrides (v=586)
   Previous rules collapsed flex/grid containers. Restore Shopware's
   default Bootstrap grid + only restyle visuals (colors, cards).
   ===================================================================== */

/* Undo width/flex/max-width overrides that broke layout */
html body.is-ctl-navigation.themeware .cms-block-product,
html body.is-ctl-navigation.themeware .cms-block-product-listing,
html body.is-ctl-navigation.themeware .cms-element-product-listing,
html body.is-ctl-navigation.themeware .cms-element-product-listing-wrapper,
html body.is-ctl-navigation.themeware .cms-element-product-box,
html body.is-ctl-navigation.themeware .col-lg-9.has-sidebar,
html body.is-ctl-navigation.themeware .col-12,
html body.is-ctl-navigation.themeware .cms-section-default,
html body.is-ctl-navigation.themeware .cms-section.boxed,
html body.is-ctl-navigation.themeware section.cms-section-default {
    max-width: none !important;
    width: auto !important;
    flex: 0 1 auto !important;
    padding: revert !important;
    margin: revert !important;
}

/* Undo H1 max-width that made it 20px wide */
html body.is-ctl-navigation.themeware .cms-block-text,
html body.is-ctl-navigation .cms-block-text {
    max-width: none !important;
    text-align: center !important;
    padding: 100px 24px 40px !important;
    margin: 0 auto !important;
    width: auto !important;
    background: transparent !important;
}
html body.is-ctl-navigation.themeware .cms-block-text .cms-element-text,
html body.is-ctl-navigation .cms-block-text .cms-element-text {
    max-width: 1100px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* H1 — no max-width issues, simply centered */
html body.is-ctl-navigation.themeware h1,
html body.is-ctl-navigation h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin: 0 0 24px !important;
    line-height: 1.1 !important;
    word-break: keep-all !important;
    white-space: normal !important;
    width: auto !important;
    display: block !important;
}

/* Eyebrow above H1 — make it a simple block, not flex */
html body.is-ctl-navigation.themeware h1::before,
html body.is-ctl-navigation h1::before {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 18px !important;
}

/* Undo grid overrides on listing-row; let Bootstrap row work */
html body.is-ctl-navigation .cms-listing-row,
html body.is-ctl-navigation [class*="cms-element-product"] .row {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 40px 0 !important;
    max-width: 1300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Restore col widths for product cards — 3 cols on desktop, 2 on tablet, 1 mobile */
html body.is-ctl-navigation .cms-listing-row > .cms-listing-col,
html body.is-ctl-navigation .cms-listing-row > [class*="col-"] {
    flex: 0 0 calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (max-width: 991px) {
    html body.is-ctl-navigation .cms-listing-row > .cms-listing-col,
    html body.is-ctl-navigation .cms-listing-row > [class*="col-"] {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}
@media (max-width: 600px) {
    html body.is-ctl-navigation .cms-listing-row > .cms-listing-col,
    html body.is-ctl-navigation .cms-listing-row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================================
   GLT-Lasersysteme HEADER CENTERING + cleanup (v=587)
   ===================================================================== */
html body.is-ctl-navigation .cms-block-text,
html body.is-ctl-navigation.themeware .cms-block-text {
    text-align: center !important;
}
html body.is-ctl-navigation .cms-block-text *,
html body.is-ctl-navigation.themeware .cms-block-text * {
    text-align: center !important;
}
html body.is-ctl-navigation .cms-block-text .cms-element-text,
html body.is-ctl-navigation.themeware .cms-block-text .cms-element-text {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
}
html body.is-ctl-navigation .cms-block-text h1,
html body.is-ctl-navigation.themeware .cms-block-text h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
    width: auto !important;
}

/* Suppress stray pseudo-elements that produce the gold underline under H1 */
html body.is-ctl-navigation .cms-block-text h1::after,
html body.is-ctl-navigation.themeware .cms-block-text h1::after,
html body.is-ctl-navigation h2::after,
html body.is-ctl-navigation h3::after {
    display: none !important;
    content: none !important;
}

/* Tighten hero padding for a cleaner look */
html body.is-ctl-navigation .cms-block-text,
html body.is-ctl-navigation.themeware .cms-block-text {
    padding: 130px 24px 50px !important;
}

/* H1 should be reasonable size, never wider than its container */
html body.is-ctl-navigation .cms-block-text h1 {
    font-size: 56px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
}
@media (max-width: 700px) {
    html body.is-ctl-navigation .cms-block-text h1 { font-size: 36px !important; }
    html body.is-ctl-navigation .cms-block-text { padding: 110px 20px 40px !important; }
}

/* =====================================================================
   GLT-Lasersysteme HEADER — flexbox centering (v=588)
   text-align + margin auto isn't winning due to width inheritance issues.
   Use flex containers to force centering reliably.
   ===================================================================== */
html body.is-ctl-navigation .cms-block-text,
html body.is-ctl-navigation.themeware .cms-block-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 130px 24px 50px !important;
    width: 100% !important;
    max-width: none !important;
}
html body.is-ctl-navigation .cms-block-text .cms-element-text,
html body.is-ctl-navigation.themeware .cms-block-text .cms-element-text {
    max-width: 1100px !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* The block-container-row that wraps each cms-block — let it span full width */
html body.is-ctl-navigation .cms-block-text .cms-block-container,
html body.is-ctl-navigation .cms-block-text .cms-block-container-row {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    text-align: center !important;
}
html body.is-ctl-navigation .cms-block-text .col-12 {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    text-align: center !important;
}

/* H1 — width fits content, centered as flex item */
html body.is-ctl-navigation .cms-block-text h1,
html body.is-ctl-navigation.themeware .cms-block-text h1 {
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    align-self: center !important;
}
html body.is-ctl-navigation .cms-block-text h1::before,
html body.is-ctl-navigation.themeware .cms-block-text h1::before {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}
html body.is-ctl-navigation .cms-block-text p,
html body.is-ctl-navigation.themeware .cms-block-text p {
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto 16px !important;
    align-self: center !important;
}


/* =====================================================================
   GLT-LASERSYSTEME CATEGORY PAGE — POLISHED (v=589)
   Full-bleed hero band, rich tagline, hidden listing actions, end CTA
   ===================================================================== */

/* Make the boxed section full-bleed for the hero */
html body.is-ctl-navigation .cms-block-text {
    margin: 0 !important;
    max-width: none !important;
    width: 100vw !important;
    padding: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    background: linear-gradient(180deg, #0f284b 0%, #15304d 60%, #0f284b 100%) !important;
    border-bottom: 1px solid rgba(225, 181, 46, 0.18) !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

/* Subtle gold glow accent in the hero */
html body.is-ctl-navigation .cms-block-text::before {
    content: '' !important;
    position: absolute !important;
    top: -200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 800px !important;
    height: 400px !important;
    background: radial-gradient(ellipse at center, rgba(225, 181, 46, 0.18) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Container row inside the hero — for our injected glt-cat-hero */
html body.is-ctl-navigation .cms-block-text .cms-block-container,
html body.is-ctl-navigation .cms-block-text .cms-block-container-row,
html body.is-ctl-navigation .cms-block-text .col-12,
html body.is-ctl-navigation .cms-block-text .cms-element-text {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: block !important;
    text-align: center !important;
}

/* The injected hero content */
.glt-cat-hero {
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    padding: 130px 24px 70px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 40, 75, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(15, 40, 75, 0.12) !important;
}

/* Dash-style eyebrow: gold-dark text + thin gradient lines, no pill fill --
   now that the hero is a white card, matches the Blog/Videos/Info design. */
.glt-cat-hero-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    color: #c9a127 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 3.2px !important;
    text-transform: uppercase !important;
    margin: 0 0 24px !important;
}
.glt-cat-hero-eyebrow::before,
.glt-cat-hero-eyebrow::after {
    content: '' !important;
    width: 36px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent 0%, #c9a127 100%) !important;
}
.glt-cat-hero-eyebrow::after {
    background: linear-gradient(90deg, #c9a127 0%, transparent 100%) !important;
}

.glt-cat-hero h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    color: #0f284b !important;
    -webkit-text-fill-color: #0f284b !important;
    margin: 0 0 22px !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
    width: auto !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
.glt-cat-hero h1::before,
.glt-cat-hero h1::after {
    display: none !important;
    content: none !important;
}

.glt-cat-hero-tagline {
    font-size: 19px !important;
    line-height: 1.6 !important;
    color: rgba(15, 40, 75, 0.75) !important;
    max-width: 720px !important;
    margin: 0 auto 28px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* The generic `html body.is-ctl-navigation h1` / `.cms-block-text p` rules elsewhere
   in this file have HIGHER specificity than the plain `.glt-cat-hero h1` /
   `.glt-cat-hero-tagline` rules above (they chain more type selectors), so they were
   still winning and forcing white text on the new white card. Re-assert navy here
   with matching specificity (ancestor-scoped, like the rest of this file's pattern). */
html body.is-ctl-navigation .glt-cat-hero h1,
html body.is-ctl-navigation.themeware .glt-cat-hero h1 {
    color: #0f284b !important;
    -webkit-text-fill-color: #0f284b !important;
    margin-bottom: 18px !important;
}
html body.is-ctl-navigation .glt-cat-hero .glt-cat-hero-tagline {
    color: rgba(15, 40, 75, 0.75) !important;
    -webkit-text-fill-color: rgba(15, 40, 75, 0.75) !important;
}

.glt-cat-hero-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    color: rgba(15, 40, 75, 0.6) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin-top: 8px !important;
}
/* the plain child <span>s (not the .strong count) directly match the generic
   `.cms-element-text span { color: white }` rule elsewhere in this file, which
   wins over inherited color regardless of specificity -- text set directly on
   an element always beats an ancestor's inherited value. Re-assert here. */
html body.is-ctl-navigation .glt-cat-hero-meta span {
    color: rgba(15, 40, 75, 0.6) !important;
}
.glt-cat-hero-meta strong {
    color: #c9a127 !important;
    -webkit-text-fill-color: #c9a127 !important;
    font-weight: 700 !important;
    margin-right: 6px !important;
}
.glt-cat-divider {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(201, 161, 39, 0.7) !important;
}

@media (max-width: 700px) {
    .glt-cat-hero h1 { font-size: 40px !important; }
    .glt-cat-hero { padding: 100px 20px 50px !important; }
    .glt-cat-hero-tagline { font-size: 16px !important; }
    .glt-cat-hero-meta { flex-direction: column !important; gap: 6px !important; }
    .glt-cat-divider { display: none !important; }
}

/* Hide the Name A-Z sort dropdown + any sort/filter widgets */
html body.is-ctl-navigation .cms-element-product-listing-config,
html body.is-ctl-navigation .listing-actions,
html body.is-ctl-navigation .listing-filter-bar,
html body.is-ctl-navigation .filter-panel-wrapper,
html body.is-ctl-navigation .product-detail-action-bar,
html body.is-ctl-navigation .sorting-wrapper,
html body.is-ctl-navigation .form-select {
    display: none !important;
}

/* Hide breadcrumbs on category page */
html body.is-ctl-navigation .breadcrumbs-container,
html body.is-ctl-navigation .breadcrumb {
    display: none !important;
}

/* Tighten spacing between hero and product grid */
html body.is-ctl-navigation .cms-section.pos-1 {
    padding-top: 0 !important;
}
html body.is-ctl-navigation .cms-block-product,
html body.is-ctl-navigation .cms-block-product-listing,
html body.is-ctl-navigation .cms-element-product-listing {
    padding-top: 60px !important;
}

/* End CTA section */
.glt-cat-end-cta {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: linear-gradient(135deg, rgba(225, 181, 46, 0.15) 0%, rgba(225, 181, 46, 0.04) 50%, rgba(15, 40, 75, 0.1) 100%) !important;
    border-top: 1px solid rgba(225, 181, 46, 0.25) !important;
    border-bottom: 1px solid rgba(225, 181, 46, 0.18) !important;
    padding: 70px 24px !important;
    margin-top: 60px !important;
    position: relative !important;
    overflow: hidden !important;
}
.glt-cat-end-cta::before {
    content: '' !important;
    position: absolute !important;
    top: -150px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
    height: 300px !important;
    background: radial-gradient(ellipse, rgba(225, 181, 46, 0.18) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
.glt-cat-end-cta-inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
}
/* Converted from underline-style (border-bottom) to the dash-line style used
   everywhere else (gradient lines either side, no fill/underline). */
.glt-cat-end-cta-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    color: #c9a127 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 3.2px !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}
.glt-cat-end-cta-eyebrow::before,
.glt-cat-end-cta-eyebrow::after {
    content: '' !important;
    width: 36px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent 0%, #c9a127 100%) !important;
}
.glt-cat-end-cta-eyebrow::after {
    background: linear-gradient(90deg, #c9a127 0%, transparent 100%) !important;
}
.glt-cat-end-cta h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 18px !important;
    letter-spacing: -0.3px !important;
}
.glt-cat-end-cta p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    margin: 0 0 32px !important;
}
.glt-cat-end-cta-row {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}
.glt-cat-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 30px !important;
    border-radius: 12px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
}
.glt-cat-cta-btn--gold {
    background: linear-gradient(135deg, #E1B52E 0%, #c9a127 100%) !important;
    color: #0f284b !important;
    -webkit-text-fill-color: #0f284b !important;
    box-shadow: 0 8px 22px rgba(225, 181, 46, 0.35) !important;
}
.glt-cat-cta-btn--gold:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 30px rgba(225, 181, 46, 0.5) !important;
}
.glt-cat-cta-btn--ghost {
    border: 2px solid rgba(225, 181, 46, 0.55) !important;
    color: var(--ph-gold, #E1B52E) !important;
    -webkit-text-fill-color: var(--ph-gold, #E1B52E) !important;
    background: transparent !important;
}
.glt-cat-cta-btn--ghost:hover {
    background: rgba(225, 181, 46, 0.1) !important;
    border-color: var(--ph-gold, #E1B52E) !important;
    transform: translateY(-3px) !important;
}

@media (max-width: 700px) {
    .glt-cat-end-cta h2 { font-size: 26px !important; }
}

/* Product cards — bigger image area, slightly tighter padding */
html body.is-ctl-navigation.themeware .product-box .product-image-wrapper {
    aspect-ratio: 4 / 3 !important;
    padding: 32px !important;
}
html body.is-ctl-navigation.themeware .product-box .product-image {
    max-height: 240px !important;
}
html body.is-ctl-navigation.themeware .product-box .product-info {
    padding: 28px 28px 32px !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
}
html body.is-ctl-navigation.themeware .product-box .product-description {
    flex: 1 1 auto !important;
}

/* Make "Mehr erfahren →" sit at bottom-right consistently */
html body.is-ctl-navigation.themeware .product-box {
    padding-bottom: 50px !important;
}

/* v=590 — remove duplicate H1::before eyebrow + ensure full-bleed hero */
html body.is-ctl-navigation .cms-block-text h1::before,
html body.is-ctl-navigation.themeware .cms-block-text h1::before,
html body.is-ctl-navigation h1::before,
html body.is-ctl-navigation.themeware h1::before {
    content: none !important;
    display: none !important;
}

/* Force the boxed section wrapper to drop its max-width so hero is truly full-bleed */
html body.is-ctl-navigation .cms-section.pos-0 section.cms-section-default,
html body.is-ctl-navigation .cms-section.pos-0.cms-section-default,
html body.is-ctl-navigation .cms-section-default.boxed {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* The cms-block-text already full-bleed via margin-left:calc(-50vw + 50%) — keep, but ensure it has no border-radius */
html body.is-ctl-navigation .cms-block-text {
    border-radius: 0 !important;
}

/* v=591 — Force eyebrow color on glt-cat-hero-eyebrow (gold-dark now that the
   hero is a white card, for contrast -- was plain gold, tuned for navy) */
html body.is-ctl-navigation .glt-cat-hero .glt-cat-hero-eyebrow,
html body.is-ctl-navigation.themeware .glt-cat-hero .glt-cat-hero-eyebrow,
html body .glt-cat-hero-eyebrow,
.glt-cat-hero .glt-cat-hero-eyebrow {
    color: #c9a127 !important;
    -webkit-text-fill-color: #c9a127 !important;
}

/* v=592 — Newsletter & footer fixes for CATEGORY pages too */

/* Newsletter form bg fix — apply to navigation pages */
html body.is-ctl-navigation .footer-column-newsletter .cms-block,
html body.is-ctl-navigation .footer-column-newsletter .cms-block.cms-block-form,
html body.is-ctl-navigation .footer-column-newsletter .cms-block-container,
html body.is-ctl-navigation .footer-column-newsletter .cms-element-form,
html body.is-ctl-navigation .footer-column-newsletter .cms-element {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Newsletter input dark style on category pages */
html body.is-ctl-navigation .footer-column-newsletter input.form-control {
    background: rgba(15, 40, 75, 0.6) !important;
    border: 1px solid rgba(225, 181, 46, 0.35) !important;
    color: #ffffff !important;
    height: 50px !important;
    border-radius: 10px !important;
}
html body.is-ctl-navigation .footer-column-newsletter input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Newsletter button gold on category pages */
html body.is-ctl-navigation .footer-column-newsletter button.btn-primary,
html body.is-ctl-navigation .footer-column-newsletter button[type="submit"] {
    background: linear-gradient(135deg, #E1B52E 0%, #c9a127 100%) !important;
    color: #0f284b !important;
    border: none !important;
    border-radius: 10px !important;
    height: 50px !important;
    min-width: 70px !important;
    padding: 0 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(225, 181, 46, 0.35) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Newsletter form layout: input + button row */
html body.is-ctl-navigation .footer-column-newsletter .form-content {
    display: block !important;
}
html body.is-ctl-navigation .footer-column-newsletter .twt-form-newsletter-email-submit > .col-12 {
    display: flex !important;
    gap: 14px !important;
    align-items: stretch !important;
    width: 100% !important;
}
html body.is-ctl-navigation .footer-column-newsletter .twt-form-newsletter-email-submit .form-group {
    flex: 1 1 auto !important;
    margin: 0 !important;
}

/* Newsletter consent row centered */
html body.is-ctl-navigation .footer-column-newsletter .twt-form-newsletter-privacy,
html body.is-ctl-navigation .footer-column-newsletter fieldset.privacy-notice {
    text-align: center !important;
}
html body.is-ctl-navigation .footer-column-newsletter legend.privacy-notice-title {
    display: none !important;
}
html body.is-ctl-navigation .footer-column-newsletter fieldset.privacy-notice {
    padding: 0 !important;
    margin-top: 12px !important;
    border: 0 !important;
}
html body.is-ctl-navigation .footer-column-newsletter fieldset.privacy-notice br {
    display: none !important;
}

/* Make .glt-newsletter-consent-row centered (already JS-injected on all pages) */
html body.is-ctl-navigation .glt-newsletter-consent-row {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: left !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
}
html body.is-ctl-navigation input.glt-newsletter-consent {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 2px !important;
    border: 2px solid rgba(225, 181, 46, 0.7) !important;
    border-radius: 4px !important;
    background: rgba(15, 40, 75, 0.4) !important;
    cursor: pointer !important;
    position: relative !important;
    flex: 0 0 18px !important;
}
html body.is-ctl-navigation input.glt-newsletter-consent:checked {
    background: #E1B52E !important;
    border-color: #E1B52E !important;
}
html body.is-ctl-navigation input.glt-newsletter-consent:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 0 !important;
    width: 6px !important;
    height: 11px !important;
    border-right: 2px solid #0f284b !important;
    border-bottom: 2px solid #0f284b !important;
    transform: rotate(45deg) !important;
}

/* Newsletter column itself — proper bg */
html body.is-ctl-navigation .footer-column-newsletter {
    padding: 56px 24px 36px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(225, 181, 46, 0.18) !important;
    width: 100% !important;
    background: #0f284b !important;
}

/* Newsletter headline gold */
html body.is-ctl-navigation .footer-column-newsletter .footer-column-headline {
    text-align: center !important;
    font-size: 14px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #E1B52E !important;
    -webkit-text-fill-color: #E1B52E !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
    border: 0 !important;
}
html body.is-ctl-navigation .footer-column-newsletter .footer-column-toggle {
    display: none !important;
}

/* Hide cluttered ThemeWare footer columns on category pages (same as product) */
html body.is-ctl-navigation .footer-main .footer-column-hotline,
html body.is-ctl-navigation .footer-main .footer-column-footernav,
html body.is-ctl-navigation .footer-main .footer-column-benefits,
html body.is-ctl-navigation .footer-main .footer-column-shipping,
html body.is-ctl-navigation .footer-main .footer-column-payment,
html body.is-ctl-navigation .footer-main .footer-column-location,
html body.is-ctl-navigation .footer-main .footer-column-awards,
html body.is-ctl-navigation .footer-main .footer-column-about,
html body.is-ctl-navigation .footer-main .footer-column:not(.footer-column-newsletter) {
    display: none !important;
}
html body.is-ctl-navigation .footer-main {
    background: #0f284b !important;
}

/* Hide ThemeWare default footer-bottom on category pages */
html body.is-ctl-navigation .footer-bottom,
html body.is-ctl-navigation .footer-main + .footer-bottom {
    display: none !important;
}

/* v=593 — Fix CTA full-bleed via translate approach (margin-left calc was off) */
.glt-cat-end-cta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* =====================================================================
   CONSOLIDATED NAV/HEADER BG — ONE consistent rule for ALL pages (v=594)
   No more page-specific overrides. Header + nav always solid navy.
   ===================================================================== */
html body .header-main,
html body .header-main.header-solid,
html body.is-ctl-navigation .header-main,
html body.is-act-home .header-main,
html body.is-ctl-product .header-main,
html body.is-active-route .header-main {
    background: rgb(30, 58, 95) !important;
    background-color: rgb(30, 58, 95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .nav-main,
html body .nav-main.ready,
html body .nav-main.show,
html body .nav-main.ready.show,
html body .nav-main.header-solid,
html body .nav-main.header-solid.show,
html body .nav-main.header-solid.ready.show,
html body.is-ctl-navigation .nav-main,
html body.is-act-home .nav-main,
html body.is-act-home .nav-main.show,
html body.is-ctl-product .nav-main,
html body.is-active-route .nav-main,
html body.is-cms-landingpage .nav-main {
    background: rgb(30, 58, 95) !important;
    background-color: rgb(30, 58, 95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* v=595 — ULTIMATE override for homepage nav/header */
html body.twt-is-cms-landingpage .header-main,
html body.is-cms-landingpage .header-main,
html body.is-act-home .header-main,
html body.is-act-home .header-main.header-solid,
html body.twt-is-cms-landingpage .header-main.header-solid,
html body.is-cms-landingpage .header-main.header-solid,
html body.twt-cms-styling .header-main,
html body.themeware .header-main.header-solid {
    background: rgb(30, 58, 95) !important;
    background-color: rgb(30, 58, 95) !important;
}
html body.twt-is-cms-landingpage .nav-main,
html body.is-cms-landingpage .nav-main,
html body.is-act-home .nav-main,
html body.is-act-home .nav-main.ready,
html body.is-act-home .nav-main.header-solid,
html body.twt-is-cms-landingpage .nav-main.ready,
html body.is-cms-landingpage .nav-main.ready,
html body.is-cms-landingpage .nav-main.header-solid,
html body.twt-cms-styling .nav-main,
html body.themeware .nav-main.header-solid {
    background: rgb(30, 58, 95) !important;
    background-color: rgb(30, 58, 95) !important;
}

/* ============================================================
   FOOTER NEWSLETTER — distinct centered card on ALL pages (v=597)
   Sets the newsletter apart from the rest of the footer.
   ============================================================ */
.footer-main .footer-columns .footer-column-newsletter {
    max-width: 760px !important;
    margin: 52px auto 60px !important;
    padding: 40px 46px 34px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%) !important;
    border: 1px solid rgba(225,181,46,0.30) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.24) !important;
    position: relative !important;
    text-align: center !important;
}
/* gold tab accent at top edge */
.footer-main .footer-columns .footer-column-newsletter::before {
    content: '' !important;
    position: absolute !important; left: 50% !important; top: -1px !important;
    transform: translateX(-50%) !important;
    width: 92px !important; height: 3px !important; border-radius: 0 0 3px 3px !important;
    background: linear-gradient(90deg, transparent, #E1B52E, transparent) !important;
}
/* divider below card to separate it from the 4-column footer grid */
.footer-main .footer-columns .footer-column-newsletter::after {
    content: '' !important;
    position: absolute !important; left: 50% !important; bottom: -32px !important;
    transform: translateX(-50%) !important;
    width: 64% !important; height: 1px !important;
    background: rgba(225,181,46,0.16) !important;
}

/* Title */
.footer-main .footer-column-newsletter .footer-column-headline {
    color: #E1B52E !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important;
    letter-spacing: 3px !important; text-transform: uppercase !important;
    margin: 0 0 8px !important; text-align: center !important;
    padding: 0 0 12px !important; position: relative !important;
}
.footer-main .footer-column-headline::after {
    content: '' !important; position: absolute !important;
    left: 50% !important; bottom: 0 !important; transform: translateX(-50%) !important;
    width: 40px !important; height: 2px !important; background: #E1B52E !important; border-radius: 2px !important;
}
/* hide the mobile collapse chevron inside the headline if present */
.footer-main .footer-column-newsletter .footer-column-toggle .icon,
.footer-main .footer-column-newsletter .footer-column-headline .icon { display: none !important; }

/* Description */
.footer-main .footer-column-newsletter .twt-newsletter-text {
    color: rgba(255,255,255,0.82) !important;
    font-size: 15px !important; line-height: 1.6 !important;
    max-width: 580px !important; margin: 12px auto 24px !important;
}

/* Form layout — centered, input + gold button inline */
.footer-main .footer-column-newsletter form {
    max-width: 480px !important; margin: 0 auto !important;
    display: block !important; text-align: center !important;
}
.footer-main .footer-column-newsletter .form-label { display: none !important; }
/* wrappers: full-width blocks, stacked + centered */
.footer-main .footer-column-newsletter .form-content,
.footer-main .footer-column-newsletter .twt-form-newsletter-email-submit {
    width: 100% !important; max-width: 480px !important;
    margin-left: auto !important; margin-right: auto !important;
    display: block !important; float: none !important;
}
/* the .col-12 holds input-group + button → make IT the flex pair */
.footer-main .footer-column-newsletter .twt-form-newsletter-email-submit > .col-12 {
    width: 100% !important; max-width: 480px !important;
    margin: 0 auto !important;
    display: flex !important; justify-content: center !important;
    align-items: stretch !important; gap: 10px !important; flex-wrap: nowrap !important; float: none !important;
}
/* input wrapper grows; button keeps its size */
.footer-main .footer-column-newsletter .twt-form-newsletter-email-submit > .col-12 > .form-group {
    flex: 1 1 auto !important; margin: 0 !important; display: block !important; max-width: none !important;
}
.footer-main .footer-column-newsletter .twt-form-newsletter-email-submit > .col-12 > .form-group input.form-control {
    width: 100% !important;
}
.footer-main .footer-column-newsletter input.form-control {
    background: rgba(10,30,58,0.6) !important;
    border: 1px solid rgba(225,181,46,0.32) !important;
    color: #fff !important; height: 52px !important;
    border-radius: 10px !important; padding: 0 16px !important;
    font-size: 14px !important; box-shadow: none !important;
}
.footer-main .footer-column-newsletter input.form-control::placeholder { color: rgba(255,255,255,0.55) !important; }
.footer-main .footer-column-newsletter input.form-control:focus {
    border-color: rgba(225,181,46,0.7) !important;
    box-shadow: 0 0 0 3px rgba(225,181,46,0.15) !important;
}
.footer-main .footer-column-newsletter button.btn-primary,
.footer-main .footer-column-newsletter button[type="submit"] {
    background: linear-gradient(135deg, #E1B52E 0%, #c9a127 100%) !important;
    border: 0 !important; color: #0a1e3a !important;
    height: 52px !important; min-width: 60px !important;
    padding: 0 20px !important;
    margin-left: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(225,181,46,0.32) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
/* keep input + button as a flush flex pair with a small gap */
.footer-main .footer-column-newsletter .input-group,
.footer-main .footer-column-newsletter .twt-form-newsletter-email-submit .form-group {
    display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important;
}
.footer-main .footer-column-newsletter button.btn-primary:hover,
.footer-main .footer-column-newsletter button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(225,181,46,0.45) !important;
}

/* Datenschutz fieldset + consent row */
.footer-main .footer-column-newsletter fieldset.privacy-notice {
    margin: 20px auto 0 !important; max-width: 540px !important;
    border: 0 !important; padding: 0 !important;
}
.footer-main .footer-column-newsletter legend.privacy-notice-title {
    color: rgba(255,255,255,0.9) !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    text-align: center !important; margin-bottom: 10px !important; float: none !important; width: auto !important;
}
.footer-main .footer-column-newsletter .glt-newsletter-consent-row {
    display: inline-flex !important; align-items: flex-start !important; gap: 10px !important;
    justify-content: center !important; text-align: left !important;
    font-size: 12.5px !important; line-height: 1.5 !important;
    color: rgba(255,255,255,0.78) !important; max-width: 460px !important; margin: 0 auto !important;
}
/* center the fieldset that wraps the consent row */
.footer-main .footer-column-newsletter fieldset.privacy-notice { text-align: center !important; }

/* ---- Newsletter v=623: wider + flatter + segmented toggle (high-specificity) ---- */
html body .footer-main .footer-columns .footer-column-newsletter { max-width:1040px !important; padding:30px 48px 26px !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-newsletter-text { margin:8px auto 16px !important; max-width:660px !important; }
html body .footer-main .footer-columns .footer-column-newsletter form { max-width:880px !important; }
html body .footer-main .footer-columns .footer-column-newsletter .form-content {
    display:flex !important; flex-wrap:wrap !important; align-items:flex-end !important; justify-content:center !important;
    gap:14px !important; max-width:880px !important; width:100% !important; margin:0 auto !important;
}
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-subscribe { display:block !important; width:auto !important; flex:0 0 auto !important; margin:0 !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-subscribe > .col-12 { width:auto !important; max-width:none !important; flex:0 0 auto !important; padding:0 !important; }
html body .footer-main .footer-columns .footer-column-newsletter .form-label { display:none !important; }
html body .footer-main .footer-columns .footer-column-newsletter select[name="option"],
html body .footer-main .footer-columns .footer-column-newsletter .contact-select { display:none !important; }
html body .footer-main .footer-columns .footer-column-newsletter .form-field-feedback { display:none !important; }
html body .footer-main .footer-columns .footer-column-newsletter .glt-nl-seg {
    display:inline-flex !important; align-items:stretch !important; height:52px !important;
    background:rgba(10,30,58,0.55) !important; border:1px solid rgba(225,181,46,0.30) !important;
    border-radius:12px !important; padding:4px !important; gap:4px !important;
}
html body .footer-main .footer-columns .footer-column-newsletter .glt-nl-seg button {
    border:0 !important; background:transparent !important; color:rgba(255,255,255,0.72) !important;
    font-family:'Poppins',sans-serif !important; font-weight:600 !important; font-size:13px !important; letter-spacing:0.3px !important;
    padding:0 18px !important; border-radius:9px !important; cursor:pointer !important; white-space:nowrap !important; transition:all .18s ease !important;
}
html body .footer-main .footer-columns .footer-column-newsletter .glt-nl-seg button:hover { color:#ffffff !important; }
html body .footer-main .footer-columns .footer-column-newsletter .glt-nl-seg button.active { background:linear-gradient(135deg,#E1B52E,#c9a127) !important; color:#0a1e3a !important; box-shadow:0 4px 14px rgba(225,181,46,0.35) !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit { flex:1 1 360px !important; max-width:500px !important; width:auto !important; margin:0 !important; display:block !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit > .col-12 { max-width:none !important; width:100% !important; }
html body .footer-main .footer-columns .footer-column-newsletter .shopware_surname_confirm { display:none !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-privacy { flex:1 1 100% !important; order:5 !important; margin-top:4px !important; }
html body .footer-main .footer-columns .footer-column-newsletter fieldset.privacy-notice { margin:8px auto 0 !important; }
/* newsletter text: force readable white (override theme grey/navy); keep policy links gold */
html body .footer-main .footer-columns .footer-column-newsletter .twt-newsletter-text { color:rgba(255,255,255,0.92) !important; -webkit-text-fill-color:rgba(255,255,255,0.92) !important; }
html body .footer-main .footer-columns .footer-column-newsletter .glt-newsletter-consent-row,
html body .footer-main .footer-columns .footer-column-newsletter .glt-newsletter-consent-row *,
html body .footer-main .footer-columns .footer-column-newsletter legend.privacy-notice-title,
html body .footer-main .footer-columns .footer-column-newsletter .privacy-notice,
html body .footer-main .footer-columns .footer-column-newsletter .privacy-notice *,
html body .footer-main .footer-columns .footer-column-newsletter .data-protection-information,
html body .footer-main .footer-columns .footer-column-newsletter .data-protection-information * {
    color:rgba(255,255,255,0.9) !important; -webkit-text-fill-color:rgba(255,255,255,0.9) !important;
}
html body .footer-main .footer-columns .footer-column-newsletter .privacy-notice a,
html body .footer-main .footer-columns .footer-column-newsletter .data-protection-information a,
html body .footer-main .footer-columns .footer-column-newsletter .glt-newsletter-consent-row a {
    color:#E1B52E !important; -webkit-text-fill-color:#E1B52E !important; font-weight:600 !important;
}
/* equal height: toggle = email input = submit button (theme forced 45px on inputs) */
html body .footer-main .footer-columns .footer-column-newsletter .glt-nl-seg { height:50px !important; }
html body .footer-main .footer-columns .footer-column-newsletter input.form-control { height:50px !important; min-height:50px !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button,
html body .footer-main .footer-columns .footer-column-newsletter button.btn-primary,
html body .footer-main .footer-columns .footer-column-newsletter button[type="submit"] { height:50px !important; min-height:50px !important; }
/* the email+button row: button had margin-top:20px making the wrapper 70px tall and pushing the
   input 20px above the toggle/button — remove it and vertically center the row */
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit > .col-12 { align-items:center !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button { margin-top:0 !important; margin-bottom:0 !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit .form-group { height:50px !important; margin:0 !important; }
/* nicer, perfectly centered submit arrow (crisp SVG instead of the thin text glyph) */
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button {
    display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; min-width:56px !important; width:56px !important;
}
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button::after,
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button::before { content:none !important; display:none !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button .icon,
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button > svg { display:none !important; }
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button .glt-nl-arrow {
    display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:0 !important;
}
html body .footer-main .footer-columns .footer-column-newsletter .twt-form-newsletter-email-submit button .glt-nl-arrow svg {
    display:block !important; width:21px !important; height:21px !important; stroke:#0a1e3a !important; fill:none !important;
}

/* ============================================================
   CONTACT PAGE — premium redesign (v=620)
   Scope: body.glt-kontakt-page (JS adds it on /Information/Kontakt/)
   ============================================================ */
body.glt-kontakt-page .content-main,
body.glt-kontakt-page main.content-main,
body.glt-kontakt-page .cms-page,
body.glt-kontakt-page .cms-sections,
body.glt-kontakt-page .cms-section,
body.glt-kontakt-page .cms-section-default { background:#ffffff !important; background-image:none !important; }

/* ---------- HERO: clean centered title on white, gold accent ---------- */
body.glt-kontakt-page .cms-page .cms-block-text {
    background:#ffffff !important; background-image:none !important;
    width:auto !important; max-width:1100px !important; margin:0 auto !important;
    border-radius:0 !important; box-shadow:none !important; overflow:visible !important;
    padding:58px 24px 6px !important; position:relative !important;
}
body.glt-kontakt-page .cms-page .cms-block-text::before { content:none !important; display:none !important; }
body.glt-kontakt-page .cms-page .cms-block-text .cms-element-text {
    position:relative !important; z-index:1 !important; max-width:780px !important; margin:0 auto !important; text-align:center !important;
}
body.glt-kontakt-page .glt-k-eyebrow {
    display:inline-flex !important; align-items:center !important; gap:12px !important;
    color:#E1B52E !important; font-family:'Poppins',sans-serif !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:3px !important; text-transform:uppercase !important; margin-bottom:16px !important;
}
body.glt-kontakt-page .glt-k-eyebrow::before, body.glt-kontakt-page .glt-k-eyebrow::after {
    content:'' !important; width:28px !important; height:2px !important; background:#E1B52E !important; display:inline-block !important;
}
body.glt-kontakt-page .cms-page .cms-block-text .glt-k-title,
body.glt-kontakt-page .cms-page .cms-block-text h1,
body.glt-kontakt-page .cms-page .cms-block-text h2 {
    color:#0f284b !important; -webkit-text-fill-color:#0f284b !important;
    font-family:'Poppins',sans-serif !important; font-weight:800 !important;
    font-size: clamp(32px, 4.4vw, 48px) !important; line-height:1.12 !important; letter-spacing:-0.6px !important; margin:0 !important;
}
/* decorative gold underline under the title */
body.glt-kontakt-page .cms-page .cms-block-text .glt-k-title::after {
    content:'' !important; display:block !important; width:66px !important; height:4px !important; margin:20px auto 0 !important;
    background:linear-gradient(90deg,#E1B52E,#c9a127) !important; border-radius:3px !important; -webkit-text-fill-color:initial !important;
}
body.glt-kontakt-page .cms-page .cms-block-text .glt-k-sub,
body.glt-kontakt-page .cms-page .cms-block-text p.glt-k-sub {
    color: rgba(15,40,75,0.62) !important; -webkit-text-fill-color: rgba(15,40,75,0.62) !important;
    font-size:17px !important; line-height:1.6 !important; max-width:640px !important; margin:18px auto 0 !important;
}

/* ---------- 2-COLUMN GRID + soft decorative backdrop ---------- */
body.glt-kontakt-page .glt-k-grid {
    max-width:1180px !important; margin:0 auto !important; padding:48px 24px 16px !important;
    display:grid !important; grid-template-columns: minmax(0,2fr) minmax(0,3fr) !important;
    gap:44px !important; align-items:start !important; position:relative !important;
}
body.glt-kontakt-page .glt-k-grid::before {
    content:'' !important; position:absolute !important; inset:-30px -8vw !important; z-index:0 !important; pointer-events:none !important;
    background:
      radial-gradient(440px circle at 10% 14%, rgba(225,181,46,0.07), transparent 60%),
      radial-gradient(500px circle at 94% 92%, rgba(15,40,75,0.06), transparent 62%) !important;
}
body.glt-kontakt-page .glt-k-grid > * { position:relative !important; z-index:1 !important; }
@media (max-width:991px){ body.glt-kontakt-page .glt-k-grid { grid-template-columns:1fr !important; gap:32px !important; padding:36px 20px 12px !important; } }

/* ---------- LEFT column: premium cards ---------- */
body.glt-kontakt-page .glt-k-aside { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; color:#0f284b !important; }
body.glt-kontakt-page .glt-k-aside-eyebrow { color:#c9a127 !important; font-family:'Poppins' !important; font-size:11px !important; font-weight:700 !important; letter-spacing:2.6px !important; text-transform:uppercase !important; margin-bottom:8px !important; }
body.glt-kontakt-page .glt-k-aside-title { color:#0f284b !important; font-family:'Poppins' !important; font-size:26px !important; font-weight:800 !important; letter-spacing:-0.4px !important; margin:0 0 24px !important; }
body.glt-kontakt-page .glt-k-card-link {
    display:flex !important; align-items:center !important; gap:16px !important; text-decoration:none !important;
    background:#ffffff !important; border:1px solid #eef1f6 !important; border-radius:16px !important; padding:18px 20px !important; margin-bottom:14px !important;
    box-shadow:0 6px 22px rgba(15,40,75,0.06) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
body.glt-kontakt-page a.glt-k-card-link:hover { border-color:rgba(225,181,46,0.6) !important; box-shadow:0 14px 32px rgba(15,40,75,0.12) !important; transform:translateY(-3px) !important; }
body.glt-kontakt-page .glt-k-card-ic { flex:0 0 auto !important; width:50px !important; height:50px !important; border-radius:14px !important; background:linear-gradient(135deg,#0f284b,#1d4476) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 6px 16px rgba(15,40,75,0.22) !important; }
body.glt-kontakt-page .glt-k-card-ic svg { width:22px !important; height:22px !important; stroke:#E1B52E !important; fill:none !important; }
body.glt-kontakt-page .glt-k-card-txt { display:flex !important; flex-direction:column !important; }
body.glt-kontakt-page .glt-k-card-t { font-family:'Poppins' !important; font-size:11px !important; font-weight:700 !important; letter-spacing:1.5px !important; text-transform:uppercase !important; color:#c9a127 !important; margin-bottom:3px !important; }
body.glt-kontakt-page .glt-k-card-v { font-size:15.5px !important; color:#0f284b !important; font-weight:600 !important; }

/* address + hours in a soft panel */
body.glt-kontakt-page .glt-k-meta { background:#f6f8fc !important; border:1px solid #eef1f6 !important; border-radius:16px !important; padding:6px 22px 18px !important; margin-top:18px !important; }
body.glt-kontakt-page .glt-k-row2 { display:flex !important; align-items:flex-start !important; gap:14px !important; padding:16px 0 0 !important; }
body.glt-kontakt-page .glt-k-row2 + .glt-k-row2 { border-top:1px solid #e6ebf3 !important; margin-top:4px !important; }
body.glt-kontakt-page .glt-k-row2-ic { flex:0 0 auto !important; width:40px !important; height:40px !important; border-radius:12px !important; background:linear-gradient(135deg,#0f284b,#1d4476) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
body.glt-kontakt-page .glt-k-row2-ic svg { width:18px !important; height:18px !important; stroke:#E1B52E !important; fill:none !important; }
body.glt-kontakt-page .glt-k-row2-t { font-size:14px !important; line-height:1.55 !important; color:rgba(15,40,75,0.78) !important; padding-top:1px !important; }
body.glt-kontakt-page .glt-k-row2-t b { display:block !important; color:#0f284b !important; font-family:'Poppins' !important; font-size:11px !important; font-weight:700 !important; letter-spacing:1.3px !important; text-transform:uppercase !important; margin-bottom:3px !important; }

body.glt-kontakt-page .glt-k-aside-btn { display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; text-align:center !important; margin-top:22px !important; background:linear-gradient(135deg,#E1B52E,#c9a127) !important; color:#0a1e3a !important; font-family:'Poppins' !important; font-weight:700 !important; font-size:13px !important; letter-spacing:1px !important; text-transform:uppercase !important; padding:16px 22px !important; border-radius:12px !important; text-decoration:none !important; box-shadow:0 10px 24px rgba(225,181,46,0.32) !important; transition:all .2s ease !important; }
body.glt-kontakt-page .glt-k-aside-btn::after { content:'\2192' !important; font-size:16px !important; transition:transform .2s ease !important; }
body.glt-kontakt-page .glt-k-aside-btn:hover { transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(225,181,46,0.46) !important; color:#0a1e3a !important; }
body.glt-kontakt-page .glt-k-aside-btn:hover::after { transform:translateX(4px) !important; }

/* ---------- RIGHT: form (outer .cms-block-form styled as card via inline JS) ---------- */
/* neutralize INNER wrappers only (not .cms-block-form) */
body.glt-kontakt-page .cms-element-form,
body.glt-kontakt-page .cms-element-form .row.justify-content-center,
body.glt-kontakt-page .cms-element-form .col-lg-12,
body.glt-kontakt-page .cms-element-form .card,
body.glt-kontakt-page .cms-element-form .card-body {
    background:transparent !important; background-image:none !important;
    width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important;
    border:0 !important; box-shadow:none !important; border-radius:0 !important;
    position:static !important; transform:none !important; top:auto !important; left:auto !important; flex:0 0 100% !important;
}
body.glt-kontakt-page .cms-element-form .row.justify-content-center { justify-content:flex-start !important; }
body.glt-kontakt-page .cms-element-form .card-title {
    text-align:left !important; font-family:'Poppins' !important; font-size:25px !important; font-weight:800 !important; color:#0f284b !important; -webkit-text-fill-color:#0f284b !important;
    letter-spacing:-0.4px !important; margin:0 0 4px !important; padding:0 0 0 16px !important; position:relative !important;
}
body.glt-kontakt-page .cms-element-form .card-title::before {
    content:'' !important; display:block !important; position:absolute !important; left:0 !important; top:4px !important; bottom:4px !important;
    width:5px !important; border-radius:3px !important; background:linear-gradient(180deg,#E1B52E,#c9a127) !important;
}
body.glt-kontakt-page .cms-element-form .card-title::after { content:'' !important; display:none !important; }
body.glt-kontakt-page .cms-element-form .form-content { margin-top:26px !important; }
body.glt-kontakt-page .cms-element-form .form-label { color:#0f284b !important; font-family:'Poppins' !important; font-weight:600 !important; font-size:12.5px !important; letter-spacing:0.2px !important; margin-bottom:8px !important; display:block !important; transition:color .18s ease !important; }
body.glt-kontakt-page .cms-element-form .form-group:focus-within .form-label { color:#c9a127 !important; }
/* gold required asterisk (best-effort for common markers) */
body.glt-kontakt-page .cms-element-form .form-label sup,
body.glt-kontakt-page .cms-element-form .form-label .required,
body.glt-kontakt-page .cms-element-form .form-required-label { color:#E1B52E !important; }
body.glt-kontakt-page .cms-element-form .form-control,
body.glt-kontakt-page .cms-element-form .form-select {
    width:100% !important; height:54px !important; border:1.5px solid #e6ebf3 !important; border-radius:12px !important;
    padding:0 16px !important; font-size:15px !important; background:#f4f7fb !important; color:#0f284b !important; box-shadow:none !important; display:block !important;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
body.glt-kontakt-page .cms-element-form textarea.form-control { height:auto !important; min-height:152px !important; padding:15px 16px !important; }
body.glt-kontakt-page .cms-element-form .form-control:hover,
body.glt-kontakt-page .cms-element-form .form-select:hover { border-color:#cfd8e6 !important; }
body.glt-kontakt-page .cms-element-form .form-control:focus,
body.glt-kontakt-page .cms-element-form .form-select:focus { border-color:#E1B52E !important; background:#ffffff !important; box-shadow:0 0 0 4px rgba(225,181,46,0.16) !important; }
body.glt-kontakt-page .cms-element-form .form-control::placeholder { color:rgba(15,40,75,0.38) !important; }
body.glt-kontakt-page .cms-element-form .form-group { margin-bottom:26px !important; }
/* custom gold dropdown chevron */
body.glt-kontakt-page .cms-element-form select.form-select {
    appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a127' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 16px center !important; background-size:14px !important; padding-right:42px !important;
}
/* in-field icons (injected via JS into .form-group) */
body.glt-kontakt-page .cms-element-form .form-group.glt-f-has-ic { position:relative !important; }
body.glt-kontakt-page .cms-element-form .glt-f-ic { position:absolute !important; left:0 !important; bottom:0 !important; width:50px !important; height:54px !important; display:flex !important; align-items:center !important; justify-content:center !important; pointer-events:none !important; z-index:2 !important; }
body.glt-kontakt-page .cms-element-form .glt-f-ic svg { width:19px !important; height:19px !important; stroke:rgba(15,40,75,0.4) !important; fill:none !important; transition:stroke .18s ease !important; }
body.glt-kontakt-page .cms-element-form .form-group.glt-f-has-ic:focus-within .glt-f-ic svg { stroke:#E1B52E !important; }
body.glt-kontakt-page .cms-element-form .form-group.glt-f-has-ic .form-control,
body.glt-kontakt-page .cms-element-form .form-group.glt-f-has-ic .form-select { padding-left:48px !important; }
body.glt-kontakt-page .cms-element-form .form-content .row { display:flex !important; flex-wrap:wrap !important; gap:16px !important; margin:0 0 24px !important; }
body.glt-kontakt-page .cms-element-form .form-content .row:last-child { margin-bottom:0 !important; }
body.glt-kontakt-page .cms-element-form .form-content .row > [class*="col-"] { padding:0 !important; margin:0 !important; }
body.glt-kontakt-page .cms-element-form .form-content .row > .col-12 { flex:1 1 100% !important; max-width:100% !important; }
body.glt-kontakt-page .cms-element-form .form-content .row > .col-md-6 { flex:1 1 calc(50% - 8px) !important; max-width:calc(50% - 8px) !important; }
body.glt-kontakt-page .cms-element-form .form-content .row > .col-md-4 { flex:1 1 calc(33.333% - 11px) !important; max-width:calc(33.333% - 11px) !important; }
@media (max-width:767px){ body.glt-kontakt-page .cms-element-form .form-content .row > [class*="col-md-"] { flex:1 1 100% !important; max-width:100% !important; } }
body.glt-kontakt-page .cms-element-form .privacy-notice,
body.glt-kontakt-page .cms-element-form fieldset.privacy-notice { text-align:left !important; border:0 !important; padding:0 !important; margin-top:8px !important; }
body.glt-kontakt-page .cms-element-form legend.privacy-notice-title { color:#0f284b !important; font-weight:700 !important; font-size:13px !important; }
body.glt-kontakt-page .cms-element-form .btn-link-inline,
body.glt-kontakt-page .cms-element-form a { color:#c9a127 !important; }
body.glt-kontakt-page .cms-element-form button[type="submit"],
body.glt-kontakt-page .cms-element-form button.btn-primary {
    float:none !important; display:inline-flex !important; align-items:center !important; gap:10px !important; margin:20px 0 0 !important;
    background:linear-gradient(135deg,#E1B52E,#c9a127) !important; color:#0a1e3a !important; border:0 !important;
    font-family:'Poppins' !important; font-weight:700 !important; font-size:14px !important; letter-spacing:0.6px !important; text-transform:uppercase !important;
    border-radius:12px !important; padding:16px 36px !important; box-shadow:0 10px 24px rgba(225,181,46,0.32) !important; transition:all .18s ease !important;
}
body.glt-kontakt-page .cms-element-form button[type="submit"]::after,
body.glt-kontakt-page .cms-element-form button.btn-primary::after { content:'\2192' !important; font-size:16px !important; transition:transform .18s ease !important; }
body.glt-kontakt-page .cms-element-form button[type="submit"]:hover,
body.glt-kontakt-page .cms-element-form button.btn-primary:hover { transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(225,181,46,0.46) !important; }
body.glt-kontakt-page .cms-element-form button[type="submit"]:hover::after,
body.glt-kontakt-page .cms-element-form button.btn-primary:hover::after { transform:translateX(4px) !important; }

@media (max-width:767px){ body.glt-kontakt-page .cms-page .cms-block-text { padding:38px 20px 4px !important; } }

/* ============================================================
   MOBILE HEADER FIX (v=632)
   1) Burger: the Shopware icon-stack <svg> collapses to 0 width (sprite missing),
      so the button shows its grey text label. Hide it and draw a white hamburger.
   2) The horizontal nav bar is an empty strip on phones (links collapsed) sitting
      25px below the 50px header -> dark gap. Hide it; the burger/offcanvas is the nav.
   ============================================================ */
@media (max-width: 991px){
  html body .nav-main-toggle-btn,
  html body .menu-button .nav-main-toggle-btn {
    font-size: 0 !important; color: transparent !important;
    width: 30px !important; height: 22px !important; min-width: 30px !important;
    padding: 0 !important; border: 0 !important; box-shadow: none !important; position: relative !important;
    background-color: transparent !important;
    background-image: linear-gradient(#ffffff,#ffffff), linear-gradient(#ffffff,#ffffff), linear-gradient(#ffffff,#ffffff) !important;
    background-size: 24px 2.5px !important;
    background-position: center top, center center, center bottom !important;
    background-repeat: no-repeat !important;
    border-radius: 2px !important;
  }
  html body .nav-main-toggle-btn .icon,
  html body .nav-main-toggle-btn svg,
  html body .nav-main-toggle-btn span,
  html body .nav-main-toggle-btn use { display: none !important; }
}
@media (max-width: 767px){
  html body .nav-main,
  html body .nav-main.show,
  html body.nav-scrolled .nav-main,
  html body .nav-main.header-solid.show { display: none !important; }
}

/* ============================================================
   MOBILE OFFCANVAS MENU — brand navy flyout (v=633)
   The Shopware menu offcanvas (.navigation-offcanvas) defaults to a WHITE panel
   with WHITE link text (links nearly invisible). Brand it navy + white text.
   ============================================================ */
html body .offcanvas.navigation-offcanvas,
html body .navigation-offcanvas {
    background: #0f284b !important;
    background-image: linear-gradient(180deg, #0f284b 0%, #16365f 100%) !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(225,181,46,0.25) !important;
}
html body .navigation-offcanvas .offcanvas-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
html body .navigation-offcanvas .offcanvas-header,
html body .navigation-offcanvas .offcanvas-title,
html body .navigation-offcanvas .offcanvas-header * { color: #ffffff !important; }
html body .navigation-offcanvas .offcanvas-body { background: transparent !important; }
html body .navigation-offcanvas a,
html body .navigation-offcanvas .nav-link,
html body .navigation-offcanvas .navigation-offcanvas-link,
html body .navigation-offcanvas .offcanvas-body,
html body .navigation-offcanvas .offcanvas-body * { color: #ffffff !important; }
html body .navigation-offcanvas .nav-item,
html body .navigation-offcanvas li,
html body .navigation-offcanvas .navigation-offcanvas-link {
    border-color: rgba(255,255,255,0.10) !important;
}
html body .navigation-offcanvas a:hover,
html body .navigation-offcanvas .nav-link:hover,
html body .navigation-offcanvas a:focus { color: #E1B52E !important; }
html body .navigation-offcanvas .offcanvas-close,
html body .navigation-offcanvas .js-offcanvas-close {
    background: transparent !important; color: rgba(255,255,255,0.9) !important; border: 0 !important;
}
html body .navigation-offcanvas .navigation-offcanvas-actions,
html body .navigation-offcanvas .navigation-offcanvas-actions * { color: #ffffff !important; }
html body .navigation-offcanvas .icon svg,
html body .navigation-offcanvas svg { color: #E1B52E !important; stroke: #E1B52E !important; }
/* the menu ROWS (<li>) default to a white background -> make transparent so the navy shows */
html body .navigation-offcanvas .navigation-offcanvas-list-item,
html body .navigation-offcanvas li.navigation-offcanvas-list-item,
html body .navigation-offcanvas .navigation-offcanvas-link,
html body .navigation-offcanvas .navigation-offcanvas-content,
html body .navigation-offcanvas .navigation-offcanvas-container,
html body .navigation-offcanvas ul.navigation-offcanvas-list,
html body .navigation-offcanvas .list-unstyled { background: transparent !important; background-color: transparent !important; }
html body .navigation-offcanvas .navigation-offcanvas-list-item {
    border-bottom: 1px solid rgba(255,255,255,0.09) !important;
}
html body .navigation-offcanvas .navigation-offcanvas-list-item:hover,
html body .navigation-offcanvas .navigation-offcanvas-link:hover {
    background: rgba(255,255,255,0.06) !important;
}

/* mobile header: the burger sits top-aligned in its wrapper (~11px higher than the logo).
   Center it vertically so logo + burger share the same line. (v=635) */
@media (max-width: 991px){
  html body .menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* hero text was top-aligned (justify-content:flex-start) -> center it vertically in the
   hero on mobile, leaving room at the bottom for the reference logos. (v=640) */
@media (max-width: 767px){
  html body .hero-diagonal-split .diagonal-glass,
  html body div.diagonal-glass {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-bottom: 110px !important;
  }
}
/* "Made in Germany" badge: a mobile rule forces padding-top:0 (keeps 8px bottom),
   pushing the flag+text above the pill's center. Restore symmetric padding. (v=638) */
@media (max-width: 767px){
  html body .cms-block-text-hero .hero-badge,
  html body .hero-diagonal-split .hero-badge {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    align-items: center !important;
  }
}
/* a bit of breathing room under the logo on mobile (v=636) */
@media (max-width: 991px){
  html body.is-ctl-navigation .header-main,
  html body.is-act-home .header-main,
  html body.is-ctl-index .header-main,
  html body.is-ctl-product .header-main,
  html body.is-ctl-blog .header-main,
  html body.is-ctl-videos .header-main,
  html body.is-ctl-info .header-main,
  html body .header-main {
    height: auto !important;
    min-height: 64px !important;
    padding-bottom: 14px !important;
  }
}

/* ============================================================
   REMOVE the footer newsletter section entirely (desktop + mobile) (v=642)
   ============================================================ */
html body .footer-main .footer-column-newsletter,
html body .footer-columns .footer-column-newsletter,
html body .footer-column-newsletter { display: none !important; }

/* remove the empty trailing CMS section (181px navy band) above the footer on the
   homepage — it's an empty leftover section (v=643) */
html body.is-act-home .cms-page .cms-sections > .cms-section:last-child:not(:first-child),
html body.is-act-home .cms-sections > .cms-section:last-child:not(:first-child) { display: none !important; }

/* ============================================================
   DESKTOP HEADER — menu bar is frosted glass navy (v=655); logo row stays solid navy. >=992px.
   (glass background + blur set inline via JS for reliability)
   ============================================================ */
@media (min-width: 992px){
  /* nav links: white text on the navy glass + neutralize theme underline */
  html body .nav-main .nav-link::after { content: none !important; display: none !important; }
  html body .nav-main .nav-link {
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 600 !important;
    transition: color .15s ease !important;
  }
  /* ----------------------------------------------------------------
     HOVER — REMOVED (v=660). No hover button/tile/accent at all.
     Neutralize the theme's old solid-navy link hover, kill the glass tile
     and the gold hairline so the bar stays perfectly clean on hover.
     Text stays white. ----------------------------------------------- */
  html body .nav-main .nav-item,
  html body #main-navigation-menu .nav-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  html body .nav-main .nav-item:hover,
  html body .nav-main .nav-item.active,
  html body .nav-main .nav-item:focus-within,
  html body #main-navigation-menu .nav-item:hover,
  html body #main-navigation-menu .nav-item.active,
  html body #main-navigation-menu .nav-item:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html body .nav-main .nav-link:hover,
  html body .nav-main .main-navigation-link:hover,
  html body #main-navigation-menu .nav-link:hover,
  html body #main-navigation-menu .main-navigation-link:hover,
  html body .nav-main .nav-item:hover .nav-link,
  html body .nav-main .nav-item.active .nav-link,
  html body .nav-main .nav-link.active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  }
  /* remove the gold hairline accent entirely */
  html body .nav-main .nav-item .main-navigation-link::after,
  html body #main-navigation-menu .nav-item .main-navigation-link::after,
  html body .nav-main .nav-link::after {
    display: none !important;
    content: none !important;
  }
}