/* =========================
   RESET
========================= */

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

body{
font-family:Arial,sans-serif;
background:#f4f6fb;
color:#222;
}

/* =========================
   HEADER
========================= */

.header{
height:90px;
background:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:999;
}

.logo{
font-size:42px;
font-weight:900;
color:#0a1f68;
}

nav{
display:flex;
gap:25px;
}

nav a{
text-decoration:none;
font-weight:700;
color:#111;
transition:.3s;
}

nav a:hover{
color:#4d46e5;
}

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

.btn,
.btn-light,
.btn-dark{
padding:14px 24px;
border-radius:10px;
text-decoration:none;
font-weight:700;
display:inline-block;
transition:.3s;
}

.btn{
background:#4d46e5;
color:#fff;
}

.btn:hover{
background:#372fd4;
}

.btn-light{
background:#fff;
color:#4d46e5;
border:2px solid #4d46e5;
}

.btn-dark{
border:2px solid #fff;
color:#fff;
}

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

.hero{
height:700px;
background:url("assets/hero.jpg") center center/cover no-repeat;
position:relative;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

.hero-content{
position:relative;
z-index:2;
height:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:70px;
}

.hero-left{
max-width:650px;
color:#fff;
}

.hero-left h1{
font-size:78px;
font-weight:900;
line-height:1;
margin-bottom:25px;
}

.hero-left p{
font-size:24px;
line-height:1.5;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
gap:15px;
}

.hero-box{
width:380px;
background:rgba(0,0,0,.65);
padding:30px;
border-radius:20px;
backdrop-filter:blur(5px);
}

.hero-item{
padding:15px 0;
border-bottom:1px solid rgba(255,255,255,.2);
}

.hero-item:last-child{
border:none;
}

.hero-item h3{
color:#fff;
margin-bottom:5px;
}

.hero-item p{
color:#ddd;
font-size:15px;
}

/* =========================
   TEAM
========================= */

.team-section{
padding:60px 30px;
background:#fff;
text-align:center;
}

.team-section h2{
font-size:56px;
font-weight:900;
color:#071c68;
margin-bottom:50px;
}

.team-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
max-width:1400px;
margin:auto;
}

.team-card{
width:350px;
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
border-top:5px solid #4d46e5;
transition:.3s;
}

.team-card:hover{
transform:translateY(-5px);
}

.team-card h3{
font-size:28px;
color:#071c68;
margin-bottom:10px;
}

.team-card h4{
font-size:18px;
font-weight:700;
color:#4d46e5;
margin-bottom:15px;
}

.team-card p{
font-size:16px;
line-height:1.7;
color:#555;
}

/* =========================
   GRID BEREICH
========================= */

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
padding:25px;
max-width:1800px;
margin:auto;
}

.card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,.08);
transition:.3s;
}

.card:hover{
transform:translateY(-3px);
}

.title{
background:#071c68;
color:#fff;
padding:18px;
font-size:30px;
font-weight:800;
}

.content{
padding:25px;
}

.content h2{
margin-bottom:15px;
color:#071c68;
}

.content p{
line-height:1.7;
}

/* =========================
   DIENSTLEISTUNGEN
========================= */

.services{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.services div{
background:#eef2ff;
border-radius:12px;
padding:10px;
min-height:80px;

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

text-align:center;
font-size:14px;
font-weight:800;
color:#222;

overflow:hidden;
}
/* =========================
   WHATSAPP
========================= */

.center{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:20px;
min-height:350px;
}

.whatsapp{
width:180px;
height:180px;
background:#25d366;
border-radius:50%;

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

font-size:70px;
font-weight:900;
color:#fff;
}

/* =========================
   BUNDESLÄNDER
========================= */

.states{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

.states span{
background:#eef2ff;
padding:10px;
border-radius:10px;
text-align:center;
font-weight:700;
font-size:14px;
}

/* =========================
   BÜCHER
========================= */

.books{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.book-card{
text-align:center;
}

.book-card img{
width:180px;
height:260px;
object-fit:cover;
display:block;
margin:0 auto 15px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.book-card h3{
margin-bottom:10px;
color:#071c68;
}

.book-card p{
margin-bottom:15px;
}

/* =========================
   KONTAKT
========================= */

#kontakt .content{
min-height:350px;
}

/* =========================
   FOOTER
========================= */

footer{
background:#071c68;
color:#fff;
text-align:center;
padding:25px;
margin-top:20px;
font-weight:700;
}
footer a{
color:#fff;
text-decoration:none;
font-weight:700;
}

footer a:hover{
text-decoration:underline;
}

/* =========================
   MOBILE TABLET
========================= */

@media(max-width:1200px){

.grid{
grid-template-columns:1fr;
}

.hero-content{
flex-direction:column;
justify-content:center;
gap:30px;
text-align:center;
}

.hero-left h1{
font-size:52px;
}

.hero-box{
width:100%;
max-width:500px;
}

.states{
grid-template-columns:repeat(2,1fr);
}

.books{
grid-template-columns:1fr;
}

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.header{
flex-direction:column;
height:auto;
padding:20px;
gap:15px;
}

.logo{
font-size:32px;
}

nav{
flex-wrap:wrap;
justify-content:center;
}

.hero{
height:auto;
padding:60px 0;
}

.hero-content{
padding:25px;
}

.hero-left h1{
font-size:42px;
}

.hero-left p{
font-size:18px;
}

.services{
grid-template-columns:1fr 1fr;
}

.states{
grid-template-columns:1fr;
}

.whatsapp{
width:140px;
height:140px;
font-size:55px;
}

}

/* =========================
   KLEINE HANDYS
========================= */

@media(max-width:500px){

.services{
grid-template-columns:1fr;
}

}
.services a{
background:#eef2ff;
border-radius:12px;
padding:10px;
min-height:80px;

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

text-align:center;
font-size:14px;
font-weight:800;
color:#222;
text-decoration:none;
}

.services a:hover{
background:#dde5ff;
}