/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* ubuntu-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/ubuntu-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/ubuntu-v20-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ubuntu-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/ubuntu-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/ubuntu-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/ubuntu-v20-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/ubuntu-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.pt-48 {padding-top: 48px}
.pt-90 {padding-top: 90px}
.pb-120 {padding-bottom: 120px}
.pb-90 {padding-bottom: 90px}
.pl-90 {padding-left: 90px}
.pt-120 {padding-top: 120px}
.pl-213 {padding-left: 213px}
.pt-88 {padding-top: 88px}
.pb-88 {padding-bottom: 88px}
.pt-70 {padding-top: 70px}
.pl-136 {padding-left: 136px}
.pr-136 {padding-right: 136px}

body {
	font-family: 'Ubuntu' !important; font-weight: 300 !important; font-size: 18px !important; line-height: 1.6 !important; color: var(--blue) !important;
}

.breadcrumb, .breadcrumb a {font-size: 12px; color: var(--blue) !important;	padding-top: 10px; padding-bottom: 56px}

.no-touch .w-nav.type_desktop .hover_underline .w-nav-anchor.level_1 .w-nav-title:after  {
  background: var(--orange); height: 3px; 
 bottom: -0.2em !important;
}

.current-menu-item a.w-nav-anchor.level_1 .w-nav-title:after {
  background: var(--orange); height: 3px; display: block;
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.2em !important;
    margin: 0 auto -2px;
	opacity: 1 !important;
}

p {color: var(--blue) !important;}

h1, .w-nav-title {
	font-family: 'Ubuntu' !important; font-weight: 700 !important;
	color: var(--blue);	
	padding-top: 0px !important;

}

h1 {font-size: 48px !important; padding-bottom: 30px !important; line-height: 1.25 !important; margin-bottom: 0px !Important;}
h1.maschine {font-size: 36px !important; }
h2.maschine {padding-bottom: 0px !important;}
h2 {font-size: 30px !important; padding-bottom: 48px !important; font-weight: 700 !important; margin-bottom: 0px !Important; color: var(--blue);}
h3.form-headline, .w-form-row.for_info {font-family: 'Ubuntu' !important; font-weight: 700 !important;
	color: var(--blue) !important; font-size: 24px;
	line-height: 1.25 !important}

.w-form-row.for_agreement.required  {font-family: 'Ubuntu' !important; font-weight: 500 !important;
	color: var(--blue) !important; font-size: 14px;
	line-height: 1.25 !important}

.headline-bold {padding-top: 70px; font-weight: 700; color: var(--blue); font-size: 24px; padding-bottom: 30px}

.subline {font-family: 'Ubuntu' !important; font-weight: 300 !important;
	color: var(--blue); font-size: 30px;
	line-height: 1.25 !important}
.second-column {width: 611px !important; padding-top: 45px !Important;}


:root {
  --blue: rgba(18, 42, 104, 1);
	--blue-footer: #28408A;

  --orange: #FF9F00;
 
--gradient-orange: linear-gradient(270deg, 
rgba(255, 159, 0, 1) 0%, 
rgba(255, 159, 0, 1) 100%);
--gradient-blue: linear-gradient(
  90deg,
  rgba(24, 41, 99, 1) 0%,
  rgba(35, 80, 160, 1) 50%,
  rgba(24, 41, 99, 1) 100%
);
  --font-ubuntu: 'Ubuntu', sans-serif;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}


.blue {color: var(--blue) !important;} 

.button-bluebox
 {width: auto !important; margin-top: 48px !Important;
height: 48px !important; color: #fff;

border-radius: 0px 8px 0px 8px !important; font-size: 16px !important; font-weight: 500 !important; padding: 17px; background-clip: padding-box; }



.button-orangebox
 {width: auto !important; margin-top: 48px !Important;
height: 48px !important;
font-size: 16px !important; font-weight: 500px !important; padding: 17px }

.button-orangebox:hover .w-btn-label {color: #fff !Important;}

.bluebox, .bluefooter {
  background: var(--gradient-blue);
}

.orangebox {
  background: var(--orange);
}

.bluefooter-bottom {background: var(--blue-footer); padding: 9px 0; color: #fff !important; }
.bluefooter-bottom p {color: #fff !important; font-size: 16px}
a.footer-bottom-link {color: #fff !Important; margin-right: 20px}
a.some {margin-right: 36px}
#page-footer .w-form-row-description {color: #fff !important; font-size: 14px !Important;}

#page-footer input[type="text"] {height: 30px !important; border-radius: 0px}
#page-footer input[type="checkbox"] {height: 30px !important; width: 30px}

.orangebox { padding: 81px 214px !Important; }
.bluebox { padding: 90px 70px  !Important;}
#page-footer span {color: #fff !important; }
#page-footer .for_agreement {font-size: 14px !Important;}

.bluebox *:not(input), footer p {
  color: #fff !important; 
	
}

.w-form-row.for_agreement.required {
 
    width: 50% !important;
}

.contact-footer .w-form-row.for_submit {
  
   
    width: 50% !important;
}

.contact-footer .button-bluebox {
  float: right;
    margin-top: 0px !important;

}



.contact-info {
  display: flex;
  flex-direction: column;
  
 
}

.portraitname {position: absolute; left: -120px; bottom: 235px}
.portraitname .name {font-size: 24px; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); letter-spacing: 0.1px}
.portraitname .rolle {font-size: 16px; font-weight: 500; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); margin-left: 20px; letter-spacing: 1px}

/* Adresse bündig */
.contact-address {
	 display: flex;
  align-items: flex-start;
  gap: 10px;

  line-height: 1.4;
  margin-left: 28px; 
	font-weight: 300;
	padding-bottom: 30px
}



.contact-text {color: #fff; margin-left: 30px;}

/* Kontaktliste */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.for_agreement.required {font-weight: 500
}


.contact-list li {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 6px;
}

/* Icon links „hängen“ lassen */
.contact-list li img {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
	top: 5px
}



/* Text bündig links ohne Icon-Einrückung */
.contact-list li a {
  margin-left: 28px; /* gleiche Breite wie Icon */
  text-decoration: none;
  color: var(--orange);
	font-weight: 500
}

.orangebox h2 {color: var(--blue) !important;}

.orangebox-image {width: 354px; position: absolute; float: right; margin-top: -178px; /*left: 737px*/ left: 897px; }

.vc_column-inner,
.w-column-inner {
  padding: 0 !important;
}



.orangebox .w-btn-label {color: var(--blue)}
.orangebox .w-form-row-description {color: var(--blue); font-size: 14px !Important;}
.orangebox input {height: 30px !important; background-color: #fff; border-radius: 0px !Important;}
.orangebox input[type="text"] {height: 30px !important;}
.orangebox input[type="checkbox"] {height: 30px !important; width: 30px}

.orangebox textarea {border-radius: 0px !important;}

.topline {font-size: 18px !important; font-weight: 500; padding-bottom: 25px}



/*Testimonial*/

.testimonial-wrapper {}

.testimonial-slider-nav button { background: #333; color: #fff; border: none; padding: 8px 12px; margin: 0 5px; cursor: pointer; font-size: 18px; } 


.testimonial-image {
    position: absolute;
    top: 0%;
    left: 40px;
    width: 240px;
    height: 240px;
    z-index: 10;
}

.testimonial-author {padding-left: 431px; font-size: 14px;margin-top: 20px; text-align: right; width: 1003px;}
.bluebox.testimonial {padding-bottom: 30px !important;} 
.testimonial-image img { width: 240px; height: 240px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; /* optional, schöner Rand */ } 
.bluebox .testimonial-quote {color: var(--orange) !important; font-size: 30px; width: 1003px; padding-left: 431px; font-weight: 500 } 
.testimonial-content { max-width: 800px; padding-top: 70px} 

.carousel-nav {
  position: absolute; /* fest innerhalb des Carousels */
  bottom: -40px;       /* Abstand von unten */
  left: 50%;          /* zentriert horizontal */
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 10;        /* sicherstellen, dass die Buttons über den Testimonials liegen */
}

.carousel-nav button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s;
}

.carousel-nav button:hover {
  transform: scale(1.1); /* leichter Hover-Effekt */
}

.carousel-nav img {
  width: auto;
  height: 25px;
}


.bluebox.overlap-row-hidden {padding-bottom: 0px !important;} .owl-prev { left: 45%; } 
.owl-next { right: 45%; } 
.owl-dots { position: absolute; right: -10px; /* nach rechts außen */ top: 60%; transform: translateY(-50%); display: flex; flex-direction: column;  } 
.pause-slide { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); cursor: pointer; font-size: 32px; }


.dotstyle_circle .owl-dot span {
    display: block;
    border-radius: 50%;
    background: #fff !important;
    width: 6px;
    height: 6px;
    margin: 6px;
    opacity: 1;
}


.dotstyle_circle .owl-dot.active span {
    background: var(--orange) !important;
    box-shadow: none;
    opacity: 1;
}


/* Tabs */
.w-tabs{margin-top:40px}
.w-tabs-section-header{color:var(--blue)!important;font-size:24px!important;font-weight: 700!important; padding:2.688rem 20px 2.688rem 0!important}
.w-tabs-sections.icon_plus>div>.w-tabs-section-header.active .w-tabs-section-control:before{background:transparent!important;transform:rotate(180deg)!important}
.w-tabs-sections.icon_plus>.w-tabs-section.active>.w-tabs-section-header .w-tabs-section-control{transform:rotate(180deg)!important}
.no-touch .w-tabs-section-header:hover,.no-touch .w-tabs-section-header:focus{background:transparent!important}
.w-tabs-section-header.active{background-color:transparent!important}
.w-tabs-section-content{border-top:1px solid var(--blue)!important;padding:50px 0!important}
.w-tabs-section{display:none;border-color:var(--blue)}


/*Facts*/

.facts li {
    display: flex;
    align-items: flex-start; /* Icon oben ausrichten */
    gap: 0.8rem; /* Abstand zwischen Icon und Text */
    margin-bottom: 10px;
}

.facts li::before {
    content: "";
    flex-shrink: 0; /* Icon wird nicht kleiner */
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/themes/Impreza-child/elements/icon-fact.svg');
    background-size: contain;
    background-repeat: no-repeat;
	margin-top: 10px;
    /* margin-right nicht nötig, da gap genutzt wird */
}



.icon-heading  {
    position: relative;       /* wichtig für das absolute Icon */
    padding-right: 0px;       /* Platz für das Icon */
}

.icon-heading.left::before {
    content: "";
    position: absolute;
    left: -75px;                  /* links oben */
    top: -35px;                   /* oben ausrichten */
    width: 87px;              /* Icon-Größe */
    height: 60px;
    background-image: url('/wp-content/themes/Impreza-child/elements/icon-eagle.svg');
    background-size: contain;
    background-repeat: no-repeat;
}


.icon-heading.right::before {
    content: "";
    position: absolute;
    left: 140px;                  /* links oben */
    top: -35px;                   /* oben ausrichten */
    width: 60px;              /* Icon-Größe */
    height: 60px;
    background-image: url('/wp-content/themes/Impreza-child/elements/icon-spider.svg');
    background-size: contain;
    background-repeat: no-repeat;
}


.svg-wrapper-small {
    width: 100%;
    max-width: 867px;
    height: 540px; /* zwingt Höhe */
}
.svg-wrapper-small svg {
    width: 100%;
    height: 100%;
}

	.shopbox {
   
		border-radius: 0 40px 0 0;
		background-color: var(--orange)
}

	.shopbox img {
   
	margin-top: -40px
}

.svg-wrapper-small { display: flex;
    justify-content: flex-end;}

.svg-wrapper-small image { object-fit: cover;
    object-position: right center; height: 540px}

a.w-btn.us-btn-style_7.orange-border {font-weight: 500; margin-top: 40px; text-align: left; padding: 15px 30px 22px 30px; }
a.w-btn.us-btn-style_7.orange-border:hover {font-weight: 500; margin-top: 40px; text-align: left; padding: 15px 30px 22px 30px; background-color: var(--orange); border-color: var(--orange); color: #fff !important;}
a.w-btn.us-btn-style_7.orange-border .btn-line-bold {font-weight: 700; line-height: 1.5}
a.w-btn.us-btn-style_7.orange-border .btn-line-normal {font-weight: 300; line-height: 1.5}

.overlap-row  {
/* padding-top: 70px;*/
  height: 430px; /* Höhe der Zeile nach Bedarf anpassen */
/*padding-left: calc((1920px - 1350px) / 2);  = 335px */
}







.overlap-image {
  position: relative;
  overflow: visible;
}
.overlap-image img {
  position: absolute;
  top: -142px;
  right: 0px; /* schiebt Bild nach rechts raus */
  width: auto;
  max-width: none; /* GANZ wichtig */
	clip-path: inset(0 0 0 0);
	object-fit: contain;
	 height: 572px; 
	  bottom: 0;
}


.overlap-image.neumaschine img {
 right: -100px; /* schiebt Bild nach rechts raus */
  height: 462px; /* Bildhöhe bleibt proportional */
 
 
}

.overlap-row-hidden {
 position: relative;
 
 /*  overflow: hidden; Verhindert, dass das Bild unten überläuft */

}





.referenzkachel {
box-shadow: 2px 2px 6px 0 rgba(18, 42, 104, 1) !important; linear-gradient( 180deg , rgba(53, 83, 156, 0) 0% , rgba(39, 63, 129, 0.47) 65% , rgba(18, 42, 104, 1) 100% ) !important;
}


/*Grafik Startseite*/



.feature-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feature-line-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
 padding-bottom: 45px;
}
.feature-circle img {
  /* float: right;  ← entfernen! */
  width: 240px;
  height: 240px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0; /* verhindert, dass der Kreis schrumpft */
}

.feature-lines {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-right: -60px; /* 🔥 zieht die Linien in den Kreis */
  position: relative;
  z-index: 2; /* über dem Kreis */
}
/* Text */
.feature-text {
  margin-bottom: 8px;
font-family: 'Ubuntu';
	font-weight: 700;
	font-size: 24px;
	color: var(--blue);
	margin-bottom: 0px
}

/* Linie */
.feature-line {
  height: 2px;
  background: var(--orange);
  position: relative;
}

.feature-line.one {
  width: 445px;
}

.feature-line.two {
  width: 426px;
}


/*Counter*/

.counter h2 {color: #fff !important; font-size: 48px; padding-bottom: 70px }
.counter-number {color: #fff !important; font-size: 60px; display: block; height: 90px; text-align: center; font-weight: 500  }
.counter-title p {color: #fff !important; font-size: 18px; text-align: center }
.counter {padding: 70px 0 85px 0 !important; background: var(--gradient-blue) !important;}



/*Liste*/


.arrow-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.arrow-list li {
  display: flex;
 
	align-items: center; /* besser für mehrzeiligen Text */
  margin-bottom: 12px;
	color: var(--blue)
}



.arrow-list li::before {
  content: "→";
  margin-right: 20px; /* Abstand nach dem Pfeil */
  flex-shrink: 0;
}

.arrow-list li::before {
  font-size: 1.2em;
  color: var(--color-primary);
}


.arrow-list li::before {
  content: "";
  width: 21px;
  height: 14px;
  margin-right: 20px;
  background: url("/wp-content/themes/Impreza-child/elements/icon-arrow-bullet-point.svg") no-repeat center !important;
  background-size: contain;
}


.usg_vwrapper_1.maschinenkachel {
	padding: 45% 7% 7% 7% !important;}


.maschinenkachel {
	
background: linear-gradient(225deg, 
rgba(53, 83, 156, 0) 0%, 
rgba(39, 63, 129, 0.5) 34%, 
rgba(18, 42, 104, 1) 100%) !important;
}


/*Dateiupload stylen und ergänzen*/

/* --Verstecke das originale Input-Feld */
.w-form-row.for_file input[type="file"] {
  opacity: 0;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
	 z-index: 99;
}

.w-form-row.for_file .w-form-row-field {
  position: relative;
  display: inline-flex;
  align-items: center;
	justify-content: center;
  background-color: transparent;
  color: var(--blue) !important;	
  /*padding: 12px 20px;*/
	padding: 12px 20px ;
border-radius: 0 8px 0 8px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  min-width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  
	border: 3px solid var(--blue);
	width: auto;
	

height: 48px;




}

.w-form-row.for_agreement.required {margin-top: 10px !important;}

.w-form-row.for_file .w-form-row-field::before {
  content: url('/wp-content/themes/Impreza-child/elements/upload.svg'); /* Beispiel für ein Icon */
  margin-right: 10px; 
  display: inline-block;
  width: 20px; 
  height: 20px; 
}


.w-form-row.for_file .w-form-row-field.has-file::before {
  content: url('/wp-content/themes/Impreza-child/elements/upload-white.svg');
}

/* --Standardtext für den Fall, dass noch keine Datei ausgewählt wurde */
.w-form-row.for_file .w-form-row-field::after {
  content: 'jetzt hochladen' !important;
  font-size: 16px;
  color: var(--blue);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
	font-weight: 500;
  text-overflow: ellipsis;
	text-transform: uppercase
}


/* --Der Dateiname im Button wird angezeigt, wenn eine Datei ausgewählt wurde */
.w-form-row.for_file .w-form-row-field[data-file-name]:after {
  content: attr(data-file-name); /* Zeigt den Dateinamen an */
}


/* --Sichtbar, wenn Datei ausgewählt */
.w-form-row.for_file .w-form-row-field.has-file {
  background-color: var(--gwgdunkelgruen);
  color: #fff !important;
  border-color: var(--gwgdunkelgruen);
}




/* --Text im Button */
.w-form-row.for_file .w-form-row-field.has-file::after {
  content: attr(data-file-name);
  color: #fff !important;
  font-weight: bold;
  max-width: 100%;
	content: none !important;
}


.w-form-row.for_file .file-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--gwgdunkelgruen);
  margin-left: 10px;
}

.w-form-row.for_file .w-form-row-field.has-file .file-name {
  color: #fff;
  font-weight: bold;
}





/* ==========================
   Basis-Styles für Portrait-Boxen
   ========================== */


.box-mit-portraitbild.links.orange {border-radius: 38px}


.box-mit-portraitbild.links,
.box-mit-portraitbild.rechts {
  position: relative;
  max-width: 1250px;
  margin: 100px auto 0 auto;
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
}

input[type="file"] {
    background-color: transparent !important;
    border-radius: 0px ! Important;
    color: #fff;
}

.w-form-row.for_file .file-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--blue);
    margin-left: 10px;
}

.w-form-row.for_file .w-form-row-field::before {
    content: url(/wp-content/themes/Impreza-child/elements/upload.svg);
    margin-right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
}


/* Textabstände */
.box-mit-portraitbild-text {
  padding-top: 125px;
  padding-bottom: 54px;
}

.box-mit-portraitbild-text2 {
  padding-top: 54px;
  padding-bottom: 54px;
}

.box-mit-portraitbild-text2 a {
  color: #fff;
}

.box-mit-portraitbild-text h2 {
  padding-bottom: 0 !important;
}

/* Column padding */
.box-mit-portraitbild.links .vc_column-inner,
.box-mit-portraitbild.rechts .vc_column-inner {
  padding-top: 60px;
  padding-bottom: 40px;
}

/* Spezifische Text-Position rechts */
.box-mit-portraitbild.rechts .box-mit-portraitbild-text {
  padding-left: 95px;
}
/* Wrapper vertikal für Buttons */
.slide-wrapper {
  position: fixed;
  top: 20%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 9999;
  transition: right 0.3s ease; /* fährt alle Buttons zusammen nach links */
	padding-right: 0px
}

/* Buttons */
.slide-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  z-index: 20;
	margin-bottom: 6px
}

/* Button-Hintergrund */
.button-bg {
  width: 42px;
  height: 42px;
  background-color: var(--orange);
  border-radius: 8px 0 0 0px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Hover-Zustand */
.slide-btn:hover .button-bg {
  background-color: var(--blue); /* hellere Farbe beim Hover */
}


/* individuelle Icons */
.slide-btn:hover .icon-contact, .slide-btn.active .icon-contact  {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-white-contact.svg');
}
.slide-btn:hover .icon-newsletter, .slide-btn.active .icon-newsletter {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-white-newsletter.svg');
}
.slide-btn:hover .icon-shop, .slide-btn.active .icon-shop {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-white-shop.svg');
	
}
.slide-btn:hover .icon-lang, .slide-btn.active .icon-lang{
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-white-lang.svg');
	
}

/* Active / Klick-Zustand */
.slide-btn.active .button-bg {
  background-color: var(--blue); /* dunklere Farbe beim Klicken */
}

.close-box {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  z-index: 100;
}

/* Box fix auf der Seite, unabhängig vom Wrapper */
.slide-box {
  width: 500px;
	height: 100%;
  background: #fff;
  padding: 30px;
  position: fixed;
  top: 20px; /* feste Y-Position */
  right: 0px; /* startet rechts */
  opacity: 0;
  pointer-events: none;
  
  border-radius: 0 8px 0 8px;
  border: 3px solid var(--blue);
  transition: right 0.3s ease, opacity 0.3s ease;
  z-index: 50;
}

.slide-box, .slide-box *{
color: var(--blue) !important;
}



.slide-box a {
color: var(--orange) !important;
	font-weight: 500;
}

/* Aktive Box sichtbar */
.slide-box.active {
  right: 0px; /* fährt zusammen mit Buttons nach links */
  opacity: 1;
  pointer-events: auto;
}


/* Icon absolut über Button zentrieren */
.icon-contact,
.icon-lang,
.icon-shop,
.icon-newsletter {
  position: absolute; /* über Button-bg */
  top: 50%;           /* vertikal Mitte */
  left: 50%;          /* horizontal Mitte */
  transform: translate(-50%, -50%); /* exakt zentrieren */
  width: 28px;        /* Icon-Größe passend wählen */
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  z-index: 2;         /* über Button-bg */
}

/* individuelle Icons */
.icon-contact {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-contact.svg');
}
.icon-newsletter {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-newsletter.svg');
}
.icon-shop {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-shop.svg');
	 height: 27px !important;  
}
.icon-lang {
  background-image: url('/wp-content/themes/Impreza-child/elements/icon-lang.svg');
	height: 25px !important; 
}

#popup .pop-up-topline {font-weight: 300 !important; font-size: 24px !important; margin-top: -10px; padding-bottom: 45px }


/* Ausnahme für span innerhalb von .textblock */
#popup .textblock span {
    font-weight: normal !important;
    font-size: initial !important; /* oder die gewünschte Größe */
}


#slidein-content {padding: 30px !important; color: var(--blue) !important;}

#slidein-content .w-btn-label {color: var(--blue); font-size: 16px !Important; font-weight: 500}
#slidein-content .w-form-row-description {color: var(--blue) !Important; font-size: 14px !Important;}
#slidein-content input {border: 1px solid var(--blue); height: 30px !important; background-color: transparent; border-radius: 0px !Important;}

#slidein-content input[type="text"] {height: 30px !important;}
#slidein-content input[type="checkbox"] {height: 30px !important; width: 30px}

/* Standard für alle #popup span */
#slidein-content span {
    font-weight: 700 !important;
    font-size: 14px !important;
	color: var(--blue) !important;
}
#slidein-content span:hover {
    color: #fff !important;
}
#slidein-content .button-bluebox:hover .w-btn-label {color: #fff !important;}
.apply-button:hover {color: #fff !important;}

#slidein-content .w-form-row.for_agreement.required {width: 100% !important;}

.referenz-card-content:hover {
 background-blend-mode: multiply !Important;
}

.referenz-card-content {
background: linear-gradient(180deg, 
rgba(53, 83, 156, 0) 0%, 
rgba(39, 63, 129, 0.47) 65%, 
rgba(18, 42, 104, 1) 100%) !Important; margin-bottom: 0px !important; background-blend-mode: multiply; height: 100%; padding: 30px; 
  display: flex;            
  flex-direction: column;   
  justify-content: flex-end;  }


.blog-card .post_image {margin-bottom: 0px}
.blog-title {font-size: 18px; font-size: 18px; font-weight: 500; color: var(--blue)}
.blog-content {padding: 30px 15px}
.blog-date {font-size: 14px; color: var(--blue); font-weight: 300;}


.referenz-card-content h3 {font-weight: 500; color: #fff; font-size: 18px; margin-bottom: 0px !important;}

.referenz-card-content:hover {background: blue}

/*Kategoriefilter*/
.category-filter {text-align: left; background-color: transparent}
.filter-button {text-align: center; text-transform: normal; border: 3px solid var(--blue); font-size: 16px; width: 290px !important; float: right; height: 42px !Important; padding: 0px 10px 0px 10px !Important; background: transparent;
font-weight: 500; border-radius: 0 15px 0 15px; color: var(--blue)
}
.category-label:after {
    content: url('/wp-content/themes/Impreza-child/elements/icon-filter.svg') !important; border: 0px solid !important; top: 20% !important; width: 28px; margin-right: 20px; display: inline-flex; margin-left: 10px;
}
 

        .filter-dropdown {
            position: fixed;
            top: 0;
            right: 0;
            width: 500px;
            height: 100%;
            background: #fff;
           border-radius: 0 8px 0 8px;
border: 3px solid rgba(18, 42, 104, 1);

            z-index: 1100;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
            padding:30px;
        }


.filter-title, .slide-in-headline {font-weight: 300; margin: 0 auto; display: block; width: 300px; text-align: center; font-size: 24px}

.slide-box-headline {font-weight: 700; font-size: 30px; line-height: 1.2; padding-bottom: 20px}
.slide-box .button-bluebox {margin-top: 30px !important;}

.filter-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    z-index: 10;
    transition: color 0.2s;
}

.filter-close:hover {
    color: var(--blue);
}


        .filter-dropdown.open {
            transform: translateX(0);
        }

        .filter-dropdown ul {
            list-style: none;
            padding: 50px 10px 10px 10px;
            margin: 0;
        }

        .filter-dropdown ul li {
            font-size: 17px;
            margin-bottom: 10px;
			font-weight: 500;
			color: var(--blue)
        }

        .custom-checkbox {
            display: flex;
            align-items: center;
            cursor: pointer;
            position: relative;
            padding-left: 30px;
            margin-bottom: 10px;
        }

        .custom-checkbox input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .custom-checkbox .checkmark {
            position: absolute;
            left: 0;
            top: 0;
            width: 24px;
            height: 24px;
            border: 3px solid var(--blue);
            border-radius: 0px;
            transition: background-color 0.3s, border-color 0.3s;
        }

        .custom-checkbox:hover .checkmark {
            background-color: rgba(0,123,255,0.2);
        }

        .custom-checkbox input:checked ~ .checkmark {
            background-color: var(--orange);
            border-color: var(--blue);
        }

        .apply-button {
            display: inline-block;
           ´
            text-align: center;
            background-color: transparent;
            color: var(--blue);
            border: none;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
			width: 130px;
height: 48px;
border: 3px solid var(--orange);
border-radius: 0 15px 0 15px;

        }

        .apply-button:hover {
            background-color: var(--orange);
			color: var(--blue);
        }


/* ==========================
   Hintergrundfarben
   ========================== */
.box-mit-portraitbild.links.blau,
.box-mit-portraitbild.rechts.blau {
  background: var(--gradient-blue);
  color: #fff !important;
}

.box-mit-portraitbild.links.orange,
.box-mit-portraitbild.rechts.orange {
  background: var(--gradient-orange);
  color: var(--blue) !important;
}

/* Optional: gezielte Farbanpassung für Texte/Links */
.box-mit-portraitbild.orange p,
.box-mit-portraitbild.orange h2,
.box-mit-portraitbild.orange a {
  color: var(--blue) !important;
}


.box-mit-portraitbild.blau p {
  color: #fff !important;
}

.box-mit-portraitbild.orange a {
  font-weight: 500  !important;
}

/* ==========================
   Portrait-Bilder
   ========================== */
.box-portraitbild.links img,
.box-portraitbild.rechts img {
  position: absolute;
  bottom: 0;
  width: 364px;
  height: auto !important;
}

.box-portraitbild.links img {
  left: 0;
}

.box-portraitbild.rechts img {
  right: 0;
}

/* ==========================
   Kontaktliste
   ========================== */
.kontaktliste {
  position: absolute;
  bottom: 54px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px; /* Abstand zwischen Links */
}

.kontaktliste a {
  display: flex;
  align-items: center;
  gap: 12px; /* Abstand Icon/Text */
  text-decoration: none;
  color: inherit;
  margin-bottom: 4px;
}

/* Basis-Icons */
.kontaktliste a::before {
  content: "";
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Icons Standard */
.kontaktliste .telefon::before { background-image: url("/wp-content/themes/Impreza-child/elements/icon-telefon.svg"); }
.kontaktliste .mail::before     { background-image: url("/wp-content/themes/Impreza-child/elements/icon-email.svg"); }
.kontaktliste .xing::before      { background-image: url("/wp-content/themes/Impreza-child/elements/icon-xing.svg"); }
.kontaktliste .linkedin::before  { background-image: url("/wp-content/themes/Impreza-child/elements/icon-linkedin.svg"); }

/* Icons Orange-Variante */
.orange .kontaktliste .telefon::before  { background-image: url("/wp-content/themes/Impreza-child/elements/icon-blue-telefon.svg"); }
.orange .kontaktliste .mail::before      { background-image: url("/wp-content/themes/Impreza-child/elements/icon-blue-email.svg"); }
.orange .kontaktliste .xing::before      { background-image: url("/wp-content/themes/Impreza-child/elements/icon-blue-xing.svg"); }
.orange .kontaktliste .linkedin::before  { background-image: url("/wp-content/themes/Impreza-child/elements/icon-blue-linkedin.svg"); }

/* ==========================
   Responsive
   ========================== */
@media (max-width: 1024px) {
  .box-mit-portraitbild.rechts .box-mit-portraitbild-text {
    padding-left: 0px;
  }
}





/* ==========================
   Mobile Variante
   ========================== */
@media (max-width: 768px) {
	
	/* Testimonal Slider */
	.testimonial-image img {
    width: 140px;
    height: 140px;
   
}
	
	.bluebox.testimonial {height: 440px}
	.testimonial-content {
   
    padding-top: 190px;
}
	
	.testimonial-wrapper {height: 480px}
	
	.carousel-nav {
  
   bottom: -20px;
   
}
	
	.testimonial-image {
    position: absolute;
    top: 5%;
    left: 25%;
    width: 140px;
    height: 140px;
    z-index: 10;
}
	
	
	.bluebox .testimonial-quote {
    color: var(--orange) !important;
    font-size: 18px;
    width: 100%;
    padding-left: 0px;
    font-weight: 500;
}
	
	
	
	
	.testimonial-author {
    padding-left: 0px;
    font-size: 14px;
    margin-top: 20px;
    text-align: left;
    width: 100%;
}
	
	
	/* Freisteller */
	.overlap-image img {
    position: relative;   /* kein absolute mehr */
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .overlap-row {
    height: auto; /* wichtig, sonst wird abgeschnitten */
  }
	
	
	.filter-button {float: none;  display: block; margin: 0px auto 50px auto}
	
	.overlap-image.neumaschine img {
    height: 250px;
		right: 0px;
		padding-bottom: 20px
}
	
	.w-tabs-section-header {
    color: var(--blue) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    padding: 1.688rem 20px 1.688rem 0 !important;
}
	
	.slide-box {width: 90%}
	.pb-120 {padding-bottom: 50px}
	 .pt-48 {padding-top: 30px}
	
  /* Boxen auf volle Breite, stapeln alles */
  .box-mit-portraitbild.links,
  .box-mit-portraitbild.rechts {
    max-width: 100%;
    padding: 0px 20px 40px 20px;
    display: flex;
    flex-direction: column; /* stapelt Bild/Text/Kontaktliste */
    align-items: flex-start;
	  margin-top: 250px
  }

  /* Portraitbild immer oben */
  .box-portraitbild.links img,
  .box-portraitbild.rechts img {
   
    
    width: 250px;
    max-width: 100%;
    height: auto !important;
   
  }

	
	.box-portraitbild.rechts img {
   left: 0 !important;
  }
	
	
	  .box-mit-portraitbild.rechts .box-mit-portraitbild-text {
    padding-left: 0px;
  }
	
  /* Textabstände kompakt */
  .box-mit-portraitbild-text,
  .box-mit-portraitbild-text2 {
    padding-top: 30px;
    padding-bottom: 10px;
  }

  /* Kontaktliste unter Text/Bild */
  .kontaktliste {
    position: static !important;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Spalten */
    gap: 6px;
    width: 100%;
    margin-top: 10px;
  }

  .kontaktliste a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 0;
  }

  /* Die letzten beiden Links in der zweiten Reihe */
  .kontaktliste a:nth-child(3),
  .kontaktliste a:nth-child(4) {
    grid-column: auto;
  }

  /* Optional: alle Links gleich hoch, damit letzte nicht umbrechen */
  .kontaktliste a {
    min-width: 0; /* verhindert dass lange Texte umbrechen */
  }
	
	
	.order-3 { order: 3; } /* erscheint später */
.order-1 { order: 1; } /* erscheint zuerst */
.order-2 { order: 2; }
	

  .feature-lines {
    margin-right: 0; /* keine Überlappung mehr */
    z-index: 1;
    align-items: flex-start;
	  width: 50% !Important;
  }

  .feature-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 0px;
	  display: flex !important;
	  padding: 20px;
	  -columns-gap: 1rem !important;
  }
	
	.button-bluebox {height: auto !important;}
	
	 
	.feature-circle {width: 50% !Important;}

  .feature-circle img {
    margin-top: 0px; /* optional Abstand nach oben */
    width: 190px;
    height: 190px;
  }

  .feature-line.one { width: 180px; }
  .feature-line.two { width: 160px; }
	
	.plm-20, #us_grid_1, .w-grid-list  {padding-left: 20px !important; }
.prm-20, #us_grid_1, .w-grid-list  {padding-right: 20px !important; }
	
	
	.second-column {width: auto !important; padding-top: 30px !important;}
	h1 {font-size: 35px !important; word-break: break-word !important;}
	
	.bluebox {
    padding: 40px ! Important;
}
	.pl-90, .pl-213, .l-section.wpb_row.height_auto.width_custom {
    padding-left: 0px;
}
	
	.l-section.wpb_row.height_auto.width_custom {
    padding-right: 0px;
}
	
	.pt-120 {
    padding-top: 60px;
}
	

	
	.pt-90 {
    padding-top: 40px;
}
	
		.pb-90 {
    padding-bottom: 40px;
}
	
	.l-section.wpb_row.pt-120.height_auto {padding-left: 0px !important; padding-right: 0px !important;}
	
	.l-section.wpb_row.pt-120.height_auto p {padding-left: 20px !important; padding-right: 20px !important;}
	
	.svg-wrapper-small {
    width: 100%;
    max-width: 867px;
    height: auto !important;
		padding: 30px 0px !Important;
}
	
	.orangebox {
    padding: 81px 40px ! Important;
}
	
	

		.shopbox {
   padding: 20px;
		border-radius: 0 40px 0 0;
		background-color: var(--orange)
}

	
	
	.facts ul {margin-left: 0px}
	
	
	
	.w-form-row.for_agreement.required {
    width: 100% !important;
}
	
	.bluefooter-bottom {padding: 9px 20px; text-align: left}
	a.w-btn.us-btn-style_7.orange-border {margin-bottom: 30px}
	
}




@media (max-width: 767px) {
	
  .overlap-row-hidden {
    position: relative;
    overflow: visible !important;
    margin-top: 40px !important;
  }

}