/* =============================================
   CSS Variables - Spartherm Design System
   ============================================= */

:root {
  /* -----------------------------------------
     Color System - Grautöne
     ----------------------------------------- */
  --color-white: #fff;
  --color-gray-100: #f2f2f2;    /* Light Grey */
  --color-gray-200: #e9e9e9;    /* Grey I - Grey Input/Forms selected */
  --color-gray-300: #d9d5d5;    /* Grey II - Button Light Mode Disabled */
  --color-gray-400: #8d8d8d;    /* Text Input/Forms not selected */
  --color-gray-500: #707070;    /* Description (Styleguide) */
  --color-gray-600: #606265;    /* Button Dark Mode Disabled */
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #151d21;    /* Blue Input/Forms Dark Mode */
  --color-black: #000;          /* Text primary - Text Input/Forms selected */

  /* -----------------------------------------
     Spartherm Markenfarben
     ----------------------------------------- */
  --color-copper: #c56b45;      /* => accent */
  --color-anthracite: #10171c;  /* => dark */
  --color-gold-brown: #b2744b;  /* => secondary */
  --color-premiumblue: #2a3a42; /* => primary */
  
  /* Light Greys (Aliase) */
  --color-light-grey: #f2f2f2;  /* => light (= gray-100) */
  --color-grey-1: #e9e9e9;      /* = gray-200 */
  --color-grey-2: #d9d5d5;      /* = gray-300 */

  /* -----------------------------------------
     Zusätzliche Farben
     ----------------------------------------- */
  --color-green: #97ad3b;
  --color-green-dark: #004127;
  
  /* Gold-Töne */
  --color-gold: #CEA939;
  --color-gold-1: #CEAA52;
  --color-gold-2: #673802;
  
  /* Platin-Töne */
  --color-platin: #908282;
  --color-platin-brown: #A58474;
  --color-platin-1: #D0BBB0;
  --color-platin-2: #685E63;
  
  /* Berry-Töne */
  --color-berry: #74626C;
  --color-berry-1: #56464C;
  --color-berry-2: #45383e;
  
  /* Dark Varianten */
  --color-dark-2: #2E2E2E;
  --color-darker: #191F20;
  
  /* Gradient-Farben (für Button-Effekte) */
  --color-gradient-new-accent: #AD5C3A;
  --color-gradient-dark-1: #632D17;
  --color-gradient-dark-2: #2a3a42;

  /* -----------------------------------------
     Dik Geurts Markenfarben
     ----------------------------------------- */
  --color-orange: #F89821;      /* Dik Geurts Oranje */
  --color-geurts-grey: #E3E3E3; /* Dik Geurts Lichtgrijs */

  /* -----------------------------------------
     Theme Colors (Semantische Farben)
     ----------------------------------------- */
  --color-accent: var(--color-copper);
  --color-primary: var(--color-premiumblue);
  --color-secondary: var(--color-gold-brown);
  --color-success: #00b06a;
  --color-info: var(--color-gold-brown);
  --color-warning: #ffb300;
  --color-danger: #C1181A;
  --color-light: var(--color-gray-100);
  --color-dark: var(--color-anthracite);

  /* -----------------------------------------
     Font Weights
     ----------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}/* Button Styles - Pure CSS */
/* =============================================
   WICHTIG: Diese Datei benötigt variables.css!
   Stelle sicher, dass variables.css VOR dieser 
   Datei geladen wird.
   ============================================= */

button:focus {
  outline: none !important;
}

.btn,
.cta-button,
.hs-button {
  position: relative;
  margin: 0 0 0.5em;
  padding: 0.625em 1.875em;
  display: inline-block;
  overflow: hidden;
  font-size: 1.125rem;
  font-family: 'MazzardMRegular', Arial, "Noto Sans", sans-serif;
  font-weight: var(--font-weight-normal);
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.0225rem;
  z-index: 1;
  min-height: unset;
}

@media (max-width: 991.98px) {
  .btn,
  .cta-button,
  .hs-button {
    padding: 0.5em 1.5em;
    font-size: 1rem;
  }
}

@media (max-width: 767.98px) {
  .btn,
  .cta-button,
  .hs-button {
    padding: 0.375em 1.25em;
    font-size: 0.875rem;
  }
}

.btn:disabled,
.btn.disabled,
.cta-button:disabled,
.cta-button.disabled,
.hs-button:disabled,
.hs-button.disabled {
  opacity: 1;
  cursor: initial;
}

.btn:focus,
.btn.focus,
.cta-button:focus,
.cta-button.focus,
.hs-button:focus,
.hs-button.focus {
  box-shadow: none;
  outline: none !important;
}

.btn:not(:disabled):not(.disabled).default-cursor,
.cta-button:not(:disabled):not(.disabled).default-cursor,
.hs-button:not(:disabled):not(.disabled).default-cursor {
  cursor: default;
}

.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.cta-button:not(:disabled):not(.disabled):active:focus,
.cta-button:not(:disabled):not(.disabled).active:focus,
.hs-button:not(:disabled):not(.disabled):active:focus,
.hs-button:not(:disabled):not(.disabled).active:focus {
  box-shadow: none;
}

.btn.input-btn {
  font-size: 1.125rem;
  padding: 0.625em 1.875em;
}

.btn.text-normal {
  text-transform: initial !important;
}

.btn-accent {
  background: var(--color-gold-brown);
  border-color: var(--color-gold-brown);
}

.btn-accent:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-black {
  background: var(--color-black);
}

.btn-black.disabled {
  background: var(--color-gray-600);
}

.btn-white {
  background: var(--color-white);
}

.btn.btn-back:hover > .fas:before,
.btn.btn-back:hover > .far:before,
.btn.btn-back:hover > .fal:before,
.btn.btn-back:hover > .fad:before,
.btn.btn-back:hover > .fab:before,
.btn.btn-back:focus > .fas:before,
.btn.btn-back:focus > .far:before,
.btn.btn-back:focus > .fal:before,
.btn.btn-back:focus > .fad:before,
.btn.btn-back:focus > .fab:before,
.btn.btn-prev:hover > .fas:before,
.btn.btn-prev:hover > .far:before,
.btn.btn-prev:hover > .fal:before,
.btn.btn-prev:hover > .fad:before,
.btn.btn-prev:hover > .fab:before,
.btn.btn-prev:focus > .fas:before,
.btn.btn-prev:focus > .far:before,
.btn.btn-prev:focus > .fal:before,
.btn.btn-prev:focus > .fad:before,
.btn.btn-prev:focus > .fab:before {
  margin-left: -5px;
}

.btn.btn-more:hover > .fas:before,
.btn.btn-more:hover > .far:before,
.btn.btn-more:hover > .fal:before,
.btn.btn-more:hover > .fad:before,
.btn.btn-more:hover > .fab:before,
.btn.btn-more:focus > .fas:before,
.btn.btn-more:focus > .far:before,
.btn.btn-more:focus > .fal:before,
.btn.btn-more:focus > .fad:before,
.btn.btn-more:focus > .fab:before,
.btn.btn-next:hover > .fas:before,
.btn.btn-next:hover > .far:before,
.btn.btn-next:hover > .fal:before,
.btn.btn-next:hover > .fad:before,
.btn.btn-next:hover > .fab:before,
.btn.btn-next:focus > .fas:before,
.btn.btn-next:focus > .far:before,
.btn.btn-next:focus > .fal:before,
.btn.btn-next:focus > .fad:before,
.btn.btn-next:focus > .fab:before {
  margin-right: -5px;
}

.btn > .fas,
.btn > .far,
.btn > .fal,
.btn > .fad,
.btn > .fab {
  display: inline-block;
  width: 1rem;
}

.btn > .fas:before,
.btn > .far:before,
.btn > .fal:before,
.btn > .fad:before,
.btn > .fab:before {
  transition: all 0.15s ease;
}

.btn.btn-icon-left > .fas,
.btn.btn-icon-left > .far,
.btn.btn-icon-left > .fal,
.btn.btn-icon-left > .fad,
.btn.btn-icon-left > .fab {
  margin-right: 1rem;
}

.btn.btn-icon-right > .fas,
.btn.btn-icon-right > .far,
.btn.btn-icon-right > .fal,
.btn.btn-icon-right > .fad,
.btn.btn-icon-right > .fab {
  margin-left: 1rem;
}

.btn.btn-icon-right-absolute > .fas,
.btn.btn-icon-right-absolute > .far,
.btn.btn-icon-right-absolute > .fal,
.btn.btn-icon-right-absolute > .fad,
.btn.btn-icon-right-absolute > .fab {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.btn.btn-icon-right-absolute:hover > .fas:before,
.btn.btn-icon-right-absolute:hover > .far:before,
.btn.btn-icon-right-absolute:hover > .fal:before,
.btn.btn-icon-right-absolute:hover > .fad:before,
.btn.btn-icon-right-absolute:hover > .fab:before,
.btn.btn-icon-right-absolute:focus > .fas:before,
.btn.btn-icon-right-absolute:focus > .far:before,
.btn.btn-icon-right-absolute:focus > .fal:before,
.btn.btn-icon-right-absolute:focus > .fad:before,
.btn.btn-icon-right-absolute:focus > .fab:before {
  margin-left: -5px;
}

/* Position Utilities */
.btn.pos--bottom-left {
  position: absolute;
  left: 50px;
  bottom: -30px;
  z-index: 9;
}

@media (max-width: 991.98px) {
  .btn.pos--bottom-left {
    left: 40px;
    bottom: -28px;
  }
}

@media (max-width: 767.98px) {
  .btn.pos--bottom-left {
    left: 30px;
    bottom: -22px;
  }
}

@media (max-width: 575.98px) {
  .btn.pos--bottom-left {
    left: 20px;
  }
}

.btn.pos--bottom-right {
  position: absolute;
  right: 50px;
  bottom: -30px;
  z-index: 9;
}

@media (max-width: 991.98px) {
  .btn.pos--bottom-right {
    right: 40px;
    bottom: -28px;
  }
}

@media (max-width: 767.98px) {
  .btn.pos--bottom-right {
    right: 30px;
    bottom: -22px;
  }
}

@media (max-width: 575.98px) {
  .btn.pos--bottom-right {
    right: 20px;
  }
}

.btn.pos--top-left {
  position: absolute;
  left: 50px;
  top: -30px;
  z-index: 9;
}

@media (max-width: 991.98px) {
  .btn.pos--top-left {
    left: 40px;
    top: -28px;
  }
}

@media (max-width: 767.98px) {
  .btn.pos--top-left {
    left: 30px;
    top: -22px;
  }
}

@media (max-width: 575.98px) {
  .btn.pos--top-left {
    left: 20px;
  }
}

.btn.pos--top-right {
  position: absolute;
  right: 50px;
  top: -30px;
  z-index: 9;
}

@media (max-width: 991.98px) {
  .btn.pos--top-right {
    right: 40px;
    top: -28px;
  }
}

@media (max-width: 767.98px) {
  .btn.pos--top-right {
    right: 30px;
    top: -22px;
  }
}

@media (max-width: 575.98px) {
  .btn.pos--top-right {
    right: 20px;
  }
}

/* Button Flat */
.btn-flat {
  color: var(--color-gradient-new-accent);
  background: linear-gradient(to right, var(--color-primary), var(--color-primary) 50%, var(--color-gradient-new-accent) 51%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.5s ease;
}

.dark .btn-flat {
  background: linear-gradient(to right, var(--color-white), var(--color-white) 50%, var(--color-gradient-new-accent) 51%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

.dark .btn-flat:hover > .fas:before,
.dark .btn-flat:hover > .far:before,
.dark .btn-flat:hover > .fal:before,
.dark .btn-flat:hover > .fad:before,
.dark .btn-flat:hover > .fab:before {
  background-color: var(--color-white);
}

.btn-flat.disabled {
  color: var(--color-gray-600);
  background: transparent;
  background-clip: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.dark .btn-flat.disabled {
  color: var(--color-gray-600);
}

.btn-flat.btn-left,
.btn-flat.btn-back,
.btn-flat.btn-prev,
.btn-flat.btn-icon-left {
  background-position: -100%;
}

.btn-flat:hover {
  background-position: 0 -100%;
}

.btn-flat:hover > .fas:before,
.btn-flat:hover > .far:before,
.btn-flat:hover > .fal:before,
.btn-flat:hover > .fad:before,
.btn-flat:hover > .fab:before {
  background-color: var(--color-primary);
}

.btn-flat > .fas:before,
.btn-flat > .far:before,
.btn-flat > .fal:before,
.btn-flat > .fad:before,
.btn-flat > .fab:before {
  background-color: var(--color-gradient-new-accent);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-flat.white {
  color: var(--color-gradient-new-accent);
  background: linear-gradient(to right, var(--color-primary), var(--color-primary) 50%, var(--color-white) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.5s ease;
}

.dark .btn-flat.white {
  background: linear-gradient(to right, var(--color-primary), var(--color-primary) 50%, var(--color-white) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

.btn-flat.white.btn-left,
.btn-flat.white.btn-back,
.btn-flat.white.btn-prev,
.btn-flat.white.btn-icon-left {
  background-position: -100%;
}

.btn-flat.white:hover {
  background-position: 0 -100%;
}

/* Button Contained */
.btn-contained,
.cta-button,
.hs-button {
  padding: 0.75em 1.5em!important;
  border: none!important;
  font-family: 'MazzardMMedium', Arial, "Noto Sans", sans-serif!important;
  font-weight: var(--font-weight-bold)!important;
  line-height: 1.375!important;
  color: var(--color-white)!important;
}

.btn-contained.input-btn {
  padding: 1em 2.5em;
}

@media (max-width: 991.98px) {
  .btn-contained, 
  .cta-button,
  .hs-button {
    padding: 0.75em 2em;
  }
}

@media (max-width: 767.98px) {
  .btn-contained,
  .cta-button,
  .hs-button {
    padding: 0.5em 1.5em;
  }
}

.dark .btn-contained:not(.light):after,
.dark .cta-button:not(.light):after,
.dark .hs-button:not(.light):after {
  background: var(--color-white) !important;
}

.dark .btn-contained:not(.light):hover,
.dark .cta-button:not(.light):hover,
.dark .hs-button:not(.light):hover {
  color: var(--color-black);
}

.btn-contained.btn-left:after,
.cta-button.btn-left:after,
.hs-button.btn-left:after,
.btn-contained.btn-back:after,
.btn-contained.btn-prev:after,
.cta-button.btn-prev:after,
.hs-button.btn-prev:after,
.btn-contained.btn-icon-left:after {
  transform: translateX(100%);
}

.btn-contained.btn-left:hover:before,
.hs-button.btn-left:hover:before,
.btn-contained.btn-back:hover:before,
.hs-button.btn-back:hover:before,
.btn-contained.btn-prev:hover:before,
.hs-button.btn-prev:hover:before,
.cta-button.btn-prev:hover:before,
.hs-button.btn-prev:hover:before,
.btn-contained.btn-icon-left:hover:before {
  transform: translateX(-100%);
}

.btn-contained.btn-left:hover:after,
.hs-button.btn-left:hover:after,
.btn-contained.btn-back:hover:after,
.hs-button.btn-back:hover:after,
.btn-contained.btn-prev:hover:after,
.cta-button.btn-prev:hover:after,
.hs-button.btn-prev:hover:after,
.btn-contained.btn-icon-left:hover:after {
  transform: translateX(0%);
}

.btn-contained.disabled {
  background-color: var(--color-gray-300);
}

.btn-contained.disabled:before,
.btn-contained.disabled:after,
.cta-button.disabled:before,
.cta-button.disabled:after,
.hs-button.disabled:before,
.hs-button.disabled:after {
  display: none;
}

.dark .btn-contained.disabled,
.dark .cta-button.disabled,
.dark .hs-button.disabled {
  color: var(--color-black);
  background-color: var(--color-gray-600);
}

.btn-contained:before,
.cta-button:before,
.hs-button:before {
  width: 100%;
  height: 100%;
  background: transparent linear-gradient(249deg, var(--color-gradient-dark-1) 0%, var(--color-gradient-new-accent) 100%) 0% 0% no-repeat padding-box !important;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s ease;
}

.btn-contained:after,
.cta-button:after,
.hs-button:after {
  width: 100%;
  height: 100%;
  background: transparent linear-gradient(70deg, var(--color-gradient-dark-2) 0%, var(--color-primary) 100%) 0% 0% no-repeat padding-box !important;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s ease;
  transform: translateX(-101%);
}

.btn-contained:hover,
.cta-button:hover,
.hs-button:hover {
  color: var(--color-white);
}

.btn-contained:hover:before,
.cta-button:hover:before,
.hs-button:hover:before {
  transform: translateX(100%);
}

.btn-contained:hover:after,
.cta-button:hover:after,
.hs-button:hover:after {
  transform: translateX(0%);
}

.btn-contained.dark:before,
.cta-button.dark:before,
.hs-button.dark:before {
  width: 100%;
  height: 100%;
  background: transparent linear-gradient(216deg, var(--color-gradient-dark-2) 0%, var(--color-primary) 100%) 0% 0% no-repeat padding-box !important;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s ease;
}

.btn-contained.dark:after,
.cta-button.dark:after,
.hs-button.dark:after {
  width: 100%;
  height: 100%;
  background: transparent linear-gradient(249deg, var(--color-gradient-dark-1) 0%, var(--color-gradient-new-accent) 100%) 0% 0% no-repeat padding-box !important;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s ease;
  transform: translateX(-101%);
}

.btn-contained.dark:hover,
.cta-button.dark:hover,
.hs-button.dark:hover {
  color: var(--color-white);
}

.btn-contained.dark:hover:before,
.cta-button.dark:hover:before,
.hs-button.dark:hover:before {
  transform: translateX(100%);
}

.btn-contained.dark:hover:after,
.cta-button.dark:hover:after,
.hs-button.dark:hover:after {
  transform: translateX(0%);
}

.golden .btn-contained:before,
.golden .cta-button:before,
.btn-contained.golden:before,
.cta-button.golden:before {
  background: transparent linear-gradient(81deg, var(--color-gold-2) 0%, var(--color-gold-1) 100%) 0% 0% no-repeat padding-box !important;
}

.dik-geurts .btn-contained,
.btn-contained.dik-geurts {
  color: var(--color-black);
}

.dik-geurts .btn-contained:before,
.btn-contained.dik-geurts:before {
  background: transparent linear-gradient(81deg, var(--color-orange) 0%, var(--color-orange) 100%) 0% 0% no-repeat padding-box !important;
}

.dik-geurts .btn-contained:after,
.btn-contained.dik-geurts:after {
  background: transparent linear-gradient(70deg, var(--color-geurts-grey) 0%, var(--color-geurts-grey) 100%) 0% 0% no-repeat padding-box !important;
}

.dik-geurts .btn-contained:hover,
.dik-geurts .btn-contained:focus,
.btn-contained.dik-geurts:hover,
.btn-contained.dik-geurts:focus {
  color: var(--color-black);
}

/* Button Outlined */
.btn-outlined {
  color: var(--color-gradient-new-accent);
  background: transparent;
  background: linear-gradient(to right, var(--color-primary), var(--color-primary) 50%, var(--color-gradient-new-accent) 51%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.5s ease;
}

.dark .btn-outlined {
  background: linear-gradient(to right, var(--color-white), var(--color-white) 50%, var(--color-gradient-new-accent) 51%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

.dark .btn-outlined:after {
  background: var(--color-white) !important;
  border-color: var(--color-white);
}

.dark .btn-outlined:hover > .fas:before,
.dark .btn-outlined:hover > .far:before,
.dark .btn-outlined:hover > .fal:before,
.dark .btn-outlined:hover > .fad:before,
.dark .btn-outlined:hover > .fab:before {
  background-color: var(--color-white);
}

.dark .btn-outlined > .fas:before,
.dark .btn-outlined > .far:before,
.dark .btn-outlined > .fal:before,
.dark .btn-outlined > .fad:before,
.dark .btn-outlined > .fab:before {
  background-color: var(--color-gradient-new-accent);
}

.btn-outlined.btn-sm:before,
.btn-outlined.btn-sm:after {
  border-width: 1px;
}

.btn-outlined.btn-left,
.btn-outlined.btn-back,
.btn-outlined.btn-prev,
.btn-outlined.btn-icon-left {
  background-position: -100%;
}

.btn-outlined.disabled {
  color: var(--color-gray-300);
  background: transparent;
  background-clip: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.btn-outlined.disabled:before {
  border-color: var(--color-gray-300);
}

.dark .btn-outlined.disabled {
  color: var(--color-gray-600);
}

.dark .btn-outlined.disabled:before {
  border-color: var(--color-gray-600);
}

.btn-outlined:hover,
.btn-outlined:focus {
  background-position: 0 -100%;
}

.btn-outlined:hover > .fas:before,
.btn-outlined:hover > .far:before,
.btn-outlined:hover > .fal:before,
.btn-outlined:hover > .fad:before,
.btn-outlined:hover > .fab:before,
.btn-outlined:focus > .fas:before,
.btn-outlined:focus > .far:before,
.btn-outlined:focus > .fal:before,
.btn-outlined:focus > .fad:before,
.btn-outlined:focus > .fab:before {
  background-color: var(--color-primary);
}

.btn-outlined:before {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-gradient-new-accent);
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s ease;
}

.btn-outlined > .fas:before,
.btn-outlined > .far:before,
.btn-outlined > .fal:before,
.btn-outlined > .fad:before,
.btn-outlined > .fab:before {
  background-color: var(--color-gradient-new-accent);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-outlined.black {
  background: linear-gradient(to right, var(--color-dark), var(--color-dark) 50%, var(--color-black) 51%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

.btn-outlined.black:before {
  border-color: var(--color-black);
}

.btn-outlined.black:hover,
.btn-outlined.black:focus {
  background-position: 0 -100%;
}

.btn-outlined.black:hover > .fas:before,
.btn-outlined.black:hover > .far:before,
.btn-outlined.black:hover > .fal:before,
.btn-outlined.black:hover > .fad:before,
.btn-outlined.black:hover > .fab:before,
.btn-outlined.black:focus > .fas:before,
.btn-outlined.black:focus > .far:before,
.btn-outlined.black:focus > .fal:before,
.btn-outlined.black:focus > .fad:before,
.btn-outlined.black:focus > .fab:before {
  background-color: var(--color-dark);
}

.btn-outlined.black > .fas:before,
.btn-outlined.black > .far:before,
.btn-outlined.black > .fal:before,
.btn-outlined.black > .fad:before,
.btn-outlined.black > .fab:before {
  background-color: var(--color-black);
}

.btn-outlined.white {
  background: linear-gradient(to right, var(--color-grey-1), var(--color-grey-1) 50%, var(--color-white) 51%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

.btn-outlined.white:before {
  border-color: var(--color-white);
}

.btn-outlined.white:hover,
.btn-outlined.white:focus {
  background-position: 0 -100%;
}

.btn-outlined.white:hover > .fas:before,
.btn-outlined.white:hover > .far:before,
.btn-outlined.white:hover > .fal:before,
.btn-outlined.white:hover > .fad:before,
.btn-outlined.white:hover > .fab:before,
.btn-outlined.white:focus > .fas:before,
.btn-outlined.white:focus > .far:before,
.btn-outlined.white:focus > .fal:before,
.btn-outlined.white:focus > .fad:before,
.btn-outlined.white:focus > .fab:before {
  background-color: var(--color-grey-1);
}

.btn-outlined.white > .fas:before,
.btn-outlined.white > .far:before,
.btn-outlined.white > .fal:before,
.btn-outlined.white > .fad:before,
.btn-outlined.white > .fab:before {
  background-color: var(--color-white);
}

.dik-geurts .btn-outlined:not(.white, .black, .dark) {
  color: var(--color-orange) !important;
  background: transparent !important;
  background: linear-gradient(to right, var(--color-primary), var(--color-primary) 50%, var(--color-orange) 51%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% 100% !important;
  background-position: 100% !important;
  transition: background-position 0.5s ease !important;
}

.dik-geurts .btn-outlined:not(.white, .black, .dark):before {
  border-color: var(--color-orange) !important;
}

.dik-geurts .btn-outlined:not(.white, .black, .dark).nav-link {
  border: 1px solid var(--color-orange) !important;
}

.dik-geurts .btn-outlined:not(.white, .black, .dark):hover,
.dik-geurts .btn-outlined:not(.white, .black, .dark):focus {
  background-position: 0 -100% !important;
}

.dik-geurts .btn-outlined:not(.white, .black, .dark).active {
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  -webkit-text-fill-color: unset !important;
}

.dik-geurts .btn-outlined.black {
  color: var(--color-geurts-grey);
  background: transparent;
  background: linear-gradient(to right, var(--color-geurts-grey), var(--color-geurts-grey) 50%, var(--color-black) 51%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.5s ease;
}

.dik-geurts .btn-outlined.black:hover,
.dik-geurts .btn-outlined.black:focus {
  background-position: 0 -100% !important;
}

.dik-geurts .dark .btn-outlined:not(.white, .black, .dark),
.dik-geurts .header__bar .btn-outlined:not(.white, .black, .dark) {
  background: transparent !important;
  background: linear-gradient(to right, var(--color-white), var(--color-white) 50%, var(--color-orange) 51%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 200% 100% !important;
  background-position: 100% !important;
}

.dik-geurts .dark .btn-outlined:not(.white, .black, .dark):hover,
.dik-geurts .dark .btn-outlined:not(.white, .black, .dark):focus,
.dik-geurts .header__bar .btn-outlined:not(.white, .black, .dark):hover,
.dik-geurts .header__bar .btn-outlined:not(.white, .black, .dark):focus {
  background-position: 0 -100% !important;
}

/* Button Link */
.btn-link:hover {
  background-position: 0 -100%;
  text-decoration: none;
}

/* Button Sizes */
.btn-lg {
  padding: 0.75em 1.75em;
  font-size: 1.25rem;
}

@media (max-width: 991.98px) {
  .btn-lg {
    padding: 0.625em 1.875em;
    font-size: 1rem;
  }
}

@media (max-width: 767.98px) {
  .btn-lg {
    padding: 0.5em 1.5em;
    font-size: 0.875rem;
  }
}

.btn-sm {
  padding: 0.25em 1.875em;
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .btn-sm {
    padding: 0.2em 1.725em;
    font-size: 0.875rem;
  }
}

@media (max-width: 767.98px) {
  .btn-sm {
    padding: 0.175em 1.5em;
    font-size: 0.75rem;
  }
}

/* Mode Toggle */
.mode-toggle.active > .fa-toggle-off:before {
  content: "\f205";
}

.fire-mode-toggle,
.btn-mode-toggle {
  transition: all 0.15s ease;
}

@media (min-width: 768px) {
  .fire-mode-toggle,
  .btn-mode-toggle {
    line-height: 1.4375;
  }
}

.fire-mode-toggle:hover,
.btn-mode-toggle:hover {
  border-color: var(--color-gradient-new-accent);
  background-color: var(--color-gradient-new-accent);
  color: var(--color-white);
}

.fire-mode-toggle.active,
.btn-mode-toggle.active {
  border-color: var(--color-black) !important;
  background-color: transparent !important;
  color: var(--color-black) !important;
}

.fire-mode-toggle.active > .fa-toggle-off:before,
.btn-mode-toggle.active > .fa-toggle-off:before {
  content: "\f205";
}

.fire-mode-toggle.active > .fa-fire:before,
.btn-mode-toggle.active > .fa-fire:before {
  font-weight: var(--font-weight-black);
}

.fire-mode-toggle.active > .fa-cube:before,
.btn-mode-toggle.active > .fa-cube:before {
  font-weight: var(--font-weight-black);
}

.golden .fire-mode-toggle:hover,
.golden .btn-mode-toggle:hover {
  border-color: var(--color-gold-1);
  background-color: var(--color-gold-1);
  color: var(--color-white);
}

.platin .fire-mode-toggle:hover,
.platin .btn-mode-toggle:hover {
  border-color: var(--color-platin);
  background-color: var(--color-platin);
  color: var(--color-white);
}/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

a {
  color: #b2744b;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #b2744b;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 900;
  font-size: 2.25em;
}

h3 {
  font-weight: 700;
}

h4 {
  font-weight: 500;
  font-size: 1em;
}


/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* =============================================
   Blog Card Styles - Spartherm Design
   ============================================= */

.header {
  &__menu-link--active-link,
  &__menu-submenu .header__menu-link--active-link {
    color: #fff!important;
    
    &:hover {
      color: var(--primary)!important;
    }
  }
  &__menu-submenu {
    background-color: var(--color-primary);
    border-top: unset;
    border-radius: 0;
  }
  &__menu-item {
    background-color: var(--color-primary);
    color: #fff!important;

    &:hover {
      color: var(--primary)!important;
    }
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .container {
      max-width: 1140px;
  }
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.blog-card {
  box-shadow: 0px 5px 15px 1px rgba(0,0,0,0.37);
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card.inactive {
  display: none;
}

.blog-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card__link:hover {
  text-decoration: none;
  color: inherit;
}

/* Image Container */
.blog-card__image-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-gray-100);
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__image {
  transform: scale(1.05);
}

/* Placeholder für Bild wenn keins vorhanden */
.blog-card__image--placeholder {
  background: 
    linear-gradient(45deg, var(--color-gray-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-gray-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-gray-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-gray-200) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: var(--color-gray-100);
}

/* Tag Badge */
.blog-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--color-anthracite);
  color: var(--color-white);
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  border-radius: 0;
  border: unset;
  text-transform: none;
  letter-spacing: 0;
}

/* Content Area */
.blog-card__content {
  padding: 1.25rem 0;
}

.blog-card__date {
  display: block;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-normal);
}

.blog-card__title {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  margin: 0 0 0.75rem 0;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

.blog-card:hover .blog-card__title {
  color: var(--color-primary);
}

.blog-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-500);
  margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .blog-card-grid {
    gap: 1.5rem;
  }
  
  .blog-card__title {
    font-size: 1rem;
  }
  
  .blog-card__excerpt {
    font-size: 0.875rem;
  }
}

/* =============================================
   Blog Card Spartherm Design
   ============================================= */

.blog-card__content {
  padding: 1.25rem 0.75rem;
}

/* Grid Column Variants */
.blog-card-grid--cols-1 {
  grid-template-columns: 1fr;
}

.blog-card-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.blog-card-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.blog-card-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
  .blog-card-grid--cols-3,
  .blog-card-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .blog-card-grid--cols-2,
  .blog-card-grid--cols-3,
  .blog-card-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}

.blog-listing__heading {
  margin-bottom: 2rem;
  font-size: 1.75rem;
  font-weight: 700;
}

/* Mehr anzeigen Button */
.blog-listing__more-wrapper {
  display: flex;
  justify-content: start;
  margin-top: 2.5rem;
}

.blog-listing__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background-color: transparent;
  color: var(--color-black, #000);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-gray-300, #d9d5d5);
  border-radius: 0;
  transition: all 0.3s ease;
}

.blog-listing__more-btn:hover {
  background-color: var(--color-primary, #2a3a42);
  border-color: var(--color-primary, #2a3a42);
  color: var(--color-white, #fff);
  text-decoration: none;
}

.blog-listing__more-icon {
  transition: transform 0.3s ease;
}

.blog-listing__more-btn:hover .blog-listing__more-icon {
  transform: translateX(4px);
}

form {
  input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
    border-radius: 0 !important;
    border-color: black;
    padding: 10px 12px;
    min-height: unset;
  }
  select {
    min-height: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.91984 -3.02483e-07L6.91984 -3.89906e-07L6.91984 12L1.41984 6.5L-0.000156749 7.92L7.91984 15.84L15.8398 7.92L14.4198 6.5L8.91984 12L8.91984 -3.02483e-07Z' fill='black'/%3E%3C/svg%3E");
  }

.sr-footer.spartherm.sr-footer-04 {
  padding-left: 15px;
  padding-right: 15px;
}