/* Skip-to-content Link für Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
    border-radius: 4px;
}

.skip-link:focus {
    top: 6px;
}

nav ul {
    margin: 0;
    padding: 0;
    text-align: center; /* Stays for desktop, overridden for mobile */
    list-style: none; /* Already there, but explicit here */
}

nav li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

nav a {
    display: block;
    padding: 0.4em;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border: 1px solid darkblue;
    border-radius: 10px;
    box-shadow: 0 5px 10px white inset;
    color: gold;
    background-color: darkblue;
    transition: all .25s ease-in;
}

nav li[aria-current] a {
    background-color: firebrick;
    color: gold;
}

nav a:focus,
nav a:hover {
    color: darkblue;
    background-color: gold;
}

br {
    clear: both;
}

img {
    margin: 10px;
    max-width: 100%; /* Make images responsive */
    height: auto;    /* Adjust height automatically */
}

.logo {
    display: block; /* Ensure it's a block element */
    margin-left: auto; /* Center in the sidebar (optional) */
    margin-right: auto; /* Center in the sidebar (optional) */
    max-width: 150px; /* Adjust max width for the logo */
}


body {
    background-image: url("/images/logoh.jpg");
    background-repeat: repeat;
    margin: 0; /* Remove default body margin */
    font-family: sans-serif; /* Add a default sans-serif font */
}

.flex-container {
    max-width: 1000px;
    display: flex;
    margin: 0; /* Center the container on larger screens */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens before the media query kicks in */
}

.flex-item {
    border-radius: 0 .5em .5em;
    margin: .5em;
    padding: .5em;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Desktop Layout: Sidebar and Main Content */
.sidebar {
    flex: 0 0 220px; /* Fixed width for the sidebar, don't grow, don't shrink */
    position: relative; /* Needs to be relative for absolute positioning of the button inside */
}

.main-content {
    flex: 1; /* Takes up the remaining available space */
    min-width: 0; /* Prevents content from overflowing the flex item */
}

.center-item {
    text-align: center;
}

.block-item {
    text-align: justify;
}

.left-item {
    text-align: left;
}

.left-img {
    float: left;
    margin-right: 1em; /* Space between image and text */
    margin-bottom: 0.5em;
}

.right-item {
    text-align: right;
}

.right-img {
    float: right;
    margin-left: 1em; /* Space between image and text */
    margin-bottom: 0.5em;
}

.big-link {
    font-size: x-large;
    font-weight: bold;
}

.footer-links {
    margin-top: 2em; /* More space above */
    text-align: center; /* Center the footer links */
    font-size: 0.9em;
}

.footer-links a {
    text-decoration: none;
    color: darkblue; /* Matching color */
}
.footer-links a:hover {
    text-decoration: underline;
}

/* === Mobile Menu Styles === */

.menu-toggle {
    display: none; /* Hide on desktop by default */
    background: none;
    border: none;
    color: darkblue; /* Color matching the menu scheme */
    font-size: 2em; /* Icon size */
    cursor: pointer;
    padding: 0.2em 0.5em;
    position: absolute; /* Position relative to the parent element (.sidebar or header) */
    top: 10px;
    right: 10px;
    z-index: 1001; /* Ensure the button is above other elements */
}

/* === Media Query for Smaller Screens (e.g., Tablets and Smartphones) === */
@media (max-width: 768px) {

    .flex-container {
        flex-direction: column; /* Stack elements vertically */
        max-width: 100%; /* Use full width */
    }

    .sidebar {
        flex-basis: auto; /* Adjust width automatically */
        width: 100%;      /* Take up full width */
        position: relative; /* Important for positioning the button */
        padding-top: 50px; /* Make space for the button if positioned at the top */
    }

     .main-content {
        width: 100%; /* Take up full width */
        margin-left: 0;
        margin-right: 0;
     }

    .logo {
         max-width: 120px; /* Make logo slightly smaller on mobile */
         margin-bottom: 0; /* Less space below, as menu follows */
         /* Centering is maintained by auto margins */
    }

    .menu-toggle {
        display: block; /* Display the hamburger button */
    }

    #main-menu {
        display: none; /* Hide the main menu by default */
        width: 100%;   /* Take full width when visible */
        position: static; /* No longer needs absolute positioning */
        margin-top: 1em; /* Space below logo/button */
    }

    /* Style applied when the menu is open (class added/removed via JS) */
    #expandedMenu.menu-open #main-menu {
        display: block;
    }

    nav ul {
        text-align: left; /* Align text to the left in the mobile menu */
    }

     nav li {
        margin-bottom: 5px; /* Small gap between menu items */
     }

    nav a {
        padding: 0.8em 1em; /* More padding for easier touch interaction */
        text-align: left; /* Align text left within mobile menu items */
        border-radius: 5px; /* Slightly smaller border radius */
    }

    .footer-links {
        margin-top: 1em;
        padding-bottom: 1em; /* Some padding at the bottom */
    }

    /* Remove floats from images */
    .left-img, .right-img {
        float: none;
        display: block; /* Display as block elements */
        margin: 1em auto; /* Center and add vertical margin */
    }
}

/* Enhancements for very small screens (optional) */
@media (max-width: 480px) {
    body {
        font-size: 15px; /* Adjust base font size if needed */
    }

    h1 {
        font-size: 1.5em; /* Adjust heading sizes */
    }

    h2 {
        font-size: 1.2em;
    }

    nav a {
        padding: 0.7em 0.8em; /* Slightly adjusted padding */
    }
}