/* =========================================================================
   HolzLand Hasselbach – Startseite
   Static rebuild. No build step, no framework, no external dependencies.
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:'open_sanslight';src:url('../fonts/opensans-light-webfont.woff2') format('woff2'),url('../fonts/opensans-light-webfont.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'open_sansregular';src:url('../fonts/opensans-regular-webfont.woff2') format('woff2'),url('../fonts/opensans-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'open_sansbold';src:url('../fonts/opensans-bold-webfont.woff2') format('woff2'),url('../fonts/opensans-bold-webfont.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'hlz-icon';src:url('../fonts/hlz-icon-subset.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'icomoon';src:url('../fonts/icomoon-subset.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}

/* ---------- Tokens ---------- */
:root{
  --primary-base:227,6,19;              /* HolzLand red  #E30613 */
  --secondary-base:68,68,68;            /* Text / dark   #444444 */
  --primary-color:rgb(var(--primary-base));
  --secondary-color:rgb(var(--secondary-base));
  --color-white:#fff;
  --color-lighter-grey:#e8e7e6;         /* page background */
  --color-light-grey:#cfcfcf;
  --color-grey:#999;

  --font-l:'open_sanslight',sans-serif;
  --font-r:'open_sansregular',sans-serif;
  --font-b:'open_sansbold',sans-serif;

  --max-width-m:1141px;                 /* content column */
  --max-width-l:1400px;                 /* outer column   */
  --header-height:101px;
  --spacing-elements:45px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:12px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-lighter-grey);color:var(--secondary-color);
  font-family:var(--font-r);font-size:12px;line-height:16px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,figure,ul,ol,dl{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none!important}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-navi{position:absolute;left:-9999px;top:0;z-index:5000;background:var(--secondary-color);color:#fff;
  padding:12px 24px;font-family:var(--font-b);font-size:15px}
.skip-navi:focus{left:0}

/* Icon helpers */
.icon::before,[class^='hlz-icon-']::before,[class*=' hlz-icon-']::before{
  font-family:'hlz-icon';font-style:normal;font-weight:400;font-variant:normal;
  text-transform:none;line-height:1;speak:never;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-phone::before,.icon-location::before,.icon-arrow-down::before{font-family:'icomoon'}
.icon-phone::before{content:"\ea1d"}
.icon-location::before{content:"\ea38"}
.icon-arrow-down::before{content:"\edc9"}
.icon-search::before{content:"\e916"}
.icon-close::before{content:"\00d7";font-family:var(--font-r)}

/* =========================================================================
   HEADER
   ========================================================================= */
#website-wrapper{background:var(--color-lighter-grey);overflow-x:clip}
#website{position:relative;padding-top:119px}

.overlay{position:fixed;inset:0;background:#000;opacity:.5;z-index:2999}

.header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);
  background:#fff;box-shadow:0 0 20px 0 rgba(0,1,1,.15);z-index:3000}
.header>header{height:100%}
.header .wrapper{height:100%;padding:0 15px}
.header-inner{position:relative;height:100%;max-width:var(--max-width-m);margin:0 auto}

/* --- Meta menu --- */
.header-meta-top .meta-menu{position:absolute;top:0;right:0;display:flex;justify-content:flex-end;height:43px}
.header-meta-top .meta-menu li{font-size:12px;line-height:24px}
.header-meta-top .meta-menu li.first{padding:9px 18px 9px 0}
.header-meta-top .meta-menu li.second{position:relative;padding:9px 19px 9px 22px}
.header-meta-top .meta-menu li.third{position:relative;padding:9px 18px 9px 16px}
.header-meta-top .meta-menu li.second::before,
.header-meta-top .meta-menu li.third::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:14px;background:var(--color-light-grey)}
.header-meta-top .meta-menu a,
.header-meta-top .meta-menu button{position:relative;display:inline-block;padding-left:30px;
  color:var(--secondary-color);transition:color .3s ease}
.header-meta-top .meta-menu li.second button{padding-left:0;font-family:Arial,Helvetica,sans-serif}
.header-meta-top .meta-menu li.third a{padding-left:20px}
.header-meta-top .meta-menu li.third .icon{left:0}
.header-meta-top .meta-menu a:hover,
.header-meta-top .meta-menu button:hover{color:var(--primary-color)}
.header-meta-top .meta-menu .icon{position:absolute;left:7px;top:1px;font-size:16px;line-height:16px}
.header-meta-top .meta-menu li.shop{padding:0}
.header-meta-top .meta-menu li.shop a{display:block;height:42px;padding:9px 19px 9px 22px;
  background:var(--secondary-color);color:#fff;font-family:var(--font-l);transition:background .3s ease}
.header-meta-top .meta-menu li.shop a:hover{background:var(--primary-color);color:#fff}

#contrast-switch::before{content:"";display:inline-block;vertical-align:-2px;margin-right:4px;
  width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5C15 11.6421 11.6421 15 7.5 15ZM7.5 14C3.97388 14 1 11.0899 1 7.5C1 4.23006 3.64319 1 7.5 1V14Z' fill='%23444444'/%3E%3C/svg%3E") no-repeat center/contain;
  }

/* --- Logo + main menu --- */
.header-content{position:relative;height:100%}
.logo{position:absolute;left:0;top:16px}
.logo img{display:block;width:150px;height:auto}

.main-menu-wrapper{position:absolute;right:0;bottom:11px}
.main-menu-wrapper nav{display:flex;align-items:center;height:38px}
.main-menu{display:flex;align-items:center}
.main-menu li{position:relative;padding-right:20px;margin-right:10px}

.main-menu li button{font-family:var(--font-b);font-size:15px;line-height:21px;
  text-transform:uppercase;color:var(--secondary-color);transition:color .3s ease}
.main-menu li i.icon{position:absolute;right:0;top:3px;font-size:15px;line-height:15px;
  color:var(--secondary-color);pointer-events:none;transition:color .3s ease,transform .3s ease}
.main-menu li:hover button,.main-menu li:hover i.icon,
.main-menu li.active button,.main-menu li.active i.icon{color:var(--primary-color)}
.main-menu li.active i.icon{transform:rotate(180deg)}

.search{display:flex;align-items:center;justify-content:flex-end;width:94px;height:38px;
  padding-left:34px;margin-left:0;border-left:1px solid var(--color-light-grey)}
.search button{display:flex;align-items:center;justify-content:center;width:60px;height:38px}
.search .icon{font-size:30px;line-height:1;color:var(--secondary-color);transition:color .3s ease}
.search button:hover .icon{color:var(--primary-color)}
.search .hide{display:none}

/* --- Mega menu --- */
.submenu-wrapper{position:relative}
.submenu-outer{position:absolute;top:0;left:0;width:100%}
.submenu-inner{width:100%;background:#fff;padding:56px 0 77px;
  box-shadow:0 10px 20px 0 rgba(0,1,1,.15);position:relative;z-index:999}
.submenu-inner .level-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:36px;margin:0 auto;box-sizing:content-box;max-width:var(--max-width-m);padding:0 85px}
.submenu-inner .level-2>li>.title{display:block;font-family:var(--font-l);font-size:26px;line-height:30px;
  text-transform:uppercase;color:var(--secondary-color);padding-bottom:15px;margin-bottom:21.6px;text-align:left}
.submenu-inner .level-3 li a{display:block;padding:9px 0;font-family:var(--font-b);font-size:15px;
  line-height:18px;color:var(--secondary-color);transition:color .3s ease}
.submenu-inner .level-3 li:first-child a{padding-top:0}
.submenu-inner .level-3 li:last-child a{padding-bottom:0}
.submenu-inner .level-3 li a:hover{color:var(--primary-color)}

/* --- Search panel --- */
.submenu-inner.search-item{padding:70px 0 90px}
.submenu-inner.search-item .wrapper{max-width:var(--max-width-m);margin:0 auto;padding:0 15px}
.submenu-inner.search-item form{display:flex;gap:18px;align-items:flex-end;
  border-bottom:1px solid var(--color-light-grey);padding-bottom:12px}
.submenu-inner.search-item input[type=text]{flex:1;border:0;outline:0;background:none;
  font-family:var(--font-l);font-size:50px;line-height:1.2;text-transform:uppercase;color:var(--secondary-color)}
.submenu-inner.search-item input::placeholder{color:var(--secondary-color);opacity:.4}
.submenu-inner.search-item .submit .icon{font-size:34px;color:var(--primary-color)}

/* --- Mobile burger (hidden on desktop) --- */
.wb-responsive-menu-wrapper{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.wb-button.menu{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px}
.wb-button.menu span{display:block;height:3px;width:28px;background:var(--secondary-color);
  transition:transform .3s ease,opacity .3s ease}
.wb-button.menu[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.wb-button.menu[aria-expanded=true] span:nth-child(2){opacity:0}
.wb-button.menu[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* --- Mobile nav panel --- */
.mobile-nav{position:fixed;top:var(--header-height);left:0;width:100%;
  max-height:calc(100vh - var(--header-height));overflow-y:auto;background:#fff;z-index:2998;
  padding:15px 0 40px;box-shadow:0 10px 20px 0 rgba(0,1,1,.15)}
.mobile-menu{padding:0 20px}
.mobile-menu>li{border-bottom:1px solid var(--color-light-grey)}
.mobile-menu>li>button{display:block;width:100%;text-align:left;padding:16px 0;
  font-family:var(--font-b);font-size:18px;text-transform:uppercase}
.mobile-nav .meta-menu{padding:24px 20px 0}
.mobile-nav .meta-menu li a{display:block;padding:12px 0;font-family:var(--font-r);font-size:16px}
.mobile-nav .meta-menu li.menu-item-shop a{background:var(--secondary-color);color:#fff;
  padding:12px 18px;margin-bottom:12px;text-align:center;font-family:var(--font-b);text-transform:uppercase}

/* =========================================================================
   LAYOUT SHELL
   ========================================================================= */
.container{padding:0 15px 47px}
.container-inner{position:relative;max-width:var(--max-width-l);margin:0 auto -94px}

.container-box-headline{display:block;max-width:var(--max-width-m);margin:0 auto 63px;
  font-family:var(--font-b);font-size:54px;line-height:62px;text-transform:uppercase;
  text-align:center;color:var(--secondary-color)}

.wb-space-30{margin-top:30px}

/* =========================================================================
   HERO SLIDER
   ========================================================================= */
.hero-slider{position:relative;margin:30px -15px 180px}
.hero-slider .swiper{position:relative;overflow:hidden}
.hero-slider .swiper-wrapper{display:flex;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.hero-slider .swiper-slide{flex:0 0 100%;min-width:100%}
.hero-slider .swiper-slide img{display:block;width:100%;height:auto;aspect-ratio:1430/553;object-fit:cover}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;
  background:#fff;z-index:6;transition:background .6s ease-in-out}
.hero-slider .swiper-button-prev{left:30px}
.hero-slider .swiper-button-next{right:30px}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover{background:var(--color-lighter-grey)}
.hero-slider .swiper-button-prev::before,
.hero-slider .swiper-button-next::before{font-family:'hlz-icon';font-size:24px;line-height:1;
  color:var(--secondary-color)}
.hero-slider .swiper-button-prev::before{content:"\e90f"}
.hero-slider .swiper-button-next::before{content:"\e911"}

.swiper-description{position:static}
.hero-slider .content-slide{position:absolute;top:80%;left:50%;transform:translateX(-50%);
  width:100%;max-width:900px;background:#fff;padding:40px 64px 31px 31px;z-index:5;
  opacity:1;transition:opacity .6s ease-in-out}
.hero-slider .content-slide:not(.active){opacity:0;pointer-events:none}
.hero-slider .content-slide::before{content:"";position:absolute;left:36px;top:-60px;
  border-style:solid;border-width:30px;border-color:transparent transparent #fff transparent}
.hero-slider .content-slide .h3{display:block;font-family:var(--font-l);font-size:30px;line-height:40px;
  min-height:80px;text-transform:uppercase;color:var(--secondary-color);padding-bottom:30px;margin:0}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.button{display:inline-block;position:relative;font-family:var(--font-b);font-size:16px;line-height:25px;
  text-transform:uppercase;color:#fff;background:var(--secondary-color);padding:8px 28px;
  border-top:1px solid var(--secondary-color);border-bottom:1px solid var(--secondary-color);
  transition:background .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out}
.button:hover{border-color:var(--primary-color)}
.button:hover{background:var(--primary-color);color:#fff}
.hero-slider .content-slide .button{background:var(--primary-color);line-height:23px;border-color:var(--primary-color)}
.hero-slider .content-slide .button:hover{background:var(--secondary-color);border-color:var(--secondary-color)}

/* icon buttons */
.button[class*='hlz-icon-']{padding-left:54px}
.button[class*='hlz-icon-']::before{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:30px;line-height:1;color:#fff}
.hlz-icon-gview::before{content:"\e945"}
.hlz-icon-cart::before{content:"\e917"}

/* =========================================================================
   100 % TEASER  (image + white content box, overlapping)
   ========================================================================= */
.cp-100-teaser{display:flex;align-items:flex-start;justify-content:center;
  max-width:var(--max-width-m);margin:0 auto var(--spacing-elements)}
.cp-100-teaser-image{position:relative;z-index:1;width:calc(50% + 132px);margin-top:96px;aspect-ratio:712/473}
.cp-100-teaser-image a{display:block;width:100%;height:100%}
.cp-100-teaser-image picture{display:block;width:100%;height:100%}
.cp-100-teaser-image img{width:100%;height:100%;object-fit:cover;display:block}
.cp-100-teaser-image::before{content:"";position:absolute;top:60px;z-index:2;width:0;height:0;
  border-style:solid;border-width:30px;border-top-color:transparent;border-bottom-color:transparent}

.cp-100-teaser-content{display:flex;flex-flow:column nowrap;align-items:flex-start;justify-content:center;
  width:50%;min-height:423px;background:#fff}
.cp-100-teaser-content .headline{display:block;font-family:var(--font-l);font-size:36px;line-height:49px;
  text-transform:uppercase;text-align:left;margin-bottom:24px;word-break:break-word}
.cp-100-teaser-content p{font-family:var(--font-r);font-size:20px;line-height:32px;
  text-align:left;margin-bottom:40px}

.cp-100-teaser.image-left{flex-flow:row nowrap}
.cp-100-teaser.image-left .cp-100-teaser-content{padding:48px 48px 48px 180px}
.cp-100-teaser.image-left .cp-100-teaser-image{right:-132px;margin-left:-132px}
.cp-100-teaser.image-left .cp-100-teaser-image::before{right:0;border-left-color:transparent;border-right-color:#fff}

.cp-100-teaser.image-right{flex-flow:row-reverse nowrap}
.cp-100-teaser.image-right .cp-100-teaser-content{padding:48px 180px 48px 48px}
.cp-100-teaser.image-right .cp-100-teaser-image{left:-132px;margin-right:-132px}
.cp-100-teaser.image-right .cp-100-teaser-image::before{left:0;border-right-color:transparent;border-left-color:#fff}

/* =========================================================================
   PRODUKT-TEASER
   ========================================================================= */
.warengruppen-teaser{max-width:var(--max-width-m);margin:90px auto var(--spacing-elements)}
.warengruppen-teaser .headline.container-box-headline{margin-bottom:63px}
.warengruppen-grid{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}

.warengruppen-item{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:500px;width:calc((100% - 72px) / 3)}
.warengruppen-item .image{position:absolute;inset:0;z-index:1}
.warengruppen-item .image picture{display:block;width:100%;height:100%}
.warengruppen-item .image img{width:100%;height:100%;object-fit:cover;display:block}
.warengruppen-item .image::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:30%;
  background:linear-gradient(180deg,rgba(var(--secondary-base),0),rgba(var(--secondary-base),.7));
  transition:all .6s ease-in-out}
.warengruppen-item .image::before{content:"";position:absolute;left:50%;bottom:-50%;z-index:2;
  transform:translateX(-50%);border-style:solid;border-width:30px;
  border-color:transparent transparent var(--color-lighter-grey) transparent;
  transition:bottom .6s ease-in-out}
.warengruppen-item .content{position:relative;z-index:3;width:100%;padding:18px 18px 54px;text-align:center}
.warengruppen-item .content .headline{font-family:var(--font-l);font-size:30px;line-height:41px;
  color:#fff;text-transform:uppercase;transition:margin-bottom .6s ease-in-out}
.warengruppen-item .content .description{font-family:var(--font-b);font-size:15px;line-height:25px;
  color:#fff;max-height:0;overflow:hidden;transition:max-height .6s ease-in-out}
.warengruppen-item:hover .content .headline,
.warengruppen-item:focus-visible .content .headline{margin-bottom:24px}
.warengruppen-item:hover .content .description,
.warengruppen-item:focus-visible .content .description{max-height:500px}
.warengruppen-item:hover .image::after,
.warengruppen-item:focus-visible .image::after{height:100%;
  background:linear-gradient(180deg,rgba(var(--secondary-base),0),var(--secondary-color))}
.warengruppen-item:hover .image::before,
.warengruppen-item:focus-visible .image::before{bottom:0}

/* =========================================================================
   WHITE FRAME (text + image)
   ========================================================================= */
.white-frame{max-width:var(--max-width-m);margin:0 auto var(--spacing-elements);
  background:#fff;padding:26px 36px}
.white-frame .ce-textpic{display:flex;align-items:flex-start}
.white-frame .ce-textpic.ce-right{flex-direction:row-reverse;gap:42px 0}
.white-frame .ce-textpic.ce-left{flex-direction:row;gap:42px}
.white-frame .ce-textpic.ce-right>*{width:50%;flex:0 0 50%}
.white-frame .ce-textpic.ce-left>*{flex:1 1 0;width:auto}
.white-frame .ce-gallery picture{display:block}
.white-frame .ce-gallery{min-width:0}
.white-frame .ce-gallery img{display:block;width:100%;height:auto}
.white-frame .ce-bodytext{min-width:0}
.white-frame .ce-bodytext p{font-family:var(--font-r);font-size:20px;line-height:32px;
  color:var(--secondary-color)}
.white-frame .ce-bodytext p{margin-bottom:24px}
.white-frame .ce-bodytext p:last-child{margin-bottom:0}
.white-frame .ce-bodytext a:not(.button){text-decoration:underline;transition:color .3s ease}
.white-frame .ce-bodytext a:not(.button):hover{color:var(--primary-color)}
.white-frame .ce-bodytext .h3{display:block;font-family:var(--font-l);font-size:36px;line-height:49px;
  text-transform:uppercase;margin-bottom:24px}
.white-frame .ce-bodytext .button{line-height:32px;font-size:15px}

/* =========================================================================
   SERVICE-TEASER
   ========================================================================= */
.service-teaser{display:flex;gap:36px;align-items:stretch;
  max-width:var(--max-width-m);margin:0 auto var(--spacing-elements)}
.service-teaser-item{flex:1 1 0;background:#fff;transition:background .3s ease}
.service-teaser-item>a{display:block;height:100%;padding:26px 36px}
.service-teaser-item .headline{display:block;font-family:var(--font-b);font-size:26px;line-height:35px;
  color:var(--primary-color);margin-bottom:15px;transition:color .3s ease}
.service-teaser-item p{font-family:var(--font-r);font-size:20px;line-height:32px;text-align:left}
.service-teaser-item:hover{background:var(--secondary-color)}
.service-teaser-item:hover .headline,.service-teaser-item:hover p{color:#fff}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{margin-top:102px;background:#fff}
.footer-top{display:flex;flex-direction:column;gap:85px;
  max-width:var(--max-width-m);margin:0 auto 85px;padding:20px}
.footer-content{display:flex;gap:50px 42px}
.footer-address,.footer-opening-hours{flex:1 1 0}
.footer .headline{display:block;font-family:var(--font-b);font-size:24px;line-height:1.2;
  color:var(--secondary-color);margin-bottom:24px}
.footer-address p{position:relative;padding-left:69px;margin-bottom:20px;
  font-family:var(--font-r);font-size:15px;line-height:24px}
.footer-address p::before{position:absolute;left:0;top:-6px;font-family:'hlz-icon';
  font-size:54px;line-height:54px;color:var(--secondary-color)}
.footer-address .address::before{content:"\e90c"}
.footer-address .contact::before{content:"\e90d"}
.footer-address a{transition:color .3s ease}
.footer-address a:hover{color:var(--primary-color)}

.opening-hours-box{display:flex;flex-wrap:wrap;gap:24px;
  background:var(--color-lighter-grey);padding:24px 30px}
.opening-hours-box figure.table{display:table;margin:0}
.opening-hours-box table{width:auto;margin-bottom:16px}
.opening-hours-box td{padding:5px 5px 5px 0;font-family:var(--font-r);font-size:20px;line-height:27px;
  vertical-align:top;white-space:nowrap}
.opening-hours-box strong{font-family:var(--font-b);font-weight:400}
.opening-hours-box p{width:100%;font-family:var(--font-r);font-size:15px;line-height:22.5px;margin:0}

.footer-nav{display:flex;gap:42px}
.footer-navlist{flex:1 1 0;margin-top:50px}
.footer-navlist li{margin-bottom:9px;line-height:24px}
.footer-navlist li a{font-family:var(--font-l);font-size:15px;line-height:18px;
  color:var(--secondary-color);transition:color .3s ease}
.footer-navlist li a:hover{color:var(--primary-color)}

.footer-logos{display:flex;flex-wrap:wrap;align-items:center;gap:42px}
.footer-logos img{display:block;width:100px;height:72px}

.footer-bottom{position:relative;background:var(--color-lighter-grey)}
.footer-bottom nav{max-width:var(--max-width-m);margin:0 auto;padding:0 15px}
.footer-bottom ul{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 68px;height:100px}
.footer-bottom a{font-family:var(--font-r);font-size:15px;line-height:26px;letter-spacing:.3px;
  color:var(--secondary-color);transition:color .3s ease}
.footer-bottom a:hover{color:var(--primary-color)}
.footer-bottom li:last-child{margin-left:auto}
.back-to-top{position:relative;right:20px;display:block;width:0;height:0}
.back-to-top::after{content:"\e912";position:absolute;top:0;left:-60px;width:60px;height:60px;
  display:flex;align-items:center;
  justify-content:center;font-family:'hlz-icon';font-size:30px;line-height:30px;color:#fff;
  background:rgba(var(--secondary-base),.45);transition:background .3s ease}
.back-to-top:hover::after{background:var(--secondary-color)}

/* =========================================================================
   FOLDOUT SIDEBAR
   ========================================================================= */
.foldout-menu-wrapper{position:fixed;right:0;top:50%;transform:translateY(-50%);width:45px;
  padding-bottom:6px;z-index:2000}
#foldout-menu li{margin-bottom:4px}
#foldout-menu li a{position:relative;display:block;width:45px;height:45px;margin-bottom:1px;
  background:#fff;overflow:hidden;transition:width .4s cubic-bezier(.19,1,.22,1)}
#foldout-menu li a::after{position:absolute;left:0;top:0;display:flex;align-items:center;
  justify-content:center;width:45px;height:45px;font-family:'hlz-icon';font-size:36px;line-height:36px;
  color:var(--secondary-color);transition:color .3s ease}
#foldout-menu li a>span{position:absolute;left:45px;top:0;display:flex;align-items:center;height:45px;
  padding-right:16px;white-space:nowrap;font-family:var(--font-r);font-size:14px;color:var(--secondary-color)}
#foldout-menu li a:hover{width:auto;min-width:45px;padding-right:0}
.foldout-menu-wrapper:hover{width:auto}
.foldout-icon-contactmail a::after{content:"\e92b"}
.foldout-icon-openinghours a::after{content:"\e93c"}
.foldout-icon-catalog a::after{content:"\e93d"}
.foldout-icon-gview a::after{content:"\e945"}
.foldout-icon-facebook a::after{content:"\e943"}
.foldout-icon-instagram a::after{content:"\e93e"}
#foldout-menu li a:hover::after{color:var(--primary-color)}

/* =========================================================================
   KONTRASTMODUS
   ========================================================================= */
html.contrast-mode{--primary-base:68,68,68}
html.contrast-mode .service-teaser-item .headline{color:var(--secondary-color)}
html.contrast-mode .hero-slider .content-slide .button{background:var(--secondary-color)}
html.contrast-mode .hero-slider .content-slide .button:hover{background:#000}
html.contrast-mode .button:hover{background:#000}
html.contrast-mode a:hover,
html.contrast-mode .meta-menu a:hover,
html.contrast-mode .meta-menu button:hover{color:#000;text-decoration:underline}
html.contrast-mode #contrast-switch{font-family:var(--font-b)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1200px){
  .hero-slider{margin-bottom:150px}
  .container-box-headline{font-size:44px;line-height:52px;margin-bottom:48px}
  .main-menu li{padding-right:18px;margin-right:6px}
  .main-menu li button{font-size:14px}
}

@media (max-width:1024px){
  .main-menu li button{font-size:13px}
  .main-menu li{padding-right:16px;margin-right:2px}
  .search{width:60px;padding-left:16px}
  .cp-100-teaser-image{width:calc(50% + 66px);margin-top:66px}
  .cp-100-teaser.image-left .cp-100-teaser-image{right:-66px;margin-left:-66px}
  .cp-100-teaser.image-right .cp-100-teaser-image{left:-66px;margin-right:-66px}
  .cp-100-teaser.image-left .cp-100-teaser-content{padding:48px 48px 48px 114px}
  .cp-100-teaser.image-right .cp-100-teaser-content{padding:48px 114px 48px 48px}
  .hero-slider .content-slide .h3{font-size:26px;line-height:34px;min-height:68px}
}

@media (max-width:990px){
  /* burger navigation takes over */
  .main-menu-wrapper{display:none}
  .wb-responsive-menu-wrapper{display:block}
  .submenu-wrapper{display:none}
  .header-meta-top .meta-menu li.third,
  .header-meta-top .meta-menu li.shop{display:none}
  .wb-responsive-menu-wrapper{right:0}
  .header-meta-top .meta-menu{right:54px}
  .warengruppen-item{width:calc((100% - 36px) / 2)}
  .footer-content{flex-direction:column}
  .footer-nav{flex-wrap:wrap}
  .footer-navlist{flex:1 1 40%}
}

/* ------------------------------------------------------------------ *
 * Mobile — mirrors the original's <=768px layout
 * ------------------------------------------------------------------ */
@media (max-width:768px){
  :root{--header-height:93px;--spacing-elements:33px}
  #website{padding-top:86px}
  .container{padding:0 15px 110px}

  /* --- hero --- */
  .hero-slider{margin:0 -15px 300px}
  .hero-slider .swiper-slide img{height:245px;aspect-ratio:auto;object-fit:cover}
  .hero-slider .swiper-button-next,.hero-slider .swiper-button-prev{width:40px;height:40px}
  .hero-slider .swiper-button-prev{left:15px}
  .hero-slider .swiper-button-next{right:15px}
  .hero-slider .content-slide{top:90%;width:calc(100% - 30px);max-width:none;padding:40px 28px 28px}
  .hero-slider .content-slide::before{left:36px;top:-60px}
  .hero-slider .content-slide .h3{font-size:26px;line-height:35px;min-height:0;padding-bottom:30px}

  /* --- headlines --- */
  .container-box-headline{font-size:32px;line-height:40px;margin-bottom:18px}
  .wb-space-30{margin-top:18px}

  /* --- 100% teaser: image on top, white box pulled up under it --- */
  .cp-100-teaser{flex-flow:column nowrap!important;align-items:flex-start;margin-bottom:33px}
  .cp-100-teaser-image{width:calc(100% - 24px)!important;margin:0!important;
    left:0!important;right:0!important;aspect-ratio:1/1}
  .cp-100-teaser-image::before{display:none}
  .cp-100-teaser-content{width:calc(100% - 24px)!important;margin:-60% 0 0 24px;
    padding:65% 28px 28px!important;min-height:0}
  .cp-100-teaser-content .headline{font-size:28px;line-height:34px;margin-bottom:24px}
  .cp-100-teaser-content p{font-size:18px;line-height:28px;margin-bottom:28.5px}

  /* --- products: swipeable carousel --- */
  .warengruppen-teaser{max-width:none;margin:48.75px -15px 33px}
  .warengruppen-teaser .headline.container-box-headline{margin:0 0 18px;padding:0 15px}
  .warengruppen-grid{display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;padding:12px 0;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .warengruppen-grid::-webkit-scrollbar{display:none}
  .warengruppen-item{position:relative;display:block;flex:0 0 254px;width:254px;
    margin:0 12px;min-height:0;overflow:visible;scroll-snap-align:center}
  .warengruppen-item:first-child{margin-left:56px}
  .warengruppen-item:last-child{margin-right:56px}
  .warengruppen-item .image{position:relative;inset:auto;height:380px;overflow:hidden}
  .warengruppen-item .image::before{display:none}
  .warengruppen-item .image::after{height:100%;
    background:linear-gradient(180deg,rgba(var(--secondary-base),0),var(--secondary-color))}
  .warengruppen-item .content{position:static;padding:0}
  .warengruppen-item .content .headline{position:absolute;left:0;right:0;top:294px;z-index:3;
    margin:0;padding:0 24px 48px;font-size:28px;line-height:38px}
  .warengruppen-item .content .description{max-height:none;overflow:visible;margin-top:24px;
    font-size:16px;line-height:26px;color:var(--secondary-color);text-align:center}

  /* --- white frames --- */
  .white-frame{padding:26px 28px;margin-bottom:33px}
  .white-frame .ce-textpic{flex-direction:column!important;gap:18px}
  .white-frame .ce-textpic>*{width:100%!important;flex:1 1 auto!important}
  .white-frame .ce-bodytext .h3{font-size:28px;line-height:34px;margin-bottom:18px}
  .white-frame .ce-bodytext .button{line-height:28px}

  /* --- service teaser: swipeable carousel --- */
  .service-teaser{max-width:none;margin:0 -15px 33px;gap:0;overflow-x:auto;padding:12px 0;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .service-teaser::-webkit-scrollbar{display:none}
  .service-teaser-item{flex:0 0 254px;width:254px;margin:0 12px;scroll-snap-align:center}
  .service-teaser-item:first-child{margin-left:56px}
  .service-teaser-item:last-child{margin-right:56px}
  .service-teaser-item>a{padding:37.5px 18px 69px}
  .service-teaser-item .headline{font-size:24px;line-height:32px}
  .service-teaser-item p{font-size:16px;line-height:26px}

  /* --- footer --- */
  .footer{margin-top:14px}
  .footer-top{gap:40px;padding:27px 20px 20px;margin-bottom:85px}
  .footer-content{flex-direction:column;gap:40px}
  .footer-nav{flex-direction:column;gap:13px}
  .footer-navlist{margin-top:0}
  .footer .headline{font-size:22px;line-height:1.2}
  .opening-hours-box td{font-size:18px;line-height:24px}
  .footer-bottom nav{padding:0 15px}
  .footer-bottom ul{height:auto;flex-direction:column;align-items:flex-start;gap:28px 0;
    padding:37px 0 65px}
  .footer-bottom li:last-child{position:absolute;right:0;bottom:0;margin-left:0}
  .back-to-top{right:0}

  .foldout-menu-wrapper{display:none}
}

@media (max-width:500px){
  .warengruppen-item:first-child,.service-teaser-item:first-child{margin-left:20px}
  .warengruppen-item:last-child,.service-teaser-item:last-child{margin-right:20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}