:root{

--bg:#f7f5ff;

--dark:#09021c;

--dark-soft:#130532;

--primary:#631fde;

--primary-light:#985dff;

--text:#1f1f34;

--muted:#676781;

--radius:28px;

}
/* Zwingt den Browser, das Scrollen butterweich zu animieren */
html {
    scroll-behavior: smooth !important;
}

/* Zwingt ALLE Sektionen mit einer ID, 100px früher anzuhalten */
html body section[id] {
    scroll-margin-top: 60px !important;
}



*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.8;
overflow-x:hidden;

}



img{

max-width:100%;

display:block;

}



section{

padding:50px 0;

}



/* NAV */

.navbar{

background:linear-gradient(
90deg,
#09021c,
#1a0546
);

padding:18px 0;

}

.navbar .container{
display:flex;
align-items:center;
justify-content:space-between;
}


.navbar-brand img{

height:52px;

}

.navbar-nav{

gap:36px;

}

.navbar a{

color:white;

text-decoration:none;

font-weight:600;

}

.navbar .btn{

padding:14px 26px;

}

.btn-navbar-light{
color: white;
background: #584286;
border: 2px solid #584286;
}

.btn-navbar-light:hover{

background:#e6e0f5;
color:#584286;
border: 2px solid #584286;

}



/* BUTTONS */

.btn{

border-radius:18px;

padding:16px 28px;

font-weight:700;

}

.btn-primary{

background:

linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

border:none;

}

.hero-actions .btn-inline-light{
border: 2px solid #584286;
color: #ffffff;
background: #584286;
}



.btn-outline-light{
border: 2px solid #584286;
color: #584286;
background: white;
}

.btn-outline-light:hover{

background:#e6e0f5;
color:#584286;
border: 2px solid #584286;

}

.hero-actions .btn-inline-light:hover{
background:#e6e0f5;
color:#584286;
border:2px solid #584286;
}
.hero-actions .btn-outline-light:hover{
background:#e6e0f5;
color:#584286;
border:2px solid #584286;
transition:.2s;
}



/* HERO */

.hero{

padding-top:170px;

padding-bottom:120px;

overflow:hidden;

position:relative;

}

.hero::before{
content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:900px;
background:
linear-gradient(
180deg,
rgba(111,44,255,0.25),
transparent
);
z-index:0;
}


.hero .row{
position:relative;
z-index:1;}


.eyebrow{

color:var(--primary);

font-size:14px;

font-weight:800;

letter-spacing:4px;

margin-bottom:20px;



}

.eyebrow span{

color:#631fde;

}

.hero h1{

font-size:64px;

font-weight:800;

line-height:1.1;

margin-bottom:30px;


}

.hero h1 span{

color:#631fde;
}



.hero span{

color:#985dff;

}



.hero p{

max-width:560px;

font-size:22px;

color:var(--muted);

}



.hero-actions{

display:flex;
gap:18px;
margin-top:40px;
justify-content:center;

}

.hero-actions .btn-primary,
.btn-primary{
background: linear-gradient(90deg, var(--primary), var(--primary-light));
color: #fff;
border: #985dff ;
}

.hero-actions .btn{
display:inline-flex;
align-items:center;
gap:10px;
}
.icon-arrow{
width:18px;
height:18px;
flex-shrink:0;
}

.hero span{
color:#53456d;
}



.hero-image{
  border-radius: 32px;
  width: 75%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(152, 93, 255, 0.25);
  margin-left: auto;
}






.features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
margin-top:70px;
}
.features div{
padding:0 28px;
border-left:2px solid rgba(31,31,52,.1);
}
.features div:first-child{
border-left:none;
padding-left:0;
}
.feature-icon{
width:28px;
height:28px;
color:#584286;
margin-bottom:14px;
}
.features h6{
font-size:18px;
font-weight:700;
color:var(--primary);
}
.features p{
font-size:15px;
}



.features div{

padding:20px;

}



.features h6{

font-size:18px;

font-weight:700;

color:var(--primary);

}

.features p{

font-size:15px;

}



/* ABOUT */

.about-card{

background:

linear-gradient(
135deg,
#09021c,
#180546
);

color:white;

padding:70px;

border-radius:40px;

}

.about-card h2{

font-size:52px;

display:inline-block;
position:relative;
padding-bottom:20px;
margin:0 0 30px 0;

}

.about-card h2::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:90px;
height:3px;
background:#584286;
border-radius:2px;
}

.about-card h3{

margin-bottom:28px;
margin-top:28;

}

.about-card ul{

padding-left:20px;

}

.about-card li{

margin-bottom:16px;

}

.about-card .row{
position:relative;
}
.about-card .col-lg-5{
border-right:2px solid rgba(255,255,255,.1);
padding-right:50px;
}
.about-card .col-lg-7{
padding-left:50px;
}

.about-items{
margin-top:40px;
display:flex;
flex-direction:column;
gap:24px;
}
.about-item{
display:flex;
align-items:center;
gap:18px;
}
.about-icon{
width:48px;
height:48px;
min-width:48px;
border-radius:50%;
background:#584286;
display:flex;
align-items:center;
justify-content:center;
}
.about-icon svg{
width:22px;
height:22px;
color:white;
}
.about-item strong{
display:block;
font-size:16px;
margin-bottom:4px;
}
.about-item p{
margin:0;
font-size:14px;
color:rgba(255,255,255,.6);
line-height:1.4;
}

.check-list{
list-style:none;
padding:0;
margin-top:30px;
display:flex;
flex-direction:column;
gap:18px;
}
.check-list li{
display:flex;
align-items:flex-start;
gap:14px;
font-size:16px;
}
.check-icon{
width:24px;
height:24px;
min-width:24px;
border-radius:50%;
background:#584286;
display:flex;
align-items:center;
justify-content:center;
margin-top:2px;
}
.check-icon svg{
width:14px;
height:14px;
color: #ffffff;
}



/* PROJECTS */
.projects-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:50px;
}
.projects-header .section-title{
font-size:52px;
font-weight:800;
margin:0;
line-height:1.1;
color:var(--text);
position:relative;
display:inline-block;
padding-bottom:20px;
}
.projects-header .section-title::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:120px;
height:3px;
background:var(--primary);
border-radius:2px;
}
.projects-header .section-subtitle{
color:#584286;

}

.projects-header h2{
font-size:52px;
font-weight:800;
display:inline-block;
position:relative;
padding-bottom:20px;
margin:0 0 30px 0;
font-family:'Inter',sans-serif;
}

.projects-header h2::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:90px;
height:3px;
background:#584286;
border-radius:2px;
}

.filters{
display:flex;
gap:10px;
}
.filter{
border:none;
background:#584286;
color:#ffffff;
font-weight:600;
font-size:15px;
padding:12px 24px;
border-radius:14px;
cursor:pointer;
transition:.2s;
border: 2px solid #584286;
}
.filter.active{
background:#e6e0f5;
color:#584286;
border: 2px solid #584286;
}
.filter:not(.active):hover{
background:#e6e0f5;
color:#584286;
border: 2px solid #584286;
}

.project-card{
background:white;
border-radius:26px;
overflow:hidden;
box-shadow:
0 20px 50px
rgba(111,44,255,0.1);
transition:.3s;
}
.project-card:hover{
transform:translateY(-8px);
border: 2px solid #584286,
}
.project-card img{
height:240px;
width:100%;
object-fit:cover;
}
.project-card .body{
padding:30px;
}
.project-card h4{
margin:16px 0;
font-size:30px;
}

.status{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
font-size:15px;
}
.status svg{
width:18px;
height:18px;
}
.status.done{
color:#22a35a;
}
.status.progress{
color:#e8a322;
}

.status.info{
color:#584286;
}





/* STACK */

/* STACK */
#stack{
background:var(--bg);
}
.stack-card{
background:#f1eef9;
border-radius:32px;
padding:50px;
}
.stack-header .section-title::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:120px;
height:3px;
background:var(--primary);
border-radius:2px;
}


.stack-header h2{
font-size:52px;
font-weight:800;
display:inline-block;
position:relative;
padding-bottom:20px;
margin:0 0 30px 0;
font-family:'Inter',sans-serif;
}

.stack-header h2::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:90px;
height:3px;
background:#584286;
border-radius:2px;
}

.stack-header h3{
color:#584286;
margin-bottom:50px;
} 

.stack-header .section-subtitle{
font-size:28px;
font-weight:800;
color:var(--text);
}

.stack{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
gap:20px;
}
.stack-item{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
background:none;
box-shadow:none;
}
.stack-item i{
font-size:42px;
}
.stack-item span{
font-size:14px;
font-weight:600;
color:var(--text);
}

.stack-item .filmora-icon{
width:42px;
height:42px;
}


.stack span{


font-weight:700;

}



/* CONTACT */

#contact{
position:relative;
overflow:hidden;
padding-bottom:100px;
}
#contact::before{
content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:900px;
background:
linear-gradient(
0deg,
rgba(111,44,255,.25),
transparent
);
z-index:0;
pointer-events:none;
}

.contact-box{

overflow:hidden;

background:white;

border-radius:40px;

box-shadow:

0 20px 50px
rgba(0,0,0,.08);

}



.contact-box .col-lg-4 { 
  background: linear-gradient(135deg, rgba(9, 2, 28, 0.9), rgba(35, 6, 92, 0.9)); 
  color: white; 
  padding:30px 60px 60px 60px;
  position: relative; 
  z-index: 1; 
  overflow: hidden; 
}

.contact-box .col-lg-4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* KORREKTUR: Punkte entfernt, damit der Pfad in Laravels public-Ordner einrastet */
  background-image: url('/img/contact.png'); 
  
  background-size: 100% auto; 
  background-position: center bottom; 
  background-repeat: no-repeat;
  opacity: 0.5; 
  z-index: -1; 
}



.contact-box .col-lg-8{

padding:60px;

}

.contact-box .col-lg-4 h2{
font-size:36px;
margin-bottom:24px;
}
.contact-box .col-lg-4 p{
color:rgba(255,255,255,.7);
}

.contact-info{
margin-top:36px;
display:flex;
flex-direction:column;
gap:24px;
}
.contact-info-item{
display:flex;
align-items:flex-start;
gap:16px;
}
.contact-icon{
width:42px;
height:42px;
min-width:42px;
border-radius:50%;
background:#584286;
display:flex;
align-items:center;
justify-content:center;
}
.contact-icon svg{
width:20px;
height:20px;
color:white;
}
.contact-info-item strong{
display:block;
font-size:16px;
margin-bottom:0;
line-height:1.3;
}
.contact-info-item p{
margin:0;
font-size:14px;
color:rgba(255,255,255,.7);
line-height:1.3;
}

.btn-contact{
color: white;
background: #584286;
border: 2px solid #584286;
width:50%;
}
.btn-contact:hover{
background:#e6e0f5;
color:#584286;
border: 2px solid #584286;
}



.form-control{

height:62px;

border-radius:16px;

margin-bottom:16px;

border:

1px solid #ddd;

}



textarea.form-control{

height:auto;

}



footer{
background:
linear-gradient(
90deg,
#09021c,
#130535
);
color:white;
padding:60px 0 15px 0;
}
.footer-top{
display:flex;
gap:60px;
margin-bottom:40px;
}
.footer-brand{
flex:1.4;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.footer-logo{
display:flex;
align-items:center;
gap:14px;
margin-bottom:24px;
}
.footer-logo img{
height:44px;
}
.footer-logo strong{
display:block;
font-size:20px;
}
.footer-logo span{
display:block;
font-size:11px;
letter-spacing:1px;
color:rgba(255,255,255,.5);
}
.footer-social{
display:flex;
gap:12px;
}
.footer-social a{
width:68px;
height:68px;
border-radius:10px;
background:rgba(255,255,255,.1);
display:flex;
align-items:center;
justify-content:center;
color:white;
}
.footer-social svg{
width:52px;
height:52px;
}
.footer-social a:hover{
background:#e6e0f5;
color:#584286;
}


.footer-col{
flex:1;
display:flex;
flex-direction:column;

}

.footer-col h6{
font-size:15px;
font-weight:700;
margin-bottom:8px;
}
.footer-col a{
color:rgba(255,255,255,.65);
text-decoration:underline;
font-size:14px;
}
.footer-col a:hover{
color:white;
}

.footer-claim{
flex:1.5;
display:flex;
align-items:center;
gap:14px;
padding-left:30px;
border-left:2px solid rgba(255,255,255,.1);
}
.footer-claim span{
font-size:21px;
font-weight:700;
line-height:1.3;
}
.footer-claim svg{
width:40px;
height:40px;
flex-shrink:0;
}


.footer-bottom{
text-align:center;
padding-top:10px;
font-size:13px;
color:rgba(255,255,255,.5);
}

footer hr{
border-color:rgba(255,255,255,.1);
border: 1px solid;
margin:0;
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
}

footer img{

height:56px;

}



@media(max-width:992px){

.hero{

text-align:center;

}



.hero h1{

font-size:48px;

}

.features{

grid-template-columns:1fr 1fr;

}

.hero-actions{

justify-content:center;

}

.about-card{

padding:40px;

}

}



@media(max-width:768px){

.features{

grid-template-columns:1fr;

}

.hero h1{

font-size:40px;

}

section{

padding:70px 0;

}

}