:root {
  --blue: #1e3a8a;
  --red: #dc2626;
  --dark: #111827;
  --light: #f4f6f8;
  --text: #1f2933;
}


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

body{
font-family:system-ui, sans-serif;
color:var(--text);
line-height:1.6;
}

.hero{

min-height:70vh;

background:
linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.35)),
url("bagger-start.jpg");

background-size:cover;
background-position:65% 45%;

display:grid;
place-items:center;
text-align:center;
}

.hero-content{
color:white;
padding:2rem;
max-width:750px;
}

.hero h1{
font-size:clamp(2.3rem,5vw,3.4rem);
margin-bottom:0.5rem;
}

.hero p{
font-size:1.2rem;
}

.cta{
display:inline-block;
margin-top:1.5rem;
padding:.8rem 1.4rem;
background:var(--red);
color:white;
text-decoration:none;
font-weight:600;
border-radius:.5rem;
}

.leistungen{
padding:4rem 1.5rem;
text-align:center;
background:var(--light);
}

.grid{
margin-top:2rem;
display:grid;
gap:1.5rem;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
max-width:1000px;
margin-left:auto;
margin-right:auto;
}

.card{
background:white;
padding:1.5rem;
border-radius:.6rem;
box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.card h3{
color:var(--blue);
margin-bottom:.4rem;
}

.about{
padding:4rem 1.5rem;
background:white;
text-align:center;
}

.about-inner{
max-width:700px;
margin:auto;
}

.kontakt{
padding:4rem 1.5rem;
background:var(--blue);
color:white;
text-align:center;
}

.kontakt a{
color:white;
text-decoration:none;
font-weight:600;
}

footer{
padding:1.5rem;
text-align:center;
background:#eee;
font-size:.9rem;
}

.call-mobile{
display:none;
}

@media (max-width:768px){

.call-mobile{
display:block;
position:fixed;
bottom:1rem;
left:1rem;
right:1rem;
padding:1rem;
background:var(--red);
color:white;
text-align:center;
font-weight:700;
text-decoration:none;
border-radius:.7rem;
}

.hero{
background-position:75% 50%;
min-height:60vh;
}

}

.map{
margin-top:2rem;
border-radius:10px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.15);
}

.galerie{
padding:4rem 1.5rem;
text-align:center;
background:#f7f7f7;
}

.gallery-grid{
margin-top:2rem;
display:grid;
gap:1rem;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
max-width:1100px;
margin-left:auto;
margin-right:auto;
}

.gallery-grid img{
width:100%;
height:220px;
object-fit:cover;
border-radius:8px;
box-shadow:0 5px 16px rgba(0,0,0,.15);
}


/* Elemente starten unsichtbar und leicht nach unten versetzt */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Wenn sichtbar */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}