*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f4f7fa;
color:#333;
}

header{

background:#005d91;
color:white;

}

.top{

max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;

}

.logo{

display:flex;
align-items:center;

}

.logo img{

width:120px;
height:120px;
object-fit:contain;
margin-right:20px;
padding:10px;

}

.logo h1{

font-size:32px;

}

.logo span{

display:block;
font-size:16px;
font-weight:normal;

}

nav{

background:#003f63;

}

nav ul{

display:flex;
list-style:none;
max-width:1200px;
margin:auto;

}

nav li{

flex:1;

}

nav a{

display:block;
padding:18px;
text-align:center;
text-decoration:none;
color:white;
font-weight:bold;

}

nav a:hover{

background:#0084c8;

}

nav a.active{
    background:white;
    color:#005d91;
}

nav a.active:hover{
    background:white;
    color:#005d91;
}

.hero{
    background:#0059a8;
    padding:30px 20px;
}

.hero-services{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1400px;
    margin:auto;
    gap:30px;
    flex-wrap:wrap;
}

.service{
    display:flex;
    align-items:center;
    gap:18px;
    color:#fff;
    font-size:18px;
    line-height:1.35;
    flex:1;
    min-width:250px;
}

.service strong{
    font-size:22px;
    font-weight:700;
}

.service img{
    width:90px;
    height:auto;
    flex-shrink:0;
}

.divider{
    width:1px;
    height:110px;
    background:rgba(255,255,255,.5);
}

@media(max-width:1000px){

    .hero-services{
        flex-direction:column;
        align-items:flex-start;
    }

    .divider{
        display:none;
    }

    .service{
        width:100%;
    }

}

.hero-contact{
    background:#005d91;
    padding:8px 0 15px;
}

.hero-contact-content{
    max-width:1200px;
    margin:auto;
    padding:0 20px 0 170px;   /* beginnt unter dem Firmennamen */
    color:#fff;
    font-size:15px;
    font-weight:600;
}

.contact-row{
    display:flex;
    gap:30px;
    align-items:center;
    margin-top:6px;
    flex-wrap:wrap;
}

.hero-contact-content a{
    color:#fff;
    text-decoration:none;
}

.hero-contact-content a:hover{
    text-decoration:underline;
}

@media (max-width:768px){

    .hero-contact-content{
        padding:0 20px;
    }

    .contact-row{
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
    }

}

.hero h2{

font-size:42px;
margin-bottom:20px;

}

.hero p{

font-size:22px;

}

.container{

max-width:1200px;
margin:40px auto;
padding:20px;

}

h2{
    color:#005d91;
    margin:50px 0 20px;
}

.container h2:first-child{
    margin-top:0;
}

.datenschutz h3{
    margin:30px 0 10px;
}

.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;

}

.card{

background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.1);

}

.card h3{

margin-bottom:15px;
color:#005d91;

}



.card p{
    line-height:1.6;
}


.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.card img:hover{
    transform:scale(1.03);
}

/* Lightbox */

.lightbox{
    display:none;
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.9);
    justify-content:center;
    align-items:center;
}

.lightbox-content{
    max-width:90%;
    max-height:90%;
    border-radius:8px;
    box-shadow:0 0 20px #000;
}

.close{
    position:absolute;
    top:20px;
    right:35px;
    color:#fff;
    font-size:45px;
    font-weight:bold;
    cursor:pointer;
}

.image-placeholder{

height:220px;
border:3px dashed #999;
background:#eee;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
margin-top:25px;

}

.address{

background:white;
padding:30px;
border-left:6px solid #005d91;
margin:40px 0;

}

.map{
    width:100%;
    aspect-ratio:3 / 2;   /* Höhe = 2/3 der Breite */
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.map iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

footer{

background:#003f63;
color:white;
padding:40px 20px;
margin-top:50px;

}

.footer{

max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;

}

.footer h3{

margin-bottom:15px;

}

.footer a{

color:white;
text-decoration:none;

}

@media(max-width:768px){

.top{

flex-direction:column;
text-align:center;

}

nav ul{

flex-direction:column;

}

.hero h2{

font-size:30px;

}

}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    margin:30px 0 40px;
}

.contact-box{
    background:#fff;
    border-left:6px solid #005d91;
    padding:25px;
	margin:10px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
    transition:.25s;
}

.contact-box:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.contact-box h3{
    color:#005d91;
    margin-bottom:15px;
    font-size:22px;
}

.contact-box p{
    line-height:1.7;
}

.contact-box a{
    color:#005d91;
    text-decoration:none;
}

.contact-box a:hover{
    text-decoration:underline;
}

.service-box ul{
    margin:10px 0 0 18px;
    line-height:1.8;
}

.service-box li{
    margin-bottom:4px;
}

.opening-hours{
    width:100%;
    border-collapse:collapse;
    margin-bottom:18px;
}

.opening-hours td{
    padding:2px 0;
    vertical-align:top;
}

.opening-hours td:first-child{
    width:70px;
    font-weight:bold;
}

.opening-note{
    margin-top:10px;
    line-height:1.6;
}

.note-warning{
    display:block;
    font-weight:bold;
    color:#c77b00;
}

.note-phone{
    display:block;
    font-weight:600;
    color:#005d91;
}

/* Hamburger-Menü */

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:white;
    font-size:34px;
    cursor:pointer;
    padding:15px 20px;
    margin-left:auto;
}

@media (max-width:768px){

    nav{
        position:relative;
    }

    .menu-toggle{
        display:block;
    }

    nav ul{
        display:none;
        flex-direction:column;
        width:100%;
        background:#003f63;
    }

    nav ul.show{
        display:flex;
    }

    nav li{
        width:100%;
    }

    nav a{
        text-align:left;
        padding:18px 25px;
        border-top:1px solid rgba(255,255,255,.15);
    }

}

.intro{
	
	margin:20px auto;
  
}