body { font-family: Arial,sans-serif; margin:0; background:#f4f4f4; color:#333; }
header { background:#fff; padding:1em; position:relative; z-index:100; }
.header-container { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.logo { color:white; font-weight:bold; text-decoration:none; }
nav ul { list-style:none; display:flex; gap:1em; margin:0; padding:0; }
nav a, nav button { color:#00264d; text-decoration:none; background:none; border:none; cursor:pointer; font-size:1em; }
nav a:hover, nav button { color:#00264d; text-decoration:none; background:#fff; border:none; cursor:pointer; font-size:1em; }
nav ul li { position:relative; }

/* Submenu Desktop dunkelgrau mit Padding */
.submenu {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    background:#f4f4f4;
    flex-direction:column;
    min-width:200px;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    z-index:99;
    padding:0.5em 1em;
}
.submenu li a {
    padding:0.5em 0;
}
nav li button[aria-expanded="true"] + .submenu { display:flex; flex-direction:column; }

/* Burger Button */
.burger { display:none; font-size:2em; background:none; border:none; color:#00264d; cursor:pointer; }

/* Main Content */
main { padding:2em; background:white; margin:2em auto; border-radius:8px; max-width:1200px; }
.card-container { display:flex; gap:1em; flex-wrap:wrap; }
.card { background:white; flex:1 1 300px; padding:1em; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1); text-align:center; }
.card img { width:100%; height:200px; background:#ccc; margin-bottom:0.5em; }
footer { background:#00264d; color:white; text-align:center; padding:1em; }
.btn { padding:0.5em 1em; background:#004080; color:white; text-decoration:none; border-radius:4px; }


.subsite-container { display:flex; gap:1em; flex-wrap:wrap; }
.subsitetext { background:white; flex:1 1 800px; padding:0em 1em 1em 1em; text-align:justify; }
.subsiteimg { background:white; flex:1 1 300px; padding:1em; text-align:left; }


.uebersichtsite-header-container { display:flex; gap:1em; flex-wrap:wrap; }
.uebersichtsiteheader { background:white; flex:1 1 1100px; padding:0em 1em 1em 1em; text-align:justify; }

.uebersichtsite-container { display:flex; gap:1em; flex-wrap:wrap; }
.uebersichtsitecol1 { background:white; flex:1 1 550px; padding:0em 1em 1em 1em; text-align:justify; }
.uebersichtsitecol2 { background:white; flex:1 1 550px; padding:0em 1em 1em 1em; text-align:justify; }



/* Mobile Styles */
@media(max-width:768px){
    nav ul {
        display:none;
        flex-direction:column;
        width:100%;
    }
    nav ul.show { display:flex; }
    .burger { display:block; }
    /* Submenu Mobile dunkelgrau mit Padding */
    .submenu {
        position:relative;
        top:0; left:0;
        background:#f4f4f4;
        box-shadow:none;
        border-radius:0;
        padding:0.5em 1em;
    }
    .submenu li a {
        padding:0.5em 0;
    }
    .card-container { flex-direction:column; }
}