/* =====================================
   GLOBAL
===================================== */

body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
background:#f4f6f8;
color:#333;
line-height:1.6;
}

.container{
max-width:1200px;
margin:auto;
padding:20px;
}


/* =====================================
   NAVBAR
===================================== */

.navbar{
background:white;
border-bottom:1px solid #eee;
padding:10px 0;
font-size:14px;
}

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


/* =====================================
   HERO SECTION
===================================== */

.hero{
background:linear-gradient(120deg,#2b5f9e,#3c7dcf);
color:white;
padding:80px 0;
min-height:360px;
display:flex;
align-items:center;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.hero h1{
font-size:48px;
font-weight:700;
margin-bottom:12px;
}

.hero h2{
font-size:22px;
font-weight:400;
opacity:0.95;
margin-bottom:20px;
}

.hero-benefits{
margin-top:25px;
line-height:1.7;
}

.hero-buttons{
margin-top:35px;
display:flex;
align-items:center;
}


/* =====================================
   BUTTONS
===================================== */

.cta-primary{
background:#ff7a00;
border:none;
color:white;
padding:16px 32px;
font-size:16px;
border-radius:8px;
cursor:pointer;
transition:all .25s ease;
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

.cta-primary:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.cta-secondary{
background:white;
color:#2b5f9e;
border:none;
padding:16px 28px;
border-radius:8px;
margin-left:12px;
font-weight:500;
cursor:pointer;
transition:all .25s ease;
}

.cta-secondary:hover{
transform:translateY(-2px);
}


/* =====================================
   HERO IMAGE
===================================== */

.hero-image img{
width:100%;
max-width:500px;
border-radius:12px;
box-shadow:0 20px 50px rgba(0,0,0,0.25);
}


/* =====================================
   CHECK SECTION
===================================== */

.check{
padding:60px 0;
}

.check-box{
background:white;
padding:40px;
border-radius:14px;
box-shadow:0 18px 45px rgba(0,0,0,0.15);
margin-top:-60px;
max-width:900px;
margin-left:auto;
margin-right:auto;
}

.check-box h3{
margin-top:0;
margin-bottom:25px;
font-size:20px;
}

.options{
display:flex;
gap:10px;
margin:12px 0 25px 0;
flex-wrap:wrap;
}

.options button{
padding:10px 16px;
border:1px solid #ccc;
background:white;
cursor:pointer;
border-radius:6px;
transition:all .15s ease;
}

.options button:hover{
background:#f0f4f8;
}

.big{
margin-top:20px;
padding:16px 40px;
font-size:18px;
}


/* =====================================
   PROZESS / ABLAUF
===================================== */

.prozess{
background:white;
padding:80px 0;
}

.steps{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
margin-top:60px;
}

/* Verbindungslinie */

.steps::before{
content:"";
position:absolute;
top:45px;
left:10%;
width:0%;
height:2px;
background:#2b5f9e;
transition:width 1s ease;
z-index:0;
}

.steps.animate::before{
width:80%;
}


/* STEP CARDS */

.step{
position:relative;
background:white;
padding:40px 30px;
text-align:center;
border-radius:14px;
transition:all .4s ease;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
z-index:1;

/* Scroll Animation Start */

opacity:0;
transform:translateY(40px);
}

.step.visible{
opacity:1;
transform:translateY(0);
}

.step:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.12);
}


/* =====================================
   STEP ICONS
===================================== */

.step-icon{
width:70px;
height:70px;
margin:auto;
margin-bottom:20px;
background:#eef4ff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#2b5f9e;
transition:all .3s ease;
}

.step:hover .step-icon{
background:#2b5f9e;
color:white;
transform:scale(1.08);
}

.step-icon svg{
width:32px;
height:32px;
}

.step h4{
margin-bottom:10px;
font-size:17px;
}

.step p{
font-size:14px;
color:#6b7280;
}


/* =====================================
   CTA SECTION
===================================== */

.cta-section{
padding:80px 0;
text-align:center;
background:#f7f9fb;
}


/* =====================================
   FAQ
===================================== */

.faq{
background:white;
padding:70px 0;
}

.faq-item{
border-bottom:1px solid #eee;
padding:18px 0;
cursor:pointer;
font-size:15px;
transition:color .2s ease;
}

.faq-item:hover{
color:#2b5f9e;
}