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





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




@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2'); 
}


@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?8dxi0a');
  src:  url('../fonts/icomoon.eot?8dxi0a#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?8dxi0a') format('truetype'),
    url('../fonts/icomoon.woff?8dxi0a') format('woff'),
    url('../fonts/icomoon.svg?8dxi0a#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 2.0rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #e9edf4;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}




 :root {
--menu: #fff;
--lime:RGB(190, 255, 7);
--reddark:RGB(204, 29, 0);
--red:#d83f27;
--black:#1b1b1b;

--greenG:linear-gradient(90deg,#2C8235 0%,#37a9cc 100%);
--greenG-large: linear-gradient(30deg,#2C8235 0%,#37a9cc 100%);
--greenG-light: linear-gradient(0deg,#2C8235 0%,#93dcf2 80%);
--greenG-vertical: linear-gradient(90deg,#2F6E35 0%,#2da58f 100%);
--whiteGY: linear-gradient(150deg,#FFF 30%,#fdf7ea 100%);
--whiteG-clip:linear-gradient(135deg,rgba(255, 255, 255, 0) 40%, #fff 95% ,rgba(44, 130, 53, 0.14) 95%, rgba(44, 130, 53, 0.14) 96%, rgba(44, 130, 53, 0.0) 96%  );

--grayG: linear-gradient(-180deg,#EBEAE8 0%,#fff 85%);


--gray: #F5F5F4;
--offwhite:#f2f2f2f2;
--lightgray:#F5F5F4;
--text:#353535;

--lightblue: #00c3ff;

 --cut: clamp(10px, 4vw, 72px);  

--body: 'Poppins', sans serif;
--head: 'Poppins', sans serif;
--sans: 'Poppins', sans serif;
} 





/* Spacing
-----------------------------------------------------------------*/

.grid-container { 
    
	 max-width: 86.875rem ;
}



.padding { padding: 40px 20px; }

.paddingContent { padding: 25px; }

.paddingLink  { padding: 20px 0px; }

.paddingRight { padding-right: 40px; }
.paddingLeft { padding-left: 40px; }

.paddingTop { padding-top: 30px; }
.paddingBottom { padding-bottom: 30px; }

.paddingColBottom  { padding-bottom: 1.95rem; }
.paddingColTop  { padding-Top: 1.95rem; }

.noPadding { padding: 0!important; }
.noPaddingTop { padding-Top: 0!important; }  
.noPaddingBottom { padding-bottom: 0!important; }
.noPaddingRight { padding-right: 0!important; }
.noPaddingLeft { padding-left: 0!important; }

.colorBox {padding:1rem}

.posAbs  {position:absolute}
.posRel {position:relative}


@media only screen and (max-width: 40em) {
.noPaddingSmall { padding-left: 0!important; padding-right: 0!important;}
.paddingSmall { padding: 40px 20px; } }


.marginTop { margin-top: 80px; }
.marginBottom { margin-bottom: 80px; }
.marginRight { margin-right: 40px; }

.noMargin { margin: 0!important; }







   
/* Text Specific
-----------------------------------------------------------------*/
body {
	font-size:15px;
	

}

.smallText 	{font-size: 0.875rem;	}
.demiText 	{font-size: 1rem;	}
.largeText 	{font-size:calc(1rem + .2vw); line-height: 1.6;} 
.uppercase 	{text-transform: uppercase;} 



/* Dividers
-----------------------------------------------------------------*/

.divider,
.dividerCenter,
.dividerBlack,
.dividerCenterBlack,
.dividerWhite,
.dividerCenterWhite,
.dividerColor,
.dividerCenterColor {
	width: 40px;
	height: 2px;
	background-color:#88784d;
	margin: 1.375rem 0;
}




.dividerCenter,
.dividerCenterBlack  {
	margin: 1.375rem auto;
}

.sectionSeparator {
	width: 100%;
	background: transparent;
	border-bottom: 1px solid #fff;
	margin-bottom: 20px;
}

.dividerContainer {
  position: relative;
  width: 300px;
  height: 3px;
  margin: 0.5rem auto
}


.divider2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 1px;
  background-color: #a4a4a4; /* Farbe der ersten Linie */

}


#preloader {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 9999;
  pointer-events: none;
}




/* ==============================================================
							TYPOGRAPHY
================================================================= */

table,
p,
a { -moz-osx-font-smoothing: greyscale; line-height:1.8 }


h1,
h2,
h3,
h4,
h5,
h6
 { -moz-osx-font-smoothing: greyscale; line-height:1.1 }


table, p, span, li { 
	

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-break: normal;
  overflow-wrap: normal;
 
  letter-spacing: 0.0425rem;
 
  }  
  
.noHyph { hyphens: none !important; }


 small {
  font-size: 0.75rem;
  line-height: inherit;
}
 


h1,
h2,
h3,

h5,
h6,
input,
.label,
label,
.button,
.form-error,
.mfp-title,
.skillName,
.button span,
.authorName,
.postNav a,
.blogTitle a,
.tabs-title > a,
.shareBtns p,
div.folioNav a,
#primaryMenu a,
.counters .timer,
.skillName .timer,
.folioMeta li span,
.breadcrumbs > li a,
.overlayMenu ul li a, 
.pricing-table .title,
.imageBoxesTitle span,
.tabs-title > a,
.uf-title,
.pricing-table .bullet-item,
#primaryMenu ul li.megaMenuTitle,

.folioMasonry-mixed .gallery-item .imageHover p {
	font-family: var(--head);
	
}


#primaryMenu a, 
.button,
.subline,
.button.hollow,
.service-headline span,
h4,
h5,
 a.link-in,  a.link-out, a.link  {
	font-family: var(--sans); letter-spacing:0.06rem; color:var(--red);
	font-size: 0.75rem; text-transform:uppercase;
}

h5 {	 color:var(--red);	}



#primaryMenu a, 
.subline,
.folioDesc p, .folioDesc span,
.service-headline span,
#filters a, .filter-group a {	 color:var(--text);	}



a.link-in, a.call, a.link-out, a.link {
  display: inline-block; /* Damit width und height wirken */
  position: relative; /* Damit das background-image relativ zum <a>-Element positioniert wird */
  padding-left: 16px; /* Platz für das chain.svg */
 
  line-height: 1; /* Zur Korrektur der vertikalen Ausrichtung */
  background-repeat: no-repeat;
  background-position: left center; /* Position des chain.svg im <a>-Element */
  text-transform:uppercase;
  color:var(--red);
}


a.link-text,
a.link-text:link,
a.link-text:visited {
  line-height: inherit;
  color: var(--text);
  text-decoration: underline;
  cursor: pointer;
}




a.link-text:hover,
a.link-text:active { color: var(--red); }

a.link-in::before,
a.call::before,
a.link-out::before {
  content: ""; /* Pseudoelement für das chain.svg */
  position: absolute;
  top: 50%; /* Vertikal zentrieren */
  left: 0;
  width: 11px; /* Größe des chain.svg */
  height: 11px;
  background-image: url(../img/link.png); /* Pfad zum chain.svg anpassen */
  background-size: contain; /* Größe des chain.svg anpassen */
   fill: currentColor;  /* Setzen Sie die Farbe des chain.svg auf die Farbe des Textes */
  transform: translateY(-50%); /* Korrektur für vertikale Ausrichtung */
}

a.call::before {width:15px;  height: 15px;}



.bgRed a.link-in::before, .bgCG a.link-in::before  { background-image: url(../img/link-w.png);}
.bgRed a.link-out::before   { background-image: url(../img/link-out-w.png);  color:var(--white);}
.bgRed a.call::before { background-image: url(../img/call.svg); color:var(--white);}
 a.link-out::before { background-image: url(../img/link-out.png);}
 
.cta a { font-size:1rem; color:var(--black)}

@media only screen and (max-width:400px) {
.cta a {   font-size: 15px;}
}

h1, h2, h3, h4 {   letter-spacing:0.05rem;}
h2, h3, h4 {   text-transform:uppercase;}


h1 { font-size: clamp(1.5rem, 2vw + 1rem, 2rem);  font-weight:600;  line-height:1.2; color:var(--reddark); margin: 0rem;
 position: relative;
  display: inline-block; padding-bottom: 20px;}



h2 { font-size: clamp(1.25rem, 2vw + .75rem, 1.75rem); font-weight:600;  color:var(--reddark);  position: relative; display: inline-block; }
  
.headline h2 {  display: flex;  align-items: center;  }
  
.subline, .subline p { font-size: 0.75rem; line-height:1.2rem; letter-spacing:0.065rem; margin:0px;      }

h3, .bgWhite h3 {
	/* font-size: clamp(1.1rem, 1vw + 1rem, 1.5rem); */
  font-size: 1rem;
  padding-bottom:  10px;
  margin:0;
  font-size: 1 rem;  font-weight:600;  color:var(--reddark);
}

h4 { font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.1rem;
line-height: 1.3rem;
color: var(--red); }






.lead {font-size: clamp(2rem, 2vw + 1rem, 3.5rem);
    opacity: 0.8;
    text-transform: uppercase;
    font-weight: 600;
	line-height:1;
  }
  
.small {font-size: 0.75rem;   line-height: 1.3; }


b, strong {
    font-weight: 700;
}

.press-meta {font-weight: 600;}

p,
li,
blockquote,
strong,
table,

.testimonContent p,
.testimonMeta,
.accordion-title,
.pricing-table .price {
	font-family: var(--body);
}

h5,
h6,
.button,
.blogTitle,
.shareBtns p,
.pricing-table .title,
.imageBoxesTitle span,
.top-bar-section ul li > a,
.tabs-title > a,
#primaryMenu ul li.megaMenuTitle {
	text-transform: uppercase;
}

.underline {text-decoration:underline;}


.bgRed .subline,
.bgGreenG .subline,
.bgGreenG p,
.bgGreenG-vertical p,
.bgRed li,
.bgRed h2, .bgRed h3, 
.bgRed h4, .bgHeader h4, .bgMain h4,
.bgRed p, .bgCG p, .bgMain p,
.bgRed .service,
.bgRed .contact a  {color:var(--offwhite) }
.bgHeader h4 {font-weight:400}
.bgRed h3, .bgGreenG h3, .bgGreenDark h3  {color:var(--lime) }
.bgRed h1, .bgGreenG h1, .bgGreenDark h1, 
.bgRed h4, .bgGreenG h4, .bgGreenDark h4, .bgGreenG h4,  .bgGreenG h5,
.bgGreenG-vertical h3, .bgGreenG-vertical  h4,  .bgGreenG-vertical h5 {color:var(--lime) }


.service {font-family: var(--sans); letter-spacing: 0.06rem;  } 

.bgWhiteGY h3,
.bgWhite h3 {
 color:var(--red);
}



a:focus, 
a:hover { color: var(--red);   }

.bgRed a:focus, 
.bgRed a:hover { color: #fff;   }

:last-child:not(.is-active) > .accordion-title {
    border-bottom: 1px solid rgba(42, 43, 47, 0.2);
    
}




body,

.bgLight p,
.bgLight2 p,
.bgLight p > a,
.bgWhite p,
.bgWhiteGY p,
.accordion-content
 {color: var(--text);}
 
.bgLight p >  a:hover { color:#88784d;}


.textShadow {text-shadow:3px 3px 25px rgb(29, 105, 129);}



/* ==============================================================
							BASIC COLORS
================================================================= */

::-moz-selection { /* Code for Firefox */
    color: #f8f8f8;    background:#918c7f;}

::selection {    color: #f8f8f8;    background:#918c7f;}  
.bgRed   { background: var(--red);}
.bgGreenDark   { background: var(--greendark);}
.bgGrayG  { background: var(--grayG);}
.bgGreenG-l  { background: var(--greenG-light);}
.bgGreenG-vertical  { background: var(--greenG-vertical);}
.bgLight  { background: var(--lightgray);}
.bgGray  { background: var(--gray);}
.bgWhite 	{ background: #fff;}
.bgWhiteG {background: linear-gradient(180deg,rgba(255, 255, 255, 0) 25%, rgb(255, 255, 255) 73%)}
.bgWhiteGY {background: var(--whiteGY)}
.bgWhite-clip {background: var( --whiteG-clip)}




.txtColorDark 		{ color: var(--reddark) !important;}
.textBlack		{ color: var(--black) !important;}
.txtWhite 		{ color: var(--offwhite)!important;}

  
  

 
}



#smooth-content { background: var(--lightgray);}



.bgHomeS  { 	background-image: url(../img/bg-s.webp); 
			background-repeat: no-repeat;
			
			background-position: center center;
			background-size: cover; 
			z-index: 0;		
			}

@media only screen and (min-width: 40.063em) {

.bgHomeS  { 	background-image: none; 
				
			}
.bgHomeM  { 	background-image: url(../img/bg-m.webp); 
			background-repeat: no-repeat;
			background-position: center;	
			background-position: 30% center;
			background-size: cover; 
			z-index: 0;		
			}
			

}


@media only screen and (min-width: 64em) {


.bgHomeM  { 	background-image: url(../img/bg-l.webp); 
			background-repeat: no-repeat;
			background-position: center;	
			background-position: center center;
			background-size: cover; 
			z-index: 0;		
			}
			

}




.feature { position: relative; height: 100%; overflow: hidden;  min-height: 250px;}
.feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}


.featureBox { border-left: 2px solid #8bb252 }


  
  .bgDC  {  background-image: url(../img/dc-bg-s.webp); 
			
			background-repeat: no-repeat;
	 background-position: center;	
  background-size: cover; 
  z-index: 0;		
			}
			

.about {
  position: relative;
}

.about > * {
  position: relative;
  z-index: 1;
}

.about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/bg-au-s.webp") no-repeat right bottom;
  background-size: cover;

  /* Mobile Standard: Fade nach oben */
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #00000040 35%, #000 80%);
          mask-image: linear-gradient(to bottom, transparent 10%, #00000040 35%, #000 80%);
}


.heroB { height: calc(var(--vh) * 100); }
.hero {min-height:550px;}  






@media only screen and (min-width: 64em) {

			
.about::after {
    background: url("../img/bg-au-l.webp") no-repeat right bottom  ;
    background-size: cover;

    /* hier kannst du den Fade breiter/weicher machen */
    -webkit-mask-image: linear-gradient(to left, black 0%, #0000 100%);
            mask-image: linear-gradient(to left, black 0%, #0000 100%);
  }


.heroB { height: 100vh; }

}

}





/* ==============================================================
							GENERAL STYLES
================================================================= */
html {
    margin-right: 0 !important;
    overflow: visible !important;
}

.round-right {
  border-bottom-right-radius: var(--roundCorner);
}

.round-left {
  
   border-top-left-radius: var(--roundCorner);
}

.round-left-b {
  
   border-bottom-left-radius: var(--roundCorner);
}

.round {
  
   border-radius: var(--roundCornerSmall);
}


body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	height: auto; 
	
}

.projects .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  
}

.mask {overflow: hidden;}

.inline-list {
  	list-style: none;
  	margin-top: 0;
  	margin-bottom: 1.0625rem;
  	margin-left: -1.375rem;
  	margin-right: 0;
  	overflow: hidden;
  	padding: 0; 
}

.inline-list > li {
	display: block;
    float: left;
    list-style: none;
    margin-left: 0; 
}

.inline-list > li > * { display: block; }

.inline-list > li:not(:last-child) { margin-right: 15px; }


p + h4, h1 + p    { margin-top: 30px; } 

h4 + p, 
h4 + ul { margin-top: 10px; }

h5 + p, 
h4 + p, 
h3 + p,
h3 + ul,    
h4 + p, 
ul + h4, 
h2 + p:not(.subline) , 
h2 + ul{ margin-top: 10px; }




.ctaBtns { margin-top: 40px; }

pre {
	display: block;
  	padding: 15px;
  	font-size: 14px;
  	line-height: 1.42857143;
  	word-break: break-all;
  	word-wrap: break-word;
  	color: #575a5d;
  	background-color: #f5f5f5;
  	border: 1px solid #cccccc;
  	margin-top: 40px;
}

.label { color: white; }

ul.no-bullet { margin-bottom: 0; }

ul.socialLinks,
ul.contactList,
ul.portfolio,
ul.projects,
ul.folioMeta,
ul.blogMasonry,
.commentList ul,
ul.clientsGrid,
ul.testimonialsGrid,
ul.solidBox,
ul.blogGrid,
ul.service,
ul.lightboxGallery,
ul.pricing-table {
	list-style: none;
	position: relative;
}


.ul-list__item {
  position: relative;
  padding-bottom: 15px;
 padding-left: 5px;
  color: inherit;
 
}

ul.socialLinks {list-style:inline;}

.service {
  list-style: none;     /* Standard-Bullets ausblenden */
  padding-left: 0;
  padding-top: 10px;
  margin: 0;
}

.service li {
  position: relative;
  padding-left: 1.5rem; /* Platz für den Strich */
  margin-bottom: 1.4rem;
  line-height: 1.5;
}



.service li::before {
  content: "\2014";     /* Geviertstrich */
  position: absolute;
  left: 0;
  top: 0;               /* ausgerichtet zur ersten Zeile */
  color: #2f6b52;       /* Farbe anpassen */
  font-weight: bold;
}


.small .service li {
 
  margin-bottom: 1rem;
  line-height: 1.5;
}




/* Rotes Quadrat als Bullet + mehr Abstand zwischen li */
ul.list{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.list > li{
  position: relative;
  padding-left: 1.1rem;
  margin: 0 0 0.75rem 0;  /* Abstand zwischen den Zeilen */
  line-height: 1.45;
}

ul.list > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;          /* vertikale Ausrichtung zum Text */
  width: 0.5rem;
  height: 0.5rem;
  background: var(--red);;  /* rot */
}

.contactList li:not(:last-child) { margin-bottom: 10px; }



.menuItem { padding-top: 30px; }

.menuItem span {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	padding-bottom: 10px;
	
}
.shadow-tiny {box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.shadow-small {box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.47) 0px 8px 16px -8px;}

.imgBorder { border: 5px solid #fff;}

.shadow {box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 93, 75, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px}

.figure-with-caption {
  position: relative;
  display: inline-block;    /* passt sich der Bildgröße an */
  margin: 2rem;             /* nach Bedarf Abstand außen */
}

.figure-with-caption img {
  display: block;
  width: 100%;
  height: auto;
}

.caption-box {
  transform: translateY(-50%);
  background: #fff;
	padding: 10px 20px;   
  
  border-radius: 10px 0 0 0;

  text-align: center;
  font-size: 0.875rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
}

.team .caption-box  { 
 background: var(--greenG);
  color: var(--offwhite);
  padding: 10px 20px;
  border-radius: 10px 0 0 0;
  text-align: left;
  position: absolute;
  min-width: 220px;
 }
 
 .caption-box span {
  display: block;              
  font-size: 75%;             
  text-transform: uppercase; 
opacity:0.6;  
}
 

 @media screen and (max-width: 64em) {
.team img  {    border-bottom: 2px solid var(--reddark); }
.team .paddingContent { padding: 0  };
}

/* Transitions
-----------------------------------------------------------------*/

a,
.link,
.button,
.blogTitle a,
.shareBtns a,
.pricing-table,
.tabs-title > a,
.clientsGrid li img,
input[type="submit"],

.link [class*="icon-"],
.comingSoonNav .inline-list a span,
frameBox:hover
{
	outline: none;
	
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}




/* ==============================================================
					 		LAYOUT STYLES
================================================================= */



.fullWidth .headerWrapper,
.fullWidth .heroWrapper,
.fullWidth .mainWrapper,
.fullWidth .footerWrapper,
.fullWidth .stretched {
	
	max-width: 100%;
	width: 100%;
	height: auto;
}


/* ==============================================================
					 	HEADER & MENU STYLES
================================================================= */





  header {
      height: auto;
      z-index: 200;
  }
  
  
  .first-section { padding-top: 70px;  }


  .navHeight {
      height: 150px;
      min-height: 100px;
  }

  .headerWrapper,
  .headerWrapper,
  .navWrapper,
  .navWrapper nav {
      height: 100%;
  }

  .navWrapper {
      padding: 0;
      margin: auto;
  }


  .toggle-button {
      position: absolute;
      right: 5vw;
      top: 20px;
  }


 
  .toggle-button .menu-icon::after {
      background: #fff;
      -webkit-box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
      box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
      content: '';
  }
  
  
  @media screen and (max-width: 63.9375em) {
      .is-closed {
			   opacity: 0;
				max-height: 0;
				overflow: hidden;
				transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;

			}

			.is-open {
				 opacity: 1;
				max-height: 500px; /* oder setzen Sie hier die maximale Höhe, die Ihr Menü haben könnte */
				transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
				padding-bottom: 40px; padding-top: 40px;
			}
  }
  
 




  header .dropdown.menu.vertical>li.opens-right>a::after,
  header .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle)>a::after {
      position: relative;
      top: -3px;
      right: 0;
      box-sizing: content-box;
      display: inline-block;
      width: 5px;
      height: 5px;
      margin-left: 8px;
      content: "";
      border-color: var(--menu);
      border-style: solid;
      border-width: 2px 2px 0 0;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
  }

  header.sticky {
      z-index: 99999;
  }


  header .dropdown.menu.medium-horizontal>li.opens-right>.is-dropdown-submenu {
      padding: 20px;
      z-index: 99999;
		border-top: 3px solid #000;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      transition: all .3s ease;
      -webkit-transform: scale(0);
      transform: scale(0);
      display: flex;
	  min-width: 340px;
  }

 .menu-wrapper>ul>li>ul{
opacity: 0;
} 

  header .dropdown.menu.medium-horizontal>li.opens-right>.is-dropdown-submenu.js-dropdown-active  {
      -webkit-transform: scale(1);
      transform: scale(1);
	opacity: 1;
  }
  
  .menu-wrapper>ul>li>ul.is-active {
opacity: 1;
} 






.langSelection:not(:last-child) {
    margin-right: 10px; 
}

  .submenu li>a {
      position: relative;
      transition: all .2s ease-in-out;
	  text-align:left;
  }

  .submenu li>a::before {
      position: absolute;
      top: 50%;
      left: 10px;
      width: 0;
      height: 2px;
      content: "";
      background:  var(--red);
      transition: all .2s ease-in-out;
      transform: translateY(-50%);
  }

  .submenu li:hover>a::before {
      width: 10px;
  }

  .submenu li:hover>a {
      padding-left: 30px !important;
  }

  .header-shadow-wrapper {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 30px;
      overflow: hidden;
  }

  .header-shadow-wrapper::after {
	position: relative;
	top: -60px;
	display: block;
	width: 80%;
	height: 60px;
	content: "";
	border-radius: 15%;
	box-shadow: 0 0px 20px -5px rgba(12, 20, 10, 0.19);
	
	left: 50%;
	transform: translateX(-50%);
  }


  header {
      position: fixed;
      z-index: 900;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 1.428572;
      background-color: var(--red);
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
  }
  
  

  header .logo {
     padding-block: 20px; 
	/* padding-left: 5vw; */
	text-align: left;
      
    transition: all 0.3s ease;
    -webkit-transform: translateY(0.125rem);
    -ms-transform: translateY(0.125rem);
    transform: translateY(0.125rem);
  }

  header .logo img {
      width: 160px; 
  }  
   .sticky-shrinknav-header {
    width: 100%;
  }

  header .menu-wrapper {
      border-top: 1px solid #e9e9e9;
  }

  header .menu-wrapper li.menuitem {}

  header .menu-wrapper li.is-dropdown-submenu-parent>a {
      color: #26c6da;
  }

  header .dropdown.menu>li>a {
     padding: 1.47rem 2rem; 
      text-transform: lowercase;
      font-size: 16px;
	  letter-spacing: 0.05rem;
  }
  
  
    .sticky-shrinknav-menu li li a {
   
    text-transform: none !important;
     font-size: 16px !important;
    padding: 15px 10px !important; }

  

@keyframes stickyTransition {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}



header.sticky .grid-margin-x > .cell { 
    transition: all 0.5s ease;
}

  .sticky.is-stuck.is-at-top {
        z-index: 99999;
        margin-top: 30px;
    -webkit-animation-name: stickyTransition;
    animation-name: stickyTransition; 
	 
  }

 .sticky.is-stuck.is-at-top + section#content {
padding-top: 290px;
transition-property: padding-top;

} 

  .menu.medium-horizontal {
      z-index: 99999;
  }

header.is-stuck .logo {  
    padding-block: 0;
}
 
header.is-stuck .logo {
    -webkit-transform-origin: 0 0;
    transform-origin: center center;
    transition: all .7s ease;
    -webkit-transform: scale(0);
    transform: scale(0); 
	opacity: 0;
	height: 0;
}
 
  header li.is-accordion-submenu-parent {
      flex-direction: column;
      background-color: #f6f6f621;
  }

  header li.is-accordion-submenu-parent:before {
      position: absolute;
      top: 20px;
      right: 18px;
      width: 13px;
      height: 1px;
      content: "";
      background-color: #fff;
  }

  header li.is-accordion-submenu-parent:after {
      position: absolute;
      top: 20px;
      right: 18px;
      width: 13px;
      height: 1px;
      content: "";
      background-color: #111;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  }
  


  header li.is-accordion-submenu-parent .is-accordion-submenu.is-active {
      background-color: #efefef;
  }

  header .menu.align-center li {
      justify-content: flex-start;
  }
  
   header .menu.align-center .langSelectionMobile {
     justify-content: flex-end;
}

  header .menu.align-center li[aria-expanded="true"]:after {
      display: none;
  }

  header .menu.align-center li>a {
      display: block;
      padding: 14px 15px;
      font-family: var(--body);
	 
      font-size: 15px;
	  letter-spacing:0.01rem;
      color: var(--menu);
      text-decoration: none;
      text-transform: uppercase;
      transition: all .2s ease-in-out;
	 
  }
  
   header .menu.align-center .submenu li>a {

      color: var(--text);
     
  }
  
   header .menu.align-center a {
      
	  width:100%;
  }
  
  header .menu.align-center .langSelectionMobile a {
     	  width:auto;
  }
   



  header .menu.align-center li.is-accordion-submenu-parent>ul li a {
      padding: 14px 15px 14px 30px; 
      font-size: 16px;      
      text-transform: inherit;
      background-color: #efefef;
	  margin-left: 20px;

  }
  
	header  .align-center.vertical.menu > li > a:hover,
	header  .align-center.vertical.menu > li > a:active    {     
      color: var(--gold-light);     
      transition: all .2s ease-in-out;
  }
  
  
  .mbreak {
padding-top: 20px;
  margin-left: 25px;
  color: var(--reddark);
  font-size: 70%;
  font-weight: 600;
  border-bottom: 2px solid;
  max-width: 30%;
}

}


/* ==============================================================
						Portfolio STYLES
================================================================= */



   .gallery-controls { margin: 1.25rem 0; }
    .project-item.is-hidden { display: none !important; }

    .project-card {
      display: block;
      border: 1px solid #e6e6e6;
    /*   border-radius: 6px; */
      overflow: hidden;
      background: #fff;
      color: inherit;
      text-decoration: none;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }
    .project-card:hover { text-decoration: none; }
    .project-card img { width: 100%; height: auto; display: block; }
    .project-meta { padding: .75rem .85rem; }
    .project-title { margin: 0; font-size: 0.875rem; line-height: 1.25;  letter-spacing: 0;}  
    .project-tags { margin: .35rem 0 0; font-size: .85rem; color: #666; }

	.goverlay, .glightbox-mobile .goverlay {	  background: #EBEAE8;	}
		
		.glightbox-clean .gdesc-inner {   background: #fff;}
		
		.glightbox-clean .gslide-desc,	
		.glightbox-mobile .glightbox-container .gslide-desc {  color: #000;}
.glightbox-mobile .glightbox-container .gslide-title, .glightbox-clean .gslide-title {
  color: var(--red);
  font-size: 1em;
   margin-bottom: 5px;
}
.gdesc-inner, .glightbox-clean .gslide-media  {
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  
}

.gdesc-inner h4, 
.glightbox-clean .gslide-title  {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0rem;
  line-height: 1.1;
  color: var(--red);
  
}


 .glightbox-clean .gclose  {
  background-color: rgba(255, 0, 0, 0.75);
  border-radius: none;
} 
 

.glightbox-clean .gnext, .glightbox-clean .gprev {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color:#000;
}





.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
  color: #7c7878; font-weight: 400;
  opacity: 1;
}

.glightbox-mobile .glightbox-container .gslide-description {
  
  background: transparent;
 
}


		.project-item {padding-bottom: 1.8rem; }

		/* mobil: links (Default) */
		.button-group{
		  justify-content: flex-start;
		  gap: 0.75rem;           /* mehr Abstand zwischen Buttons */
		  
		  font-size: 0.75rem;
		}
		
		.button-group .button { font-size: 0.75rem;
		}

		/* ab medium: zentriert */
		@media screen and (min-width: 40em){
		  .button-group{
			justify-content: center;
			gap: 1rem;            /* optional größer ab Desktop */
		  }
		}

		/* optional: falls Foundation margins der .button stören */
		.button-group .button{
		  margin: 0;
		}
		
		
		
		.gclose.disabled, .gnext.disabled, .gprev.disabled {	  opacity: 0;	}


@media (min-width: 64rem) {
  .glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
    background-color: rgb(251, 0, 0);
  }
}		


@media (hover: none) and (pointer: coarse), (max-width: 64em) {

  /* nur aktive Pfeile sichtbar */
  .glightbox-container .gprev:not(.disabled):not([aria-disabled="true"]),
  .glightbox-container .gnext:not(.disabled):not([aria-disabled="true"]) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999999 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* deaktivierte Pfeile ausblenden */
  .glightbox-container .gprev.disabled,
  .glightbox-container .gnext.disabled,
  .glightbox-container .gprev[aria-disabled="true"],
  .glightbox-container .gnext[aria-disabled="true"] {
    display: none !important;
    pointer-events: none !important;
  }

  .glightbox-container .gprev { left: .75rem !important; }
  .glightbox-container .gnext { right: .75rem !important; }
}
  
  
  .glightbox-container .gprev svg path,
.glightbox-container .gnext svg path{
  fill: #fff !important;
  stroke: #fff!important;
}

  .glightbox-container .gprev { left: 0.75rem !important; }
  .glightbox-container .gnext { right: 0.75rem !important; }
}
/* ==============================================================
						Kunden STYLES
================================================================= */
@charset "UTF-8";

.testimonial-slider-container {
  
  padding: 1rem 1rem;
}

.testimonial-slider-container .orbit-previous,
.testimonial-slider-container .orbit-next {
  color: #0a0a0a;
}

.testimonial-slider-container .orbit-previous:hover, .testimonial-slider-container .orbit-previous:active, .testimonial-slider-container .orbit-previous:focus,
.testimonial-slider-container .orbit-next:hover,
.testimonial-slider-container .orbit-next:active,
.testimonial-slider-container .orbit-next:focus {
  background-color: transparent;
}

.testimonial-slider-container .orbit-previous {
  left: -1rem;
}

.testimonial-slider-container .orbit-next {
  right: -1rem;
}

.testimonial-slider-container .testimonial-slide {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.testimonial-slider-container .testimonial-slide-content {
  padding: 1rem 1.5rem;
}

@media screen and (min-width: 40em) {
  .testimonial-slider-container .testimonial-slide-content {
    padding: 1rem 4rem;
  }
}

.testimonial-slider-container .profile-pic {
  max-width: 225px;
}

.testimonial-slider-container .testimonial-slide-text {
/*   padding-left: 3rem; */

}

.testimonial-slide-text p {

  line-height:1.5;
 
}

.testimonial-slider-container .testimonial-slide-quotation {
 
  position: relative;
}

.testimonial-slider-container .testimonial-slide-quotation::before {
  content: "“";
  font-size: 6rem;
  color: var(--red);
  position: absolute;
  top: -3rem;
  left: -3rem;
}

.testimonial-slider-container .testimonial-slide-author-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 39.9375em) {
  .testimonial-slider-container .testimonial-slide-author-container .testimonial-slide-author-info {
    margin-left: 1rem;  
  }
  
  .testimonial-slider-container .testimonial-slide-text {
  padding-left: 2rem;

}
}




/* ==============================================================
							BUTTONS
================================================================= */



.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 2.0rem;
  border: 1px solid var(--red);
  background: rgb(216, 63, 39);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  background: #fff;
  color: var(--red);
  border-color: var(--red);
}

.bgRed .arrow-button {  color: white;}
.bgRed .arrow-button:hover {  color: #f5c91c;}
.bgRed .arrow-button .circle{   border: 2px solid #f5c91c;}
.bgRed .arrow-button .arrow {  color: #f5c91c;}

.bgRed .arrow-button:hover .circle  {  background-color: #f5c91c;}

.bgRed .arrow-button:hover .arrow {   color: #0f2d3e;}


.bgWhiteGY .arrow-button,
.bgWhite .arrow-button,
.arrow-button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--reddark);
  font-family: sans-serif;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.bgWhiteGY .arrow-button .circle,
.bgWhite .arrow-button .circle,
.arrow-button .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--reddark); 
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
}


.bgWhiteGY .arrow-button .arrow,
.bgWhite .arrow-button .arrow,
.arrow-button .arrow {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--reddark);
  transform: translateX(0);
  transition: transform 0.3s ease;
  display: inline-block;
  position: relative;
  top: -2px; 
}

.bgWhiteGY .arrow-button:hover .circle ,
.bgWhite .arrow-button:hover .circle ,
.arrow-button:hover .circle {
  background-color: var(--red);
   border: 2px solid var(--red); 
  transform: scale(1.05);
}

.bgWhiteGY .arrow-button:hover .arrow,
.bgWhite .arrow-button:hover .arrow,
.arrow-button:hover .arrow {
  transform: translateX(4px);
  color: #fff; 
}

.arrow-button:hover { color: var(--red);}


/* Solid Buttons
-----------------------------------------------------------------*/

.button.btnBlack { background-color: #575a5d; }

.button.btnBlack:hover,
.button.btnBlack:focus,
.button.btnBlack:active { background-color: rgb(154, 146, 124); }

.button.btnWhite {
	background-color: rgba(255,255,255,1);
	color: #575a5d;
}

.button.btnWhite:hover,
.button.btnWhite:focus,
.button.btnWhite:active { background-color: rgba(255,255,255,0.8); }




/* hollow
-----------------------------------------------------------------*/

.button.hollow { background-color: #fff; color: #000; border: 1px solid var(--red);  }

.button.hollow:hover,
.button.primary,
.button.primary.is-active,
.button.hollow:focus,
.button.hollow:active { background-color: var(--red); color: #fff; }











[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 110%;
  padding-right: 10px;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-lnr-bubble:before {
  content: "\e900";
}
.icon-lnr-phone-handset:before {
  content: "\e901";
}
.icon-lnr-link:before {
  content: "\e902";
}
.icon-lnr-layers:before {
  content: "\e903";
}
.icon-lnr-envelope:before {
  content: "\e904";
}



table tbody td,
table tbody th {
padding: 0px ;
padding-bottom: 5px ;
	
}

table {
    width: auto;
   
}

table tbody tr:nth-child(even) {

background-color:transparent;
}

table tbody,
table tfoot,
table thead {
 border:none;
background-color:transparent;}




/* ==============================================================
					 		FOOTER STYLES
================================================================= */



#footer h2,#footer h4, #footer h3,
#footer a, #footer p, #footer .subline {color: #fff} 
#footer a:hover {color: #000} 
#copyrights { color: var(--red);   text-transform: uppercase;  font-size: 13px;}
#footer {background-color:var(--red)} 

#footer p {opacity: 0.8;  }
#footer .subline  {opacity: 0.5;  }
#footer img {padding-left:15px;}

#footer .dividerVertical  {
	height: 100%;
	padding:0px;	
	margin-left:0; 
	border-left: none;}

#footer .connect {padding-right:30px;}

#footer svg {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}



/* ==============================================================
							MEDIA QUERIES
================================================================= */




@media only screen and (min-width: 40.063em) {

	/* General Styles
	----------------------------------------*/

	.padding { padding: 40px 40px; }
	.paddingContent { padding: 35px; }
	.paddingBottom { padding-bottom: 60px; }
	.padding30 { padding: 30px; }
	.paddingTop { padding-top: 50px; }
	.paddingBottom { padding-bottom: 50px; }
	.module .paddingContent {   padding: 4vw; padding-right:35% }
	.link { margin-bottom: 0; }
	
	
	#logo img, #logo_footer img {margin-top:-6px;}
 
	
	
	
	.button,
	.subline,	
	.button.hollow,
	.service-headline span,
	h4,
	h5,
	a  { 	letter-spacing:0.09rem; }
	
	h2 {margin-bottom:1rem;}
	
	

	.folioDesc {margin-top: 10px;  margin-bottom: 50px;}
	.folioDesc p, .folioDesc span  {display:block;}


	.h1-divider { margin-left: 120px; }
	.h1-p  { margin-left: 120px; }
	.h1line {width: 50px;}
	.h1line::before {  left: 50px;  width: 60px;}

.hero-headline > div {padding: 2rem !important;}






	/* Counter Styles
	----------------------------------------*/

	.countdown-section {
	  display: inline-block;
	  padding: 0;
	  border-top: 0;
	  border-left: 1px solid rgba(42, 43, 47, 0.2);
	}

	.countdown-section:first-child { border-left: 0; }


	
	
	#footer .dividerVertical {
		 padding-right: 10px;
		 margin: 0;
		 border-left: none;
		}
		


		
		
}



@media only screen and (min-width: 64em) {

	.padding { padding: clamp(80px, 5vw, 140px) 40px; }
	.paddingBottom { padding-bottom: 5vw; }
	.padding-lr-40 { padding-left: 40px; padding-right: 40px; }
	.paddingContent {   padding: 2vw;}
	.large-noPaddingRight {   padding-right: 0 !important;}
	.module .paddingContent, .textmodule {   padding: 4vw;}
	.feature .paddingContent {   padding: 2vw;}
	p + h4    { margin-top: 50px; } 
	#footer .padding {   padding: 40px 40px; }
	
	p:last-child { margin-bottom: 0; }
	
	.bgGreenG  { background: var(--greenG-large);}
	.dividerVertical  {
	height: 100%;
	padding-left: 2.4375rem !important;
	/* margin-left:1.5rem;  */
	border-left: 1px solid var(--red)}

  .first-section {
    padding-top: max(120px, 8vw);
  }

	
h2,h3,h4,h5,h6 { -moz-osx-font-smoothing: greyscale; line-height:1.1 }

	
table,p,a { -moz-osx-font-smoothing: greyscale; line-height:2 }



	.error404 { font-size: 8.5rem; }

	.mediaBox > div,
	.plainBox > div { padding-bottom: 0; }
	
	.padding30 { padding: 40px; }


	.dividerVertical  {	
		margin-left:1.5rem !important; 
		padding-left:2.4375rem !important;
		border-left: 1px solid var(--red);
		padding-bottom:20px; padding-top:20px;
	}
	

	

#footer img {padding-left:0;}
#footer .connect {padding-right:0;}
#footer .dividerVertical {
		 margin-left:1.5rem; 
		 padding: 5px 0;
		position: relative;
		}


#footer .dividerVertical::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px; /* 2px + 2px + 2px */
  background: linear-gradient(to right,
    #000 0 4px,
    var(--red) 2px 4px,
    #fff 4px 6px
  );
}
	  
	  header {  position: relative;}
	  
	header .logo {
      padding-block: 0; 
	  padding-left:0;
      text-align: center;
      transition: all 0.3s ease;
    -webkit-transform: translateY(0.125rem);
    -ms-transform: translateY(0.125rem);
		transform: translateY(0.125rem);
	  }

  header .logo img {
    width: 250px;
  }

      /*#logo {margin: auto;   width: 70vw !important; max-width:400px;  }*/

      .sticky-shrinknav-menu {
          position: absolute;
          bottom: 0;
          transition: all 0.5s ease;
          border-top: 1px solid #2d8b28;
          width: 100%;
          max-width: 80rem;
		  left: 50%; /* Horizontale Zentrierung: 50% von links */
		  transform: translateX(-50%); /* Verschieben Sie das Element um die Hälfte seiner eigenen Breite nach links */
      }

      .sticky-shrinknav-menu li {
          border-radius: 2px;
          transition: all 0.3s ease;
      }

      .sticky-shrinknav-menu a:hover {
          color: var(--gold);
      }

      .sticky-shrinknav-menu a {
          color: var(--ak-600);
          padding-top: 1.4rem;
          text-transform: uppercase;
          font-size: 14px;
          padding: 20px 20px !important;
      }

      .sticky-shrinknav-header-title {
          transition: all 0.3s ease;
          position: relative;
          -webkit-transform: translateY(-1.875rem);
          -ms-transform: translateY(-1.875rem);
          transform: translateY(-1.875rem);
          margin-bottom: 0;

      }

      .sticky-shrinknav-header {
          width: 100%;
          height: 130px;
		  height: max(130px, 8vw);
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          background-color: var(--red);
          text-align: center;
          position: fixed;
          top: 0;
          left: 0;
          transition: all 0.5s ease;

      }
	  
	    .mbreak {
  padding-top: 20px;
  margin-left: 10px;

  max-width: 50%;
}
	  
	    .langSelectionA a {   padding-right:0px !important;	padding-left: 35px !important;   } 
		.langSelection li { display: block; }

      body.sticky-shrinknav-wrapper {
          margin-top: 0px;
      }

      body.sticky-shrinknav-wrapper .sticky-shrinknav-header {
          height: 55px;
         

      }
	  
	 

      body.sticky-shrinknav-wrapper .sticky-shrinknav-menu {
          border: 0;
          background-color: var(--navBG);
      }

      body.sticky-shrinknav-wrapper .sticky-shrinknav-header .sticky-shrinknav-header-title {
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          transition: all 0.3s ease;
      }



}
	
	
#contactWidget {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9999;
}

#contactToggle {
	display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 3.5rem;
  height: 6rem;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 0.5rem 0 0 0.5rem;
  cursor: pointer;
}

#contactToggle span {
  font-size: 1.3rem;
  line-height: 1;
}

#contactFlyout {
  position: fixed;
  top: 50%;
  right: 0; 
  transform: translateY(-50%);
  width: 450px;
  background: white;
  padding: 1.5rem 2rem;
  border-radius: 0.5rem 0 0 0.5rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  opacity: 0;
  pointer-events: none;

  transition: none;
}




.stats-table {
  width: 100%;
  table-layout: fixed;       /* wichtige Zeile */
  border-collapse: collapse;
  color: white;              /* Beispiel auf dunklem Grund */
  margin:0;
}

.stats-table .col-percent {
  width: 6rem;               /* fixe Breite der ersten Spalte */
}

.stats-table td {
  padding: 0.25em 0;         /* etwas vertikalen Abstand */
}

.stats-table td:first-child {
         /* Prozent rechtsbündig */
  padding-right: 1rem;       /* Abstand zwischen den Spalten */
  color: var(--lightblue);
  font-weight:600;
}

.stats-table td:last-child {
  text-align: left;
}


.image-stack {
  position: relative;
  /* Breite nach Bedarf: z.B. 100%, max-width oder fest in px */
  width: 80%;
  max-width: 100%;
}

.image-stack img {
  display: block;
  width: 100%;
  height: auto;
}

/* Das zweite Bild */
.image-stack .overlay {
  position: absolute;
  top: 30%;     /* nach unten verschoben */
  left: 75%;    /* nach rechts verschoben */
  width: 80%;   /* kleiner als das Basisbild */
  z-index: 1;   /* über dem Basisbild */
}



.sun-track{
  position:absolute;
  width:700px; height:200px; overflow:hidden;
  top:-20%; left:70%;
  transform:translate(-50%,-50%) rotate(30deg); /* Bahn 30° */
  transform-origin:center;
  overflow:visible;
}



.sun-img{
  position:absolute;
  left:-20%;
  top:var(--top,50%);
  /* Pfeil NICHT gegenrotieren */
  transform:translate(-50%,-50%); /* keine rotate() hier */
  mix-blend-mode:screen;
  opacity:0;
  animation:sunMove var(--dur,6s) linear infinite;
  animation-delay:var(--delay,0s);
  will-change: transform, opacity;
}

@keyframes sunMove{
  /* nur die Translation animieren, KEINE rotate() in den Keyframes */
  0%   { transform: translate(-20%, -50%); opacity:0; }
  40%  { opacity:1; }
  60%  { opacity:1; }
  100% { transform: translate(120%, -50%); opacity:0; }
}




/* Erde vertikal */
.earth-track{
  position: absolute;
  bottom: 5%;           /* via Media Queries anpassen */
  left: 50%;
  width: 80%;
  height: 200px;
  overflow: visible;     /* wichtig: clippen */
  transform: translateX(-50%);
  z-index: 100;
}

/* Einzelne Pfeile */
.earth-img{
  position: absolute;
  left: var(--left,50%);
  bottom: 0;                    /* Start UNTER dem Container */
  transform: translateX(-50%);  /* nur horizontal zentrieren */
  mix-blend-mode: screen;
  opacity: 0;
  animation: earthMove var(--dur,6s) linear infinite;
  animation-delay: var(--delay,0s);
max-width:280px; width:30%
}

/* Bewegung von unten → oben */
@keyframes earthMove {
  0%   { transform: translate(-50%, 50%);  opacity: 0; }   /* unten außerhalb */
  40%  { opacity: 0.7; }
  60%  { opacity: 0.7; }
  100% { transform: translate(-50%, -120%); opacity: 0; }  /* oben außerhalb */
}

.grid-container.home {
  max-width: 1800px;
}


/* default (medium) */