*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --green: #46A5A7;
  --gray: #E8E8E8;
  --darkgray: #333333;
  --normalgray: #C9C9C9;
  --lightblack: #303030;
  --neon-royalblue: #4169E1;  
  --neon-glow: rgba(65, 105, 225, 0.75);
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

html {
    scroll-behavior: smooth;
}


*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}
:root{
  --pink:#E65F78;
  --gray:#fff;
}
body{
  color:white;
}
li{
    list-style: none;
}
a{
      text-decoration: none;
}


/* HEADER */
header{
  height:10vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9998;
}

.navlogo img{
  max-height:70px;
}

.navmenu ul{
  display:flex;
  gap:20px;
}

.navmenu a{
  color: white;
  padding:10px 15px;
}

.navmenu a:hover{
  border-bottom:2px solid black;
}

.header-hamburger{
  display:none;
}

.sidebar{
  display:none;
}

.test{
    background-color: yellow;
    min-height: 100vh;
}
.test2{
    background-color: green;
    min-height: 100vh;
}

@media (max-width:1120px){
  .navmenu ul{
    display:none;
  }

  .header-hamburger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:26px;
    background:transparent;
    border:0;
    cursor:pointer;
    position:fixed;
    top:20px;
    right:20px;
    z-index:10000;
  }

  .header-hamburger span{
    width:100%;
    height:3px;
    background: black;
    transition:0.25s;
    transform-origin:center;
  }

  .header-hamburger.is-open span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .header-hamburger.is-open span:nth-child(2){
    opacity:0;
  }

  .header-hamburger.is-open span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .sidebar{
    display:block;
    position:fixed;
    top:0;
    right:-260px;
    width:260px;
    height:100vh;
    background:white;
    padding:90px 30px;
    transition:right 0.3s ease;
    z-index:9999;
  }

  .sidebar.show-sidebar{
    right:0;
  }

  .sidebar a{
    display:block;
    color:black;
    font-size:1.4rem;
    padding:15px 0;
  }
}





/* HOME */
.hero-section {
min-height: 100vh;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.hero-left {
width: 50%;
padding: 70px 7%;
z-index: 3;
}
.hero-left span {
color: #9ee600;
font-size: 18px;
font-weight: 700;
}
.hero-left h1 {
font-size: 54px;
line-height: 1.05;
margin: 18px 0;
text-transform: uppercase;
color: black;
}
.hero-left h1 strong {
color: #9ee600;
}
.hero-left p {
font-size: 14px;
line-height: 1.7;
color: #666666;
max-width: 420px;
margin-bottom: 30px;
}
.hero-button {
display: inline-flex;
align-items: center;
gap: 14px;
background: #a8f000;
color: #111111;
padding: 16px 28px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: 0.2s;
}

.hero-right {
position: absolute;
right: 0;
top: 0;
width: 62%;
height: 100%;
clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;
z-index: 1;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
}

.hero-line-main {
position: absolute;
left: 43%;
top: -5%;
width: 10px;
height: 115%;
background: #9ee600;
transform: rotate(20deg);
z-index: 4;
}
.hero-line-2 {
position: absolute;
left: 45%;
top: -5%;
width: 4px;
height: 115%;
background: #d6ff6b;
transform: rotate(20deg);
z-index: 4;
opacity: 0.6;
}
.hero-line-3 {
position: absolute;
left: 47%;
top: -5%;
width: 2px;
height: 115%;
background: #9ee600;
transform: rotate(20deg);
z-index: 4;
opacity: 0.3;
}

.hero-card {
position: absolute;
right: 7%;
bottom: 12%;
background: #111111;
color: #ffffff;
padding: 32px;
width: 320px;
z-index: 5;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.hero-card h3 {
font-size: 15px;
margin-bottom: 18px;
}
.hero-card p {
font-size: 12px;
color: #cccccc;
}
.hero-card span {
color: #9ee600;
}

@media (max-width: 900px) {
.hero-section {
display: block;
}
.hero-left {
width: 100%;
padding: 120px 24px;
}
.hero-left h1 {
font-size: 40px;
}
.hero-right {
position: relative;
width: 100%;
height: 420px;
clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}
.hero-line-main,
.hero-line-2,
.hero-line-3 {
display: none;
}
.hero-card {
position: relative;
right: auto;
bottom: auto;
width: calc(100% - 48px);
margin: -80px 24px 40px;
}
}




/* SERVICES */
.leistunge{
background:linear-gradient(90deg,#c9ff00,#7ed321);
padding:140px 40px;
font-family:Arial,Helvetica,sans-serif;
}
.leistunge-wrap{
max-width:1200px;
margin:0 auto;
}
.leistunge-head h2{
font-size:26px;
letter-spacing:2px;
margin-bottom:8px;
}
.leistunge-head p{
font-size:14px;
margin-bottom:40px;
}
.leistunge-row{
display:flex;
gap:15px;
flex-wrap:wrap;
}
.leistunge-box{
background:#0a0a0a;
color:#ffffff;
flex:1;
min-width:180px;
padding:55px 18px;
border-top:2px solid transparent;
transition:all 0.25s ease;
}
.leistunge-box:hover{
border-top:2px solid #c9ff00;
transform:translateY(-4px);
}
.leistunge-box i{
color:#c9ff00;
font-size:28px;
margin-bottom:15px;
display:block;
}
.leistunge-box h3{
font-size:13px;
letter-spacing:1px;
margin-bottom:10px;
}
.leistunge-box p{
font-size:12px;
line-height:1.4;
opacity:0.8;
}





/* ABOUT */
.about{
background:#ffffff;
padding:80px 40px;
font-family:Arial,Helvetica,sans-serif;
color: black;
}
.about-wrap{
max-width:1200px;
margin:0 auto;
display:flex;
gap:50px;
align-items:center;
flex-wrap:wrap;
}
.about-left{
flex:1;
min-width:300px;
}
.about-video{
width:100%;
height:auto;
display:block;
}
.about-right{
flex:1;
min-width:300px;
}
.about-right h2{
font-size:28px;
letter-spacing:2px;
margin-bottom:20px;
}
.about-right p{
font-size:14px;
line-height:1.6;
margin-bottom:25px;
}
.about-btn{
display:inline-block;
background:#c9ff00;
color:#000000;
padding:12px 25px;
text-decoration:none;
font-size:13px;
letter-spacing:1px;
transition:all 0.25s ease;
}
.about-btn:hover{
background:#000000;
color:#c9ff00;
}




/* ABLAUF */
.ablauf{
background:#ffffff;
padding:80px 40px;
font-family:Arial,Helvetica,sans-serif;
}
.ablauf-wrap{
max-width:1100px;
margin:0 auto;
}
.ablauf-top{
max-width:500px;
margin-bottom:40px;
}
.ablauf-sub{
color:#c9ff00;
font-size:12px;
letter-spacing:2px;
margin-bottom:10px;
}
.ablauf-top h2{
font-size:28px;
margin-bottom:10px;
color: black;
}
.ablauf-line{
width:50px;
height:3px;
background:#c9ff00;
margin-bottom:15px;
}
.ablauf-text{
font-size:14px;
line-height:1.6;
color:#222222;
}
.ablauf-boxes{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.ablauf-item{
background:#ffffff;
border:1px solid #e5e5e5;
padding:25px;
text-align:center;
}
.ablauf-item i{
color:#c9ff00;
font-size:28px;
margin-bottom:10px;
}
.ablauf-item h3{
color:#c9ff00;
font-size:22px;
margin-bottom:5px;
}
.ablauf-item p{
font-size:13px;
color:#333333;
}

@media (max-width:900px){
.ablauf{
padding:50px 15px;
}
.ablauf-wrap{
max-width:500px;
margin:0 auto;
}
.ablauf-top{
margin-bottom:30px;
}
.ablauf-top h2{
font-size:22px;
line-height:1.3;
}
.ablauf-line{
width:40px;
margin-bottom:12px;
}
.ablauf-text{
font-size:13px;
}
.ablauf-boxes{
grid-template-columns:1fr 1fr;
gap:12px;
}
.ablauf-item{
padding:18px;
}
}




/* SELF */
.self{
width:100%;
font-family:Arial,Helvetica,sans-serif;
}
.self-wrap{
display:flex;
flex-wrap:wrap;
}
.self-left{
flex:0 0 40%;
max-width:40%;
min-width:300px;
background:#bfff00;
padding:60px 50px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
}
.self-mark{
font-size:40px;
color:#000000;
margin-bottom:10px;
}
.self-left h2{
font-size:28px;
line-height:1.3;
color:#000000;
margin-bottom:15px;
}
.self-text{
font-size:14px;
color:#000000;
margin-bottom:25px;
max-width:350px;
}
.self-btn{
display:inline-flex;
align-items:center;
justify-content:flex-start;
width:fit-content;
background:#000000;
color:#ffffff;
padding:12px 20px;
text-decoration:none;
font-size:13px;
letter-spacing:1px;
}
.self-btn span{
margin-left:10px;
}
.self-btn:hover{
background:#ffffff;
color:#000000;
}
.self-right{
flex:0 0 60%;
max-width:60%;
min-width:300px;
}
.self-right img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%);
}
@media (max-width:900px){
.self-wrap{
flex-direction:column;
}
.self-left,
.self-right{
flex:0 0 100%;
max-width:100%;
}
.self-left{
padding:50px 20px;
}
.self-left h2{
font-size:24px;
}
}




/* CONTACT */
.contact{
width:100%;
max-width:1000px;
margin:50px auto;
font-family:Arial,sans-serif;
display:flex;
gap:40px;
color: black;
padding: 0 10px;
}
.contact-left{
flex:1;
}
.contact-title{
font-size:24px;
margin-bottom:10px;
}
.contact-sub{
font-size:14px;
margin-bottom:30px;
color:#555;
}
.contact-item{
display:flex;
align-items:center;
margin-bottom:15px;
font-size:14px;
}
.contact-icon{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
margin-right:10px;
color:#BFFE02;
font-weight:bold;
}
.contact-right{
flex:1;
display:flex;
flex-direction:column;
gap:10px;
}
.contact-input{
padding:12px;
border:1px solid #ccc;
font-size:14px;
width:100%;
}
.contact-textarea{
padding:12px;
border:1px solid #ccc;
font-size:14px;
width:100%;
height:100px;
resize:none;
}
.contact-button{
padding:12px;
background:#BFFE02;
color: black;
border:none;
cursor:pointer;
font-size:14px;
}
.contact-button:hover{
background:#7cb342;
}
@media(max-width:768px){
.contact{
flex-direction:column;
}
}




/* FOOTER */
.footer
{
background-color:#0b0b0b;
padding:60px 40px;
position:relative;
}
.footer-container
{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:40px;
}
.footer-brand
{
max-width:250px;
}
.footer-logo
{
display:flex;
align-items:center;
gap:10px;
margin-bottom:15px;
}
.footer-logo-icon
{
width:20px;
height:20px;
background-color:#a6ff00;
display:inline-block;
}
.footer-logo-text
{
color:#ffffff;
font-weight:700;
font-size:16px;
}
.footer-text
{
color:#cccccc;
font-size:13px;
line-height:1.5;
}
.footer-column
{
min-width:150px;
}
.footer-title
{
color:#a6ff00;
font-size:13px;
margin-bottom:15px;
}
.footer-list
{
list-style:none;
padding:0;
margin:0;
}
.footer-list li
{
margin-bottom:8px;
}
.footer-list a
{
color:#cccccc;
text-decoration:none;
font-size:13px;
}
.footer-list a:hover
{
color:#ffffff;
}
.footer-socials
{
display:flex;
gap:10px;
margin-top:10px;
}
.footer-socials a
{
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #ffffff;
color:#ffffff;
font-size:14px;
text-decoration:none;
}
.footer-socials a:hover
{
background-color:#a6ff00;
color:#000000;
border-color:#a6ff00;
}
.footer-top-button
{
position:absolute;
right:20px;
bottom:20px;
width:35px;
height:35px;
background-color:#a6ff00;
display:flex;
align-items:center;
justify-content:center;
color:#000000;
cursor:pointer;
}