header {
    height: 70px !important; /* Reduziert die Header-Höhe um 10px */
}
.sehenswuerdigkeiten header {
    height: 80px !important; /* Stelle die volle Höhe des Headers sicher */
    background-color: #007bff; /* Optional: Setzt eine Hintergrundfarbe */
}
.sehenswuerdigkeiten header img {
    width: 100%; /* Bild füllt die Breite aus */
    height: 100%; /* Bild füllt die Höhe aus */
    object-fit: cover; /* Verhindert Verzerrungen */
}
.sehenswuerdigkeiten_detail header {
    height: 80px !important; /* Stelle die volle Höhe des Headers sicher */
    background-color: #007bff; /* Optional: Setzt eine Hintergrundfarbe */
}
.sehenswuerdigkeiten_detail header img {
    width: 100%; /* Bild füllt die Breite aus */
    height: 100%; /* Bild füllt die Höhe aus */
    object-fit: cover; /* Verhindert Verzerrungen */
}
/* Mobilgeräteanpassungen */
@media (max-width: 768px) {
    .container {
        margin-top: 80px; /* Platz für den Header */
        padding-bottom: 80px; /* Zusätzlicher Abstand zum fixierten Menü */
    }

    .tiles {
        margin-bottom: 20px; /* Abstand der gesamten Kachelgruppe nach unten */
    }

    .tile {
        width: 100%; /* Kachel nimmt gesamte Breite ein */
        margin-bottom: 20px; /* Abstand zwischen Kacheln */
    }

    header {
        height: 70px; /* Höhere Header-Höhe */
		height: 50px; /* Reduzierte Höhe für Mobilgeräte */
        top: 0px; /* Header bleibt oben */
        padding: 0px; /* Kein zusätzliches Padding */
    }

    .section-title {
        margin-top: 10px;
    }

    .bottom-nav {
        height: 60px;
        background-color: #3378f9;
    }
}
@media (max-width: 768px) {
    .detail-container {
        margin: 80px auto 50px auto; /* Reduzierter Abstand für Mobilgeräte */
        padding: 15px; /* Weniger Padding */
        max-width: 90%; /* Breite auf 90% begrenzen */
    }

    .detail-image {
        max-height: 300px; /* Kleinere maximale Höhe für Bilder */
    }

    .slider {
        margin: 10px auto;
        max-width: 100%; /* Slider passt sich an */
    }

    .back-button, .link-button {
        width: 100%; /* Buttons nehmen die gesamte Breite ein */
    }
}
/* Spezifische Anpassung für die News-Seite */
.news-page header {
    position: fixed;
    top: -140px; /* Hebt den Header auf mobilen Geräten an */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    height: 60px; /* Kleinere Header-Höhe */
    background-color: #007bff;
    z-index: 1000;
}

/* Abstand für die erste Kachel */
.news-page .news-container {
    margin-top: 40px; /* Passt den Platz unter dem Header an */
}
/* Mobile spezifische Anpassungen */
@media (max-width: 768px) {
    /* Kacheln auf mobilen Geräten */
    .tiles {
        display: flex;
        flex-wrap: wrap;
        gap: 15px; /* Weniger Abstand */
        justify-content: center;
    }

    .tile {
        background: #ffffff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 100%; /* Kacheln nehmen die volle Breite auf kleinen Geräten ein */
        max-width: 300px; /* Maximale Breite der Kachel */
        height: 400px; /* Feste Höhe für die Kachel */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .tile img {
        width: 100%;
        height: 200px; /* Bildhöhe fixieren */
        object-fit: cover; /* Bild füllt die Kachel aus */
        border-radius: 5px;
    }
}
.tile p {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
    .off-canvas {
        width: 100%; /* Menü füllt die Breite des Bildschirms */
    }

    .off-canvas.submenu {
        width: 100%; /* Submenü ebenfalls 100% der Breite */
    }

    .off-canvas.main-menu.shifted {
        right: 100%; /* Hauptmenü komplett aus dem sichtbaren Bereich schieben */
    }
}
/* Header-Bild auf mobilen Geräten */
.header-image {
    max-height: 100px; /* Weniger Höhe für mobile Geräte */
}

.header-image img {
    object-fit: contain; /* Alternative Darstellung, wenn nötig */
}

@media screen and (max-width: 768px) {
    .header-abfall {
        max-height: 100px; /* Kleinere Höhe des Headers */
    }