.ContentLinkList ul{list-style-type: none; margin: 1em -0.5em; padding: 0;display: flex; flex-direction: row; flex-wrap: wrap;align-content: stretch; justify-content: flex-start;align-items: flex-start;}
  
.ContentLinkList ul li{ width: calc(100% /3 - 2em);height: 300px;overflow: hidden;position: relative;background-color: var(--HUSSgelb);background-repeat: no-repeat; background-size: cover; background-position: center center; margin: 1em; 
  box-shadow:var(--boxshadow);
}
.ContentLinkList ul li a {padding: 1em 0;display: block;height: inherit; }
.ContentLinkList figure img{width: 100%; height: auto;z-index: 1;    transition: all .7s ease;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.ContentLinkList figure img{opacity: 0;visibility: hidden;  transition: all .7s ease;transition: transform .5s ease;}
.ContentLinkList figcaption{text-align:center; background-color: var(--HUSSblack50);font-weight: 700;font-size: 1.9em;line-height: 120%;padding:.25em 0;text-transform: uppercase;color: #fff;display: inline-block;position: absolute;bottom: 0;right: 0;left: 0;z-index: 2;}

.ContentLinkList a:hover figcaption{background-color: var(--HUSSgelb)}

/*Für die Startseite wat anderes :)*/
.layout-1 .ContentLinkList a:hover img{opacity: 1;visibility: visible; transition: all .7s ease; }
.layout-1 .ContentLinkList li a:hover {background: var(--HUSSgelb); transition: all .7s ease;}
.layout-1 .ContentLinkList a:hover figcaption{background-color: rgba(0, 0, 0, 0.125);}

  
@media screen and (max-width:1040px ) {
  .ContentLinkList ul li{ width: calc(100%/2 - 2em);} 
  .ContentLinkList figcaption {font-size: 1.5em; }  }
@media screen and (max-width:760px ) {.ContentLinkList ul li{ width: 100%;}}




/*The Gallery Stuff*/
.ContentMultimedia,
.gallerybox {overflow-x:hidden}
.gallerybox .banner-container{display: block;position: fixed;z-index: 5000; top: 150px; left: 0;right: 0;opacity: 0; visibility: hidden; height:0}

.gallerybox .label.banner-check{ height: inherit;width: auto;display: block;cursor: pointer}

.gallerybox input{display: none}  
.gallerybox input[type="radio"]:checked ~ section{opacity: 1; visibility: visible; height:auto;}

.gallerybox .uncheck    {/*position: absolute; top:0;right:0;*/ background-color: #fff; border:0; color:transparent;cursor: pointer; /*height: 100%;max-width: 1340px;width: 100%; */    display: block;
  width: 25px;
  height: 25px;
  float: right; z-index: 100;
  position: relative;}
.gallerybox .uncheck svg{color: transparent; width: 25px;height: 25px; /*position: absolute;top: 1em; right: 2em;*/z-index:600} 
.gallerybox .uncheck svg:hover{stroke:var(--HUSSgelb) }

.gallerybox ul    {list-style-type: none; margin: 1em -0.95em; padding: 0;display: flex; flex-direction: row; flex-wrap: wrap;align-content: stretch; justify-content: flex-start;align-items: flex-start;}
.gallerybox ul li {width: calc(100% /3 - 2em); margin: 1em;height: 300px;box-shadow:var(--boxshadow); height:300px;position: relative; background-color: #fff;background-repeat:no-repeat; background-size: cover; background-position: center ;
  margin:.75em;
}
 
.gallerybox ul li a {padding: 1em 0;display: block;height: inherit; }
.gallerybox figcaption,
.gallerybox .galtitle{text-align:center; background-color: var(--HUSSblack50);font-weight: 700;font-size: 1.135em;line-height: 160%;padding:.5em 0;text-transform: uppercase;color: #fff;display: inline-block;position: absolute;bottom: 0;right: 0;left: 0;z-index: 2;display: block}
   
.gallerybox a:hover figcaption,
.gallerybox li:hover figcaption,
.gallerybox a:hover .galtitle,
.gallerybox li:hover .galtitle {background-color: var(--HUSSgelb); cursor: pointer}
.gallerybox li:hover{cursor: pointer}
 
 
.gallerybox .banner-container {text-align: end; width: 100%; max-width: 1230px;margin: 0 auto;background: white;padding: 2em; /*padding-top:.75em */}
.gallerybox .banner-container img,
.gallerybox .banner-container video {max-width: 100%;}

  
.gallerybox .banner-slider .slider.slider-for {max-width: 84%; padding-right: 2em;}
.gallerybox .banner-slider .slider.slider-nav {max-width: 10%;}
.gallerybox .banner-slider .slider.slider-for,
.gallerybox .banner-slider .slider.slider-nav {width: 100%;float: left;}
.gallerybox .banner-slider .slider.slider-nav {height: 610px;overflow: hidden;}

.gallerybox .slider-banner-image {height: 610px;}
.gallerybox .banner-slider .slider.slider-nav {padding: 0;}
.gallerybox .slider-nav .slick-slide.thumbnail-image .thumbImg{ max-width: 100px;height: 75px;margin: 0 auto;border: 1px solid #fff;}
.gallerybox .slider-banner-image img,
.gallerybox .slider-nav .slick-slide.thumbnail-image .thumbImg img,
.gallerybox .slider-banner-image video,
.gallerybox .slider-nav .slick-slide.thumbnail-image .thumbImg video{ height: 100%;width:100%;object-fit: cover; }
.gallerybox .slider-banner-image video{object-fit: cover; }
.gallerybox .banner-container video{height: auto}

/* #HUSS-19 .banner-container.lc31 video{height: 100%}*/
 
.gallerybox .slick-vertical .slick-slide:active,
.gallerybox .slick-vertical .slick-slide:focus,
.gallerybox .slick-arrow:hover,
.gallerybox .slick-arrow:focus { border: 0;outline: 0;color:var(--HUSSgelb)}
 
.gallerybox .slider-nav .slick-slide.slick-current.thumbnail-image .thumbImg { border: 2px solid var(--HUSSgelb);}
.gallerybox .slider-nav .slick-slide {text-align: center;}
.gallerybox .slick-arrow { width: 100%;background: transparent; border: 0;font-size: 0;height: 20px;position: absolute;left: 0;right: 0;z-index: 99;
      -webkit-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg);-ms-transform: translateY(-50%) rotate(90deg);transform: translateY(-50%) rotate(90deg);}
.gallerybox .slick-prev {top: 10px;}
.gallerybox .slick-next {bottom: -10px;top:unset; }
.gallerybox .slick-prev:before,
.gallerybox .slick-next:before {font-family:unset; font-size: 20px;line-height: 1;opacity: 1;color: #fff;}
.gallerybox .slider.slider-nav.thumb-image:hover{cursor: pointer} 
 
/* .gallerybox .banner-container video,
 .gallerybox .slider-banner-image video{width: auto; max-width: 950px; height:100%}*/
 
/*Extra Title für ServiceBoxen*/
#HUSS-6 .gallerybox figcaption{background-color: var(--HUSSblack30);font-size: 1.9em;line-height: 120%;}
#HUSS-6 .gallerybox figcaption:hover,
#HUSS-6 .gallerybox li label:hover figcaption{background-color: var(--HUSSgelb)}
  
@media screen and (max-width : 991px) {
 .gallerybox .banner-slider .slider.slider-for,
 .gallerybox .banner-slider .slider.slider-nav {max-width: 100%;float: none; }
 .gallerybox .banner-slider .slider.slider-for {padding-right: 0;}
 .gallerybox .banner-slider .slider.slider-nav { height: auto;}
 .gallerybox .slider-banner-image {height: 500px; } 
 .gallerybox .slider.slider-nav.thumb-image { padding: 10px 30px 0;}
 .gallerybox .slick-arrow {padding: 0; width: 30px; height: 30px;top: 50%;bottom: 0;}
 .gallerybox .slick-prev {left: 0;right: unset;background-color: rgba(0, 0, 0, 0.063);   -webkit-transform: translateY(-50%) rotate(0);
    -moz-transform: translateY(-50%) rotate(0);
    -ms-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);}
 
 
 .gallerybox .slick-next { left: unset;right: 0;background-color: rgba(0, 0, 0, 0.063);    
   -webkit-transform: translateY(-50%) rotate(0);
   -moz-transform: translateY(-50%) rotate(0);
   -ms-transform: translateY(-50%) rotate(0);
   transform: translateY(-50%) rotate(0);}
 
 .gallerybox .slider.slider-nav.thumb-image {white-space: nowrap;}
 .gallerybox .thumbnail-image.slick-slide { padding: 0px 5px; min-width: 75px; display: inline-block;float: none;}
 
 .gallerybox .uncheck svg{width: 15px;height: 15px;top: 0; right: 1em;} 

}
@media screen and (max-width:960px ) {.gallerybox ul li{ width: calc(100% /2 - 2em);}

.gallerybox .banner-container {top:70px; padding-left:1em; padding-right:1em}
.gallerybox .uncheck {right:1em}
.gallerybox .uncheck {position: absolute;right: 1em;}

}
  
@media screen and (max-width : 767px) {
 .gallerybox .slider-banner-image {height: 400px; }
 .gallerybox .slider.slider-nav.thumb-image {padding: 0px 20px 0;margin: 10px 0px 0;}
 .gallerybox .slider-nav .slick-slide.thumbnail-image .thumbImg {max-width: 140px;height: auto;}
}
@media screen and (max-width:580px) { .gallerybox .slider-banner-image {height:340px;}}
@media screen and (max-width:530px) { .gallerybox ul li {width: 100%;}}  
@media screen and (max-width:480px) { .gallerybox .slider-banner-image {height:280px;}}
@media screen and (max-width:425px) { .gallerybox .banner-container {top:60px}}


@media (max-height: 830px) {.gallerybox .banner-container{top: 100px;}}


@media (min-width:1000px ) and (max-height: 777px) {
  .gallerybox .banner-container {height: 84vh !important;  padding-top:2em}
  .gallerybox .slider-banner-image {
      height: 75vh;
  }
  .gallerybox .banner-container video {
      height: 100%;
      width: auto;
  }
  .gallerybox .slider-banner-image video {
      object-fit: contain;
  }
  .gallerybox .slider-banner-image img {
      height: 100%;
      width: auto;
      object-fit: contain;
  }
  .gallerybox .slider-banner-image img{display: initial}

}

@media (min-width:1000px )  and (max-height: 640px) {
  .gallerybox .banner-container {height:100%; top:80px; padding-top:2em}
  .gallerybox .uncheck svg {top: 0.75em;}
}



.frame-type-mask_content_textmedia  {background-repeat: no-repeat;padding: 0}

.contentwidth100 {width: 100%; }
.contentwidth60  {width: calc(100% /1.5 ); }
.contentwidth50  {width: calc(100% /2 - 1em); }
.contentwidth30  {width: calc(100% /3 - 1em); }

.imgorient-25 .contentwidth60{float: left}
.imgorient-25 .contentwidth50{float: left}
.imgorient-25 .contentwidth30{float: left}

.imgorient-26 .contentwidth60{float: right}
.imgorient-26 .contentwidth50{float: right}
.imgorient-26 .contentwidth30{float: right}

.content  {position: relative; z-index:1}
.bg-image {width: -webkit-fill-available; background: transparent; height: 100%;  height: 550px; position: absolute; background-repeat: no-repeat; z-index: 0; opacity: .4}

.imgorient-26 .bg-image     {right: 0}
.imgorient-26 .image        {width: auto; overflow: hidden }
.imgorient-26 .image figure {padding-right: 1em; margin-bottom: 1em}
.imgorient-26 .image img    {width: 100%; height: auto}

.imgorient-8 .image        {width: auto; overflow: hidden }
.imgorient-8 .image figure {padding-right: 1em; margin-bottom: 1em; text-align: center}
.imgorient-8 .image img    {/*width: 100%; */height: auto}

@media screen and (max-width:900px ) { .contentwidth60  {width: 94%; }}
@media screen and (max-width:600px ) { .large-indent    {margin-left: 0}}

/*Infobox Technical Data*/
.ContentInfoBox                   {background: transparent}
.ContentInfoBox table             {/*width: 100%;*/font-size: 1.55rem; border-collapse: collapse;overflow: hidden;text-align: left;margin-top: 1em;margin-bottom: 1em;} 
.ContentInfoBox caption           {text-align: left; font-weight: 700; text-transform: uppercase; font-size: 1.55rem; font-family: var(--FontFamily);padding: 0 0 1em 0; margin: 0}
.ContentInfoBox table td          {background-color: transparent;font-weight: 300; font-family: var(--FontFamily);padding: .125em 3em; padding-left:0}
.ContentInfoBox table td:nth-child(2){padding-right:0}
.ContentInfoBox table tr:hover td {background-color: var(--HUSSblack10)}

@media screen and (max-width:800px ) {.ContentInfoBox table td {padding-right: 1em}}
@media screen and (max-width:570px ) {
  .ContentInfoBox table td {padding-right: 0;width: 100%;float: left;font-weight: 500}
  .ContentInfoBox table td:nth-child(2) {padding-bottom: .25em; font-weight: 300; border-bottom: 1px solid grey}
}
/*Infobox - Icons*/
ul.icons {margin:3em 0;display: flex;justify-content: flex-start;align-content: center;flex-wrap: nowrap;flex-direction: row;align-items: flex-start;}

ul.icons li{margin-right: 1em}
ul.icons li span{display: block;width: 150px; height: 150px; background-color:transparent; overflow: hidden; color: transparent; background-repeat: no-repeat; background-position: center; background-size: 80%}