:root {

--lpurple: #733e8f;
--dpurple: #47255b;
--black: #161616;
--grey: #333333;
--dblue: #1e1f3e;
--lblue: #282c63;
--font: 'Myriad Pro', sans-serif;


}

a:link {

color: inherit;

}

@import url('https://fonts.cdnfonts.com/css/myriad-pro');
                




body {
   margin: 0;
   padding: 0;
   height: 100%;
   background-color: var(--black);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   overflow-x: hidden;
}
 
main {

padding: 3rem;

}

header {

background-color: var(--black);
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
padding-top: 1rem;


}

h1 {

    font-weight: 700;
    font-size: 50px;
    margin-top: 0;
    color: white;
    text-align: center;
    font-family: var(--font);

 }

h1 a {

text-decoration: none;
color: white;


}

h1 a:hover {
  animation-name: anispan;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes anispan {
  from {color: white;}
  to {color: var(--dpurple);} 
}

h1 a:visited {

color: white;

}


 

.navul {

display: flex;
flex-direction: nowrap;
justify-content: space-evenly;
list-style-type: none;
color: white;
text-align: center;
background-color: var(--black);
border: hidden;
border-radius: 20px;
max-width: 100%;
padding: 0px 40px 0px 40px;
margin: 0rem 3rem 0rem 1.5rem;
}

.navul li {

padding: 0.7rem;

}

.navul a {

text-decoration: none;
font-family: var(--font);
font-weight: 300;

}

.navul a:visited {

color: inherit;
text-decoration: none;

}

.navul li:hover {

background-color: var(--grey);
border: hidden;
border-radius: 10px;

}


@media (min-width: 1500px) {

.navul {

gap: 12rem;

}

}


@media (max-width: 800px) {

.navul {

gap: 2rem;

}

}


@media (max-width: 600px) {

.navul {

gap: 1rem;

}

}

@media (max-width: 490px) {

.navul {

gap: 0.5rem;

}

}



#li-logo {
  width: 10%;
  height: 10%;
  
}

#li-logo img {
  height: 1em;         
  width: auto;          
  display: inline-block;
  vertical-align: middle; 
}

/* .navulcontacts {

display: flex;
flex-direction: nowrap;
justify-content: space-evenly;
gap: 12rem;
list-style-type: none;
color: white;
text-align: center;
border-radius: 20px;
max-width: 100%;
padding: 0px 40px 0px 40px;
margin: 0rem 3rem 0rem 3rem;

}

.navulcontacts a {

text-decoration: none;

}

.navulcontacts a:visited {

color: inherit;

}
*/

.logo {

display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13rem;
    background-image: url(../img/Hintergrund\ Linien_Zeichenflaeche\ 1.png);
    height: 600px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center;
    box-sizing: border-box;
    margin-left: -3rem;
    margin-right: -6rem;
    margin-top: -2.5rem;
    margin-bottom: 8rem;

}

.logo img {

height: 145px;
width: auto;

}

.gradient {
    background: linear-gradient(90deg, #ffffff 1%, #ffffff 100% );
    height: 2px;
    margin-right: 5rem;
    margin-left: 5rem;
  }

@media (min-width: 800px) {

.gradient {

margin-right: 5rem;
margin-left: 5rem;

}

}

h2 {

font-family: var(--font);
font-weight: 700;
font-size: 45px;
text-decoration: underline;
text-underline-offset: 4px;

}



#aboutus {

margin-bottom: -0.7rem;
z-index: 1;
color: white;
text-decoration: underline;


}


#flex-container {

   display: flex;
   align-items: flex-start;
   gap: 40px;
   color:aliceblue;
   margin-top: 2rem;
   margin-bottom: 4rem;
   scroll-margin-top: 170px;

    /* view-timeline-name: --slide-right;
    view-timeline-axis: block;

      animation-name: slide-right;
      animation-timing-function: ease-out;
      animation-duration: 2s;
      animation-fill-mode: both;
      animation-timeline: --slide-right;
      animation-range: entry 10% cover 35%; */

}


.ueberschrift {

display: flex;
flex-direction: row;
gap: 0.5rem;
margin-bottom: -1rem;
}

.no-underline {

text-decoration: none;
font-size: 35px;

}

.first-word {

text-decoration: underline;
text-decoration-color: var(--dpurple);
font-size: 35px;

}

.purple-text {

color: var(--dpurple);
text-decoration: none;
font-size: 35px;

}



#textblockR {

width: 50%;
text-align: center;
border: solid var(--black) 0.5rem;
border-radius: 20px 90px 20px 90px;
padding: 1rem 1rem 1rem 0rem;
margin-left: -2.5rem;
scroll-margin-top: 120px;



}

#textblockR p {

font-family: var(--font);
font-weight: 300;
font-size: 15px;
color: white;
text-align: left;

}

#bold {

font-weight: bold;
padding-bottom: 20px;

}

#textblockR p {

margin: 0;

}


#workfield {

padding-top: 20px;

}

.ourpicsgrid {

   width: 50%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1rem;
   flex-wrap: wrap;
  

}



.ourpicsgrid img {

width: 100%;
height: auto;
border: hidden;
border-radius: 20px;
flex-wrap: wrap;

}


/* #bilder-wrap {

display: flex;
gap: 40px;
margin-top: 1rem;
margin-right: 2.5rem;
align-items: center;

}

#bilder-wrap img {

height: 400px;
width: auto;
border-radius: 20px;

}

*/

.gradient-box {
  height: 50px;
  width: 100%;
  background: linear-gradient(to bottom, var(--black), white);
  margin-left: -3rem;
  padding-right: 7rem;
}

.gradient-box2 {
  height: 50px;
  width: 100%;
  background: linear-gradient(to bottom, white, var(--black));
  margin-left: -3rem;
  padding-right: 7rem;
}


#what-we-do {

display: flex;
flex-direction: row;
align-items: center;
background-color: #ffffff;
color: var(--black);
margin-left: -3rem;
margin-right: -3rem;
padding-bottom: 2rem;
padding-top: 3rem;
gap: 1.5rem;
position: relative;
}

@media (min-width: 800px) {

#what-we-do {

padding-bottom: 0;

}

}

/* #ueberschrift2 {

display: flex;
flex-direction: row;
gap: 0.5rem;
margin-bottom: 1.5rem;
justify-content: flex-end;
margin-right: 4rem;
}

*/

#ueberschrift2 {

position: absolute;
  top: -5rem;  /* oder feinjustieren: z. B. -2rem, -3rem */
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;

}

#what-we-do-h2 {

text-decoration: none;
font-size: 35px;
align-items: flex-end;

}

#what-we-do-text {

  display: flex;
  flex-direction: column;
  justify-content: center; /* <== vertikale Zentrierung des Texts */
  width: 50%;
  font-family: var(--font);
  font-weight: 300;
  position: relative;
  margin-right: 0.5rem;


}

#what-we-do-img {

width: 50%;
margin-right: 2rem;
display: flex;
align-items: center;
}

#what-we-do-img img {

width: 100%;
height: auto;
margin: 1rem;
align-items: center;

}

#container-heading {

height: 10%;
align-items: right;

}



#what-we-do-text p {

margin-right: 0.5rem;
text-align: right;


}

#angebot {

margin-top: 5rem;
margin-bottom: 7rem;
place-items: center;
background-image: url(../img/Gooner_Zeichenflaeche\ 1.png);
background-size: cover; 
background-repeat: no-repeat; 
background-position: center center;
box-sizing: border-box;
z-index: -1;
margin-left: -3rem;
margin-right: -3rem;

}

@media (min-width: 1223px) {

.gradient2 {
    background: linear-gradient(90deg, #733E8E 0%, #733e8f 20%, #47255b 40%, #47245B 60%, #733E8E 75%, #733e8f 100%);
    height: 3px;
    margin-left: -3rem;
    margin-right: -3rem;
    margin-top: -7rem;
    margin-bottom: 7rem;

  }

}
@media (min-width: 1113px) and (max-width: 1222px) {

.gradient4 {

 background: linear-gradient(90deg, #733E8E 0%, #733e8f 25%, #47255b 50%, #47245B 100%);
    height: 3px;
    margin-left: -3rem;
    margin-right: -3rem;
    margin-top: -7rem;

}

}

@media (min-width: 1113px) {

.gradient3 {
    background: linear-gradient(90deg, #733E8E 0%, #733e8f 20%, #47255b 40%, #47245B 60%, #733E8E 70%, #733e8f 100%);
    height: 3px;
    margin-left: -3rem;
    margin-right: -3rem;

  }

}


#angebot h1 {

text-align: center;
font-weight: 700;
font-size: 50px;
margin-bottom: 7rem;
margin-top: -5rem;
padding-top: 8rem;

}

.angebot-heading {

color: white;
text-align: center;
text-decoration: none;
margin-top: 2rem;
margin-bottom: -0.7rem;
font-weight: 800;

}

article {

display: flex;
flex-direction: row;
color: white;
align-items: center;
max-width: 1100px;
z-index: 1;
margin-left: 3rem;
margin-right: 3rem;

}

article p {

position: relative;
z-index: 1;
font-family: var(--font);
font-weight: 300;
padding: 1rem;

}

.article-heading {

text-align: center;
text-underline-offset: 5px;
text-decoration-color: var(--lpurple);
font-size: 30px;

}

.article-p {
  width: 100%;
  justify-content: right;
 
}


.img-ecke {
  justify-content: left;
  width: 15%;
  height: auto;
  margin: 0;
  z-index: 0;
  border-radius: 10px;

}

@media (min-width: 800px){

.img-ecke {

width: 10%;

}

}

/* article img {

  grid-column: 1 / 4;
  grid-row: 2 / 3;
  width: clamp(120px, 15vw, 200px);
  height: auto;
  object-fit: contain;
  z-index: 0;
  margin-right: -2.5rem;
  align-self: center;

} */


/* article h2 {

grid-column: 6.5 / 7.5;
text-underline-offset: 5px;

}

*/


footer {

text-align: center;
font-family: var(--font);
font-weight: 300;
color: var(--lpurple);

}

.icons {

font-size: 35px;
margin-top: -0.3rem;
color: var(--lpurple);
margin-bottom: 0.9rem;
text-decoration: none;
}

.icons a {

text-decoration: none;
margin-right: 0.5rem;
margin-left: 0.5rem;
}


.icons a:visited {

color: inherit;

}

.icons a:hover {

color: white

}

.icons2 {

font-size: 35px;
margin-top: -0.3rem;
color: var(--lpurple);
margin-bottom: 3.9rem;
text-decoration: none;

}

.icons2 a {

text-decoration: none;
margin-right: 0.5rem;
margin-left: 0.5rem;
}


.icons2 a:visited {

color: inherit;

}

.icons2 a:hover {

color: white

}

footer img {

align-items: center;
width: 2.5rem;
height: auto; 

}

.mail {

text-decoration: none;


}

.mail:hover {

color: white;

}

.mail:visited {

color: inherit;

}

/* CONTACTS */

.form-heading {
  text-align: center;
  margin-bottom: 2.5rem;
  font-family: var(--font);
  font-weight: 700;
  padding-top: 7rem;
}

.kontakt-formular {
  max-width: 500px;
  margin: auto;
  padding: 2rem 3rem 2rem 2rem;
  outline: solid var(--lpurple) 0.5rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  color: aliceblue;
  background-color: var(--black);

}

.kontakt-formular label {
  display: block;
  margin-top: 1rem;
  font-family: var(--font);
  font-weight: 300;
}

.kontakt-formular input,
.kontakt-formular textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font);
  font-weight: 300;
}

.kontakt-formular button {
  margin-top: 1.5rem;
  font-family: var(--font);
  font-weight: 300;

}


#elsecontactp {

display: flex;
justify-content: center;
color: #ccc;
margin-top: 1rem;
border-radius: 10px;
margin-bottom: 0.5rem;
font-family: var(--font);
font-weight: 300;


}

#elsecontactemail {

display: flex;
justify-content: center;
margin-bottom: 5rem;

}

#elsecontactemail a {

color: white;

}


#elsecontactemail a:hover {

color: var(--lpurple);

}


.button {


padding: 0.75rem 1.5rem;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
background-color: var(--lpurple);
text-decoration: none;
font-family: var(--font);
font-weight: 300;


}


.button:hover {

background-color: white;
color: var(--lpurple);

}



.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
}



/* Arbeitsprobenseite */


.navulAP {
  display: flex;
flex-direction: nowrap;
justify-content: space-between;
gap: 12rem;
list-style-type: none;
color: white;
text-align: center;
background-color: var(--black);
border: hidden;
border-radius: 20px;
max-width: 100%;
padding: 0px 40px 0px 40px;
margin: 0rem 3rem 0rem 1.5rem;
position: relative; 
}


.navulAP li:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navulAP li {

padding: 0.7rem;

}

.navulAP a {

text-decoration: none;
font-family: var(--font);
font-weight: 300;

}

.navulAP a:visited {

color: inherit;
text-decoration: none;

}

.navulAP li:hover {

background-color: var(--grey);
border: hidden;
border-radius: 10px;

}





@media (max-width: 800px) {

.navulAP {

gap: 2rem;

}

}


@media (max-width: 600px) {

.navulAP {

gap: 1rem;

}

}

@media (max-width: 490px) {

.navulAP {

gap: 0.5rem;

}

}

#workproof {

text-decoration: none;
color: white;
text-align: center;
margin: 7rem 0rem 3rem 0rem;


}

#ani-margin {

margin-right: 3rem;
margin-left: 3rem;

}



#grid-work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: auto;
  width: 100%;
  gap: 3rem;


    
    view-timeline-name: --slide-left;
    view-timeline-axis: block;

      animation-name: slide-left;
      animation-timing-function: ease-out;
      animation-duration: 2s;
      animation-fill-mode: both;
      animation-timeline: --slide-left;
      animation-range: entry 10% cover 35%;
}


    @keyframes slide-left {
      from {
        opacity: 0;
        transform: translateX(-100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }





#grid-work2 {
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: auto;
  width: 100%;
  gap: 3rem;


    
    view-timeline-name: --slide-right;
    view-timeline-axis: block;

      animation-name: slide-right;
      animation-timing-function: ease-out;
      animation-duration: 2s;
      animation-fill-mode: both;
      animation-timeline: --slide-right;
      animation-range: entry 10% cover 35%;
  z-index: 0;
}

 
@keyframes slide-right {
      from {
        opacity: 0;
        transform: translateX(100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }


#grid-work img {

width: 100%;
height: auto;
object-fit: cover;
border: hidden;
border-radius: 20px;
transition: 0.3s;
cursor: pointer;

}

#grid-work img:hover {

transform: scale(1.05);

}

#grid-work2 img:hover {

transform: scale(1.05);

}

#grid-work2 img {

width: 100%;
height: auto;
object-fit: cover;
border: hidden;
border-radius: 20px;


}

.lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--black);
  justify-content: center;
  align-items: center;
  z-index: 99999; /* über allem */
  
}

.lightbox:target {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  z-index: 100000; 
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 99998; 
}

#space-bottom {

margin-bottom: 9rem;

}

/* Thank You Seite */


.logoty {

display: flex;
align-items: center;
justify-content: center;
margin-top: 4rem;
margin-bottom: 4rem;

}

.logoty img {

height: 100px;
width: auto;

}


#thankyou {

display: block;
text-align: center;
margin: 2rem 4rem 4rem 4rem;
color: white;
background-color: var(--black);
border-radius: 8px;
padding: 2rem;

}


#thankyou p {

margin-top: 2rem;
font-size: 18px;

}