@charset "utf-8";
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: url('../fonts/lato-v24-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: url('../fonts/lato-v24-latin-900.woff2') format('woff2'); }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }

.clearfix { display:block; }
.clearfix:after { content: ""; display:block; clear:both;  }

body {
font-family: 'Lato', sans-serif;
font-weight:400;
font-size:15px;
line-height:23px;
background:#f9f9f9;
color:#222;
}

main {background:#fff; }

.as-rot {
color:rgb(255, 0, 0);
}

.hero-image { 
position: relative;
}

.hero-image img {
width: 100%;
height: 600px;
object-fit: cover;
display: block;
transition: opacity 1s ease-in-out;  /* sanfter Übergang */
}

.hero-text {
font-family: 'Lato', sans-serif;
font-weight:900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 2.5rem;
line-height: 3rem;
text-align: center;
background-color: rgba(0, 0, 0, 0.3); /* halbtransparenter Hintergrund */
padding: 1rem 2rem;
border-radius: 10px;
}

h1, h2, h3, h4 {
font-family: 'Lato', sans-serif;
font-weight:900;
font-size:19px;
color:#00238c;
margin-bottom:6px;
}

strong {color:#00238c;}

.logo {
position:relative;
margin:30px auto;
text-align:center;
width:100%;
}

.logo img {
height:40px;
}

nav {
background:#f9f9f9;
color: #111;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 2rem;
position: relative;
}

.menu-toggle {
display: none;
font-size: 2rem;
cursor: pointer;
margin: 0px auto;
}

.nav-links {
list-style: none;
display: flex;
margin: 0px auto;
}

.nav-links li a {
font-size:16px;
position: relative;
color: #111;
text-decoration: none;
padding: 2rem 2rem;
background:#f9f9f9;
border-bottom: 0px solid #f9f9f9;
}

.nav-links li a.active {
font-weight: 900;
/* border-bottom: 2px solid #aaa; */
}

.nav-links li a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 2px;
width: 0;
background-color: #ff0040;
transition: width 0.3s ease; /* Animationsdauer */
}

.nav-links li a:hover {
background-color: #ddd;
color: black; /* Kontrast verbessern */
border-radius: 0px;
}

.nav-links li a:hover::after {
width: 100%; /* Linie fährt von links nach rechts ein */
}




 a {
  font-size: 15px;
color:#d90036;
  text-decoration: none;
}

 a:hover {
  color: #222;
}

.mehr a, a {
  font-size: 16px;
  position: relative;
color:#d90036;
  text-decoration: none;
  display: inline-block; /* wichtig für ::after-Positionierung */
}

.mehr a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background-color: #ff0040;
  transition: width 0.3s ease; /* Animationsdauer */
}

.mehr a:hover {
  color: #222;
}

.mehr a:hover::after {
  width: 100%; /* Linie fährt von links nach rechts ein */
}


.column-container {
width:1440px; position:relative; margin:0px auto; 
}

.col1-3 { width:300px; height:auto; margin:30px; float:left;  padding:30px; color:#354053; }
.col2-3 { width:660px; height:auto; margin:30px; float:left;  padding:30px; color:#354053; }

.column {
flex: 1;
padding: 1rem;
border-radius: 8px;
margin:0 30px;
}

footer {
position:relative;
color: #111;
text-align: center;
padding: 1rem;
margin-top: 2rem;
font-size:13px;
background:#fff
}