* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial;
}

.content {
    display: grid;
    grid-template-columns: 1fr 4fr 2fr; /* Menü: 1 Spalte, 2 Hauptspalten für Inhalte */
    grid-template-rows: auto 3fr auto; /* Header, Inhalt, Footer */
    grid-template-areas:
        "header header header"
        "menu main sidebar"
        "footer footer footer";
}

.header {
    grid-area: header;
    text-align: center;
    padding: 0;
    background-color: #4CAF50; 
}

h1 {
    color: white; 
}

.menu {
    grid-area: menu;
    background-color: #FFEB3B; 
    padding: 15px;
    min-width: 150px; 
}

.menu ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.menu a {
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: block;
    text-align: left;
}

.menu a:hover {
    background-color: grey;
}

.main {
    grid-area: main;
    padding: 15px;
    background-color: #2196F3;
    color: white;
}

.item {
    margin-bottom: 20px;
}

.item img  {
    max-width: 15vw;
    height: auto;
}

.sidebar {
    grid-area: sidebar;
    background-color: #FF5722; 
    padding: 15px;
}

.sidebar .item {
    margin-bottom: 20px;
}

.footer {
    grid-area: footer;
    background-color: #607D8B; 
    color: white;
    text-align: center;
    padding: 10px;
}

footer a {
    color: #ddd;
    text-decoration: none;
    margin: 0 10px;
}

@media (max-width: 768px) {
    .content {
        grid-template-columns: 1fr; 
        grid-template-areas: 
            "header"
            "menu"
            "main"
            "sidebar"
            "footer";
    }
    .item img {
        max-width: 100%;
        height: auto;
    }
}