body{
font-family:'Open Sans',sans-serif;
font-size:16px;
margin:0;
color:#333;
line-height:1.6;
}

h1{
font-size:40px;
}

h2{
font-size:30px;
}

h3{
font-size:20px;
}

p{
font-size:17px;
}

.container{
max-width:900px;
margin:auto;
}

.hero{
background:#2F556E;
background-image:url("../img/260314_BG_Mainmap.jpg");
background-size:cover;
background-position:center;

background-attachment:fixed;

color:white;
text-align:center;
padding-top:80px;
padding-bottom:160px;
}


.hero h1{
font-size:42px;
margin-bottom:20px;
}

.hero-sub{
font-size:20px;
margin-bottom:40px;
}

.hero-logo{
animation:slideDown 1s ease-out;
animation-fill-mode:forwards;
}

@keyframes slideDown{
from{
opacity:0;
transform:translateY(-80px);
filter:blur(4px);
}
to{
opacity:1;
transform:translateY(0);
filter:blur(0);
}
}


.hero-title{
animation:slideLeft 1.2s ease-out;
animation-fill-mode:forwards;
}

@keyframes slideLeft{
from{
opacity:0;
transform:translateX(-80px);
filter:blur(4px);
}
to{
opacity:1;
transform:translateX(0);
}
}

.hero-sub{
animation:slideRight 1.4s ease-out;
animation-fill-mode:forwards;
}

@keyframes slideRight{
from{
opacity:0;
transform:translateX(80px);
filter:blur(4px);
}
to{
opacity:1;
transform:translateX(0);
}
}

.hero-button{
animation:slideUp 1.6s ease-out;
animation-fill-mode:forwards;
}

@keyframes slideUp{
from{
opacity:0;
transform:translateY(60px);
filter:blur(4px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.hero-logo{animation-delay:0.2s;}
.hero-title{animation-delay:0.5s;}
.hero-sub{animation-delay:0.8s;}
.hero-button{animation-delay:1.1s;}

.cta-button{
background:white;
color:#2F556E;
padding:15px 30px;
text-decoration:none;
font-weight:600;
border-radius:5px;
}

.cta-button-darkframe{
background:white;
color:#2F556E;
padding:15px 30px;
text-decoration:none;
font-weight:600;
border: 1px solid #2F556E;
border-radius:5px;
}

.section{
padding:80px 0;
}

.section h2{
color:#2F556E;
margin-bottom:20px;
}

.section h3{
color:#2F556E;
margin-bottom:10px;
}

.light{
background:#F2F4F6;
}

.cards{
display:flex;
gap:20px;
margin-top:40px;
}

.card,
.card-2{
padding:25px;
flex:1;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:all 0.25s ease;
background:white;
}

.border-orange{
border-top:4px solid #ffa500;
}

.border-green{
border-top:4px solid #3cb371;
}

.border-blue{
border-top:4px solid #1e90ff;
}

.plan-s{
background:rgba(255,165,0,0.12) !important;
border-top:4px solid #ffa500;
}

.plan-m{
background:rgba(60,179,113,0.12) !important;
border-top:4px solid #3cb371;
transform:scale(1.03);
}

.plan-l{
background:rgba(30,144,255,0.12) !important;
border-top:4px solid #1e90ff;
}

.card:hover,
.card-2:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.problem-list{
margin:20px 0;
font-size:17px;
}

.ansatz-list{
margin:20px 0;
font-size:17px;
}

.paket-list{
padding-left:20px;
margin-top:10px;
}

.paket-list li{
margin-bottom:6px;
}

.contact{
background:#F2F4F6;
text-align:center;
}

footer{
background:#2F556E;
color:white;
text-align:center;
padding:30px;
}

.footer-logo{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
}

.parallax{
background-image:url("../img/260314_BG_Mainmap_1600x1000.jpg");
height:300px;

background-size:cover;
background-position:left;
background-repeat:no-repeat;

background-attachment:fixed;
}

a{
color:#333;
text-decoration:underline;
}

a:hover{
color:#333;
text-decoration:none;
}

.link-arrow{
text-decoration:underline;
color:#333;
font-weight:400;
display:inline-block;
}

.link-arrow::after{
content:"\2197";
margin-left:2px;
display:inline-block;
transition:transform 0.3s cubic-bezier(.22,1,.36,1);
}

.link-arrow:hover::after{
transform:translateY(-3px) rotate(-15deg);
}

.scroll-top::before{
content:"\2191";
}

.scroll-top{
position:fixed;
right:25px;
bottom:25px;

width:40px;
height:40px;

background:#2F556E;
color:white;

display:flex;
align-items:center;
justify-content:center;

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

border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.2);

transition:all 0.2s ease;
}

.scroll-top:hover{
background:#1f3f54;
transform:translateY(-3px);
}

html{
scroll-behavior:smooth;
}

@media (max-width: 910px) {

.cards {
flex-direction: column;
}

nav a {
display: block;
margin: 10px 0;
}

}