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

.about-hero{
height:70vh;

background:
linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.75)),
url("images/holz.jpg");

background-size:cover;
background-position:center;
}


/* =====================
   GENERATIONEN
===================== */

.generations{
display:flex;
gap:30px;
flex-wrap:wrap;
margin-top:50px;
}

.gen-card{
flex:1;
min-width:250px;

background:white;

padding:35px;

border-radius:14px;

box-shadow:0 15px 35px rgba(0,0,0,0.1);

transition:0.4s;

text-align:center;

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

.gen-card.show{
opacity:1;
transform:translateY(0);
}

.gen-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,0.2);
}

/* Linie oben */

.gen-card::before{
content:"";
display:block;

width:100%;
height:4px;

background:linear-gradient(90deg,#8b5e3c,#c08a5a);

margin-bottom:15px;
}

.gen-icon{
font-size:40px;
margin-bottom:10px;
}


/* =====================
   TIMELINE
===================== */

.timeline-section{
padding:120px 20px;
background:#f6f4f1;
text-align:center;
}

.timeline{
position:relative;
max-width:800px;
margin:auto;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;

width:3px;

background:linear-gradient(#c08a5a,#8b5e3c);

transform:translateX(-50%);
}

.timeline-item{
position:relative;
margin:60px 0;

opacity:0;
transform:translateY(40px);
transition:1s;
}

.timeline-item.show{
opacity:1;
transform:translateY(0);
}

.timeline-dot{
width:16px;
height:16px;

background:#8b5e3c;

border-radius:50%;

position:absolute;
left:50%;
top:15px;

transform:translateX(-50%);
}

.timeline-content{
background:white;

padding:25px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

width:45%;
}

.timeline-item:nth-child(odd) .timeline-content{
margin-left:auto;
}

.timeline-item:nth-child(even) .timeline-content{
margin-right:auto;
}


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

.cta{
background:linear-gradient(135deg,#4a2e1f,#7a4a2c);
color:white;

text-align:center;

padding:80px 20px;
}


/* =====================
   RESPONSIVE
===================== */

@media(max-width:768px){

.generations{
flex-direction:column;
}

.timeline::before{
left:20px;
}

.timeline-content{
width:100%;
margin-left:40px !important;
}

.timeline-dot{
left:20px;
}

}


/* =====================
   GESCHÄFTSFÜHRER
===================== */

.owner-box{
display:flex;
align-items:center;
gap:50px;

max-width:1000px;
margin:60px auto;

background:white;
padding:40px;

border-radius:14px;

box-shadow:0 15px 40px rgba(0,0,0,0.1);

opacity:0;
transform:translateY(40px);
transition:0.8s;
}

.owner-box.show{
opacity:1;
transform:translateY(0);
}

/* Bild */

.owner-image img{
width:220px;
height:220px;

object-fit:cover;

border-radius:50%;

box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

/* Text */

.owner-text{
flex:1;
}

.owner-text h2{
margin-bottom:5px;
color:#3b2418;
}

.owner-text span{
display:block;
margin-bottom:15px;

color:#8b5e3c;
font-weight:bold;
}

.owner-text p{
font-size:16px;
line-height:1.6;
}


/* RESPONSIVE */

@media(max-width:768px){

.owner-box{
flex-direction:column;
text-align:center;
}

.owner-image img{
width:180px;
height:180px;
}

}