/* CSS Document 
Theme Name: Sunvero
Author: EDB
Version: 1.0
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}
@font-face {    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.eot');
    src: url('fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Light.woff2') format('woff2'),
        url('fonts/Montserrat-Light.woff') format('woff'),
        url('fonts/Montserrat-Light.ttf') format('truetype'),
        url('fonts/Montserrat-Light.svg#Montserrat-Light') format('svg');
    font-weight: 300;     font-style: normal;}
@font-face {    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Medium.eot');
    src: url('fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Medium.woff2') format('woff2'),
        url('fonts/Montserrat-Medium.woff') format('woff'),
        url('fonts/Montserrat-Medium.ttf') format('truetype'),
        url('fonts/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
    font-weight: 500;    font-style: normal;}
@font-face {    font-family: 'Montserrat';
    src: url('fonts/Montserrat-SemiBold.eot');
    src: url('fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('fonts/Montserrat-SemiBold.woff') format('woff'),
        url('fonts/Montserrat-SemiBold.ttf') format('truetype'),
        url('fonts/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg');
    font-weight: 600;    font-style: normal;}
@font-face {    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.eot');
    src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Regular.woff2') format('woff2'),
        url('fonts/Montserrat-Regular.woff') format('woff'),
        url('fonts/Montserrat-Regular.ttf') format('truetype'),
        url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;    font-style: normal;}


html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Montserrat'; font-size:17px; font-weight: 400; color: #2a3a44;  width: 100%; font-variant-ligatures: none; }
*{box-sizing: border-box;}
.text-center{text-align: center;}
.text-right{text-align: left;}
.text-left{text-align: left;}
.clear{clear: both;}
figure{width: 100%; height: auto; position: relative; display: inline-block; text-align: center;}
strong{font-weight: 700;}
p{margin-bottom: 15px; line-height: 1.6em; text-align: left;}
a{cursor: pointer; text-decoration: none;}
h1{font-size: 2.5em; font-weight: 300; margin-bottom: 30px;}
h1 strong{font-weight: 500;}
h2{font-size: 1.7em; font-weight: 600; margin-bottom: 20px;}
.product-slider h2{font-size: 1.9em; font-weight: 600; text-align: center; margin-bottom: 20px; text-transform: uppercase;}

.row, 
main .wp-block-group, 
footer .wp-block-group,
main .content-left,
main .content-right{width: 100%; margin: 0 auto; padding: 0 10px; position: relative;}
main, 
footer{width: 100%; margin: 0 auto; padding: 0; position: relative;}
[class*='col-']{padding: 0 0px 20px 0; margin: 0; width: 100%; float: none;}



/* HEADER & FOOTER*/
header{position: relative; width: 100%; display: inline-block;} 
header .header-container{width: 100%; height: auto; position: fixed; display: inline-block; padding: 10px 0; background: #fff; box-shadow: 0 8px 8px -4px #2a3a44; z-index: 1000; top: 0; left: 0; right: 0;}
header .logo{width: 25%; height: auto; display: inline-block; float: left; text-align: left; padding-left: 10%;}
header .logo img{width: 90%; height: auto;}

/* Header Startseite */
.hero-time{  width: 100%;  background-position: center;  background-repeat: no-repeat;  background-size: cover;  min-height: 50vh;  position: relative;   display: grid;  place-items: center;}

@media (min-width: 600px){  
	.hero-time{    height: 100vh;    min-height: 100vh;  }
}

.hero-time__inner{  padding: 2rem;  color: #fff;  text-align: center;  text-shadow: 0 2px 10px rgba(0,0,0,.4);}

.hero-time__logo{
  position: absolute;
  left: 2rem;
  bottom: 2rem;

  --logo-h: clamp(60px, 12vh, 180px);
  --logo-pad: clamp(10px, 1.8vw, 22px);
  --panel-bg: rgba(0,0,0,.55);
  --panel-radius: 16px;

  inline-size: calc( (var(--logo-h) * var(--logo-ar)) + (2 * var(--logo-pad)) );
  block-size:  calc( var(--logo-h) + (2 * var(--logo-pad)) );

  transform-origin: left bottom;
  transform: scale(var(--logo-scale, 1));

  background: none;
  pointer-events: none;
  z-index: 2;
}

.hero-time__logo::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  z-index: 1;
}

.hero-time__logo::after{
  content: "";
  position: absolute;
  inset: var(--logo-pad);

  background-image: var(--logo-image);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  z-index: 2;
}

@media (max-width: 599px){
  .hero-time__logo{ display: none; }
}


@media (max-width: 700px){
  header .logo{ width: 40%; padding: 8px 0; }
  .mobile_menu_button{ padding: 16px; }
  .wrap{ padding-top: 70px; } 
}


/* Partner */
.partners--marquee{
  --viewport-w: 60%;
  --marquee-gap: clamp(16px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  padding: 16px 0;
}

.partners--marquee .partners__viewport{
  width: var(--viewport-w);
  margin: 0 auto;  
  overflow: hidden;
}

.partners--marquee .partners__track{
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  will-change: transform;
}

.partners__logo,
.partners_logo{
  width: 200px;
  height: 100px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  line-height: 0;
  -webkit-filter: grayscale(100%) contrast(1.05);
  filter: grayscale(100%) contrast(1.05);
  transition: filter .35s ease, -webkit-filter .35s ease;
}
.partners__logo:hover,
.partners__logo:focus-visible,
.partners_logo:hover,
.partners_logo:focus-visible{
  -webkit-filter: none;
  filter: none;
}

@media (max-width: 700px){
  .partners--marquee{ --viewport-w: 100%; }
}

@media (max-width: 480px){
  .partners__logo,
  .partners_logo{
    width: 45vw;
    height: calc(45vw * 0.5);
  }
}



footer{border-bottom:20px solid #2a3a44;}

footer .footer-big h3{font-size: 1.9em;}
footer .footer-big p strong{font-size: 1.6em;}
footer a{color: #ba481c}
footer .footer-big .wp-block-button a{  display: inline-block;  padding: 15px 60px 15px 20px;  background:url(images/icon_contact.png) #d96225 no-repeat right 5px center; color: #fff; border-radius: 15px;}
footer .footer-big .wp-block-button:hover a{background:url(images/icon_contact.png) #bb491c no-repeat right 5px center;}


footer ul.menu{margin-left: 15px; list-style: none;}
footer ul.menu li a{color: #2a3a44; text-decoration: none; margin-bottom: 7px; display: inline-block;}
footer ul.menu li:hover a, 
footer ul.menu li.current-menu-item a{color: #ba481c;}

footer .menu-footer-hauptmenue-container ul.menu li a{font-size: 1.4em; position: relative; width: 100%;}
footer .menu-footer-hauptmenue-container ul li:hover a, footer .menu-footer-hauptmenue-container ul.menu li.current-menu-item a{background:url(images/icon_nav-foot_arrow.png) center right no-repeat;}

footer .menu-footer-rechtlich-container ul.menu{padding-top: 30px;}
footer .menu-footer-rechtlich-container ul.menu li{float: left; font-weight: 600; padding: 0 10px; border-left: 2px solid #2a3a44;}
footer .menu-footer-rechtlich-container ul.menu li:first-child{padding-left: 0; border-left: none;}


/* NAVIGATION */

.main-navigation {  color: #2a3a44;  font-weight: 600;  display: none;  flex-direction: column;  padding: 30px 10px 10px 10px;}
.main-navigation.menu-open {  display: flex;}
.main-navigation ul {  list-style: none;  padding: 0;  margin: 0;}
.main-navigation li {  position: relative;  width: 100%;}
.main-navigation li a,
.main-navigation li button {  display: inline-block;  padding: 15px 20px;  color: #2a3a44;  text-decoration: none;  font-size: 1.0em;  background: none;  border: none;  width: 100%;  text-align: left;    letter-spacing: 0.05em;}
.main-navigation li.menu-item-has-children > a::after {  content: '+';  float: right;  color: #d96225;  font-weight: bold;padding-left: 10px;}
.main-navigation li.menu-item-has-children.active > a::after {  content: '-';}
.main-navigation .sub-menu {  display: none;  background-color: #fff;  padding: 0;}
.main-navigation .menu-item-has-children.active > .sub-menu {  display: block;}
.main-navigation li a:focus,
.main-navigation li button:focus {  outline: 3px solid #bb491c;}
.main-navigation li a:hover,
.main-navigation li a.active,
.main-navigation li button:hover {  background: #bb491c;  color: #fff;}
.main-navigation .current-menu-ancestor > a {  color: #bb491c;  background: none;}
.main-navigation .current-menu-item > a {  color: #bb491c;  background-color: #f0f0f0;}
.main-navigation li .sub-menu li a{color: #bb491c;}
.main-navigation li .sub-menu li a:hover{background: #bb491c;  color: #fff;}
.mobile_menu_button {  display: flex;  background: #d96225; color: #fff;  border: none;  padding: 20px;  cursor: pointer;  align-items: center;  z-index: 9999;  position: relative; float: right;}
.menu-icon {  display: flex;  flex-direction: column;  gap: 5px;  margin-right: 10px;}
.menu-icon div {  width: 25px;  height: 3px;  background: #fff;}

.main-navigation li.button-contact a{  display: inline-block;  padding: 15px 60px 15px 10px;  background:url(images/icon_contact.png) #d96225 no-repeat right 5px center; color: #fff; border-radius: 15px; margin-left: 5px;}
.main-navigation li.button-contact:hover a{background:url(images/icon_contact.png) #bb491c no-repeat right 5px center;}


.no-scroll {  overflow: hidden;}

@media (min-width: 1070px) {
  .mobile_menu_button {    display: none;  }
  .main-navigation {    display: flex !important;    flex-direction: row;    justify-content: flex-start;    align-items: center;  }
  .main-navigation ul {    flex-direction: row;    display: flex;    width: 100%;  }
  .main-navigation li {    width: auto;  }
  .main-navigation .sub-menu {    position: absolute;    top: 100%;    left: 0;    min-width: 230px;    background: #fff;    display: none;    z-index: 1000;  }
  .main-navigation li:hover > .sub-menu {    display: block;  }
	header .logo{width: 35%;}
}

/* CONTENT */
.wrap{width: 100%; height: auto; position: relative; clear: both; padding-top: 90px;}
.wrap .wp-block-image.is-style-rounded img, 
.wrap .wp-block-image .is-style-rounded img {    border-radius: 50px;}

main .wp-block-group.alignfull h3{font-size: 1.6em;}
main p{margin-bottom: 20px; line-height: 1.8em;}
main a{color: #bb491c; text-decoration: none;}

main ul{list-style: circle; margin-left: 15px; margin-bottom: 30px;}
main ul li{margin-bottom: 10px;line-height: 1.8em;}

main .wp-block-image.icon{display: inline-block;     text-align: right;    width: 100%;    position: relative;    margin: -130px -10px 0;}
main .wp-block-image.icon figure{display: inline-block;    width: 100px;}

main .wp-block-buttons .wp-block-button.adress .wp-block-button__link{margin-top: -130px;    z-index: 3;    position: relative;}
main .wp-block-buttons .wp-block-button__link:hover{background: #da4104 !important; color: #fff !important;}


main .content-left figure{position: relative;}
main .content-left figure::before{position: absolute; background: #ba481c; width: 80%; height: 20px; display: block; top: -20px; right: 0; content: "";}
body.home.page-id-7 main .content-left figure::before{bottom: -16px; top: inherit; right: 0; content: "";}

main .content-right figure{position: relative;}
main .content-right figure::before{position: absolute; background: #ba481c; width: 80%; height: 20px; display: block; top: -20px; left: 0; content: "";}



/* FORMULAR */
form{margin-top: 30px;}
form fieldset.daten {width: 99%; clear: none; padding: 0 10px 10px 10px; border: 1px solid rgba(162,162,162,0.30); margin-bottom: 20px; float: left; margin-right: 1%;}
form fieldset legend {width: 100%; clear: both; margin-bottom: 20px; font-size: 1.15em; color: #bb491c; font-weight: 600;}
form fieldset.full {float: left; clear: none; padding: 0 10px 10px 10px; border: 1px solid rgba(162,162,162,0.30); margin-bottom: 20px; margin-right: 1%; width: 100%;}
form fieldset.full label{float: left; margin-right: 30px;}
form fieldset.daten span.data{width: auto; display: block; float: left; margin-right: 10px;}
form fieldset.daten span.wpcf7-form-control-wrap input, 
form fieldset.full span.wpcf7-form-control-wrap input{width: 250px;}

form fieldset.full textarea{width: 100%;}
form input.send{display: inline-block; padding: 20px 30px; background: #d96225; color: #fff; border: none; font-size: 1.1em; font-weight: 600; border-radius: 30px;}
form p.hinweis{margin: 20px 0 50px 0;}
form .wpcf7-form-control.wpcf7-radio{padding: 20px 0; display: inline-block;}
form .wpcf7-form-control.wpcf7-radio span.first{margin-left: 0;}


/* Overlay-Navigation im Header */
.hero-nav{  position: fixed;  top: 0;  left: 0;  right: 0;  display: none;   padding: 12px 0;  z-index: 1500;  background: transparent;  pointer-events: auto; }

.is-hero .hero-nav{  display: flex;  justify-content: center;}

.hero-nav .hero-menu{  list-style: none;  margin: 0;  padding: 0 16px;  display: flex;  gap: 6px;  align-items: center;  justify-content: center;  flex-wrap: wrap;}

.hero-nav .hero-menu > li{  display: inline-block;}

.hero-nav .hero-menu a{font-size: 1.3em;  display: block;  text-decoration: none;  font-weight: 600;  padding: 10px 14px;  color: #fff;    text-shadow: 0 2px 8px rgba(0,0,0,.85);  border-radius: 4px;}
.hero-nav .hero-menu a:hover,
.hero-nav .hero-menu .current-menu-item > a{  background: rgba(55,55,55,.25);}

.hero-nav .sub-menu{  display: none;  position: absolute;  margin-top: 8px;  background: rgba(0,0,0,.45);  padding: 6px 0;  border-radius: 6px;  backdrop-filter: blur(4px);}
.hero-nav li:hover > .sub-menu{ display: block; }
.hero-nav .sub-menu a{ white-space: nowrap; }

.hero-nav .hero-menu li.button-contact a{  display: inline-block;  padding: 15px 60px 15px 20px;  background:url(images/icon_contact.png) #d96225 no-repeat right 5px center; color: #fff; border-radius: 15px;}
.hero-nav .hero-menu li.button-contact:hover a{background:url(images/icon_contact.png) #bb491c no-repeat right 5px center;}

header .header-container{ z-index: 4000; }
.hero-nav{ z-index: 3500; }   /* Desktop-Overlay-Navi */
.hero-time{ position: relative; z-index: 0; } /* Hero liegt bewusst darunter */


/* Wechsel zwischen Overlay und weißer Leiste */
.is-hero header .header-container{  display: none !important;}

@media screen and (max-width: 530px){
body{	font-size:16px;}
h1{font-size: 2.4em;margin-bottom: 20px;}
h2{font-size: 1.7em; margin-bottom: 10px;}
}
@media screen and (min-width: 700px){
	header .logo{padding: 10px 0; width: 30%;}
.wrap {padding-top: 20px;}
	
	form fieldset.daten span.data{float: none;} 
form fieldset.daten {width: 49%; clear: none; padding: 0 10px 10px 10px; border: 1px solid rgba(162,162,162,0.30); margin-bottom: 20px; float: left; margin-right: 1%;}
form fieldset.daten span.wpcf7-form-control-wrap input, 
	form fieldset.full span.wpcf7-form-control-wrap input{width: 250px;}
}

@media screen and (max-width: 800px){
.wrap {padding-top: 70px;}
}

@media (max-width: 1070px){
  .hero-nav{ display: none !important; }
	.is-hero header .header-container{ display: inline-block !important; }
}

/* Nur ab 851px (Desktop) die weiße Leiste ausblenden, solange der Hero sichtbar ist */
@media (min-width: 1071px){
  .is-hero header .header-container{ display: none !important; }
}

@media screen and (max-width: 1070px){
.wrap main .space{height: 300px;}
}
@media screen and (min-width: 1510px){
.row, 
main .wp-block-group, 
footer .wp-block-group,
main .content-left,
main .content-right, main .content{width: 1500px; margin: 0 auto;}
	header .logo{width: 20%;}
	.main-navigation li a,.main-navigation li button {  padding: 15px 17px;  font-size: 1.1em; letter-spacing: 0em;}
}

@media screen and (max-width: 1450px){
	header .logo{width: 20%;}
	.main-navigation li a,.main-navigation li button {  padding: 15px 17px;  font-size: 1.1em; letter-spacing: 0em;}
	.hero-nav .hero-menu a{font-size: 1.2em;  padding: 10px 14px;  color: #fff;}
}
@media screen and (max-width: 1400px){
	header .logo{width: 20%;}
	.main-navigation li a,.main-navigation li button {  padding: 15px 15px;  font-size: 1.1em; letter-spacing: 0em;}
	.hero-nav .hero-menu a{font-size: 1.2em;  padding: 10px 10px;  color: #fff;}
}

@media screen and (max-width: 1350px){
	header .logo{width: 17%;}
	.main-navigation li a,.main-navigation li button {  padding: 15px 10px;  font-size: 1.0em; letter-spacing: 0em;}
	.hero-nav .hero-menu a{font-size: 1.2em;  padding: 10px 10px;  color: #fff;}
}
@media screen and (max-width: 1260px){
.main-navigation li a,.main-navigation li button {  padding: 10px 15px;  font-size: 1.0em; letter-spacing: 0em;}
	.main-navigation li.button-contact a{padding: 10px 60px 10px 20px;}
	.hero-nav .hero-menu a{font-size: 1.1em;  padding: 10px 14px;  color: #fff;}
}

@media screen and (max-width: 1220px){
main .wp-block-group.alignfull{width: 100%; padding: 0;} 
.wrap main .space{height: 550px; }
}

@media screen and (max-width: 1185px){
.main-navigation li a,.main-navigation li button {  padding: 10px 10px;  font-size: 1em; letter-spacing: 0em;}
	.main-navigation li.button-contact a{padding: 10px 60px 10px 20px;}
	.hero-nav .hero-menu a{font-size: 1.1em;  padding: 10px 5px;  color: #fff;}
	
	footer .footer-big h3{font-size: 1.3em;}
footer .footer-big p strong{font-size: 1.1em;}
} 

@media screen and (max-width: 1120px){
.main-navigation li a,.main-navigation li button {  padding: 10px 7px;  font-size: 1em; letter-spacing: 0em;}

}

@media screen and (max-width: 1070px){
header .logo{width: 35%;}

}

@media (prefers-reduced-motion: reduce) {
	.js .reveal {opacity: 1 !important; transform: none !important; transition: none !important; }
}


.js:not(.reveal-ready) .reveal {  opacity: 1 !important;  transform: none !important;}

/* ================================
   Galerie 
   ================================ */

:root{
  --gal-circle-size: clamp(64px, 9vmin, 112px);
  --gal-circle-bg: rgba(0,0,0,.8);
  --gal-circle-border: rgba(220,53,69,.6);
}


.wp-block-gallery .wp-block-image,
.gallery-hover .wp-block-image,
.blocks-gallery-grid .blocks-gallery-item,
.gallery .gallery-item {
  position: relative;   
}

.wp-block-gallery .wp-block-image::before,
.gallery-hover .wp-block-image::before,
.blocks-gallery-grid .blocks-gallery-item::before,
.gallery .gallery-item::before {
  content:"";
  position:absolute;
  left:50%; top:50%;
  width: var(--gal-circle-size);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.9);
  border-radius: 50%;
  background: var(--gal-circle-bg);
  border: 3px solid var(--gal-circle-border);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;   
  box-shadow: 0 0 0 0 rgba(220,53,69,.35);
  z-index: 3;         
}


.wp-block-gallery .wp-block-image::after,
.gallery-hover .wp-block-image::after,
.blocks-gallery-grid .blocks-gallery-item::after,
.gallery .gallery-item::after {
  content:"+";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: calc(var(--gal-circle-size) * .38);
  color:#fff;
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  z-index: 4;  
}

.wp-block-gallery .wp-block-image:hover::before,
.wp-block-gallery .wp-block-image:hover::after,
.wp-block-gallery .wp-block-image a:focus-visible::before,
.wp-block-gallery .wp-block-image a:focus-visible::after,
.gallery-hover .wp-block-image:hover::before,
.gallery-hover .wp-block-image:hover::after,
.gallery-hover .wp-block-image a:focus-visible::before,
.gallery-hover .wp-block-image a:focus-visible::after,
.blocks-gallery-grid .blocks-gallery-item:hover::before,
.blocks-gallery-grid .blocks-gallery-item:hover::after,
.blocks-gallery-grid .blocks-gallery-item a:focus-visible::before,
.blocks-gallery-grid .blocks-gallery-item a:focus-visible::after,
.gallery .gallery-item:hover::before,
.gallery .gallery-item:hover::after,
.gallery .gallery-item a:focus-visible::before,
.gallery .gallery-item a:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: gal-pulse 1.4s ease-out infinite;
}


@keyframes gal-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(220,53,69,.35); }
  70%  { box-shadow: 0 0 0 12px rgba(220,53,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}


@media (prefers-reduced-motion: reduce){
  .wp-block-gallery .wp-block-image::before,
  .gallery-hover .wp-block-image::before,
  .blocks-gallery-grid .blocks-gallery-item::before,
  .gallery .gallery-item::before { animation: none !important; transition: none !important; }
  .wp-block-gallery .wp-block-image::after,
  .gallery-hover .wp-block-image::after,
  .blocks-gallery-grid .blocks-gallery-item::after,
  .gallery .gallery-item::after { transition: none !important; }
}



/* =========================
   Produktslider
   ========================= */

.product-slider{
  position: relative;
  width: 100%;
  padding: 1.5rem 0;
  margin-bottom: 50px;
  --viewport-w: 90%;
  --arrow-inset: 8px;
}

.product-slider__viewport{
  position: relative;
  overflow: hidden;
  width: var(--viewport-w);
  margin: 0 auto;
}

.product-slider__track{
  display: flex;
  gap: 50px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pslide{
  flex: 0 0 auto;
  width: 400px;
  height: 500px;
  background-image: var(--pslide-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  overflow: hidden;
  z-index: 0;
}

.pslide::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.7);
  opacity: 1;
  transition: opacity .25s ease;
  z-index: 1;
  pointer-events: none;
}
.pslide:hover::before,
.pslide:focus-within::before{ opacity: 0; }

.pslide__link{
  position: absolute;
  inset: 0;
  display: block;
  outline: 0;
  overflow: visible;
  z-index: 2;
}
.pslide__title{
  position: absolute;
  left: 20px;
  bottom: 50px;
  max-width: calc(100% - 40px);
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  font-size: 1.2em;
  z-index: 4;
}
.pslide:hover .pslide__title{ display: none; }

.product-slider__controls{
  position: static;
  width: 100%;
  margin: 0;
  height: 0;
  pointer-events: none; 
}

.product-slider__btn{
  position: absolute;      
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  appearance: none;
  cursor: pointer;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  display: grid;
  place-items: center;

  background: rgba(0,0,0,.55);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.65);
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
  pointer-events: auto;
}
.product-slider__btn:hover{ transform: translateY(-50%) scale(1.04); background: rgba(0,0,0,.7); }
.product-slider__btn:focus-visible{ outline: 3px solid #bb491c; outline-offset: 3px; }
.product-slider__btn[aria-disabled="true"]{ opacity: .45; pointer-events: none; }

.product-slider__btn--prev{ left:  var(--arrow-inset); }
.product-slider__btn--next{ right: var(--arrow-inset); }

.product-slider__controls > .product-slider__btn:first-of-type{ left:  var(--arrow-inset); }
.product-slider__controls > .product-slider__btn:last-of-type { right: var(--arrow-inset); }

.product-slider__btn::before{
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.product-slider__btn--prev::before,
.product-slider__controls > .product-slider__btn:first-of-type::before{
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path d="M14.5 4.5L7.5 12l7 7.5" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
}

.product-slider__btn--next::before,
.product-slider__controls > .product-slider__btn:last-of-type::before{
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
  <path d="M9.5 4.5l7 7.5-7 7.5" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
}

@media (max-width: 920px){
  .pslide{
    width: clamp(260px, 60vw, 360px);
    height: clamp(340px, 80vw, 460px);
  }
  .product-slider{
    --viewport-w: 94%;
    --arrow-inset: 4px;
  }
  .product-slider__track{ gap: 24px; }
  .product-slider__btn{ width: 56px; height: 56px; }
  .product-slider__btn::before{ width: 24px; height: 24px; }
}
@media (max-width: 600px){
  .product-slider{ --viewport-w: 96%; }
}

:root{
  --gal-circle-size: clamp(64px, 9vmin, 112px);
  --gal-circle-bg: rgba(0,0,0,.8);
  --gal-circle-border: rgba(220,53,69,.6);
}

.pslide__link::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: var(--gal-circle-size);
  aspect-ratio: 1 / 1;
  height: auto;
  transform: translate(-50%, -50%) scale(.9);
  border-radius: 50%;
  background: var(--gal-circle-bg);
  border: 10px solid var(--gal-circle-border);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(220,53,69,.35);
  z-index: 3;
}
.pslide__link::after{
  content: "+";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: calc(var(--gal-circle-size) * 0.50);
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.50);
  z-index: 4;
}
.pslide__link:hover::before,
.pslide__link:focus-visible::before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: gal-pulse 1.4s ease-out infinite;
}
.pslide__link:hover::after,
.pslide__link:focus-visible::after{ opacity: 1; }

@keyframes gal-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(220,53,69,.35); }
  70%  { box-shadow: 0 0 0 12px rgba(220,53,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}
@media (prefers-reduced-motion: reduce){
  .pslide__link::before{ animation: none !important; transition: none !important; }
  .pslide__link::after{ transition: none !important; }
}



/* Grundlayout der Logos (aus deiner bestehenden Lösung) 
.partners{
  display: block; 
  padding: 16px 0;
}
.partners__logo,
.partners_logo{
  width: 200px;
  height: 100px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  line-height: 0;
  -webkit-filter: grayscale(100%) contrast(1.05);
  filter: grayscale(100%) contrast(1.05);
  transition: filter .35s ease, -webkit-filter .35s ease;
  margin-right: clamp(16px, 3vw, 40px); 
}
.partners__logo:hover,
.partners__logo:focus-visible,
.partners_logo:hover,
.partners_logo:focus-visible{
  -webkit-filter: none; filter: none;
}


.partners--marquee{
  --marquee-duration: 40s;    
  --marquee-gap: clamp(16px, 3vw, 40px);
  position: relative;
  overflow: hidden;  
}
.partners--marquee .partners__viewport{
  width: 100%;
  overflow: hidden;
}


.partners--marquee .partners__inner{
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  white-space: nowrap;         
  width: max-content;         
  animation: partners-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}


.partners--marquee .partners__dupe{
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
}


.partners--marquee:hover .partners__inner,
.partners--marquee:focus-within .partners__inner{
  animation-play-state: paused;
}


@keyframes partners-marquee{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}


@media (prefers-reduced-motion: reduce){
  .partners--marquee .partners__inner{ animation: none !important; }
}


@media (max-width: 480px){
  .partners__logo,
  .partners_logo{
    width: 45vw;
    height: calc(45vw * 0.5);
  }
}
*/