body p, body a, body ul li, body h1, body h2, body h3, body h4, .footer-hg h1, body ol {font-family: Raleway;  }
body p, body a, body ol, body ul {font-size:18px; line-height:2; color: #333;}
body ul li {line-height:2; font-size:18px;}
body h1 {font-size:50px !important; color: #333; font-weight:bold;}
h1, h2, h3, h4 {hyphens: auto; word-wrap: break-word;}

body h2 {font-size:30px; font-weight: bold; color: #333; margin-bottom:20px;}
body h3 {font-size:26px; font-weight: bold; color: #333; margin-bottom:20px;}
body h4 {font-size:20px; font-weight: bold; color: #333; margin-bottom:20px;}



body .footer-hg h1 {font-size:24px !important; font-weight:bold;}

.row {--bs-gutter-x: 0rem;}


/* Verlinkung a */
.hover-link {position: relative; text-decoration: none; color: #01850d; }
.hover-link::after { content: ''; position: absolute; left: 0; bottom: -3px; /* 1mm tiefer als der Standardtext */ width: 0; height: 1px; /* Höhe des Unterstrichs */  transition: width 0.3s ease-in-out 0s; /* Startverzögerung von 0s */}

/*hellblau*/
.hover-link-farbe1::after { background-color: #a10b01; /* Farbe des Unterstrichs */}
a.hover-link-farbe1 { color: #a10b01 !important; /* Farbe des Links */}
a.hover-link-farbe1:hover { color: #a10b01; /* Farbe des Links */}

/* dunkelgrün */
.hover-link-farbe2::after { background-color: #01850d; /* Farbe des Unterstrichs */}
a.hover-link-farbe2 { color: #01850d; /* Farbe des Links */}
a.hover-link-farbe2:hover { color: #01850d; /* Farbe des Links */}

/* weiß */
.hover-link-farbe3::after { background-color: #fff; /* Farbe des Unterstrichs */}
a.hover-link-farbe3 { color: #fff; /* Farbe des Links */}
a.hover-link-farbe3:hover { color: #fff; /* Farbe des Links */}

/* blau */
.hover-link-farbe4::after { background-color: #0b659a; /* Farbe des Unterstrichs */}
a.hover-link-farbe4 { color: #0b659a; /* Farbe des Links */}
a.hover-link-farbe4:hover { color: ##0b659a; /* Farbe des Links */}


.hover-link:hover::after {width: 100%;}



/* Hintergrund */
.navzeile {background-color: #fff;}
.footer-hg {background-image: url("_Layout/Footer/Footer.jpg") !important; background-repeat:repeat;}
.hintergrund {background-image: url("_Layout/HG/HG-grau4.jpg"); background-attachment:fixed; }



a.button {padding: 10px 15px 10px 15px; border-radius: 5px;}
a.button:hover {background-color: #338dc1 !important;}
p.schatten {text-shadow: 1px 1px 1px #555;}

/* Bilderverweis*/
.bilderverweis { text-align: center; font-size:13px; font-weight:normal;}


/* Infozeile */
.infozeile {background-color:#071a3b; height: 36px;}
body .infozeile a {line-height:1.5; color:#fff !important; font-size:16px; text-decoration:none;}
body .infozeile p {color:#fff !important; font-size:16px;}

/* mobile Infoleiste */

@media (max-width: 525px) { 
								.mobile-weg { display: none; } 
								.infozeile {height: 48px;}
								 body h1 {font-size: 36px !important;
    }
							}



@media (max-width: 768px) {
    img.firmenlogo,
    .navbar-brand img {
        width: 190px;
        height: auto;
        max-width: 80vw;
    }
}


@media (max-width: 400px) {
    img.firmenlogo,
    .navbar-brand img {
        width: 150px;
        height: auto;
        max-width: 80vw;
    }
}

/* Leiste */
.leiste {background-color:#a10b01; height: 72px; padding-top:20px; padding-bottom:15px;}
body .leiste a {line-height:1.5; color:#fff !important; font-size:16px;}
body .leiste p {color:#fff !important; font-size:16px;}


/* Logo */
img.firmenlogo {width: 200px; height: auto; max-width: 100%; }
img.firmenlogo {margin-top:-7px;} /*individuelle Anpassung*/


/* Navigation */

.navzeile {padding-top: 15px; padding-bottom: 15px;}
.navbar {padding-top: 10px; padding-bottom: 10px;}
a.nav-link:hover {color: #0b659a !important;}
a.active:hover {color: #fff !important;}


.navbar .dropdown-menu a {color: #000000; font-size:14px; line-height:1.5em;}
.navbar .dropdown-menu a:hover {background-color: #0b659a; color: #ffffff; font-size:14px; line-height:1.5em;}

.navbar-light .navbar-nav .nav-link {margin-right:0px; padding-top:2px; padding-bottom:2px; padding-left:12px; padding-right:12px; color:#000; font-size:18px; text-transform: capitalize; font-weight:400;}
.navbar-light .navbar-nav .nav-link:hover {color: #0b659a;}


.nav-item a:hover {color: #0b659a !important;}

.nav-item a.dropdown-item {color: #000 !important;}
.nav-item a.dropdown-item:hover {color: #fff !important;}
.nav-link.active {background: #0b659a; padding: 6px 6px; border-radius: 3px; color: #fff !important;}

body .dropdown-menu a.active {color:#fff !important; background-color: #0b659a;}


/* mobile Navigation */

@media (max-width: 1200px) { .navbar-light .navbar-nav .nav-link {padding-left: 4px; font-size:13px; } }
@media (max-width: 990px) { .navbar-light .navbar-nav .nav-link {padding-left: 20px; font-size:20px; } }

.mobile_navigation {color:black; font-size: 30px; border: 0px solid white; padding:10px 10px 6px 10px;}

@media (max-width: 990px) { .navbar-nav {border-top: 1px solid black;} }


/*Hauptbild*/
.bild {border-bottom: 10px solid #fff;}



/*Rahmen*/
.rahmen {border-color: orange; border-width: 5px; border-style: solid; padding: 15px; background-color: rgba(255, 255, 255, 0.75);}



/* Homeseite */
a img.Kreis 	  {border-radius:50%; box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px 0px; display: block; margin-left: auto; margin-right: auto; }
img.Kreis 	  {border-radius:50%; box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px 0px; display: block; margin-left: auto; margin-right: auto; }


/* Slider */
#slider {box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px 0px;}



/* Video */
 .video-background {position: fixed; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1;}
 .video-background iframe {width: 100vw; height: 56.25vw; /* 16:9 Verhältnis */ min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
 .overlay {background-color: rgba(90, 150, 250, 0.5); /* Blau mit Transparenz */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}
 .content {position: relative; z-index: 1; color: white; text-align: center; top: 40%; transform: translateY(-40%);}
 
 .videoschrift a {border: 1px #fff solid; border-radius: 0%; padding: 10px 15px; color:white;}
 .videoschrift a:hover {border: 1px #fff solid; border-radius: 0%; padding: 10px 15px; color:black; background-color:white;}
 .videoschrift {margin-top:520px;}
  




/* Übersicht Technologie*/
a img.Quadrat 		{border: 1px #fff solid; border-radius: 5%; box-shadow: 10px 20px 15px silver; margin:10px;}
a img.Quadrat:hover {border: 1px #a10b01 solid;}



/* Mitarbeiter */
#Mitarbeiter {background-color: white; width:250px; margin-top:15px;}
#Mitarbeiter p.klein{color: #888; font-size:14px; line-height:1em;}



/* Referenzen */


  
 .gallery {
    text-align: center;
    margin: 20px auto;
    max-width: 2000px;
}

.gallery img {
    display: inline-block;
    margin: 5px;
    max-width: 100%;
    height: auto;
	
	 box-shadow: 5px 5px 8px #555;
}  



/* Leistungen */
img#Schatten {box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 15px 0px;}
  

/* Slider */
body .owl-prev:hover {background-color: #9ccd23 !important; border: 1px solid white !important;}	/*Pfeile*/
body .owl-next:hover {background-color: #9ccd23 !important; border: 1px solid white !important;}	/*Pfeile*/

body h1.slider {font-size:50px !important;text-shadow: 1px 1px 1px black;}
@media (max-width: 1300px) { body h1.slider  {font-size:36px !important;}}
@media (max-width: 1000px) { body h1.slider  {font-size:32px !important;}}
@media (max-width: 768px)  { body h1.slider  {font-size:40px !important;}}
@media (max-width: 600px)  { body h1.slider  {font-size:34px !important;}}
@media (max-width: 500px)  { body h1.slider  {font-size:30px !important;}}
@media (max-width: 400px)  { body h1.slider  {font-size:26px !important;}}
@media (max-width: 300px)  { body h1.slider  {font-size:22px !important;}}


/* Standard Farbe */
a.farbe {color: #9ccd23;}

body a.weiss:hover {color:#ffffff !important;}
body a.weiss, body p.weiss {color: #ffffff !important;}


/* Footer */

.footer-hg {margin-top: -20px;}

body .footer a {color: #9ccd23; }
/*hellblau*/
body .footer-hg .hover-link-farbe1::after { background-color: #fff !important;; /* Farbe des Unterstrichs */}
body .footer-hg a.hover-link-farbe1 { color: #fff !important;; /* Farbe des Links */}
body .footer-hg a.hover-link-farbe1:hover { color: #fff !important;; /* Farbe des Links */}
body .footer-hg p.weiss {color:#ffffff !important;}

body .footer-bild img {border-radius: 50%; display: block; margin-left: auto; margin-right: auto;}


h5.schwarz {color:#000;}

/* Pfeil */
a.farbe-hg {background-color: #0b659a;}
a.farbe-hg:hover {background-color: #338dc1 !important;}


a.breit:hover {letter-spacing: 0.5px;} /* Anpassen des Werts nach Bedarf */


/* Logo mobil */

@media (max-width: 768px) { .navbar-brand img { width: 190px; /* Smaller size for small screens */ } .infozeile p, .infozeile a {font-size: 16px; padding:4px;}}
@media (max-width: 500px) { .navbar-brand img { width: 170px; /* Smaller size for small screens */ } .infozeile p, .infozeile a {font-size: 14px; padding:6px;}}
@media (max-width: 400px) { .navbar-brand img { width: 150px; /* Smaller size for small screens */ } .infozeile p, .infozeile a {font-size: 12px; padding:8px;}}
    
.navbar-toggler { border-color: none; /* Weißer Rahmen für den Button */ }


.navbar-toggler:focus {
    text-decoration: none;
    outline: 0; 
	box-shadow: 0px 0px 0px white;}
	
.navbar-light .navbar-toggler {
    color: transparent;
	border-color: transparent;}

.navbar-toggler { border: 0px solid transparent; }



/* Kontaktformular */
textarea.rund {border-radius: 5px;}
input.rund {border-radius: 5px;}
span.rund {border-radius: 5px;}

button.btn-absenden {background-color:#a10b01; border-radius:5px; border:0px; font-weight:normal;}
button.btn-absenden:hover {background-color:#039dfc; border-radius:5px; border:0px;}

label {font-family:Raleway; font-size:14px;}

.input-group {padding-right:5px;}
textarea {padding-right:5px;}



/* Schriftarten */
/* Raleway Regular */
@font-face {
    font-family: "Raleway";
      font-style: normal;
      font-weight: 400;		   	
     src:  url("_Layout/Schriftart/raleway_regular/raleway-regular.woff2"), 
           url("_Layout/Schriftart/raleway_regular/raleway-regular.woff");
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("_Layout/Schriftart/raleway_bold/raleway-bold.woff2") format("woff2"),
    url("_Layout/Schriftart/raleway_bold/raleway-bold.woff") format("woff");
}


/* Firmenslider */

.logo-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    white-space: nowrap;
    animation: scrollLogos 35s linear infinite;
}

.logo-item {
    flex: 0 0 auto;
}

.logo-item img {
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Endlos-Animation */
@keyframes scrollLogos {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 768px) {

    .logo-track {
        gap: 35px;
        animation-duration: 25s;
    }

    .logo-item img {
        height: 55px;
    }
}