body{
background:#758797;
color:#e6edf2;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
line-height:1.5;
}

/* Überschriften */

h1,h2,h3,h4,h5,h6,a{
color:#7fb800;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6{
color:#7cec00;
}

/* Header */

.container-header{
background:#758797;
}

.container-header .container {
padding: 0 15px !important;
}

/* Content */

.container-component{
background:#8a99a6;
max-width:900px;
margin:60px auto;
padding:60px 50px;
border-radius:10px;
box-shadow:0 12px 30px rgba(0,0,0,0.18);
}

.container-footer {
background:#758797 !important;
background-image:none !important;
display:flex;
justify-content:center;
}

.legal-box{
max-width:900px;
margin:auto;
}

:root{
--cassiopeia-color-primary:#7cc000;
--cassiopeia-color-link:#7cc000;
}

.container-bottom-a .mod-custom {
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}

/* Kontaktkarte */

.contact-card-modern{
display:grid;
grid-template-columns:minmax(160px,220px) 1fr;
gap:35px;
max-width:900px;
width:100%;
margin-left:auto;
margin-right:auto;
padding:35px;
background:#7f8e9b;
border-radius:14px;
border:1px solid rgba(255,255,255,0.15);
border-top:5px solid #7fb800;
box-shadow:0 12px 30px rgba(0,0,0,0.25);
box-sizing:border-box;
align-items:start;
}

.contact-photo{
display:flex;
justify-content:center;
}

.contact-photo img{
max-width:200px;
width:100%;
height:auto;
border-radius:12px;
display:block;
}

.contact-info{
color:#fff;
line-height:1.5;
min-width:0;
}

.contact-info h2{
margin-top:0;
margin-bottom:12px;
font-size:1.6rem;
color:#7fb800;
}

.contact-org{
margin:0;
color:#fff;
}

.contact-name{
font-size:1.35rem;
font-weight:700;
color:#7fb800;
margin-bottom:20px;
}

.contact-row{
display:flex;
gap:12px;
align-items:flex-start;
margin-bottom:14px;
min-width:0;
}

.contact-icon{
font-size:20px;
width:26px;
text-align:center;
flex-shrink:0;
}

.contact-row a{
color:#fff;
text-decoration:none;
min-width:0;
overflow-wrap:anywhere;
word-break:break-word;
}

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

@media (max-width:768px){
.contact-card-modern{
grid-template-columns:1fr;
gap:25px;
padding:25px;
}

.contact-photo img{
max-width:180px;
margin:0 auto;
}

.contact-row{
gap:10px;
}
}

/* Hero */

.hero-start{
min-height:75vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px 20px;
color:white;
}

.hero-start h1,
.hero-start h2,
.hero-start h3,
.hero-start p{
color:#ffffff;
}

.hero-start .hero-name{
color:#7cec00;
font-weight:bold;
}

.hero-title{
font-size:3rem;
margin-bottom:15px;
}

.hero-subtitle{
font-size:2rem;
margin-bottom:10px;
}

.hero-name{
font-size:1.8rem;
margin:20px 0;
}

.hero-small{
font-size:1.1rem;
margin-bottom:10px;
}

/* Breadcrumb */

.breadcrumb,
.mod-breadcrumbs {
display: none !important;
}

/* Menü */

.dj-megamenu {
background:#879aab !important;
}

.dj-megamenu > li > a {
background:#879aab !important;
color:#ffffff !important;
padding:12px 20px;
}

.dj-megamenu > li:hover > a {
background:#bbff00 !important;
color:#000000 !important;
}

.dj-megamenu > li.active > a {
background:#bbff00 !important;
color:#000000 !important;
}

.dj-megamenu li ul {
background:#879aab !important;
border:none !important;
}

.dj-megamenu li ul li a {
background:#879aab !important;
color:#ffffff !important;
}

.dj-megamenu li ul li a:hover {
background:#bbff00 !important;
color:#000000 !important;
}

.dj-megamenu li ul li.active a {
background:#bbff00 !important;
color:#000000 !important;
}

/* Blog */

.blog-items{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
align-items:stretch;
}

.blog-items .blog-item{
background:#7f8e9b;
padding:32px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
height:100%;
box-sizing:border-box;
}

.blog-items .blog-item .page-header{
margin-top:0;
}

.blog-items .blog-item h2{
margin-top:0;
margin-bottom:18px;
}

.blog-items .blog-item ul{
padding-left:20px;
}

/* Mobile */

@media (max-width:900px){

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

}

@media (max-width:768px){

.contact-card-modern{
grid-template-columns:1fr;
padding:22px;
}

.contact-photo{
justify-content:center;
margin-bottom:10px;
}

.contact-photo img{
max-width:140px;
}

.hero-title{
font-size:2rem;
}

.hero-subtitle{
font-size:1.4rem;
}

.hero-name{
font-size:1.3rem;
}

.hero-small{
font-size:1rem;
}

.navbar-brand img {
max-height: 80px;
width: auto;
height: auto;
}

}
/* Fix: blauer Rand im Mobile-Header entfernen */
@media (max-width:768px){

.container-header .container{
padding:0 !important;
}

.navbar{
padding:0 !important;
}

.navbar-brand{
margin:0 !important;
padding:0 !important;
line-height:0;
}

.navbar-brand img{
display:block;
}

}
.container-component p {
    margin-bottom: 20px;
    line-height: 1.6;
}

h1, h2, h3 {
    margin-top: 40px;
    margin-bottom: 20px;
}

.container-component {
    padding: 60px 40px;
}