:root {
--clr1: #e85e04;
--clr1gardient: radial-gradient(ellipse farthest-corner at left center, #E85E04 24%, #BC3C1F 100%);
--clr2: #383837;
--bg-hellgrau: #ececec;
}

html, body {
	font-family: "Open Sans","Helvetica Neue",Verdana,Arial,sans-serif;
    scroll-padding-top: 70px; /* height of sticky header */
    background-color: var(--bg-hellgrau);
    height: 100%;
}


/* ------------- Navigation ------------ */

.bg-nav {
transition: 1.5s ease-in;    
background: #E85E04;
background: var(--clr1gardient);

}
.bg-nav.scrolled {
background: #E85E04;
background: var(--clr1gardient);

}

.navbar-nav .nav-link {
font-size: clamp(0.7rem, -0.1857rem + 1.4286vw, 1.1rem);
font-weight: 500;
color: #fff;     
text-transform: uppercase;
padding: 20px 5px 20px 5px !important;
margin-inline: clamp(0.4rem, 0.0308rem + 0.7692vw, 0.8rem);
border-radius: 12px;
text-align: center;
width: fit-content;
transition: background-color 700ms linear;
}

.navbar-nav .nav-link:hover {
background-color: var(--clr2);
}

.navbar-nav .nav-link.active, .navbar-nav .show > .nav-link {
color: #66bf7d; 
background-color: var(--clr2);
}

.navbar-toggler-icon {
color: #fff;
}

.navbar-brand {
margin-top: 10px;
margin-left: 20px;    
}

.logo {
 max-width: 140px;
 margin: 6px 0px;   
}

@media (min-width: 768px) { 
.logo {
max-width: 180px;   
}    
}
@media (min-width: 992px) {
.logo {
max-width: 180px;   
} 
}
@media (min-width: 1200px) {
.logo {
max-width: 200px;   
} 
}
@media (min-width: 1400px) { 
.logo {
max-width: 250px;   
}
}

/* ----------- Offcanvas ------------- */
.offcanvas {
 background-color: var(--clr1);   
}

.btn-close {
    color: #fff;
    background-color: #fff;
}
/* ---------------------- Header ---------------------- */
header {
background-color: var(--clr2);
transform: translateY(5rem);
}

.header-wrapper {
    border-radius: 1em;
    width:100%;
    display: grid;
    place-items: end stretch;
}
 
.header-bild  {
    display: block;
    width: 100%;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.header-text {
    grid-column: 1 / 2;
    grid-row: 1 / 2; 
    height: max-content;
    width: fit-content;
    place-self: center; 
    align-self: center; 
}

.header-text h2{
color: #fff;
font-family: 'Montserrat';
font-size: clamp(2.4rem, 0.375rem + 5.625vw, 6rem);
font-weight: 600;
text-shadow: -1px -1px 1px hsl(0, 0%, 87%), 1px 1px 1px hsl(0, 0%, 36%);
}



.headline-light {
color: #fff;
font-family: 'Montserrat';
font-weight: 300;
font-size: clamp(2rem, 1.6479rem + 1.5023vw, 3rem);
padding-block: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);
}
header p {
font-family: 'Open Sans';     
color: #fff;   
font-size: clamp(1rem, 0.8944rem + 0.4507vw, 1.3rem); 
font-weight: 300;
margin-bottom: 2rem;
text-wrap: balance;
}
/* ---------------------- Hauptcontentbereich ---------------------- */

h1 { font-size: clamp(1.75rem, 1.4005rem + 0.9709vw, 2.25rem);font-weight: 400; word-break: break-word;}
h2 { font-size: clamp(1.45rem, 1.0655rem + 1.068vw, 2rem);font-weight: 400;word-break: break-word; }
h3 { font-size: clamp(1.25rem, 0.9005rem + 0.9709vw, 1.75rem);font-weight: 400; word-break: break-word;}
h4 { font-size: clamp(1rem, 0.8252rem + 0.4854vw, 1.25rem);font-weight: 400;line-height: 1.8rem; word-break: break-word;}
h5 { font-size: clamp(0.75rem, 0.6801rem + 0.1942vw, 0.85rem);font-weight: 400; word-break: break-word;}


.headline {
text-transform: uppercase;
font-family: 'Montserrat';
font-weight: 400;
line-height: 2.625rem;
margin-top: 3.75rem;
text-wrap: balance;
}
  
.headline::after {
content: " ";
display: block;
width: 100px;
width: 50%;
border: 2px solid  var(--clr1);
margin-top: 0.5rem;
}

.unterstrich {
  width: 75%; 
  height: 3px; 
  background-color: var(--clr1);
  margin-bottom: 3.75rem;
}

p,ul,li {
font-family: 'Open Sans';    
font-size: clamp(1rem, 0.9296rem + 0.3005vw, 1.2rem);
color: var(--clr2); 
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-lines: 4;   
}

main ul li::marker {
  content: "∎ ";
  font-size: 120%;
  color: var(--clr1);
}

.button1 {
  color: #fff;
  background-color: var(--clr1);
  padding: 0.5rem 1.5rem;
  border-radius: 5px;
  border: none;
  transition: background-color 700ms linear;
}

.button1:hover {
  color: #fff;
  background-color: var(--clr2);
}

#auswahl a, main a:visited  {
text-decoration: none;
}


.bg-dunkelgrau {
background-color: var(--clr2);    
}

.bg-orange {
background: var(--clr1gardient);
}
.bg-logo {
background-image: url(../../images/logo-silva-grau.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* ---------------------- Auswahlbereich ---------------------- */
.auswahlbox {
background-color: var(--bg-hellgrau);   
border-radius: 10px; 
padding: 0.5rem;
box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5);
transform: translateY(4rem);
}
.auswahlbox:hover {
background-color: #ffffff;   
box-shadow: 2px 4px 10px hsla(0,0%,0%,0.3);
}

.auswahlbox:hover img{
filter: brightness(1.3);
}

.auswahlbox h5 {
font-family: 'Open Sans';    
font-size: clamp(0.8rem, 0.4308rem + 0.7692vw, 1.2rem);
font-weight: 600;
color: var(--clr2); 
text-align: center;
}

@media (max-width: 767.98px) {
.auswahlbox h5 {   
font-size: 1.8rem;
}  
}

.auswahlbox img {
border-radius: 10px; 
}
/* ---------------------- Blechverarbeitung ---------------------- */

#parallax1 {
  min-height: 300px;
  width: 100%;
  background-image: url(../images/parallax01.webp);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 2em;
  margin-bottom: 2em;
}
/* ---------------------- CNC-Berarbeitung ---------------------- */
.tf-1 {
transform: translateX(2rem);
}

@media (max-width: 575.98px) { 
.tf-1 {
transform: none;
}  
}

#parallax2 {
  min-height: 300px;
  width: 100%;
  background-image: url(../images/parallax02.webp);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 2em;
  margin-bottom: 2em;
}
/* ---------------------- Schweißkonstruktionen ---------------------- */
#parallax3 {
  min-height: 300px;
  width: 100%;
  background-image: url(../images/parallax03.webp);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 2em;
  margin-bottom: 2em;
}
/* ---------------------- Kontakt ---------------------- */

.kontakt {
  background-color: var(--clr2);
}

.kontakt a {
text-decoration: none;
transition: color 700ms linear;
}
.kontakt a:hover {
color: var(--clr1);
}

.kontakt p, .kontakt a, .kontakt td {
color: #fff;
}
.kontakt .fa-solid {
  color: var(--clr1);
}

/* ---------------------- Modal ---------------------- */
.modal-header h1 {
  font-size: 2.5rem;
  color: var(--clr1);
}

/*--------- Button Scroll Top ---------*/

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: 1px solid rgba(255, 255, 255,0.4); /* Remove borders */
    outline: none; /* Remove outline */
    background-color:var(--clr1); /* Set a background color */
    color: #fff; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 15px; /* Some padding */
    border-radius: 27px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: var(--clr2); /* Add a dark-grey background on hover */
  }