/*
 Theme Name: Heiser WebTec – METALLORUM
 Theme URI: https://heiser-webtec.de/
 Author: Heiser WebTec
 Author URI: https://heiser-webtec.de/
 Description: 
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: hwt-metallorum-theme
*/
/* =========================================================
   Layout Grid System (Designer Raster)
   Basis: 16px rem
   Content Font: 17px
   Grid: 12 columns à 142px, gap 20px
   Outer padding: 78px left/right
   Total width incl. padding: 2080px
   ========================================================= */

/* ---------- Base typography ---------- */

html{
  font-size: clamp(10px, 0.77vw, 16px);
 
}

@media (max-width: 1400px) { 
  html{
  font-size: 14px;
 }
 .col-md-5{ grid-column: span 5 !important; }
 .hwt-hero__bg {
  background-size: cover !important;
 }
 
 .hwt-hero__bg {
    background-image: var(--bg-mobile) !important;
  }



.hwt-hero .layout-container:not(.ab-layout) {
  width: 50%;
  margin: 0;
}


.hwt-hero .layout-container:not(.ab-layout) br {
  display: none;
}


}

h1 {
  color: #95886B !important;
  font-size: 2.813rem !important;
  font-family: 'SpecialGothic SemiExpanded' !important;
    font-weight: 500 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 6.875rem !important;
}
.hwt-breadcrumb {
  font-size: 0.875rem !important;
  color: var(--color-0F121A) !important;
}
.hwt-breadcrumb a {
  color: var(--color-0F121A) !important;
}
.hwt-breadcrumb {
  opacity: 0.4;
}
.hwt-breadcrumb a:hover {
  opacity: 1;
}
@media (min-width: 700px) and (max-width: 1400px) {

.two-mobile {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

}
.two-mobile > .e-con {
  width: 100% !important;
}
  .hwt-hero .hwt-hero__overlay .layout-container {
    width: 50% !important;
    margin: 0;
  }


  .hwt-hero .hwt-hero__overlay .layout-container br {
    display: none;
  }
 

}
@media (max-width: 700px) { 

  .elementor-element {
    animation-delay: 0s !important;
    transition-delay: 0s !important;

    animation-duration: 0.4s !important;
    transition-duration: 0.4s !important;
  }

  .sub-footer {
    position: relative;
  }
  
/* linkes Overlay */
.sub-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(
    to right,
    #242833 0%,
    rgba(36, 40, 51, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
}
.sub-footer .widget_text {
  position: relative;
  z-index: 3;
}
/* rechtes Overlay */
.sub-footer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(
    to left,
    #242833 0%,
    rgba(36, 40, 51, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
}

  body .smaller-content-know h4 {
  margin-top: 0rem !important;

}
 .elementor-widget-image img{
  width: 100% !important;
 }
 body.menu-down {
  background-color: var(--color-393E4D) !important;
}
 .hwt-nls-form input {
  width: 100% !important;
 }
 .hwt-nls-form button {
  margin-left: 0 !important;
  margin-top: 1rem ;
  width: 100% !important;
 }
 #menu-main-mobile li {
  margin-bottom: 1rem !important;
 }
 .mobilenavi-toggle {
  width: 100VW;
  height: 100%;
  
 }
 #menu-main-mobile li {
  font-size: 1.2rem !important;
 }
 #menu-main-mobile>li> a, .parent-link>a {
  font-size: 1.5rem !important; 
 }
 .header-legal {
  bottom: 7rem !important;
 }
  body  #menu-main-mobile li .parent-link {
  margin-bottom: 2rem !important;
 }
 #menu-overlay {
      transition: opacity 0.2s ease !important;
      
background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important; /* Safari */
  
inset: 0;
  z-index: 50;

  

 }

 #menu-overlay.isVisibleOverlay{
   opacity: 1 !important;
 }
}

body {
  font-size: 1.0625rem; /* 17px */
  margin: 0;
  padding: 0;
  font-family: 'FontC';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  color: var(--color-2D313C);
  line-height: 1.563em;
}
body .elementor-button {
  font-size: 0.938rem !important;
      padding: 0.75rem 1.5rem !important;
}
/* ---------- Design tokens (rem based on 16px) ---------- */
:root{
  /* Desktop (fixed grid) */
  --layout-max: 130rem;        /* 2080px */
  --layout-pad: 4.875rem;      /* 78px */
  --grid-cols: 12;
  --grid-col: 8.875rem;        /* 142px */
  --grid-gap: 1.25rem;         /* 20px */

  /* Optional vertical rhythm / spacing helpers */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;

   /* Schriftfarbe / Header Hintergrund */
  --color-2D313C: #2D313C;

  /* Footer Hintergrund */
  --color-474D59: #474D59;

  /* Subfooter Hintergrund */
  --color-242833: #242833;

  /* Helle Boxen */
  --color-F7F7F5: #F7F7F5;

  /* Beige Box Hintergrund */
  --color-CCBC99: #CCBC99;

  /* Akzent / Überschriften / Linien */
  --color-95886B: #95886B;

  /* Schriftfarbe Header */
  --color-FFFBF2: #FFFBF2;

  /* Schriftarbe z.b. Telefonnummer oben */
  --color-F2FCFF: #F2FCFF;
  
  /* Footer Links */
  --color-D9BA77: #D9BA77;

  /* Subnavi */
  --color-393E4D: #393E4D;

  /* h4 */
  --color-1A2233: #1A2233;
  
  /* Rahmen */
  --color-BB9974: #BB9974;

  /* Footer Shop hover */
  --color-292E38: #292E38;

}

/* =========================================================
   Core container
   ========================================================= */
.layout-container{
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-pad);
  padding-right: var(--layout-pad);
  box-sizing: border-box;
}

.full-bleed{
  width: 100%;
}


.grid-12{
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), var(--grid-col));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
  align-items: start;
}


.grid-align-center{ align-items: center; }
.grid-justify-center{ justify-items: center; }
.grid-justify-end{ justify-items: end; }


.col-1{ grid-column: span 1; }
.col-2{ grid-column: span 2; }
.col-3{ grid-column: span 3; }
.col-4{ grid-column: span 4; }
.col-5{ grid-column: span 5; }
.col-6{ grid-column: span 6; }
.col-7{ grid-column: span 7; }
.col-8{ grid-column: span 8; }
.col-9{ grid-column: span 9; }
.col-10{ grid-column: span 10; }
.col-11{ grid-column: span 11; }
.col-12{ grid-column: span 12; }



.start-1{ grid-column-start: 1; }
.start-2{ grid-column-start: 2; }
.start-3{ grid-column-start: 3; }
.start-4{ grid-column-start: 4; }
.start-5{ grid-column-start: 5; }
.start-6{ grid-column-start: 6; }
.start-7{ grid-column-start: 7; }
.start-8{ grid-column-start: 8; }
.start-9{ grid-column-start: 9; }
.start-10{ grid-column-start: 10; }
.start-11{ grid-column-start: 11; }
.start-12{ grid-column-start: 12; }


.end-2{ grid-column-end: 2; }
.end-3{ grid-column-end: 3; }
.end-4{ grid-column-end: 4; }
.end-5{ grid-column-end: 5; }
.end-6{ grid-column-end: 6; }
.end-7{ grid-column-end: 7; }
.end-8{ grid-column-end: 8; }
.end-9{ grid-column-end: 9; }
.end-10{ grid-column-end: 10; }
.end-11{ grid-column-end: 11; }
.end-12{ grid-column-end: 12; }
.end-13{ grid-column-end: 13; } 


.place-1-13{ grid-column: 1 / 13; }
.place-1-7{ grid-column: 1 / 7; }
.place-7-13{ grid-column: 7 / 13; }
.place-1-5{ grid-column: 1 / 5; }
.place-5-13{ grid-column: 5 / 13; }
.place-1-4{ grid-column: 1 / 4; }
.place-4-13{ grid-column: 4 / 13; }


.align-left {
  justify-self: start;
  text-align: left;
}

.align-center {
  justify-self: center;
  text-align: center;
}

.align-right {
  justify-self: end;
  text-align: right;
}



@media (max-width: 130rem){ /* 2080px */
  .grid-12{
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  }
}

/* Large desktop / laptop */
@media (max-width: 90rem){ /* 1440px */
  :root{
    --layout-pad: 2.5rem;  /* 40px */
    --grid-gap: 1rem;      /* 16px */
  }
}

/* Tablet */
@media (max-width: 64rem){ /* 1024px */
  :root{
    --layout-pad: 1.5rem; /* 24px */
    --grid-gap: 0.875rem; /* 14px */
  }
}

/* Mobile */
@media (max-width: 40rem){ /* 640px */
  :root{
    --layout-pad: 1rem;   /* 16px */
    --grid-gap: 0.75rem;  /* 12px */
  }


  .mobile-full{ grid-column: 1 / -1 !important; }
}


@media (max-width: 1400px) {
  .grid-12.stack-xl {
    grid-template-columns: 1fr; 
  }

}



.debug-grid .layout-container{
  position: relative;
}

.debug-grid .layout-container::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;


  left: var(--layout-pad);
  right: var(--layout-pad);

  pointer-events: none;
  opacity: 0.12;


  background-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0,
    rgba(0,0,0,1) var(--grid-col),
    transparent var(--grid-col),
    transparent calc(var(--grid-col) + var(--grid-gap))
  );

  background-size: calc(var(--grid-col) + var(--grid-gap)) 100%;
  background-repeat: repeat;
}


@media (max-width: 130rem){ /* 2080px */
  .debug-grid .layout-container::before{
    background-image: repeating-linear-gradient(
      to right,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc((100% - (var(--grid-gap) * (var(--grid-cols) - 1))) / var(--grid-cols)),
      transparent calc((100% - (var(--grid-gap) * (var(--grid-cols) - 1))) / var(--grid-cols)),
      transparent calc(((100% - (var(--grid-gap) * (var(--grid-cols) - 1))) / var(--grid-cols)) + var(--grid-gap))
    );
    background-size: auto;
  }
}
a {
    text-decoration: none;;
}
.site-header {
    color: var(--color-FFFBF2);
    background-color: var(--color-2D313C);
    padding: 2.4375rem 0;
}
.site-header a, .mobilenavi-toggle a{
    color: var(--color-FFFBF2);
}
.header-contact {
    color: var(--color-F2FCFF);
    font-family: 'SpecialGothic SemiExpanded';
    font-weight: 500;
    font-size:  0.9375rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.header-contact:hover {
  opacity: 1 !important;
}
#menu-oben-rechts , #menu-haupt-navigation {
  padding-top: 3rem;
}
#menu-haupt-navigation {
  gap: 2.5rem;
}
#menu-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  width: 100vW;
  height: 100vH;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
#menu-overlay.isVisibleOverlay{
   opacity: 0.3;
  visibility: visible;
}


.header-custom-link {
    opacity: 0.6;
}
.menu {
    font-family: 'SpecialGothic SemiExpanded Navi';
    font-weight: 400;
    font-size:  1rem;
}
.site-branding{
  display: flex;
  justify-content: center;
  align-items: center;
}
.site-branding img, .footer-brand img{
  width: 13.125rem;
  height: auto;
}
#menu-unten-rechts {
    font-size: 0.9375rem;
}
#menu-rechtliches, .footer-text, #menu-rechtliches-1 {
    padding-top: 3rem;
}
.header-top-right a {
  font-size: 0.9375rem;
  font-family: 'SpecialGothic SemiExpanded';
    font-weight: 500;
    transition: opacity 0.3s ease;
}
.header-top-right a:hover {
  opacity: 1 !important;
}
.site-footer {
    background-color: var(--color-474D59);
    color: var(--color-FFFBF2);
    padding: 2.875rem 0;
}
.site-footer a:not(.custom-logo-link) {
    color: var(--color-FFFBF2);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.site-footer a:not(.custom-logo-link):hover {
  opacity: 1;
}
.sub-footer {
    background-color: var(--color-242833);
    padding: 3rem 0;
    font-family: 'FontC';
    border-top: 1px solid var(--color-95886B);
    border-bottom: 13px solid var(--color-95886B);
}
.footer-icons-widget {
    font-size: 0.625rem;
    color: #FFF;
    margin: 0 auto;
}
.footer-icons-widget a {
    color: var(--color-D9BA77);
    text-decoration: underline;
}
.footer-icons-widget .wp-block-gallery{
  justify-content: center;
    gap: 2.3125rem !important;
    margin-top: 3.875rem;
}
.footer-icons-widget .wp-block-gallery img {
   max-width: 60%;
   height: auto !important;
   width: auto !important;

}
/* =========================================================
   Footer Navigation: 1. Ebene nebeneinander, Subitems darunter
   Ziel: wie Screenshot (Spalten)
   ========================================================= */
.footer-navigation {
    margin-bottom: 4.0625rem;
}
.footer-navigation > ul,
.footer-navigation > div > ul {
  display: flex;
  flex-wrap: wrap;         
  align-items: flex-start;
}


.footer-navigation > ul > li,
.footer-navigation > div > ul > li {
  display: block;
  margin-right: 1.3125rem;

}
.footer-navigation > ul > li > a {
    opacity: 1 !important;
    position: relative;
}
@media (min-width: 1400px) {
  .footer-navigation > ul > li > a:after {
    content:'';
    display: block;
    height: 1px;
    width: 100%;
    background-color: #FFF;
    position: absolute;
    bottom: -0.5rem;
    left: 0;
  }
  .mobilenavi-toggle {
    display: none;
  }
  .mobileview {
    display: none !important;
  }

  .footer-copy-2 {
    display: none;
  }
  .footer-mobile-top {
    display: none;
    
  }
}
.footer-text {
    opacity: 0.6;
}

/* Submenu unter dem jeweiligen Hauptpunkt */
.footer-navigation ul.sub-menu {
  display: block;
  margin: 0;
  padding: 0;
  margin-top: 3rem;
}
.footer-navigation ul.sub-menu  li:first-child {
    margin-top: 0;
}
.footer-navigation ul.sub-menu  li {
    margin-top: 1.25rem;
}


/* Listen-Defaults entfernen */
.footer-navigation ul,
.footer-navigation li {
  list-style: none;
  margin: 0;
  padding: 0;
  

}


.footer-navigation a {
  display: inline-block;
  text-decoration: none;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2.1875rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


/* 1. Ebene */
.menu > li {
  display: block;
}

/* Unterpunkte */
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* Links */
.menu a {
  text-decoration: none;
  display: inline-block;
}
.footer-text {
    font-weight: 400;
}

.site-header.is-scrolled #menu-haupt-navigation > li > .sub-navi-container-outer {
  top: 5.7rem;
  padding-top:3rem;
}
.site-header.is-scrolled  .sub-navi-container-outer {
  top:5.6rem;
  padding-top: 2rem;
}


#menu-haupt-navigation > li > .sub-navi-container-outer {
  top: 9.6rem;
  padding-top:3rem;
}
.sub-navi-container-outer {
  position: absolute;
  top:5.6rem;
  left: 0;
  width: 100%;
  padding-top: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sub-navi-container {
  
  width: 100%;
  padding: 1.5rem 0;
  background-color: var(--color-393E4D);
}
.sub-navi-container  .sub-navi-container{
  padding: 0.8125rem 0;
  background-color: var(--color-2D313C);
}
#menu-haupt-navigation  li:hover > .sub-navi-container-outer{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
#menu-haupt-navigation  a {
  position: relative;
  text-decoration: none;
  
}

#menu-haupt-navigation  a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.3125rem;             
  width: 100%;              
  height: 1px;               
  background-color: #FFF;
  
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

#menu-haupt-navigation li:hover > a::after {
  transform: translateX(-50%) scaleX(1);
}


#menu-haupt-navigation .sub-menu {
   
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.site-header {
  transition: all 0.3s ease;
}
.site-header img {
  transition: all 0.3s ease;
}
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.site-header.is-scrolled{
  position: fixed;
  top: -1.25rem;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 1.4375rem 0;
  box-shadow: 0px 0px 15px #13151A80;
}
 .header-top  {
  transition: opacity 0.3s ease;
 }
.site-header.is-scrolled .header-top {
  opacity: 0;
}
.site-header.is-scrolled .site-branding img {
  width: 8.75rem; 
}

.site-header.is-scrolled #menu-oben-rechts, .site-header.is-scrolled  #menu-haupt-navigation {
  padding-top: 0rem;
}

h3 {
  font-size: 1.875rem !important;
  margin: 1.5rem 0 !important;
  font-family: 'SpecialGothic SemiExpanded';
  font-weight: 500;
  color: var(--color-1A2233) !important;
  line-height: 1.4em !important;
}
h5 {
  font-size: 1.875rem !important;
  margin: 1.5rem 0 !important;
  font-family: 'SpecialGothic SemiExpanded';
  font-weight: 400;
  color: var(--color-1A2233) !important;
  line-height: 1.4em !important;
  margin-top: -1.5rem !important;
}
h2 {
  font-size: 2.313rem !important;
  margin-top: 0;
  line-height: 3.563rem !important;
  font-family: 'SpecialGothic SemiExpanded';
  font-weight: 400;
 
}
.light-head h3 {
  color: var(--color-E6EBF2) !important;
}
h4 {
  font-family: 'SpecialGothic' !important;
  font-weight: 500 !important;
  color: var(--color-1A2233) !important;
  font-size: 1.375rem !important;
  margin: 1.25rem 0 !important;
}

.elementor-button-info a, .hwt-hero__overlay a, .hwt-bt__link {
  background: none !important;
  color: var(--color-1A2233) !important;
  opacity: 0.6;
  position: relative;
  transition: opacity 0.3s ease;
  padding-left: 0 !important;
}
.hwt-hero__overlay a {
  background: none !important;
  color: var(--color-FFFBF2) !important;
  opacity: 0.6;
  position: relative;
  transition: opacity 0.3s ease;
  padding-left: 0 !important;
  padding: 12px 24px;
}
.elementor-button-info:not(.back-to-overview) a:after, .hwt-hero__overlay a:after, .hwt-bt__link::after {
  content: '\276F';

  position: absolute;
  display: block;
  left: 90%;
  top: 50%;
  transform: translate(0%,-47%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.back-to-overview.elementor-button-info a{
  padding-left: 1rem !important;
}
.back-to-overview.elementor-button-info a:before {
    content: '\276E';

  position: absolute;
  display: block;
  left: 00%;
  top: 50%;
  transform: translate(0%,-47%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.back-to-overview.elementor-button-info a:hover:before {
   transform: translate(-50%,-47%) !important;
}
.extern.elementor-button-info a::after,.extern-small.elementor-button-success a::after,
.extern.hwt-hero__overlay a::after, .hwt-emessen__link::after {
  content: '';
  width: 1rem;
  height: 1rem;

  background-image: url('assets/images/Metallorum-Icon-neuer-Tab.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

}

body .elementor-element .extern-small.elementor-button-success a, .hwt-emessen__link {
  background-color: rgba(204, 188, 153, 0.5) !important;
  color: #0F121A !important;
  font-weight: 400 !important;
  padding-right: 3rem !important;
  position: relative;
}
body .elementor-element .extern-small.elementor-button-success a:hover {
  background-color: #CCBC99 !important;
}
/* Kalender-Link Button */

.hwt-emessen__calendar-link {
  appearance: none;
  background: none;
  border: 0;
  padding-right: 2.5rem;
  margin: 0;

  color: #2D313C;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  line-height: 1.4;

  position: relative;
}
.same-size  .elementor-element .elementor-button-success a {
  width: 12rem;
}
/* Icon links */
.hwt-emessen__calendar-link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;

  width: 2rem;
  height: 2rem;
  transform: translate(0,-50%);

  background-image: url("assets/images/Metallorum-Icon-Kalender.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


.hwt-emessen__calendar-link:hover,
.hwt-emessen__calendar-link:focus {
  text-decoration: underline;
  color: #2D313C;
}



.extern-small.elementor-button-success a::after {
  position: absolute;
  display: block;
  left: 81%;
  top: 50%;
  transform: translate(0%,-47%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
 .hwt-emessen__link::after {
  position: absolute;
  display: block;
  left: 88%;
  top: 50%;
  transform: translate(0%,-47%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
 .hwt-emessen__link {
transition: background-color 0.3s ease, transform 0.3s ease;
 }
 .hwt-emessen__link:hover {
  opacity: 1 !important;
  background-color: rgba(204, 188, 153, 1) !important;
 }

.elementor-button-info a:hover {
  opacity: 1;
}
.elementor-button-info:not(.extern):not(.extern-small) a:hover:after, .hwt-hero__overlay a:hover:after {
  transform: translate(130%,-47%) !important;

}
.extern-small.elementor-button-success, .hwt-emessen__link {
  position: relative;
}
.hwt-nls-form {
  margin-top: 1rem;
}
.hwt-nls-form button {
  background: none !important;
  position: relative;
   padding: 12px 24px !important; 
  padding-right: 2.6rem !important;
 
}
.hwt-nls-form input {
   padding: 12px 24px !important; 
 
}
.elementor-widget-button:not(.elementor-button-info) a, .hwt-nls-form button, .hwt-nls-form input{
  
  background-color: var(--color-F7F7F5) !important;
  color: var(--color-2D313C) !important;
  border: 1px solid var(--color-BB9974) !important;
  font-family: 'SpecialGothic SemiExpanded';
  font-weight: 500;
  border-radius: 0 !important;
  cursor: pointer;

  text-shadow: none !important;
}
.button-all a{
padding-right: 2.6rem !important
}   ;
.hwt-nls-form button {
  position: relative;
}
.elementor-button {
  text-shadow: none !important;
}

.elementor-widget-button:not(.elementor-button-info):not(.elementor-button-success):not(.to-shop)  a:after, .hwt-nls-form button:after{
  content: '\276F';

  position: absolute;
  display: block;
  left: 82%;
  top: 50%;
  transform: translate(0%,-48%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.to-shop a {
  background-image: url(assets/images/Einkaufstasche_blau.svg);
  background-repeat: no-repeat;
  background-position: 93% 50%;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  background-size: 0.8em;
  transition: background-color 0.3s ease !important;
}
#menu-unten-rechts li:last-child a, #menu-oben-rechts li:last-child a, #menu-oben-rechts-1  li:last-child a,#menu-top-right-2 li:last-child a {
  background-image: url(assets/images/Einkaufstasche.svg);
  background-color: var(--color-292E38);
  border: 1px solid var(--color-BB9974);
  background-repeat: no-repeat;
  background-position: 93% 50%;
  padding:  0.5375rem 0.9375rem;
  padding-right: 2rem;
  background-size: 0.8em auto !important;
  opacity: 1;
  transition: background-color 0.3s ease;
   font-family: 'SpecialGothic SemiExpanded';
  font-weight: 400;
}
.hwt-nls-form button {
  transition: all 0.3s ease;
  padding:  0.5375rem 1.9375rem;
  margin-left: 1rem;
}
.hwt-nls-form input {
  padding:  0.5375rem;
  cursor: auto !important;
  width: 24.5rem;
}
#menu-unten-rechts li:last-child a:hover, #menu-oben-rechts li:last-child a:hover,  #menu-oben-rechts-1 li:last-child a:hover,#menu-top-right-2 li:last-child a:hover{
  color: var(--color-2D313C);
  background-color: var(--color-FFFBF2);
  background-image: url(assets/images/Einkaufstasche_blau.svg);
}
.to-shop a .elementor-button-text {
  margin-left: -1rem;
}
.to-shop a:hover {
  background-image: url(assets/images/Einkaufstasche.svg);
}


.elementor-widget-button:not(.elementor-button-info):not(.extern-small) a:hover:after , .hwt-nls-form button:hover:after{
  transform: translate(30%,-48%);
  color: #FFF !important;

}
.elementor-widget-button:not(.elementor-button-info) a:hover, .hwt-nls-form button:hover {
  color: #FFF !important;
  background-color: var(--color-2D313C) !important;

}
.elementor-widget-heading span {
  color: var(--color-95886B);
}

.sub-box-content .elementor-button-info a{
  width: 100%;
  text-align: left;
}

.sub-box-content .elementor-button-info .elementor-button-content-wrapper {
  display: block;
}
.golden-strong strong, .golden-strong-last  strong{
  color: var(--color-95886B);
  font-weight:400;
}

.golden-strong ul li:first-child::before , .golden-strong-last ul li:last-child::before{
  color: var(--color-95886B);
}
.golden-strong-none ul li::before {
  color: var(--color-2D313C) !important;
}
.elementor-element ul {
    list-style: none;
    padding-left: 0;
    line-height: 1.8em;
}

.elementor-element ul li {
    position: relative;
    padding-left: 1em;
}

.elementor-element ul li::before {
    content: '\276F';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.7em;

}

body.elementor-editor-active .elementor-element ul li::before {
    content: none !important;
}

.hover-zoom .elementor-widget-image {
  overflow: hidden;
}
.hover-zoom img {
  transition: transform 0.4s ease;
}
.hover-zoom:hover img {
  transform: scale(1.1);
}
body .elementor-element .elementor-button-success a, .hwt-ns__btn{ 
  border: 0 !important;
  background-color: var(--color-95886B) !important;
  color: #FFF !important;
  
}
.hwt-ns__btn {
  padding: 0.5375rem 1.9375rem;
  margin-top: 1.25rem;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body .elementor-element .elementor-button-success a:hover, .hwt-ns__btn:hover {
  background-color: var(--color-CCBC99) !important;
}

.sub-footer .align-center {
  max-width: 110rem;
  margin: 0 auto;
}


.gold-link a{
  color: var(--color-95886B);
  text-decoration: underline !important;
}
.gold-link a:hover{
  color: #FFF;
  text-decoration: underline;
}


.hwt-hero__viewport, .hwt-hero__slide {
    height: 40.75rem;
}
.hwt-hero {
   /* width: 100vw;*/
   width: 130rem;
    max-width: 100vw;

    margin-left: 50%;
    transform: translateX(-50%);
}
body {
  overflow-x: hidden;
}

.smaller-header h3 {
  margin-bottom: 1.5rem !important;
}
.smaller-header h4 {
  color: #FFF !important;
  font-weight: normal !important;
}


.smaller-content-know h4 {
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}
.smaller-content-know p {
  margin: 0.5rem 0 !important;
}
.smaller-content-know .elementor-button {
  margin-top: -2rem !important;
}

.elementor-kit-7 button, .elementor-kit-7 input[type="button"], .elementor-kit-7 input[type="submit"], .elementor-kit-7 .elementor-button {
  text-shadow: none !important;
}




.footer-icons-widget .wp-block-gallery .wp-block-image {
  width: 10rem;
}

strong {
  font-weight: 500;
}


@media (max-width: 1400px) {
  #menu-rechtliches-1 {
    display: blocK;
  }
  #menu-footer-navigation {
    display: block;
  }
 /* === Accordion: Grundzustand === */
#menu-footer-navigation .sub-menu {
  overflow: hidden;
  max-height: 0;                 
  transition: max-height 280ms ease;
  margin: 0;
}



#menu-footer-navigation > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}
.footer-navigation ul.sub-menu {
  margin-top: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.footer-navigation ul.sub-menu li {
  margin-top: 0.5rem;
}
.footer-navigation > ul > li {
  border-bottom: 1px solid rgba(255, 251, 242, 0.3);
  margin-bottom: 0.5rem;
}

#menu-footer-navigation li.menu-item-has-children > a::after {
  content: "❯";
  display: inline-block;
  transform: rotate(90deg);
  transition: transform 200ms ease;
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.85;
  color: #ccbc99;
}

/* Pfeil drehen wenn offen */
#menu-footer-navigation li.is-open.menu-item-has-children > a::after {
  transform: rotate(270deg);
}


#menu-footer-navigation .sub-menu li a {
  display: block;

}
#menu-unten-rechts, #menu-rechtliches {
  display: block;
}
#menu-unten-rechts li, #menu-rechtliches li, #menu-rechtliches-1 {
  margin-bottom: 0.5rem;
}
#menu-unten-rechts li a{
  font-family: 'SpecialGothic SemiExpanded';
  font-weight: 500 !important;
}
.footer-right  {
  justify-self: left;
  text-align: left;
}

.footer-right #menu-unten-rechts li:last-child a {
  display: none;
}
.footer-copy {
  display: none;
}
.footer-navigation {
  margin-bottom: 3rem;
}
#menu-rechtliches, .footer-text, #menu-rechtliches-1 {
  padding-top: 2rem;
}
 #menu-oben-rechts-1 li:first-child {
  display: none;
 }
 .footer-navigation > ul > li {
  margin-right: 0;
 }
 #menu-unten-rechts li {
  margin-bottom: 0;
 }
 .site-footer {
  padding-top: 1.875rem;
 }
 .footer-mobile-top {
    margin-bottom: 2rem;
    align-items: center !important;
 }
 #menu-footer-navigation .sub-menu li:last-child a {
  margin-bottom: 1rem;
 }
}

/* ================================
   MOBILE & TABLET – REINES CSS
   ================================ */
@media (max-width: 1400px) {

  .wp-block-gallery.wp-block-gallery-1 {
    display: flex;
    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;

   

    /* natürliches Touch-Scrollen */
    -webkit-overflow-scrolling: touch;




    /* Scrollbar ausblenden */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
  }

  .wp-block-gallery.wp-block-gallery-1::-webkit-scrollbar {
    display: none; /* Safari / Chrome */
  }

  .wp-block-gallery.wp-block-gallery-1 > .wp-block-image {
    flex: 0 0 auto;

  }

  .wp-block-gallery.wp-block-gallery-1 img {
  
    width: auto;
    object-fit: contain;

  }
  .footer-icons-widget .wp-block-gallery .wp-block-image {
    width: 7rem !important;
  }
  .footer-icons-widget .wp-block-gallery {
    gap: 1rem !important;
  }
  .wp-block-gallery.wp-block-gallery-1 {
    margin-top: 2rem;
  }
  .footer-copy-2 {
        color: var(--color-FFFBF2) !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s ease;
    font-size: 0.8rem;
  }
  .footer-copy-2 .footer-text {
    padding: 0;
    padding-top: 1rem;
  }
  .sub-footer {

    padding: 1rem 0;
  }
    .normalview {
      display: none !important;
  }
  #menu-top-right-2 li:first-child{
    display: none;
  }
  .mobile-logo {
    width: 15rem;
    height: auto;
  }

}
.nav-toggle {
  width: 44px;
  height: 36px;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 70%;
  height: 2px;
  background: #ccbc99;
  transform: translateX(-50%);
  transform-origin: center;
}

/* Ausgangsposition */
.nav-toggle span:nth-child(1) {
  top: 12px;
}

.nav-toggle span:nth-child(2) {
  top: 22px;
}

/* =========================
   ANIMATION ÖFFNEN (→ X)
   ========================= */
.nav-toggle.active span {
  transition:
    top 160ms ease,
    transform 220ms ease 160ms;
}

.nav-toggle.active span:nth-child(1) {
  top: 17px;
  transform: translateX(-50%) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  top: 17px;
  transform: translateX(-50%) rotate(-45deg);
}

/* =========================
   ANIMATION SCHLIESSEN (X →)
   ========================= */
.nav-toggle:not(.active) span {
  transition:
    transform 220ms ease,
    top 160ms ease 220ms;
}

  .mobilenavi-toggle {
    position: fixed;
    top: 0;
    right: 0;
    background-color: var(--color-393E4D);
    z-index: 101;
    height: 100vH;
    box-sizing: border-box;
   opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.2s ease;
    transform:  translateY(-100%);
    overflow: hidden;
   
  }
    .mobilenavi-toggle.active, .mobilenavi-toggle.active #menu-main-mobile>li>a {
        opacity: 1 ;
  visibility: visible ;
  pointer-events: auto;
  transform:  translateY(0);
    }
    
  #menu-main-mobile {
    display: block;
    font-family: 'SpecialGothic SemiExpanded';
     padding: 4rem;
     position: relative;
         background-color: var(--color-393E4D);
         z-index: 101;
  }
   #menu-main-mobile>li>a {
      opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
    transform:  translateY(-30px);
   }
   
#menu-main-mobile > li:nth-child(1)>a{ transition-delay: .25s; }
#menu-main-mobile > li:nth-child(2)> a{ transition-delay: .30s; }
#menu-main-mobile > li:nth-child(3) >a{ transition-delay: .35s; }
#menu-main-mobile > li:nth-child(4)> a{ transition-delay: .40s; }
#menu-main-mobile > li:nth-child(5) >a{ transition-delay: .45s; }
#menu-main-mobile > li:nth-child(6) >a{ transition-delay: .50s;}

  #menu-main-mobile  li {
    margin-bottom: 2rem;
    font-size: 1.4rem;
  }
  #menu-main-mobile>li> a, .parent-link>a {
    font-size: 2rem;
  }
  .parent-link::before {
    content: '\276E';
    display: block;
    font-size: 1.5rem;
    color: #ccbc99;
    margin-bottom: 1rem;
    position: absolute;
    left: 0;
    top: -3rem;
  }
   .parent-link {
    margin-bottom: 3rem !important;
    position: relative;
    cursor: pointer;
   }
  .header-legal {
    position: absolute;
    left: 4rem;
    bottom: 4rem;
  }
  .header-legal a {
    opacity: 0.6 ;
  }
   .header-legal a:hover {
    opacity: 1;
   }
   
    #menu-main-mobile .sub-menu {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100VH;
       padding: 4rem;
       box-sizing: border-box;
       background-color: var(--color-393E4D);
           opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.5s ease, visibility 0.2s ease;
    transform:  translateX(100%);
        }
#menu-main-mobile {
  transition: transform 0.5s ease, visibility 0.2s ease;
}
#menu-main-mobile .sub-menu.isVisibleSub {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
 
  z-index: 102;
}
ul.isNotVisible {
   transform:  translateX(0) !important;
   
        
}
#menu-main-mobile.isNotVisible {
   transform:  translateX(-100%) !important;
   
}
.site-header .footer-mobile-top {
  overflow: hidden;
  height: 3rem;
  transition: height 0.2s ease;
}
.site-header.is-scrolled .footer-mobile-top {
  height: 0px;
}
 #menu-rechtliches {
  transition: opacity 0.3s ease, transform 0.5s ease, visibility 0.2s ease;
 }
.notVisibleR {
  transform: translateX(-100%);
  opacity: 0;
}

/* ==================================================
   Adapter: leistungstabelle → HWT Tabellen-Design
   ================================================== */

.leistungstabelle {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: 'SpecialGothic SemiExpanded';
    font-size: 0.9rem;
}

/* Header */
.leistungstabelle thead {
    background-color: #6c7380;
    color: #ffffff;
}

.leistungstabelle th {
    padding: 1.25rem;
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}

/* Zellen */
.leistungstabelle td {
    padding: 1.25rem;
    vertical-align: middle;

}

/* Zahlen rechtsbündig (ab Spalte 3) */
.leistungstabelle th:nth-child(n+3),
.leistungstabelle td:nth-child(n+3) {
    text-align: right;
}

/* Zebra Striping */
.leistungstabelle tbody tr:nth-child(odd) td {
    background-color: #F7F7F5;
}

.leistungstabelle tbody tr:nth-child(even) td {
    background-color: #FFFFFF;
}

/* Hover wie bei Metallpreisen */
@media (min-width: 1050px) {
    .leistungstabelle tbody tr:hover td {
        background-color: #E6EBF2;
    }
}

/* Sicherstellen, dass Tabelle wirklich volle Breite nutzt */
.leistungstabelle {
    display: table;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
}

/* Elementor-Wrapper dürfen die Breite nicht begrenzen */
.special-table,
.special-table .elementor-widget-container,
.special-table .elementor-widget-container > * {
    width: 100%;
    max-width: 100%;
}

/* Ab der 3. Spalte: Monospace für Zahlen */
.leistungstabelle td:nth-child(n+3) {
    font-family: 'Roboto Mono', monospace;
    color: #95886B;
    font-weight: bold;
}

.leistungstabelle {
    table-layout: fixed;
}
/* Spaltenbreiten wie Zielbild */
.leistungstabelle th:nth-child(1),
.leistungstabelle td:nth-child(1) {
    width: 50%;
}

.leistungstabelle th:nth-child(2),
.leistungstabelle td:nth-child(2) {
    width: 10%;
}

.leistungstabelle th:nth-child(3),
.leistungstabelle td:nth-child(3),
.leistungstabelle th:nth-child(4),
.leistungstabelle td:nth-child(4),
.leistungstabelle th:nth-child(5),
.leistungstabelle td:nth-child(5) {
    width: 10%;
}
/* ==========================================
   Mobile Stacked Layout – leistungstabelle
   ========================================== */
@media (max-width: 1050px) {

  /* Tabellenkopf ausblenden */
  .leistungstabelle thead {
      display: none;
  }

  .leistungstabelle,
  .leistungstabelle tbody,
  .leistungstabelle tr,
  .leistungstabelle td {
      display: block;
      width: 100% !important;
  }

  

  /* Leistung = Kopfzeile der "Card" */
  .leistungstabelle td:nth-child(1) {
      background-color: #6c7380 !important;
      color: #FFF !important;
      font-family: 'SpecialGothic SemiExpanded';
      font-weight: 500;
      padding: 0.75rem 1rem;
  }

  /* остальные Zeilen */
  .leistungstabelle td:not(:first-child) {
      padding: 0.4rem 1rem;
      font-family: 'Roboto Mono', monospace;
      text-align: left;
  }
  .special-table .elementor-widget {
    width: 100%;

  }
  /* Labels voranstellen */
  .leistungstabelle td:nth-child(2)::before {
      content: "Kosten: ";
      font-family: 'SpecialGothic SemiExpanded';
      font-weight: 500;
  }

  .leistungstabelle td:nth-child(3)::before {
      content: "bis 250.000 €: ";
      font-family: 'SpecialGothic SemiExpanded';
      font-weight: 500;
  }

  .leistungstabelle td:nth-child(4)::before {
      content: "ab 500.000 €: ";
      font-family: 'SpecialGothic SemiExpanded';
      font-weight: 500;
  }

  .leistungstabelle td:nth-child(5)::before {
      content: "ab 1.000.000 €: ";
      font-family: 'SpecialGothic SemiExpanded';
      font-weight: 500;
  }

}

/* ==================================================
   Tabelle 2 Spalten: Leistung | Kosten
   (gleicher Look, eigenes Target)
   ================================================== */

/* Desktop: volle Breite + feste Spalten */
.leistungstabelle--2cols {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-family: 'SpecialGothic SemiExpanded';
  font-size: 0.9rem;
}

/* Header */
.leistungstabelle--2cols thead {
  background-color: #6c7380;
  color: #ffffff;
}

.leistungstabelle--2cols th,
.leistungstabelle--2cols td {
  padding: 1.25rem;
  vertical-align: middle;
}

/* Spaltenbreiten wie Screenshot */
.leistungstabelle--2cols th:nth-child(1),
.leistungstabelle--2cols td:nth-child(1) {
  width: 78%;
  text-align: left;
  white-space: normal; 
}

.leistungstabelle--2cols td:nth-child(2) {
  width: 22%;
  text-align: right;
  white-space: nowrap;
  font-family: 'Roboto Mono', monospace; 
  font-variant-numeric: tabular-nums;
  color: #95886B;
  font-weight: 600;
}
.leistungstabelle--2cols th:nth-child(2)
 {
  width: 22%;
  text-align: right;

}
/* Zebra */
.leistungstabelle--2cols tbody tr:nth-child(odd) td {
  background-color: #F7F7F5;
}
.leistungstabelle--2cols tbody tr:nth-child(even) td {
  background-color: #FFFFFF;
}

/* Hover (Desktop) */
@media (min-width: 1050px) {
  .leistungstabelle--2cols tbody tr:hover td {
    background-color: #E6EBF2;
  }
}

/* Optional: <small> in Leistung dezenter */
.leistungstabelle--2cols td small {
  display: inline;
  font-size: 0.8em;
  color: #6b6f78;
}

/* ==================================================
   Mobile: Card/Stacked Layout (wie deine Metallpreise)
   ================================================== */
@media (max-width: 1050px) {

  .same-size  .elementor-element .elementor-button-success a {
  width: 100%;
}
  .leistungstabelle--2cols thead {
    display: none;
  }

  .leistungstabelle--2cols,
  .leistungstabelle--2cols tbody,
  .leistungstabelle--2cols tr,
  .leistungstabelle--2cols td {
    display: block;
    width: 100%;
  }

  .leistungstabelle--2cols tr {
    margin-bottom: 1rem;
    border: 1px solid #e5e5e5;
  }

  /* Leistung = Titelbalken */
  .leistungstabelle--2cols td:nth-child(1) {
    background-color: #6c7380 !important;
    color: #ffffff;
    font-family: 'SpecialGothic SemiExpanded';
    font-weight: 500;
    padding: 0.75rem 1rem;
  }

  /* Kosten darunter als Label + Wert */
  .leistungstabelle--2cols td:nth-child(2) {
    padding: 0.5rem 1rem 0.9rem;
    text-align: left;
    white-space: normal;
    font-family: 'Roboto Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: #95886B;
    font-weight: 600;
    background-color: #FFFFFF;
  }

  .leistungstabelle--2cols td:nth-child(2)::before {
    content: "Kosten: ";
    font-family: 'SpecialGothic SemiExpanded';
    font-weight: 500;
    color: #2D313C;
  }

  /* Zebra im Card-Layout deaktivieren */
  .leistungstabelle--2cols tbody tr td {
    background: transparent;
  }
}
a[href^="tel:"] { 
  color: var(--color-2D313C);
}