/** Shopify CDN: Minification failed

Line 4086:19 Unexpected "46"

**/
/* Rauszeit Brand Customizations */
/* Based on Brand Guide by Christoph Benjamin */

/* Brand Colors as CSS Variables */
:root {
  --color-night: #02192f;
  --color-forrest: #005048;
  --color-stone: #8fb8b6;
  --color-moss: #c0dd90;
  --color-accent: #f44224;
  --color-snow: #ffffff;
}

/* Mobile Menu Styling */
.drawer--nav,
.drawer--header {
  background-color: #02192f !important;
  color: #ffffff !important;
}

.drawer--nav .drawer__header,
.drawer--header .drawer__header {
  background-color: #02192f;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Mobile menu logo - invert dark logo to white for dark drawer background */
.drawer--nav .drawer__logo img,
.drawer--nav .drawer__logo svg,
.drawer--nav .drawer__logo-image,
.drawer--header .drawer__logo img,
.drawer--header .drawer__logo svg,
.drawer--header .drawer__logo-image,
.drawer .drawer__logo img,
.drawer .drawer__logo-image {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

.drawer--nav .drawer__logo,
.drawer--header .drawer__logo,
.drawer .drawer__logo {
  max-width: 180px;
}

.drawer--nav .drawer__logo img,
.drawer--header .drawer__logo img,
.drawer .drawer__logo img {
  width: 100%;
  height: auto;
}

/* Close button with visible X */
.drawer--nav .drawer__close-button,
.drawer--header .drawer__close-button,
.drawer .drawer__close-button {
  color: #ffffff !important;
  background: transparent;
  border: 2px solid #f44224;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Style the SVG close icon - needs stroke-width since viewBox is 192x192 */
.drawer--nav .drawer__close-button .icon-close,
.drawer--header .drawer__close-button .icon-close,
.drawer .drawer__close-button .icon-close,
.drawer .drawer__close-button svg {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
}

.drawer--nav .drawer__close-button .icon-close path,
.drawer--header .drawer__close-button .icon-close path,
.drawer .drawer__close-button .icon-close path,
.drawer .drawer__close-button svg path {
  stroke: #ffffff !important;
  stroke-width: 14 !important;
}

.drawer--nav .drawer__close-button:hover,
.drawer--header .drawer__close-button:hover,
.drawer .drawer__close-button:hover {
  background: #f44224;
}

.drawer--nav .mobile-nav,
.drawer--header .mobile-nav {
  padding: 30px 20px;
}

.drawer--nav .mobile-navlink,
.drawer--header .mobile-navlink {
  color: #ffffff !important;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: block;
}

.drawer--nav .mobile-navlink:hover,
.drawer--nav .mobile-navlink:focus,
.drawer--header .mobile-navlink:hover,
.drawer--header .mobile-navlink:focus {
  color: #c0dd90 !important;
}

.drawer--nav .mobile-menu__item--active .mobile-navlink,
.drawer--header .mobile-menu__item--active .mobile-navlink {
  color: #f44224 !important;
}

/* Secondary nav links (login, account, search) */
.drawer--nav .drawer__utils,
.drawer--header .drawer__utils {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.drawer--nav .drawer__utils a,
.drawer--nav .drawer__utils button,
.drawer--header .drawer__utils a,
.drawer--header .drawer__utils button {
  color: rgba(255,255,255,0.7) !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.drawer--nav .drawer__utils a:hover,
.drawer--nav .drawer__utils button:hover,
.drawer--header .drawer__utils a:hover,
.drawer--header .drawer__utils button:hover {
  color: #ffffff !important;
}

/* Mobile Menu Button */
.mobile-menu__button--burger {
  color: inherit;
}

.mobile-menu__button--burger svg {
  width: 28px;
  height: 28px;
}

/* Hero Section Enhancements */
.featured-video-section.full-height {
  min-height: 100vh;
  min-height: 100dvh;
}

.featured-video-section .main-heading {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}

/* Button Styling */
.btn--secondary {
  background-color: #f44224 !important;
  border-color: #f44224 !important;
}

/* Exception: Remove red background from payment button containers */
.btn--secondary[data-buy-it-now],
.btn--secondary.product__submit__item:has(.shopify-payment-button),
.btn--secondary.product__submit__item:has(shopify-accelerated-checkout),
.product__submit__item.btn--secondary[data-shopify="payment-button"] {
  background-color: transparent !important;
  border-color: transparent !important;
  background: transparent !important;
}

.btn--secondary:hover {
  background-color: #c0dd90 !important;
  border-color: #c0dd90 !important;
  color: #02192f !important;
}

/* Transparent Header Enhancement */
.site-header--transparent .navlink,
.site-header--transparent .cart__toggle {
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ==========================================
   HEADER LOGO COLOR ADAPTATION
   White logo ONLY on homepage hero (over dark background)
   Dark logo everywhere else (including when scrolled/hovered)
   ========================================== */

/* Homepage only: Transparent header (over hero) - invert logo to white */
body.template-index .site-header--transparent:not(.has-scrolled) .logo__image-link img,
body.template-index .site-header--transparent:not(.has-scrolled) .logo__image {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* Homepage: When header is hovered - white background appears, so logo should be dark */
@media (hover: hover) {
  body.template-index .site-header--transparent:not(.has-scrolled):hover .logo__image-link img,
  body.template-index .site-header--transparent:not(.has-scrolled):hover .logo__image {
    filter: none;
  }
}

/* Homepage: When header has focus-within (search, dropdown open) */
body.template-index .site-header--transparent:not(.has-scrolled):focus-within .logo__image-link img,
body.template-index .site-header--transparent:not(.has-scrolled):focus-within .logo__image {
  filter: none;
}

/* All pages: Scrolled header (white background) - keep logo dark/original */
.site-header--transparent.has-scrolled .logo__image-link img,
.site-header--transparent.has-scrolled .logo__image,
.site-header:not(.site-header--transparent) .logo__image-link img,
.site-header:not(.site-header--transparent) .logo__image {
  filter: none;
  transition: filter 0.3s ease;
}

/* Scroll Indicator for Fullscreen Hero - DISABLED */
/* Removed custom scroll indicator - use theme default or none */

/* Mobile Menu Social Icons */
.drawer--nav .drawer__footer,
.drawer--header .drawer__footer {
  background-color: #02192f;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px;
}

.drawer--nav .social-links a,
.drawer--header .social-links a {
  color: #ffffff;
  transition: color 0.3s ease;
}

.drawer--nav .social-links a:hover,
.drawer--header .social-links a:hover {
  color: #f44224;
}

/* Enhanced Header Gradient for Better Text Visibility */
.site-header--has-gradient::before {
  background: linear-gradient(
    to bottom,
    rgba(2, 25, 47, 0.6) 0%,
    rgba(2, 25, 47, 0.3) 50%,
    transparent 100%
  );
}

/* Features Grid Styling */
.section-columns .column-item {
  padding: 0 12px;
  margin-bottom: 24px;
}

.section-columns .column-item__image-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-columns .column-item:hover .column-item__image-wrapper {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.section-columns .column-item__heading {
  color: #02192f;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.section-columns .column-item__text {
  color: #555;
  line-height: 1.5;
  font-size: 0.95em;
}

.section-columns .column-item__text strong {
  color: #005048;
}

/* Grid gap adjustment */
.section-columns .section-columns__slider {
  gap: 16px;
}

@media (max-width: 749px) {
  .section-columns .column-item {
    padding: 0 8px;
    margin-bottom: 16px;
  }
}

/* ==========================================
   FAQ EXPANDABLE CARDS
   Card-style accordion items with hover effects
   ========================================== */

/* Target the FAQ section specifically */
[id*="section_accordions_iBR8Pd"] .accordion__item {
  background: #ffffff !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e8e8e8 !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
  border-color: #c0dd90 !important;
}

/* Card title/header styling */
[id*="section_accordions_iBR8Pd"] .accordion__title {
  padding: 20px 24px !important;
  background: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #02192f !important;
  transition: all 0.3s ease !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__title:hover {
  background: #fafafa !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__title.is-expanded {
  background: #02192f !important;
  color: #ffffff !important;
  border-radius: 10px 10px 0 0 !important;
}

/* When expanded, remove border radius from the card itself at top */
[id*="section_accordions_iBR8Pd"] .accordion__item:has(.is-expanded) {
  border-radius: 12px !important;
}

/* Plus/minus icon styling */
[id*="section_accordions_iBR8Pd"] .accordion__title .icon {
  color: #c0dd90 !important;
  stroke: #c0dd90 !important;
  transition: transform 0.3s ease !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__title.is-expanded .icon {
  color: #c0dd90 !important;
  stroke: #c0dd90 !important;
}

/* Expanded content area */
[id*="section_accordions_iBR8Pd"] .accordion__text-wrapper {
  background: #ffffff !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__text {
  padding: 20px 24px !important;
  color: #333333 !important;
  line-height: 1.7 !important;
}

/* List styling within FAQ answers */
[id*="section_accordions_iBR8Pd"] .accordion__text ul {
  margin: 12px 0 !important;
  padding-left: 20px !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__text li {
  margin-bottom: 6px !important;
  color: #444444 !important;
}

/* Section header styling */
[id*="section_accordions_iBR8Pd"] .section__heading {
  color: #02192f !important;
  margin-bottom: 32px !important;
}

/* Remove default dividers */
[id*="section_accordions_iBR8Pd"] .accordion__item--padded {
  border-bottom: none !important;
}

/* Two column layout adjustments */
[id*="section_accordions_iBR8Pd"] .accordion__columns {
  gap: 24px !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__column {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

[id*="section_accordions_iBR8Pd"] .accordion__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
  [id*="section_accordions_iBR8Pd"] .accordion__title {
    padding: 16px 18px !important;
    font-size: 0.95rem !important;
  }

  [id*="section_accordions_iBR8Pd"] .accordion__text {
    padding: 16px 18px !important;
  }

  [id*="section_accordions_iBR8Pd"] .accordion__item {
    margin-bottom: 12px !important;
  }
}

/* ==========================================
   END FAQ EXPANDABLE CARDS
   ========================================== */

/* ==========================================
   TRUST BADGES / ICONS ROW
   Design matching "So einfach geht's" section
   ========================================== */

/* Section container */
[id*="section-icons-row-0"] {
  background: #02192f !important;
  padding: 70px 0 !important;
}

/* Section heading */
[id*="section-icons-row-0"] .icons-row__heading {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 50px !important;
}

/* Remove default borders */
[id*="section-icons-row-0"].icons-row--borders-vertical .icons-row-item::before,
[id*="section-icons-row-0"].icons-row--borders-vertical .icons-row-item::after,
[id*="section-icons-row-0"].icons-row--borders-top::before,
[id*="section-icons-row-0"].icons-row--borders-bottom::after {
  display: none !important;
}

/* Icon container - White circular background */
[id*="section-icons-row-0"] .icons-row-item__icon {
  width: 120px !important;
  height: 120px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
}

[id*="section-icons-row-0"] .icons-row-item:hover .icons-row-item__icon {
  transform: scale(1.08) !important;
}

/* Green badge/checkmark on icons */
[id*="section-icons-row-0"] .icons-row-item__icon::after {
  content: '✓' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 32px !important;
  height: 32px !important;
  background: #c0dd90 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #02192f !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* SVG Icon styling - Dark color on white background */
[id*="section-icons-row-0"] .icons-row-item__icon .icon {
  width: 50px !important;
  height: 50px !important;
  color: #02192f !important;
  stroke-width: 1.5 !important;
  transition: all 0.3s ease !important;
}

/* Title styling */
[id*="section-icons-row-0"] .icons-row-item__title {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

/* Description text */
[id*="section-icons-row-0"] .icons-row-item__text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem !important;
  margin-top: 4px !important;
}

/* Item wrapper */
[id*="section-icons-row-0"] .icons-row-item__wrapper {
  padding: 20px 30px !important;
}

[id*="section-icons-row-0"] .icons-row-item {
  position: relative !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
  [id*="section-icons-row-0"] {
    padding: 50px 20px !important;
  }

  [id*="section-icons-row-0"] .icons-row__heading {
    margin-bottom: 40px !important;
  }

  [id*="section-icons-row-0"] .icons-row-item__icon {
    width: 100px !important;
    height: 100px !important;
  }

  [id*="section-icons-row-0"] .icons-row-item__icon::after {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  [id*="section-icons-row-0"] .icons-row-item__icon .icon {
    width: 42px !important;
    height: 42px !important;
  }

  [id*="section-icons-row-0"] .icons-row-item__title {
    font-size: 0.9rem !important;
  }

  [id*="section-icons-row-0"] .icons-row-item__wrapper {
    padding: 15px 10px !important;
  }
}

/* ==========================================
   END TRUST BADGES / ICONS ROW
   ========================================== */

/* ==========================================
   TEAM BANNER SECTION
   "Vier Freunde. Eine Vision."
   ========================================== */

[id*="section_banner_image_PwDLdf"] .banner-image__inner {
  position: relative !important;
}

/* Better gradient overlay for readability */
[id*="section_banner_image_PwDLdf"] .overlay {
  background: linear-gradient(
    to top,
    rgba(2, 25, 47, 0.75) 0%,
    rgba(2, 25, 47, 0.4) 50%,
    rgba(2, 25, 47, 0.2) 100%
  ) !important;
  opacity: 1 !important;
}

/* Subheading - "Das Team hinter Rauszeit" */
[id*="section_banner_image_PwDLdf"] .banner-image__subheading {
  color: #c0dd90 !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

/* Main heading */
[id*="section_banner_image_PwDLdf"] .banner-image__heading {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 20px !important;
}

/* Description text */
[id*="section_banner_image_PwDLdf"] .banner-image__text {
  max-width: 600px !important;
  margin: 0 auto 30px !important;
  opacity: 0.95 !important;
  line-height: 1.7 !important;
}

/* Button styling */
[id*="section_banner_image_PwDLdf"] .banner-image__btn {
  background: #c0dd90 !important;
  border: none !important;
  color: #02192f !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 16px 36px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(192, 221, 144, 0.3) !important;
}

[id*="section_banner_image_PwDLdf"] .banner-image__btn:hover {
  background: #ffffff !important;
  color: #02192f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
  [id*="section_banner_image_PwDLdf"] .banner-image__text {
    padding: 0 15px !important;
  }
}

/* ==========================================
   END TEAM BANNER SECTION
   ========================================== */

/* ==========================================
   RAUSZEIT IDEE TEXT SECTION
   Enhanced visual hierarchy for brand story
   ========================================== */

[id*="section_text_GadY3f"] {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important;
  position: relative !important;
}

/* Decorative top accent */
[id*="section_text_GadY3f"]::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #c0dd90, #02192f) !important;
  border-radius: 2px !important;
}

/* Section subheading - "Die Rauszeit Idee" */
[id*="section_text_GadY3f"] .text__heading:first-of-type {
  color: #c0dd90 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* Main heading styling */
[id*="section_text_GadY3f"] .text__heading strong {
  color: #02192f !important;
}

/* Content paragraphs */
[id*="section_text_GadY3f"] .text__content {
  color: #4a5568 !important;
  line-height: 1.8 !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

[id*="section_text_GadY3f"] .text__content strong {
  color: #02192f !important;
  font-weight: 700 !important;
}

/* CTA Button */
[id*="section_text_GadY3f"] .text__button .btn {
  background: #02192f !important;
  border-color: #02192f !important;
  color: #ffffff !important;
  padding: 14px 36px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
}

[id*="section_text_GadY3f"] .text__button .btn:hover {
  background: #c0dd90 !important;
  border-color: #c0dd90 !important;
  color: #02192f !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
  [id*="section_text_GadY3f"]::before {
    width: 60px !important;
    height: 3px !important;
  }

  [id*="section_text_GadY3f"] .text__content {
    padding: 0 10px !important;
  }
}

/* ==========================================
   END RAUSZEIT IDEE TEXT SECTION
   ========================================== */


/* ==========================================
   GOOGLE REVIEWS STYLING
   CarthiKe Google Reviews App - Redesigned
   ========================================== */

/* Wrapper section - MINIMAL spacing */
[id*="17556009574841fc70"],
.shopify-section:has(#carthike-google-reviews) {
  padding-top: 0 !important;
  margin-top: -20px !important;
}

/* Google Reviews - mobile sizing via CSS custom property */
@media (max-width: 480px) {
  #carthike-google-reviews,
  #carthike-carousel-div {
    --srem: 12px !important;
  }

  [id*="17556009574841fc70"] .wrapper--full-padded {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  [id*="17556009574841fc70"] .section-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #carthike-google-reviews {
    margin-left: -8px !important;
    margin-right: -8px !important;
    width: calc(100% + 16px) !important;
  }
}

[id*="17556009574841fc70"] .section-padding,
.shopify-section:has(#carthike-google-reviews) .section-padding {
  --PT: 0px !important;
  --PB: 30px !important;
  padding-top: 0 !important;
}

/* Main container - full width with proper overflow */
#carthike-google-reviews {
  padding: 0 !important;
  position: relative;
  max-width: 100% !important;
  margin: 0 auto;
  overflow: visible !important;
}

/* Header area - compact styling */
#carthike-google-reviews > div:first-child,
#carthike-google-reviews [class*="header"],
#carthike-google-reviews [class*="business"] {
  text-align: center !important;
  padding: 0 20px 20px 20px !important;
  margin-bottom: 0 !important;
}

/* Business name styling */
#carthike-google-reviews [class*="business-name"],
#carthike-google-reviews > div:first-child > div:first-child {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  color: #02192f !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 6px !important;
}

/* Rating display */
#carthike-google-reviews [class*="rating"],
#carthike-google-reviews [class*="score"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
}

/* Carousel container - FULL WIDTH, arrows outside */
#carthike-carousel-div {
  padding: 20px 80px 40px 80px !important;
  position: relative;
  overflow: visible !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

/* Make ALL containers allow overflow */
#carthike-google-reviews,
#carthike-google-reviews *,
#carthike-carousel-div,
#carthike-carousel-div * {
  overflow: visible !important;
}

/* Specifically target slick slider */
#carthike-google-reviews .slick-list,
#carthike-google-reviews .slick-track,
#carthike-google-reviews .slick-slider,
#carthike-google-reviews [class*="slick"],
#carthike-google-reviews [class*="carousel"],
#carthike-google-reviews [class*="slider"] {
  overflow: visible !important;
}

/* Review cards - MUCH LARGER and more prominent */
#carthike-google-reviews [class*="review"],
#carthike-google-reviews [class*="card"],
#carthike-google-reviews [class*="slide"] > div,
#carthike-google-reviews .slick-slide > div {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow:
    0 4px 20px rgba(0, 80, 72, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.35s ease !important;
  padding: 28px 24px !important;
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 15px 12px !important;
  position: relative !important;
}

#carthike-google-reviews [class*="review"]:hover,
#carthike-google-reviews [class*="card"]:hover,
#carthike-google-reviews .slick-slide > div:hover {
  box-shadow:
    0 12px 40px rgba(0, 80, 72, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-6px) !important;
}

/* Profile images - with accent ring */
#carthike-google-reviews img[class*="profile"],
#carthike-google-reviews img[class*="avatar"],
#carthike-google-reviews [class*="review"] img:first-of-type {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: 3px solid #c0dd90 !important;
  box-shadow: 0 4px 12px rgba(0, 80, 72, 0.12) !important;
}

/* Letter avatars */
#carthike-google-reviews [class*="avatar"]:not(img),
#carthike-google-reviews div[style*="border-radius"][style*="background"] {
  width: 60px !important;
  height: 60px !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #c0dd90 !important;
  background: linear-gradient(135deg, #005048, #008f7a) !important;
  color: #ffffff !important;
}

/* Star ratings */
#carthike-google-reviews [class*="star"] {
  margin: 10px 0 !important;
}

/* Reviewer names - more prominent */
#carthike-google-reviews [class*="name"],
#carthike-google-reviews strong,
#carthike-google-reviews b {
  color: #02192f !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin-top: 10px !important;
}

/* Review date */
#carthike-google-reviews [class*="date"],
#carthike-google-reviews [class*="time"] {
  color: #8fb8b6 !important;
  font-size: 0.8rem !important;
  margin-bottom: 10px !important;
}

/* Review text - larger and more readable */
#carthike-google-reviews [class*="text"],
#carthike-google-reviews [class*="content"],
#carthike-google-reviews p {
  color: #333333 !important;
  line-height: 1.75 !important;
  font-size: 1rem !important;
  flex-grow: 1 !important;
}

/* "Mehr anzeigen" link */
#carthike-google-reviews a[class*="more"],
#carthike-google-reviews a:not([class*="google"]) {
  color: #005048 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  margin-top: 8px !important;
}

#carthike-google-reviews a[class*="more"]:hover,
#carthike-google-reviews a:not([class*="google"]):hover {
  color: #f44224 !important;
}

/* Navigation arrows - LARGE & VERTICALLY CENTERED */
#carthike-google-reviews button,
#carthike-google-reviews [class*="arrow"],
#carthike-google-reviews [class*="prev"],
#carthike-google-reviews [class*="next"],
#carthike-google-reviews .slick-prev,
#carthike-google-reviews .slick-next {
  background: #02192f !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  border: none !important;
  transition: all 0.3s ease !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 100 !important;
  box-shadow: 0 6px 24px rgba(2, 25, 47, 0.3) !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Left arrow - outside cards */
#carthike-google-reviews [class*="prev"],
#carthike-google-reviews .slick-prev,
#carthike-google-reviews button:first-of-type {
  left: 5px !important;
}

/* Right arrow - outside cards */
#carthike-google-reviews [class*="next"],
#carthike-google-reviews .slick-next,
#carthike-google-reviews button:last-of-type {
  right: 5px !important;
}

#carthike-google-reviews button:hover,
#carthike-google-reviews [class*="arrow"]:hover,
#carthike-google-reviews .slick-prev:hover,
#carthike-google-reviews .slick-next:hover {
  background: #f44224 !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 8px 30px rgba(244, 66, 36, 0.4) !important;
}

/* Arrow icons inside buttons */
#carthike-google-reviews button svg,
#carthike-google-reviews [class*="arrow"] svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 2.5 !important;
}

/* Slick arrow pseudo-elements (if used) */
#carthike-google-reviews .slick-prev:before,
#carthike-google-reviews .slick-next:before {
  font-size: 26px !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Dots/pagination - below cards */
#carthike-google-reviews [class*="dots"],
#carthike-google-reviews [class*="pagination"],
#carthike-google-reviews .slick-dots {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
}

#carthike-google-reviews [class*="dot"],
#carthike-google-reviews [class*="indicator"],
#carthike-google-reviews .slick-dots li button {
  background: #d0e8e6 !important;
  transition: all 0.3s ease !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 0 !important;
}

#carthike-google-reviews [class*="dot"]:hover,
#carthike-google-reviews .slick-dots li button:hover {
  background: #8fb8b6 !important;
}

#carthike-google-reviews [class*="dot"].active,
#carthike-google-reviews [class*="dot"][class*="active"],
#carthike-google-reviews .slick-active [class*="dot"],
#carthike-google-reviews .slick-dots li.slick-active button {
  background: #005048 !important;
  transform: scale(1.4) !important;
}

/* Google branding - subtle */
#carthike-google-reviews img[src*="google"] {
  height: 18px !important;
  opacity: 0.7 !important;
}

/* ==========================================
   END GOOGLE REVIEWS STYLING
   ========================================== */

/* ==========================================
   PROCESS STEPS / ICONS ROW - Bold Journey Design
   Flows seamlessly into the video section below
   ========================================== */

/* Section - Dark bold background */
#IconsRow--template--28194194194781__section_icons_row_94h7ba {
  background: #02192f !important;
  padding: 100px 40px !important;
}

/* Add "So einfach geht's" heading via pseudo-element on wrapper */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .wrapper::before {
  content: 'So einfach geht\'s' !important;
  display: block !important;
  text-align: center !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  margin-bottom: 80px !important;
}

/* Remove all default borders including vertical dividers */
#IconsRow--template--28194194194781__section_icons_row_94h7ba.icons-row--borders-top::before,
#IconsRow--template--28194194194781__section_icons_row_94h7ba.icons-row--borders-bottom::after,
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item::before,
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item::after {
  display: none !important;
  border: none !important;
  background: none !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba.icons-row--borders .icons-row-item::before,
#IconsRow--template--28194194194781__section_icons_row_94h7ba.icons-row--borders .icons-row-item::after {
  display: none !important;
}

/* Force remove any vertical borders on items */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item {
  border-left: none !important;
  border-right: none !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row__slider > * {
  border: none !important;
}

/* Grid layout */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row__slider {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 50px !important;
  position: relative !important;
}

/* Connecting line - removed per request */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row__slider::before {
  display: none !important;
}

/* Each step */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item {
  flex: 1 !important;
  max-width: 260px !important;
  text-align: center !important;
  border: none !important;
  padding: 0 20px !important;
  position: relative !important;
  z-index: 1 !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  width: 100% !important;
}

/* Step number */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row__wrapper {
  counter-reset: step-num !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__wrapper::before {
  counter-increment: step-num !important;
  content: counter(step-num) !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(50% + 40px) !important;
  width: 32px !important;
  height: 32px !important;
  background: #c0dd90 !important;
  color: #02192f !important;
  border-radius: 50% !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  z-index: 10 !important;
}

/* Icon container - white circle */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__icon {
  width: 120px !important;
  height: 120px !important;
  min-width: 120px !important;
  margin: 0 0 24px 0 !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.4s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item:hover .icons-row-item__icon {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 40px rgba(192, 221, 144, 0.4) !important;
}

/* Image inside icon */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__image {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 20px !important;
}

/* Title - white on dark */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__title {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 8px !important;
}

/* Add subtitle descriptions via nth-child */
#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__content::after {
  display: block !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  color: #8fb8b6 !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item:nth-child(1) .icons-row-item__content::after {
  content: 'Campingbox online bestellen' !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item:nth-child(2) .icons-row-item__content::after {
  content: 'In wenigen Minuten einbauen' !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item:nth-child(3) .icons-row-item__content::after {
  content: 'Losfahren & die Welt entdecken' !important;
}

#IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item:nth-child(4) .icons-row-item__content::after {
  content: 'Entspannen & genießen' !important;
}

/* ==========================================
   HERO VIDEO SECTION - Enhanced Immersive Experience
   ========================================== */

#FeaturedVideo--template--28194194194781__section_video_Gdf8UX {
  position: relative !important;
}

/* Account for announcement bar height (32.5px) in full-height hero */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video__container,
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX.full-height .video__container {
  min-height: calc(100vh - 32.5px) !important;
  height: calc(100vh - 32.5px) !important;
}

/* Enhanced overlay gradient for hero */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video__overlay {
  background: linear-gradient(
    180deg,
    rgba(2, 25, 47, 0.2) 0%,
    rgba(2, 25, 47, 0.05) 40%,
    rgba(2, 25, 47, 0.3) 100%
  ) !important;
  --overlay-opacity: 1 !important;
}

/* Hero content wrapper */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video-text-wrapper {
  max-width: 700px !important;
  padding: 40px !important;
}

/* Hero main heading */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .main-heading {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 20px !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Hero description */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .hero__description {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 28px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Hero CTA button */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .btn--secondary {
  background: #c0dd90 !important;
  color: #02192f !important;
  border: none !important;
  padding: 16px 36px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: 50px !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 4px 20px rgba(192, 221, 144, 0.4) !important;
}

#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .btn--secondary:hover {
  background: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3) !important;
}

/* Feature badges for hero - with more bottom space */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video-text-wrapper::after {
  content: '✓ Kein Werkzeug  •  ✓ In Minuten aufgebaut  •  ✓ Made in Germany' !important;
  display: block !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 1px !important;
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-bottom: 60px !important;
}

/* Remove duplicate scroll indicator - theme already has one */
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video__container::after,
#FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video__container::before {
  display: none !important;
}

/* ==========================================
   MIDDLE VIDEO SECTION - Clean & Simple
   ========================================== */

#FeaturedVideo--template--28194194194781__section_video_kHCpWF {
  position: relative !important;
  z-index: 1 !important;
}

/* Hide play button overlay */
#FeaturedVideo--template--28194194194781__section_video_kHCpWF .main-buttons--video-bg {
  display: none !important;
}

/* Simple heading styling */
#FeaturedVideo--template--28194194194781__section_video_kHCpWF .main-heading {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  margin-bottom: 32px !important;
}

/* CTA button */
#FeaturedVideo--template--28194194194781__section_video_kHCpWF .btn--secondary.btn--solid {
  background: #c0dd90 !important;
  color: #02192f !important;
  border: none !important;
  padding: 16px 36px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: 50px !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 4px 20px rgba(192, 221, 144, 0.4) !important;
}

#FeaturedVideo--template--28194194194781__section_video_kHCpWF .btn--secondary.btn--solid:hover {
  background: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================
   END VIDEO SECTIONS
   ========================================== */

/* Mobile responsive */
@media (max-width: 749px) {
  /* HERO VIDEO SECTION - Mobile */
  #FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video__container,
  #FeaturedVideo--template--28194194194781__section_video_Gdf8UX.full-height .video__container {
    min-height: calc(100vh - 32.5px) !important;
    height: calc(100vh - 32.5px) !important;
  }

  #FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video-text-wrapper {
    padding: 24px !important;
  }

  #FeaturedVideo--template--28194194194781__section_video_Gdf8UX .main-heading {
    font-size: 2rem !important;
    letter-spacing: 1px !important;
  }

  #FeaturedVideo--template--28194194194781__section_video_Gdf8UX .hero__description {
    font-size: 0.95rem !important;
  }

  #FeaturedVideo--template--28194194194781__section_video_Gdf8UX .btn--secondary {
    padding: 14px 28px !important;
    font-size: 0.85rem !important;
  }

  #FeaturedVideo--template--28194194194781__section_video_Gdf8UX .video-text-wrapper::after {
    content: '✓ Kein Werkzeug\A✓ In Minuten aufgebaut\A✓ Made in Germany' !important;
    white-space: pre-line !important;
    font-size: 0.75rem !important;
    margin-top: 28px !important;
    padding-top: 20px !important;
    line-height: 1.8 !important;
    margin-bottom: 50px !important;
  }

  /* MIDDLE VIDEO SECTION - Mobile */
  #FeaturedVideo--template--28194194194781__section_video_kHCpWF .main-heading {
    font-size: 1.75rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 24px !important;
  }

  #FeaturedVideo--template--28194194194781__section_video_kHCpWF .btn--secondary.btn--solid {
    padding: 14px 28px !important;
    font-size: 0.85rem !important;
  }

  /* ICONS ROW - Mobile */
  #IconsRow--template--28194194194781__section_icons_row_94h7ba {
    padding: 70px 20px !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .wrapper::before {
    font-size: 1.4rem !important;
    margin-bottom: 50px !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row__slider {
    flex-wrap: wrap !important;
    gap: 50px 20px !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row__slider::before {
    display: none !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    padding: 0 5px !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__icon {
    width: 90px !important;
    height: 90px !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__wrapper::before {
    left: calc(50% + 25px) !important;
    top: -8px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 0.8rem !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__title {
    font-size: 0.9rem !important;
  }

  #IconsRow--template--28194194194781__section_icons_row_94h7ba .icons-row-item__content::after {
    font-size: 0.75rem !important;
  }
}


/* ==========================================
   END PROCESS STEPS STYLING
   ========================================== */

/* Mobile Optimizations */
@media (max-width: 749px) {
  /* Hero Section - Smaller text on mobile */
  .featured-video-section .main-heading {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .featured-video-section .hero__description {
    font-size: 0.9rem !important;
  }

  /* Features Grid - Tighter spacing */
  .section-columns .column-item__heading {
    font-size: 0.95rem;
    margin-top: 0.75rem;
  }

  .section-columns .column-item__text {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Reduce section padding on mobile */
  .section-padding {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Icons row - compact on mobile */
  .section-icons-row .icons-row__item {
    padding: 12px 8px;
  }

  .section-icons-row .icons-row__item-title {
    font-size: 0.9rem;
  }

  /* Contact section text smaller on mobile */
  .section-icons-row .icons-row__item-text {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Image with text section - better mobile spacing */
  .section-image-with-text .image-with-text__content {
    padding: 24px 16px;
  }

  /* GOOGLE REVIEWS - Mobile */
  #carthike-carousel-div {
    padding: 15px 16px 30px 16px !important;
  }

  #carthike-google-reviews [class*="review"],
  #carthike-google-reviews [class*="card"],
  #carthike-google-reviews [class*="slide"] > div,
  #carthike-google-reviews .slick-slide > div {
    padding: 24px 20px !important;
    min-height: auto !important;
    margin: 10px 8px !important;
    border-radius: 16px !important;
  }

  /* Move arrows below the card on mobile */
  #carthike-google-reviews button,
  #carthike-google-reviews [class*="arrow"],
  #carthike-google-reviews .slick-prev,
  #carthike-google-reviews .slick-next {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }

  #carthike-google-reviews [class*="prev"],
  #carthike-google-reviews .slick-prev,
  #carthike-google-reviews button:first-of-type {
    left: auto !important;
  }

  #carthike-google-reviews [class*="next"],
  #carthike-google-reviews .slick-next,
  #carthike-google-reviews button:last-of-type {
    right: auto !important;
  }

  #carthike-google-reviews img[class*="profile"],
  #carthike-google-reviews img[class*="avatar"],
  #carthike-google-reviews [class*="review"] img:first-of-type {
    width: 56px !important;
    height: 56px !important;
  }

  #carthike-google-reviews [class*="business-name"],
  #carthike-google-reviews > div:first-child > div:first-child {
    font-size: 1.4rem !important;
  }

  #carthike-google-reviews [class*="name"],
  #carthike-google-reviews strong,
  #carthike-google-reviews b {
    font-size: 1rem !important;
  }

  #carthike-google-reviews [class*="text"],
  #carthike-google-reviews [class*="content"],
  #carthike-google-reviews p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }
}

/* ================================================================
   FOOTER STYLING
   ================================================================ */

/* Fix payment icons alignment */
.footer__bottom-bar .payment-icons {
  justify-content: flex-start !important;
}

.footer__bottom-bar .footer__bar__item--payment {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Footer list styling for Easy shoppen - checkmarks */
.footer-block ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.footer-block ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
  font-size: 14px;
}

.footer-block ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #c0dd90;
}

/* Remove bullets from footer menu links */
.footer-block--menu ul {
  list-style: none;
  padding-left: 0;
}

.footer-block--menu ul li {
  padding-left: 0;
}

.footer-block--menu ul li::before {
  display: none;
}

/* Icons row - tighter spacing */
.section-icons-row .icons-row__slider {
  max-width: 900px;
  margin: 0 auto;
}

.section-icons-row .icons-row__item {
  padding-left: 20px;
  padding-right: 20px;
}

/* Announcement bar / Marquee - remove section padding on mobile */
@media (max-width: 749px) {
  .section-marquee.section-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Newsletter form tidying */
.footer-block--newsletter .newsletter-form {
  max-width: 100%;
}

.footer-block--newsletter .field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-block--newsletter .field__input {
  flex: 1;
  min-width: 200px;
}

.footer-block--newsletter .field__button {
  flex-shrink: 0;
}

/* ==========================================
   PAYPAL / DYNAMIC CHECKOUT BUTTON FIX
   Prevent red background bleeding into payment buttons
   ========================================== */

/* Override the btn--secondary variables for payment buttons */
.product__submit__buttons .shopify-payment-button,
.product__submit__holder--spb .shopify-payment-button,
.btn--secondary.btn--solid-border .shopify-payment-button__button--unbranded,
.btn--secondary .shopify-payment-button__button--unbranded,
.btn--solid-border .shopify-payment-button__button--unbranded,
shopify-accelerated-checkout {
  --btn-bg: transparent !important;
  --btn-border: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Reset background for Shopify payment button containers */
.shopify-payment-button,
.shopify-payment-button__button,
.shopify-payment-button__button--branded,
.product__submit__buttons .shopify-payment-button {
  background: transparent !important;
  background-color: transparent !important;
  --btn-bg: transparent !important;
}

/* Target the accelerated checkout wrapper specifically */
.product__submit__buttons shopify-accelerated-checkout,
.product__form shopify-accelerated-checkout {
  background: transparent !important;
  --btn-bg: transparent !important;
}

/* Ensure the actual branded buttons (PayPal, Apple Pay etc.) show correctly */
.shopify-payment-button__button--branded {
  border: none !important;
}

/* Fix for button wrapper inheriting secondary color */
.product__submit__item--payment,
.product__submit__holder--spb {
  background: transparent !important;
}

/* Override the "Weitere Bezahlmöglichkeiten" link area */
.shopify-payment-button__more-options,
more-payment-options-link {
  background: transparent !important;
}

/* ==========================================
   COLLECTION PAGE STYLING
   Enhanced CI design integration
   ========================================== */

/* Collection title styling */
.collection__title {
  color: var(--color-night) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Product cards - subtle CI accent on hover */
.product-grid-item {
  transition: all 0.3s ease !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Product image container */
.product-grid-item__image {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Scale zoom on product image hover */
.product-grid-item__image img {
  transition: transform 0.4s ease !important;
}

.product-grid-item:hover .product-grid-item__image img {
  transform: scale(1.03) !important;
}

/* Product title styling */
.product-grid-item__title {
  color: var(--color-night) !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

.product-grid-item:hover .product-grid-item__title {
  color: var(--color-forrest, #005048) !important;
}

/* Product price accent */
.product-grid-item__price {
  color: var(--color-night) !important;
  font-weight: 700 !important;
}

/* Quick buy button CI styling */
.product-grid-item .btn--quick-buy,
.product-grid-item .quick-buy-button {
  background: var(--color-night) !important;
  border-color: var(--color-night) !important;
  transition: all 0.3s ease !important;
}

.product-grid-item .btn--quick-buy:hover,
.product-grid-item .quick-buy-button:hover {
  background: var(--color-moss) !important;
  border-color: var(--color-moss) !important;
  color: var(--color-night) !important;
}

/* Collection filter/tag buttons */
.collection__filters .tag,
.collection__filters .btn--tag {
  border-color: var(--color-stone) !important;
  transition: all 0.3s ease !important;
}

.collection__filters .tag:hover,
.collection__filters .btn--tag:hover,
.collection__filters .tag.is-active,
.collection__filters .btn--tag.is-active {
  background: var(--color-night) !important;
  border-color: var(--color-night) !important;
  color: #ffffff !important;
}

/* Pagination styling */
.pagination__item a {
  border-color: var(--color-stone) !important;
  transition: all 0.3s ease !important;
}

.pagination__item a:hover,
.pagination__item.is-active a {
  background: var(--color-night) !important;
  border-color: var(--color-night) !important;
  color: #ffffff !important;
}

/* Sort dropdown CI styling */
.collection__sort select,
.collection-sort__dropdown {
  border-color: var(--color-stone) !important;
  transition: border-color 0.3s ease !important;
}

.collection__sort select:focus,
.collection-sort__dropdown:focus {
  border-color: var(--color-forrest) !important;
  outline-color: var(--color-forrest) !important;
}

/* Single product centering - when only 1-2 products */
.collection__products .grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 20px !important;
  overflow: visible !important;
}

.collection__products {
  overflow: visible !important;
}

/* Limit max width for product cards for better proportions */
.collection__products .grid > * {
  max-width: 550px !important;
  width: 100% !important;
}

/* Better spacing when few products */
@media (min-width: 1024px) {
  .collection__products .grid {
    gap: 40px !important;
  }
}

/* Reduce collection section spacing */
.collection-section.section-padding {
  --PT: 10px !important;
  --PB: 40px !important;
}

.collection__wrapper {
  padding-bottom: 40px !important;
  margin-bottom: 20px !important;
  min-height: auto !important;
}

/* Spacing between product and next section */
.template-collection .collection-section + .section-padding,
.template-collection .collection-section + .section-columns {
  --PT: 40px !important;
}

/* Collection hero banner styling */
.collection-image-with-title {
  position: relative !important;
}

.collection-image-with-title .collection__title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.collection-image-with-title .overlay {
  background: linear-gradient(
    to bottom,
    rgba(2, 25, 47, 0.5) 0%,
    rgba(2, 25, 47, 0.7) 100%
  ) !important;
}

/* Collection pages have light backgrounds - ensure logo stays dark/visible */
body.template-collection .site-header--transparent .logo__image-link img,
body.template-collection .site-header--transparent .logo__image {
  filter: none !important;
}

/* Collection top section - improved styling */
.template-collection .section-text:first-of-type {
  background: linear-gradient(135deg, rgba(192, 221, 144, 0.15) 0%, rgba(2, 25, 47, 0.05) 100%) !important;
  border-bottom: 3px solid var(--color-moss) !important;
  padding-top: 30px !important;
  padding-bottom: 25px !important;
}

.template-collection .section-text:first-of-type .section__heading,
.template-collection .section-text:first-of-type h2 {
  font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--color-night) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

/* Hide breadcrumb bar and product count on collection page */
.template-collection .collection__sticky-bar {
  display: none !important;
}

/* SEO text section - subtle card styling on collection page */
.template-collection [data-section-type="text"] .wrapper--narrow {
  background: #fafafa !important;
  border-radius: 16px !important;
  padding: 40px 48px !important;
  text-align: left !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow .text {
  text-align: left !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow h2,
.template-collection [data-section-type="text"] .wrapper--narrow h3 {
  font-size: 1.3rem !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
  color: var(--color-night, #02192f) !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow h2:first-child,
.template-collection [data-section-type="text"] .wrapper--narrow .text__block:first-child h2 {
  margin-top: 0 !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow p {
  color: #555 !important;
  line-height: 1.7 !important;
  font-size: 0.95rem !important;
}

@media only screen and (max-width: 767px) {
  .template-collection [data-section-type="text"] .wrapper--narrow {
    padding: 28px 24px !important;
  }
}

/* Product card enhanced styling on collection page */
.template-collection .product-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(2, 25, 47, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.template-collection .product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(2, 25, 47, 0.12) !important;
}

/* ==========================================
   END COLLECTION PAGE STYLING
   ========================================== */

/* ==========================================
   COLLECTION PAGE — CI ENHANCEMENT
   Extends existing collection styling with
   Homepage-level polish and interactions
   ========================================== */

/* -------------------------------------------
   1. FEATURE COLUMNS ("Durchdacht bis ins Detail")
   Same pattern as Homepage .section-columns
   but scoped to collection template
   ------------------------------------------- */
.template-collection .section-columns .column-item {
  transition: transform 0.3s ease !important;
}

.template-collection .section-columns .column-item__image-wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(2, 25, 47, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.template-collection .section-columns .column-item:hover .column-item__image-wrapper {
  transform: scale(1.03) !important;
  box-shadow: 0 6px 24px rgba(2, 25, 47, 0.14) !important;
}

.template-collection .section-columns .column-item__heading {
  color: var(--color-night) !important;
  font-weight: 700 !important;
  margin-top: 1rem !important;
}

.template-collection .section-columns .column-item__text {
  color: #555 !important;
  line-height: 1.6 !important;
}

.template-collection .section-columns .column-item__text strong {
  color: var(--color-forrest) !important;
}

/* -------------------------------------------
   2. TEXT SECTIONS ("Wofür wir stehen" etc.)
   Card-style with accent border, like
   Homepage "Rauszeit Idee" section
   ------------------------------------------- */
.template-collection [data-section-type="text"] .section-padding {
  position: relative !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow {
  background: linear-gradient(135deg, rgba(192, 221, 144, 0.08) 0%, rgba(2, 25, 47, 0.03) 100%) !important;
  border-radius: 16px !important;
  padding: 40px 48px !important;
  border-left: 4px solid var(--color-moss) !important;
  box-shadow: 0 2px 16px rgba(2, 25, 47, 0.06) !important;
  transition: box-shadow 0.3s ease !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow:hover {
  box-shadow: 0 4px 24px rgba(2, 25, 47, 0.10) !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow h2,
.template-collection [data-section-type="text"] .wrapper--narrow h3 {
  color: var(--color-night) !important;
  font-weight: 700 !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow p {
  color: #4a5568 !important;
  line-height: 1.7 !important;
}

.template-collection [data-section-type="text"] .wrapper--narrow strong {
  color: #000000 !important;
}

@media only screen and (max-width: 767px) {
  .template-collection [data-section-type="text"] .wrapper--narrow {
    padding: 28px 24px !important;
    border-left-width: 3px !important;
  }
}

/* -------------------------------------------
   3. CUSTOM CONTENT / ZUSATZBOX ("Coming Soon")
   Image+Text split section with CI buttons
   ------------------------------------------- */
.template-collection .brick__section .brick__block--image .featured-image_bg {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Zusatzbox Button: Moss base, Accent-Red hover */
.template-collection .brick__section .btn {
  --btn-bg: var(--color-moss) !important;
  --btn-border: var(--color-moss) !important;
  --btn-text: var(--color-night) !important;
  font-weight: 700 !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Disable theme directional hover effect */
.template-collection .brick__section .btn::before,
.template-collection .brick__section .btn::after {
  content: none !important;
  display: none !important;
}

.template-collection .brick__section .btn hover-button {
  display: none !important;
}

.template-collection .brick__section .btn:hover {
  background: #f44224 !important;
  border-color: #f44224 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(244, 66, 36, 0.3) !important;
}

/* Subheading accent color */
.template-collection .brick__section .subheading-text {
  color: var(--color-moss) !important;
  letter-spacing: 2px !important;
}

/* -------------------------------------------
   4. CTA SECTION ("Bereit für deine Rauszeit?")
   Image-with-text with prominent call to action
   ------------------------------------------- */
.template-collection .section-image-with-text .image-with-text__image {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(2, 25, 47, 0.10) !important;
}

.template-collection .section-image-with-text .image-with-text__heading {
  color: var(--color-night) !important;
  font-weight: 800 !important;
}

.template-collection .section-image-with-text .image-with-text__text {
  color: #4a5568 !important;
  line-height: 1.7 !important;
}

.template-collection .section-image-with-text .image-with-text__text strong {
  color: var(--color-forrest) !important;
}

/* CTA Button — Moss-Green primary style */
.template-collection .section-image-with-text .btn--secondary {
  background: var(--color-moss) !important;
  border-color: var(--color-moss) !important;
  color: var(--color-night) !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(192, 221, 144, 0.3) !important;
}

.template-collection .section-image-with-text .btn--secondary:hover {
  background: var(--color-forrest) !important;
  border-color: var(--color-forrest) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 80, 72, 0.3) !important;
}

/* If the CTA uses a primary button instead */
.template-collection .section-image-with-text .btn--primary {
  transition: all 0.3s ease !important;
}

.template-collection .section-image-with-text .btn--primary:hover {
  background: var(--color-moss) !important;
  border-color: var(--color-moss) !important;
  color: var(--color-night) !important;
  transform: translateY(-2px) !important;
}

@media only screen and (max-width: 767px) {
  .template-collection .section-image-with-text .image-with-text__image {
    border-radius: 8px !important;
  }

  .template-collection .section-image-with-text .btn--secondary,
  .template-collection .section-image-with-text .btn--primary {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================
   END COLLECTION PAGE — CI ENHANCEMENT
   ========================================== */

/* ==========================================
   PRODUCT PAGE STYLING
   CI Design & Conversion Optimization
   ========================================== */

/* Product title styling */
.template-product .product__title {
  color: var(--color-night) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Price styling - make it stand out */
.template-product .product__price {
  color: var(--color-night) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

.template-product .product__price .price {
  color: var(--color-forrest, #005048) !important;
  font-size: 1.6rem !important;
}

/* "Ab" prefix styling */
.template-product .product__price .price__from {
  color: var(--color-stone) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* Add to Cart button - prominent CI styling */
.template-product .product__submit__add,
.template-product .btn--add-to-cart {
  background: var(--color-moss, #c0dd90) !important;
  border-color: var(--color-moss, #c0dd90) !important;
  color: var(--color-night) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  padding: 16px 32px !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.template-product .product__submit__add:hover,
.template-product .btn--add-to-cart:hover {
  background: var(--color-forrest, #005048) !important;
  border-color: var(--color-forrest, #005048) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(0, 80, 72, 0.3) !important;
}

/* Buy now button styling */
.template-product .shopify-payment-button .shopify-payment-button__button {
  background: var(--color-night) !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.template-product .shopify-payment-button .shopify-payment-button__button:hover {
  background: var(--color-accent, #f44224) !important;
  transform: translateY(-2px) !important;
}

/* Quantity selector styling */
.template-product .quantity-selector {
  border-color: var(--color-stone) !important;
  border-radius: 8px !important;
}

.template-product .quantity-selector button {
  color: var(--color-night) !important;
  transition: background 0.2s ease !important;
}

.template-product .quantity-selector button:hover {
  background: rgba(192, 221, 144, 0.3) !important;
}

/* Feature icons with CI styling */
.template-product .product__block--icon .icon__text__wrapper {
  background: linear-gradient(135deg, rgba(192, 221, 144, 0.1) 0%, rgba(2, 25, 47, 0.03) 100%) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  border-left: 3px solid var(--color-moss, #c0dd90) !important;
  transition: all 0.3s ease !important;
}

.template-product .product__block--icon .icon__text__wrapper:hover {
  background: linear-gradient(135deg, rgba(192, 221, 144, 0.2) 0%, rgba(2, 25, 47, 0.05) 100%) !important;
  transform: translateX(4px) !important;
}

.template-product .product__block--icon .icon__text {
  color: var(--color-night) !important;
  font-weight: 500 !important;
}

/* Product accordions CI styling */
.template-product .accordion__title {
  color: var(--color-night) !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

.template-product .accordion__title:hover {
  color: var(--color-forrest, #005048) !important;
}

.template-product .accordion.is-open .accordion__title {
  color: var(--color-forrest, #005048) !important;
}

.template-product .accordion__icon {
  color: var(--color-moss, #c0dd90) !important;
}

/* Trust badges near buy button */
.template-product .product__form {
  position: relative !important;
}

/* Inventory countdown styling */
.template-product .product__inventory {
  background: rgba(244, 66, 36, 0.1) !important;
  color: var(--color-accent, #f44224) !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Share button styling */
.template-product .product__share-button {
  color: var(--color-stone) !important;
  transition: color 0.3s ease !important;
}

.template-product .product__share-button:hover {
  color: var(--color-forrest, #005048) !important;
}

/* Product description styling */
.template-product .product__description {
  color: var(--color-night) !important;
  line-height: 1.7 !important;
}

.template-product .product__description strong {
  color: var(--color-forrest, #005048) !important;
}

/* Variant selector styling */
.template-product .variant__button-wrapper .variant__button {
  border-color: var(--color-stone) !important;
  transition: all 0.3s ease !important;
}

.template-product .variant__button-wrapper .variant__button:hover,
.template-product .variant__button-wrapper .variant__button.is-selected {
  border-color: var(--color-forrest, #005048) !important;
  background: rgba(0, 80, 72, 0.1) !important;
}

.template-product .variant__button-wrapper .variant__button.is-selected {
  border-width: 2px !important;
}

/* Product gallery thumbnails */
.template-product .product__thumb {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
}

.template-product .product__thumb:hover,
.template-product .product__thumb.is-active {
  border-color: var(--color-moss, #c0dd90) !important;
}

/* Icons row at bottom - trust indicators */
.template-product .section-icons-row {
  background: linear-gradient(180deg, rgba(248, 247, 244, 0.5) 0%, #ffffff 100%) !important;
}

.template-product .section-icons-row .icon__column {
  transition: transform 0.3s ease !important;
}

.template-product .section-icons-row .icon__column:hover {
  transform: translateY(-4px) !important;
}

/* FAQ section on product page */
.template-product .section-accordions .accordion__title {
  font-size: 1.05rem !important;
}

/* Related products section */
.template-product .related-products__title {
  color: var(--color-night) !important;
  font-weight: 700 !important;
}

/* Mobile optimizations for product page */
@media (max-width: 768px) {
  .template-product .product__price .price {
    font-size: 1.4rem !important;
  }

  .template-product .product__submit__add,
  .template-product .btn--add-to-cart {
    font-size: 1rem !important;
    padding: 14px 24px !important;
    width: 100% !important;
  }

  .template-product .product__block--icon .icon__text__wrapper {
    padding: 10px 12px !important;
  }
}

/* ==========================================
   PRODUCT PAGE - CLEAN ACCORDIONS
   (Matching FUNKTIONEN section style)
   ========================================== */

/* Accordion wrapper */
.template-product .product__full-width-blocks {
  margin-top: 40px !important;
}

/* Reset product accordion blocks */
.template-product .product__block.product__accordions {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Inner accordion - override inline CSS variables */
.template-product .product__accordion[data-collapsible] {
  --border-width: 0px !important;
  --border-opacity: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(112, 112, 112, 0.3) !important;
  background: transparent !important;
}

/* First accordion block gets top border */
.template-product .product__block.product__accordions:first-child .product__accordion[data-collapsible] {
  border-top: 1px solid rgba(112, 112, 112, 0.3) !important;
}

/* Accordion title button - matching FUNKTIONEN style */
.template-product .product__accordion__title {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  font-weight: 600 !important;
}

.template-product .product__accordion__title:hover {
  opacity: 0.7 !important;
}

/* SVG Icons - position absolutely on the right */
.template-product .product__accordion__title svg.icon {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--color-forrest, #005048) !important;
  flex-shrink: 0 !important;
}

/* Make title container relative for icon positioning */
.template-product .product__accordion__title {
  position: relative !important;
  padding-right: 30px !important;
}

/* Content */
.template-product .product__accordion__inner {
  padding: 0 0 20px 0 !important;
  color: #555 !important;
  line-height: 1.75 !important;
  font-size: 0.95rem !important;
}

.template-product .product__accordion__inner p {
  margin-bottom: 12px !important;
  color: #555 !important;
}

.template-product .product__accordion__inner p:last-child {
  margin-bottom: 0 !important;
}

/* Lists - subtle bullets */
.template-product .product__accordion__inner ul {
  margin: 12px 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.template-product .product__accordion__inner ul li {
  position: relative !important;
  padding-left: 16px !important;
  margin-bottom: 8px !important;
  color: #555 !important;
}

.template-product .product__accordion__inner ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--color-forrest, #005048) !important;
  border-radius: 50% !important;
}

/* Bold text */
.template-product .product__accordion__inner strong {
  color: var(--color-night, #02192f) !important;
  font-weight: 600 !important;
}

/* Subheadings */
.template-product .product__accordion__inner p strong:only-child {
  display: block !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  font-size: 0.9rem !important;
  color: var(--color-night, #02192f) !important;
}

.template-product .product__accordion__inner p strong:only-child:first-child {
  margin-top: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .template-product .product__accordion__title {
    padding: 18px 0 !important;
    font-size: 1rem !important;
  }

  .template-product .product__accordion__inner {
    padding: 0 0 18px 0 !important;
  }
}

/* ==========================================
   END PRODUCT PAGE STYLING
   ========================================== */

/* ==========================================
   NEWSLETTER POPUP STYLING
   ========================================== */

/* Popup container */
.popup--large .popup__container {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Popup title */
.popup__title {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--color-night, #02192f) !important;
  margin-bottom: 16px !important;
  line-height: 1.2 !important;
}

/* Popup description */
.popup__description {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #444 !important;
}

.popup__description p {
  margin-bottom: 12px !important;
}

.popup__description strong {
  color: var(--color-forrest, #005048) !important;
  font-weight: 600 !important;
}

/* Newsletter form in popup */
.popup__form .newsletter__form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.popup__form .newsletter__form input[type="email"] {
  padding: 14px 16px !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  transition: border-color 0.2s ease !important;
}

.popup__form .newsletter__form input[type="email"]:focus {
  border-color: var(--color-forrest, #005048) !important;
  outline: none !important;
}

.popup__form .newsletter__form button,
.popup__form .newsletter__form .btn {
  background: var(--color-forrest, #005048) !important;
  color: #fff !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.popup__form .newsletter__form button:hover,
.popup__form .newsletter__form .btn:hover {
  background: var(--color-night, #02192f) !important;
}

/* Close button */
.popup__close {
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease !important;
}

.popup__close:hover {
  background: #fff !important;
}

/* Mobile popup adjustments */
@media (max-width: 768px) {
  .popup__title {
    font-size: 1.4rem !important;
  }

  .popup__description {
    font-size: 0.95rem !important;
  }
}

/* ==========================================
   END NEWSLETTER POPUP STYLING
   ========================================== */

/* ==========================================
   PANDECTES GDPR COOKIE BANNER STYLING
   Rauszeit CI Integration
   ========================================== */

/* Main banner container */
.pandectes-banner,
.pandectes-consent-banner,
#pandectes-banner,
[class*="pandectes"][class*="banner"],
[id*="pandectes"][id*="banner"] {
  font-family: 'Work Sans', sans-serif !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Popup window styling */
.cc-window-wrapper,
.cc-popup-wrapper,
.pd-cookie-banner-window,
[class*="cc-window"],
[class*="cc-popup"] {
  border: none !important;
  border-radius: 16px !important;
}

/* Banner text styling */
.pandectes-banner p,
.pandectes-consent-banner p,
.pandectes-banner .consent-text,
[class*="pandectes"] p,
[class*="pandectes"] .text {
  color: var(--color-night, #02192f) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

/* Banner title/heading */
.pandectes-banner h1,
.pandectes-banner h2,
.pandectes-banner h3,
.pandectes-banner .title,
[class*="pandectes"] .title,
[class*="pandectes"] h2 {
  color: var(--color-night, #02192f) !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* Accept/Allow button - Primary action (forrest green) */
.pandectes-banner .accept-btn,
.pandectes-banner .allow-btn,
.pandectes-banner .allow-all,
.pandectes-banner button[class*="accept"],
.pandectes-banner button[class*="allow"],
[class*="pandectes"] .accept-btn,
[class*="pandectes"] .allow-all,
[class*="pandectes"] button[class*="accept"],
[class*="pandectes"] button.primary,
[class*="pandectes"] .btn-primary {
  background: var(--color-forrest, #005048) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.pandectes-banner .accept-btn:hover,
.pandectes-banner .allow-btn:hover,
.pandectes-banner .allow-all:hover,
[class*="pandectes"] .accept-btn:hover,
[class*="pandectes"] .allow-all:hover,
[class*="pandectes"] button[class*="accept"]:hover,
[class*="pandectes"] button.primary:hover {
  background: var(--color-night, #02192f) !important;
  transform: translateY(-2px) !important;
}

/* Decline/Reject button - Secondary action */
.pandectes-banner .decline-btn,
.pandectes-banner .reject-btn,
.pandectes-banner .deny-all,
.pandectes-banner button[class*="decline"],
.pandectes-banner button[class*="reject"],
[class*="pandectes"] .decline-btn,
[class*="pandectes"] .deny-all,
[class*="pandectes"] button[class*="decline"],
[class*="pandectes"] button[class*="reject"],
[class*="pandectes"] button.secondary {
  background: transparent !important;
  color: var(--color-night, #02192f) !important;
  border: 2px solid var(--color-night, #02192f) !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.pandectes-banner .decline-btn:hover,
.pandectes-banner .reject-btn:hover,
.pandectes-banner .deny-all:hover,
[class*="pandectes"] .decline-btn:hover,
[class*="pandectes"] .deny-all:hover,
[class*="pandectes"] button[class*="decline"]:hover,
[class*="pandectes"] button[class*="reject"]:hover,
[class*="pandectes"] button.secondary:hover {
  background: var(--color-night, #02192f) !important;
  color: #ffffff !important;
}

/* Settings/Preferences button - Tertiary action */
.pandectes-banner .settings-btn,
.pandectes-banner .preferences-btn,
.pandectes-banner .customize-btn,
.pandectes-banner button[class*="settings"],
.pandectes-banner button[class*="preferences"],
[class*="pandectes"] .settings-btn,
[class*="pandectes"] .preferences-btn,
[class*="pandectes"] button[class*="settings"],
[class*="pandectes"] button[class*="preferences"] {
  background: transparent !important;
  color: var(--color-forrest, #005048) !important;
  border: none !important;
  padding: 8px 16px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.pandectes-banner .settings-btn:hover,
.pandectes-banner .preferences-btn:hover,
[class*="pandectes"] .settings-btn:hover,
[class*="pandectes"] .preferences-btn:hover,
[class*="pandectes"] button[class*="settings"]:hover,
[class*="pandectes"] button[class*="preferences"]:hover {
  color: var(--color-accent, #f44224) !important;
}

/* Links in banner */
.pandectes-banner a,
[class*="pandectes"] a {
  color: var(--color-forrest, #005048) !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.pandectes-banner a:hover,
[class*="pandectes"] a:hover {
  color: var(--color-accent, #f44224) !important;
}

/* Toggle switches - CI colors */
.pandectes-banner input[type="checkbox"],
.pandectes-banner .toggle,
.pandectes-banner .switch,
[class*="pandectes"] input[type="checkbox"],
[class*="pandectes"] .toggle,
[class*="pandectes"] .switch {
  accent-color: var(--color-forrest, #005048) !important;
}

/* Checked toggle state */
.pandectes-banner input[type="checkbox"]:checked + .slider,
.pandectes-banner .toggle.active,
[class*="pandectes"] input[type="checkbox"]:checked + .slider,
[class*="pandectes"] .toggle.active {
  background-color: var(--color-forrest, #005048) !important;
}

/* Modal/Popup styling for preferences */
.pandectes-modal,
.pandectes-preferences,
[class*="pandectes"][class*="modal"],
[class*="pandectes"][class*="preferences"] {
  font-family: 'Work Sans', sans-serif !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Cookie category labels */
.pandectes-banner .category-label,
.pandectes-modal .category-label,
[class*="pandectes"] .category-label,
[class*="pandectes"] .cookie-category {
  color: var(--color-night, #02192f) !important;
  font-weight: 600 !important;
}

/* Close button in modal */
.pandectes-modal .close-btn,
[class*="pandectes"] .close-btn,
[class*="pandectes"] button[class*="close"] {
  color: var(--color-night, #02192f) !important;
  transition: color 0.2s ease !important;
}

.pandectes-modal .close-btn:hover,
[class*="pandectes"] .close-btn:hover,
[class*="pandectes"] button[class*="close"]:hover {
  color: var(--color-accent, #f44224) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .pandectes-banner,
  [class*="pandectes"][class*="banner"] {
    padding: 16px !important;
  }

  .pandectes-banner p,
  [class*="pandectes"] p {
    font-size: 0.85rem !important;
  }

  .pandectes-banner .accept-btn,
  .pandectes-banner .allow-all,
  [class*="pandectes"] .accept-btn,
  [class*="pandectes"] .allow-all {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
  }

  .pandectes-banner .decline-btn,
  .pandectes-banner .deny-all,
  [class*="pandectes"] .decline-btn,
  [class*="pandectes"] .deny-all {
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
  }
}

/* ==========================================
   END PANDECTES GDPR COOKIE BANNER STYLING
   ========================================== */

/* ==========================================
   BLOG ARTICLE STYLING - HERO IMAGE VERSION
   Modern hero design with image background
   ========================================== */

/* Header Protection - Ensure header alignment is not affected */
.article-page .site-header,
.article-page .site-header .wrapper,
.article-page .site-header .logo,
.article-page .site-header .nav {
  display: flex;
  align-items: center;
}

.article-page .site-header .wrapper {
  justify-content: space-between;
}

.article-page .site-header .logo__image-link {
  display: flex;
  align-items: center;
}

/* Article Page Container - Remove padding for hero effect */
[id^="Article--"],
.section-article,
.article-page .section-article {
  background: #ffffff !important;
  --PT: 0px !important;
  padding-top: 0 !important;
}

/* Article Wrapper - CSS Grid for hero layout with overlapping cells */
[id^="Article--"] .article__wrapper,
.section-article .article__wrapper,
.article-page .article__wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 280px auto !important;
  overflow: visible !important;
}

/* Hero Section - Full viewport width image container */
[id^="Article--"] .article__image__wrapper,
.section-article .article__image__wrapper,
.article-page .article__image__wrapper {
  grid-row: 1 !important;
  grid-column: 1 !important;
  position: relative !important;
  margin: 0 !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  [id^="Article--"] .article__image__wrapper,
  .section-article .article__image__wrapper,
  .article-page .article__image__wrapper {
    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;
  }

  [id^="Article--"] .article__wrapper,
  .section-article .article__wrapper,
  .article-page .article__wrapper {
    grid-template-rows: 350px auto !important;
  }
}

@media (min-width: 1024px) {
  [id^="Article--"] .article__image__wrapper,
  .section-article .article__image__wrapper,
  .article-page .article__image__wrapper {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
  }

  [id^="Article--"] .article__wrapper,
  .section-article .article__wrapper,
  .article-page .article__wrapper {
    grid-template-rows: 400px auto !important;
  }
}

/* Gradient overlay on hero image */
.section-article .article__image__wrapper::after,
.article-page .article__image__wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(2, 25, 47, 0) 0%,
    rgba(2, 25, 47, 0.1) 40%,
    rgba(2, 25, 47, 0.8) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Hero image - cover entire container */
[id^="Article--"] .article__image,
[id^="Article--"] .article__image__wrapper .image-fill,
.section-article .article__image,
.section-article .article__image__wrapper .image-fill,
.article-page .article__image,
.article-page .article__image__wrapper .image-fill {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  object-fit: cover !important;
  aspect-ratio: unset !important;
  z-index: 1 !important;
}

[id^="Article--"] .article__image__wrapper .image-fill img,
.section-article .article__image__wrapper .image-fill img,
.article-page .article__image__wrapper .image-fill img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

[id^="Article--"] .article__image__wrapper .image-fill figure,
.section-article .article__image__wrapper .image-fill figure,
.article-page .article__image__wrapper .image-fill figure {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header - Placed in same grid cell as image, aligned to bottom */
[id^="Article--"] .section-header--article,
.section-article .section-header--article,
.article-page .section-header--article {
  grid-row: 1 !important;
  grid-column: 1 !important;
  align-self: end !important;
  justify-self: center !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 900px !important;
  text-align: center !important;
  padding: 0 20px 28px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .section-article .section-header--article,
  .article-page .section-header--article {
    padding: 0 40px 40px 40px !important;
  }
}

@media (min-width: 1024px) {
  .section-article .section-header--article,
  .article-page .section-header--article {
    padding: 0 40px 56px 40px !important;
  }
}

/* Title - White text on dark overlay */
.section-article .section-header--article h1,
.article-page .section-header--article h1 {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 4.5vw, 2.8rem) !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Article Meta - Author & Date - Light on dark */
.section-article .article__meta,
.article-page .article__meta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}

.section-article .article__meta small,
.article-page .article__meta small {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Add avatar style to author */
.section-article .article__meta small:first-child::before,
.article-page .article__meta small:first-child::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background: var(--color-moss, #c0dd90);
  border-radius: 50%;
  margin-right: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Separator between author and date */
.section-article .article__meta small:not(:last-child)::after,
.article-page .article__meta small:not(:last-child)::after {
  content: '•';
  margin-left: 16px;
  color: rgba(255, 255, 255, 0.6);
}

/* Article Content - Clean Typography */
.section-article .article__content.rte,
.article-page .article__content.rte {
  grid-row: 2 !important;
  grid-column: 1 !important;
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 40px 12px 0 12px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  color: #333 !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .section-article .article__content.rte,
  .article-page .article__content.rte {
    padding: 48px 20px 0 20px !important;
  }
}

@media (min-width: 1024px) {
  .section-article .article__content.rte,
  .article-page .article__content.rte {
    padding: 56px 0 0 0 !important;
  }
}

/* Content Headings */
.article-page .article__content.rte h2 {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  color: var(--color-night, #02192f) !important;
  margin-top: 48px !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--color-moss, #c0dd90) !important;
}

.article-page .article__content.rte h3 {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  color: var(--color-night, #02192f) !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
}

.article-page .article__content.rte h4 {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: var(--color-forrest, #005048) !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
}

/* Paragraphs */
.article-page .article__content.rte p {
  margin-bottom: 24px !important;
}

/* Links in Content */
.article-page .article__content.rte a {
  color: var(--color-forrest, #005048) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-moss, #c0dd90) !important;
  text-underline-offset: 3px !important;
  transition: all 0.2s ease !important;
}

.article-page .article__content.rte a:hover {
  color: var(--color-accent, #f44224) !important;
  text-decoration-color: var(--color-accent, #f44224) !important;
}

/* Product Button / CTA Button in Article Content */
.article-page .article__content.rte a.product-button,
.article-page .article__content.rte .product-button,
.article__content.rte a.product-button,
.article__content.rte .product-button {
  display: inline-block !important;
  background-color: var(--color-night, #02192f) !important;
  color: #ffffff !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 16px 32px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  margin: 32px 0 !important;
  box-shadow: 0 4px 15px rgba(2, 25, 47, 0.2) !important;
}

.article-page .article__content.rte a.product-button:hover,
.article-page .article__content.rte .product-button:hover,
.article__content.rte a.product-button:hover,
.article__content.rte .product-button:hover {
  background-color: var(--color-forrest, #005048) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(2, 25, 47, 0.3) !important;
}

/* Button Container centering */
.article-page .article__content.rte .button-container,
.article__content.rte .button-container {
  text-align: center !important;
  margin: 40px 0 !important;
}

/* Lists */
.article-page .article__content.rte ul,
.article-page .article__content.rte ol {
  margin: 24px 0 !important;
  padding-left: 24px !important;
}

.article-page .article__content.rte li {
  margin-bottom: 12px !important;
  padding-left: 8px !important;
}

.article-page .article__content.rte ul li::marker {
  color: var(--color-forrest, #005048) !important;
}

.article-page .article__content.rte ol li::marker {
  color: var(--color-forrest, #005048) !important;
  font-weight: 600 !important;
}

/* Blockquotes - Highlight Style */
.article-page .article__content.rte blockquote {
  margin: 40px 0 !important;
  padding: 24px 32px !important;
  background: linear-gradient(135deg, rgba(192, 221, 144, 0.15), rgba(0, 80, 72, 0.08)) !important;
  border-left: 4px solid var(--color-forrest, #005048) !important;
  border-radius: 0 12px 12px 0 !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  color: var(--color-night, #02192f) !important;
}

.article-page .article__content.rte blockquote p {
  margin-bottom: 0 !important;
}

/* Images in Content */
.article-page .article__content.rte img {
  border-radius: 12px !important;
  margin: 32px 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Tables */
.article-page .article__content.rte table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 32px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.article-page .article__content.rte th {
  background: var(--color-night, #02192f) !important;
  color: #fff !important;
  padding: 14px 16px !important;
  text-align: left !important;
  font-weight: 600 !important;
}

.article-page .article__content.rte td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #eee !important;
}

.article-page .article__content.rte tr:nth-child(even) {
  background: #f8f8f8 !important;
}

/* Code blocks */
.article-page .article__content.rte code {
  background: #f4f4f4 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  color: var(--color-forrest, #005048) !important;
}

.article-page .article__content.rte pre {
  background: var(--color-night, #02192f) !important;
  padding: 20px !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  margin: 32px 0 !important;
}

.article-page .article__content.rte pre code {
  background: transparent !important;
  color: #fff !important;
  padding: 0 !important;
}

/* Horizontal Rule */
.article-page .article__content.rte hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--color-moss, #c0dd90), transparent) !important;
  margin: 48px 0 !important;
}

/* Share Button Section */
.article-page .share-button {
  max-width: 720px !important;
  margin: 48px auto 0 auto !important;
  padding: 24px 20px !important;
  border-top: 1px solid #eee !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.article-page .share-button__text {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--color-night, #02192f) !important;
}

.article-page .share-button a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: #f4f4f4 !important;
  border-radius: 50% !important;
  color: var(--color-night, #02192f) !important;
  transition: all 0.3s ease !important;
}

.article-page .share-button a:hover {
  background: var(--color-forrest, #005048) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Tags Section */
.article-page .inline-list {
  max-width: 720px !important;
  margin: 32px auto !important;
  padding: 0 20px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
}

.article-page .inline-list li a {
  display: inline-block !important;
  padding: 8px 16px !important;
  background: #f4f4f4 !important;
  border-radius: 50px !important;
  font-size: 0.85rem !important;
  color: var(--color-night, #02192f) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.article-page .inline-list li a:hover {
  background: var(--color-forrest, #005048) !important;
  color: #fff !important;
}

/* Recommended Posts Section */
.section-recommended-posts {
  background: #f8f7f4 !important;
  margin-top: 60px !important;
}

.section-recommended-posts .section-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.section-recommended-posts .section-header__title {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  color: var(--color-night, #02192f) !important;
}

/* Blog Card Styling */
.section-recommended-posts .blog-post {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.section-recommended-posts .blog-post:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(0, 80, 72, 0.15) !important;
}

.section-recommended-posts .blog-post__image {
  border-radius: 0 !important;
}

.section-recommended-posts .blog-post__title {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: var(--color-night, #02192f) !important;
  transition: color 0.2s ease !important;
}

.section-recommended-posts .blog-post:hover .blog-post__title {
  color: var(--color-forrest, #005048) !important;
}

/* Comments Section */
.article-page #Comments {
  max-width: 720px !important;
  margin: 48px auto !important;
  padding: 0 20px !important;
}

.article-page .comment {
  background: #f8f7f4 !important;
  padding: 24px !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}

.article-page #AddCommentTitle {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  color: var(--color-night, #02192f) !important;
  margin-top: 48px !important;
  margin-bottom: 24px !important;
}

.article-page .comment__wrapper {
  display: grid !important;
  gap: 20px !important;
}

@media (min-width: 768px) {
  .article-page .comment__wrapper {
    grid-template-columns: 1fr 2fr !important;
  }
}

.article-page .comment__wrapper input,
.article-page .comment__wrapper textarea {
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-family: 'Work Sans', sans-serif !important;
  transition: border-color 0.2s ease !important;
}

.article-page .comment__wrapper input:focus,
.article-page .comment__wrapper textarea:focus {
  border-color: var(--color-forrest, #005048) !important;
  outline: none !important;
}

.article-page .post-comment {
  background: var(--color-forrest, #005048) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-top: 20px !important;
  transition: all 0.3s ease !important;
}

.article-page .post-comment:hover {
  background: var(--color-night, #02192f) !important;
  transform: translateY(-2px) !important;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .article-page .section-header--article h1 {
    font-size: 1.6rem !important;
  }

  .article-page .article__content.rte {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  .article-page .article__content.rte h2 {
    font-size: 1.35rem !important;
    margin-top: 36px !important;
  }

  .article-page .article__content.rte h3 {
    font-size: 1.15rem !important;
  }

  .article-page .article__content.rte blockquote {
    padding: 20px !important;
    margin: 28px 0 !important;
  }

  .article-page .article__meta small:first-child::before {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================
   END BLOG ARTICLE STYLING
   ========================================== */

/* ==========================================
   HEADER FIXES - LOGO & ICONS
   ========================================== */

/* Fix logo visibility: invert logo ONLY when transparent header overlaps a dark hero section */
/* Uses the theme's native .supports-transparent-header class on the first section */
body:has(.main-content > .supports-transparent-header:first-child) .site-header--transparent:not(.has-scrolled) .logo__image-link img,
body:has(.main-content > .supports-transparent-header:first-child) .site-header--transparent:not(.has-scrolled) .logo__image {
  filter: brightness(0) invert(1) !important;
  transition: filter 0.3s ease !important;
}

/* Revert logo to dark on hover (header gets white background) */
@media (hover: hover) {
  body:has(.main-content > .supports-transparent-header:first-child) .site-header--transparent:not(.has-scrolled):hover .logo__image-link img,
  body:has(.main-content > .supports-transparent-header:first-child) .site-header--transparent:not(.has-scrolled):hover .logo__image {
    filter: none !important;
  }
}

/* Revert logo to dark on scroll */
body:has(.main-content > .supports-transparent-header:first-child) .site-header--transparent.has-scrolled .logo__image-link img,
body:has(.main-content > .supports-transparent-header:first-child) .site-header--transparent.has-scrolled .logo__image {
  filter: none !important;
}

/* Header icons - add spacing from right edge */
.site-header .header__icons,
.site-header .header__icons--mobile,
.site-header .nav--icons,
.site-header .cart__toggle,
.site-header .header__icon {
  margin-right: 12px !important;
}

/* Wrapper for header to ensure proper padding */
.site-header .wrapper {
  padding-right: 20px !important;
}

@media (min-width: 1024px) {
  .site-header .wrapper {
    padding-right: 32px !important;
  }
}

/* ==========================================
   END HEADER FIXES
   ========================================== */

/* ==========================================
   PRODUKTIONSSEITE (/pages/produktion)
   CI Design — Hero, Buttons, Accordion, CTA
   Template: template--29889015152989 (LIVE)
   ========================================== */

/* -------------------------------------------
   1. HERO BANNER — About-Us Style
   Gradient overlay + fade-in animations
   ------------------------------------------- */

/* Better gradient overlay */
[id*="template--29889015152989__hero_banner"] .overlay {
  background: linear-gradient(
    to top,
    rgba(2, 25, 47, 0.75) 0%,
    rgba(2, 25, 47, 0.4) 50%,
    rgba(2, 25, 47, 0.2) 100%
  ) !important;
  opacity: 1 !important;
}

/* Subheading — Moss green accent */
[id*="template--29889015152989__hero_banner"] .banner-image__subheading {
  color: #c0dd90 !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  animation: prodFadeInUp 0.8s ease-out both !important;
  animation-delay: 0.2s !important;
}

/* Main heading */
[id*="template--29889015152989__hero_banner"] .banner-image__heading {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 20px !important;
  animation: prodFadeInUp 0.8s ease-out both !important;
  animation-delay: 0.5s !important;
}

/* Description text */
[id*="template--29889015152989__hero_banner"] .banner-image__text {
  max-width: 600px !important;
  margin: 0 auto 30px !important;
  opacity: 0.95 !important;
  line-height: 1.7 !important;
  animation: prodFadeInUp 0.8s ease-out both !important;
  animation-delay: 0.8s !important;
}

/* Hero button — Moss green, white hover */
[id*="template--29889015152989__hero_banner"] .banner-image__btn {
  background: #c0dd90 !important;
  border: none !important;
  color: #02192f !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 16px 36px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(192, 221, 144, 0.3) !important;
  animation: prodFadeInUp 0.8s ease-out both !important;
  animation-delay: 1.1s !important;
}

[id*="template--29889015152989__hero_banner"] .banner-image__btn::before,
[id*="template--29889015152989__hero_banner"] .banner-image__btn::after {
  content: none !important;
  display: none !important;
}

[id*="template--29889015152989__hero_banner"] .banner-image__btn hover-button {
  display: none !important;
}

[id*="template--29889015152989__hero_banner"] .banner-image__btn:hover {
  background: #ffffff !important;
  color: #02192f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
}

/* Fade-in keyframes */
@keyframes prodFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile hero */
@media screen and (max-width: 767px) {
  [id*="template--29889015152989__hero_banner"] .banner-image__text {
    padding: 0 15px !important;
  }
}

/* -------------------------------------------
   2. BUTTONS — Alternating hover effects
   Section buttons: Orange→Green & Green→Orange
   Disable theme hover-button system
   ------------------------------------------- */

/* All buttons on production page: disable theme hover system */
[id*="template--29889015152989"] .btn::before,
[id*="template--29889015152989"] .btn::after {
  content: none !important;
  display: none !important;
}

[id*="template--29889015152989"] .btn hover-button {
  display: none !important;
}

/* Material section button — Orange base → Moss hover */
[id*="template--29889015152989__materials_section"] .btn {
  background: #f44224 !important;
  border-color: #f44224 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

[id*="template--29889015152989__materials_section"] .btn:hover {
  background: #c0dd90 !important;
  border-color: #c0dd90 !important;
  color: #02192f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(192, 221, 144, 0.3) !important;
}

/* Location section button — Moss base → Orange hover */
[id*="template--29889015152989__location_section"] .btn {
  background: #c0dd90 !important;
  border-color: #c0dd90 !important;
  color: #02192f !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

[id*="template--29889015152989__location_section"] .btn:hover {
  background: #f44224 !important;
  border-color: #f44224 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(244, 66, 36, 0.3) !important;
}

/* Quality section button — Orange base → Moss hover */
[id*="template--29889015152989__quality_section"] .btn {
  background: #f44224 !important;
  border-color: #f44224 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
}

[id*="template--29889015152989__quality_section"] .btn:hover {
  background: #c0dd90 !important;
  border-color: #c0dd90 !important;
  color: #02192f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(192, 221, 144, 0.3) !important;
}

/* -------------------------------------------
   3. AKKORDEON — CI Card-Style (wie Homepage)
   Section: section_accordions_rNg8iW
   ------------------------------------------- */

/* Card items */
[id*="section_accordions_rNg8iW"] .accordion__item {
  background: #ffffff !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e8e8e8 !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

[id*="section_accordions_rNg8iW"] .accordion__item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
  border-color: #c0dd90 !important;
}

/* Card title/header */
[id*="section_accordions_rNg8iW"] .accordion__title {
  padding: 20px 24px !important;
  background: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #02192f !important;
  transition: all 0.3s ease !important;
}

[id*="section_accordions_rNg8iW"] .accordion__title:hover {
  background: #fafafa !important;
}

[id*="section_accordions_rNg8iW"] .accordion__title.is-expanded {
  background: #02192f !important;
  color: #ffffff !important;
  border-radius: 10px 10px 0 0 !important;
}

[id*="section_accordions_rNg8iW"] .accordion__item:has(.is-expanded) {
  border-radius: 12px !important;
}

/* Plus/minus icon */
[id*="section_accordions_rNg8iW"] .accordion__title .icon {
  color: #c0dd90 !important;
  stroke: #c0dd90 !important;
  transition: transform 0.3s ease !important;
}

[id*="section_accordions_rNg8iW"] .accordion__title.is-expanded .icon {
  color: #c0dd90 !important;
  stroke: #c0dd90 !important;
}

/* Expanded content */
[id*="section_accordions_rNg8iW"] .accordion__text-wrapper {
  background: #ffffff !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
}

[id*="section_accordions_rNg8iW"] .accordion__text {
  padding: 20px 24px !important;
  color: #333333 !important;
  line-height: 1.7 !important;
}

/* List styling */
[id*="section_accordions_rNg8iW"] .accordion__text ul {
  margin: 12px 0 !important;
  padding-left: 20px !important;
}

[id*="section_accordions_rNg8iW"] .accordion__text li {
  margin-bottom: 6px !important;
  color: #444444 !important;
}

/* Section heading */
[id*="section_accordions_rNg8iW"] .section__heading {
  color: #02192f !important;
  margin-bottom: 32px !important;
}

/* Remove default dividers */
[id*="section_accordions_rNg8iW"] .accordion__item--padded {
  border-bottom: none !important;
}

/* Two column layout */
[id*="section_accordions_rNg8iW"] .accordion__columns {
  gap: 24px !important;
}

[id*="section_accordions_rNg8iW"] .accordion__column {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

[id*="section_accordions_rNg8iW"] .accordion__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Mobile accordion */
@media screen and (max-width: 767px) {
  [id*="section_accordions_rNg8iW"] .accordion__title {
    padding: 16px 18px !important;
    font-size: 0.95rem !important;
  }

  [id*="section_accordions_rNg8iW"] .accordion__text {
    padding: 16px 18px !important;
  }

  [id*="section_accordions_rNg8iW"] .accordion__item {
    margin-bottom: 12px !important;
  }
}

/* -------------------------------------------
   4. CTA BANNER (unten) — Moss button, Orange hover
   ------------------------------------------- */

/* CTA button — Moss base → Orange hover */
[id*="template--29889015152989__cta_section"] .banner-image__btn {
  background: #c0dd90 !important;
  border: none !important;
  color: #02192f !important;
  font-weight: 600 !important;
  padding: 16px 36px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(192, 221, 144, 0.3) !important;
}

[id*="template--29889015152989__cta_section"] .banner-image__btn::before,
[id*="template--29889015152989__cta_section"] .banner-image__btn::after {
  content: none !important;
  display: none !important;
}

[id*="template--29889015152989__cta_section"] .banner-image__btn hover-button {
  display: none !important;
}

[id*="template--29889015152989__cta_section"] .banner-image__btn:hover {
  background: #f44224 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(244, 66, 36, 0.3) !important;
}

/* CTA banner overlay */
[id*="template--29889015152989__cta_section"] .overlay {
  background: linear-gradient(
    to top,
    rgba(2, 25, 47, 0.7) 0%,
    rgba(2, 25, 47, 0.35) 50%,
    rgba(2, 25, 47, 0.15) 100%
  ) !important;
  opacity: 1 !important;
}

/* -------------------------------------------
   5. VALUES / ICONS ROW — CI styling
   ------------------------------------------- */
[id*="template--29889015152989__values_section"] .icons-row-item__title {
  color: var(--color-night) !important;
  font-weight: 700 !important;
}

[id*="template--29889015152989__values_section"] .icons-row-item__icon {
  transition: transform 0.3s ease !important;
}

[id*="template--29889015152989__values_section"] .icons-row-item:hover .icons-row-item__icon {
  transform: scale(1.08) !important;
}

/* -------------------------------------------
   6. IMAGE WITH TEXT SECTIONS — Enhanced styling
   ------------------------------------------- */
[id*="template--29889015152989"] .image-with-text__image {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(2, 25, 47, 0.10) !important;
}

[id*="template--29889015152989"] .image-with-text__heading {
  color: var(--color-night) !important;
  font-weight: 800 !important;
}

[id*="template--29889015152989"] .image-with-text__text {
  color: #4a5568 !important;
  line-height: 1.7 !important;
}

[id*="template--29889015152989"] .image-with-text__text strong {
  color: var(--color-forrest) !important;
}

/* ==========================================
   END PRODUKTIONSSEITE
   ========================================== */
/* =============================================
   HOMEPAGE — "Mehr Infos" Button (Dein Auto wird zum Camper)
   Section: section_image_with_text_aareD9
   ============================================= */
[id*="section_image_with_text_aareD9"] .btn--secondary {
  background-color: #c0dd90 !important;
  border-color: #c0dd90#c0dd90 !important;
    color: #02192f !important;
}
[id*="section_image_with_text_aareD9"] hover-button {
  display: none !important;
}
[id*="section_image_with_text_aareD9"] .btn--secondary::before,
[id*="section_image_with_text_aareD9"] .btn--secondary::after {
  content: none !important;
}
[id*="section_image_with_text_aareD9"] .btn--secondary:hover {
  background-color: #f44224 !important;
  border-color: #f44224 !important;
  color: #ffffff !important;
}
Ändere zahlreiche 46 Die Farbe von