@charset "UTF-8";

/* Grundstil für den gesamten Body */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #2ec492, #e0e0e0);
    color: #333;
}

/* Stil für den Header und das Menü */
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
}

header nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

header nav ul li {
    display: inline;
    margin: 0 10px;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
}

header nav ul li a.active,
header nav ul li a:hover {
    color: #4CAF50;
}

/* Stil für das Hauptinhaltsbereich */
main {
    padding: 20px;
    text-align: left;
}

main h1 {
    text-align: center;
}

p.centered {
    text-align: center; /* Zentriert den Text */
}

/* Stil für die Schaltflächen auf der Startseite */
.container {
    max-width: 1200px; /* Maximalbreite für den Inhalt */
    margin: 0 auto; /* Zentriert den Inhalt und sorgt für Rand links und rechts */
    padding: 0 20px; /* Zusätzlicher innerer Rand */
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Jede Spalte nimmt den gleichen Platz ein */
    gap: 20px; /* Abstand zwischen den Buttons */
}

.button-grid a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-size: 16px;
    text-decoration: none;
    color: white; /* Standardfarbe für alle Buttons */
    background-color: #19311b; /* Standard-Hintergrundfarbe */
    border-radius: 5px;
    text-align: center;
}

.button-grid a .description {
    margin-top: 8px;
    font-size: 14px;
    color: #ccc;
}

/* Spezifische Button-Farben */
.btn-1, .btn-2, .btn-3, .btn-4, .btn-5, .btn-6 {
    background-color: #19311b;
}

@media (max-width: 600px) {
    nav ul li {
        margin: 5px 10px;
    }

    main {
        padding: 10px;
    }

    .container {
        margin: 0 10px; /* Reduziere den äußeren Rand für kleinere Bildschirme */
        padding: 0; /* Reduziere den inneren Rand für kleinere Bildschirme */
    }

    .button-grid {
        grid-template-columns: 1fr; /* Buttons auf kleinen Bildschirmen übereinander anzeigen */
    }
}
/* Container für den benutzerdefinierten Button */
.custom-button-container {
    display: flex;
    justify-content: center; /* Zentriert den Button standardmäßig */
    margin-bottom: 20px; /* Abstand zu anderen Buttons */
}

/* Stil für den Button */
.custom-button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px; /* Maximalbreite des Buttons */
    padding: 20px;
    background-color: #19311b;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #2b4a2f; /* Hover-Effekt */
}

/* Inhalt des Buttons */
.button-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Textbereich des Buttons */
.button-text {
    flex: 1;
    text-align: left;
    margin-right: 15px; /* Abstand zum Bild */
}

.button-text h2 {
    margin: 0;
    font-size: 18px;
}

.button-text p {
    margin: 5px 0;
    font-size: 14px;
}

/* Zentrierter Text */
.centered {
    text-align: center; /* Zentriert den Text */
}

.button-text p {
    text-align: center; /* Spezifische Zentrierung für <p>-Tags */
}

/* Bildbereich des Buttons */
.image-section {
    flex-shrink: 0;
    margin-right: 15px; /* Abstand zwischen Bild und Text */
}

.image-section img {
    max-width: 50px; /* Bildgröße */
    max-height: 50px;
}

/* Anpassungen für kleine Bildschirme */
@media (max-width: 600px) {
    .custom-button-container {
        padding: 10px;
        margin: 10px;
    }

    .custom-button {
        flex-direction: column; /* Text und Bild übereinander auf kleinen Bildschirmen */
        align-items: flex-start;
        width: 100%; /* Button über die gesamte Breite des Bildschirms */
        padding: 15px;
    }

    .image-section {
        margin-bottom: 10px; /* Abstand unter dem Bild */
    }

    .image-section img {
        max-width: 40px; /* Verkleinere das Bild auf kleineren Bildschirmen */
        max-height: 40px;
    }

    .button-text h1, .button-text h2 {
        font-size: 20px; /* Schriftgröße für bessere Lesbarkeit */
    }

    .button-text p {
        font-size: 14px; /* Schriftgröße für kleinere Bildschirme */
    }
}


/* Container für die Artikel auf der Blogseite */
.container.articles {
    max-width: 800px; /* Maximalbreite des Containers */
    margin-left: auto;
    margin-right: auto; /* Zentriert den Container horizontal */
    padding: 20px;
    text-align: left; /* Optional: Stelle sicher, dass der Text linksbündig bleibt */
}

/* Container für den benutzerdefinierten Button auf der Blogseite */
.custom-button-container-blog {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    /* Passe die Breite oder das Layout nach Bedarf an */
    max-width: 800px; /* Zum Beispiel verbreitern */
    margin-left: auto;
    margin-right: auto; /* Zentriert den Button auf normalen Seiten */
}

/* Stil für den Button auf der Blogseite */
.custom-button-blog {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    background-color: #354d02;
    color: white; /* Stelle die Textfarbe auf weiß */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-left: auto;
    margin-right: auto; /* Zentriert den Button auf normalen Seiten */
}

.custom-button-blog:hover {
    background-color: #4a6a3f;
}

/* Ändere die Linkfarbe (Artikelnamen) */
.custom-button-blog a {
    color: white; /* Oder eine andere helle Farbe */
}

.custom-button-blog a:hover {
    color: #cce4ba; /* Optional, hellere Farbe bei Hover */
}
/* Anpassungen für kleine Bildschirme - Blogseite */
@media (max-width: 600px) {
    .custom-button-container-blog {
        padding: 10px;
        margin: 10px;
    }

    .custom-button-blog {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 15px;
    }

    .image-section-blog {
        margin-bottom: 10px;
    }

    .image-section-blog img {
        max-width: 40px;
        max-height: 40px;
    }

    .button-text-blog h1, .button-text-blog h2 {
        font-size: 17px;
    }

    .button-text-blog p {
        font-size: 14px;
    }
}

/* Feiertagstabelle */
table {
    width: 100%; /* Entferne die max-width */
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 8px;
}

th {
    background-color: #354d02;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Standardgröße für alle Kalenderzellen */
.month-table td, .month-table th {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px; /* Standard-Padding */
    width: 14.28%; /* Jede Zelle nimmt gleichmäßig Platz ein (7 Tage in einer Woche) */
    height: 80px; /* Feste Höhe für alle Zellen */
    vertical-align: top; /* Text oben ausrichten */
    box-sizing: border-box; /* Berücksichtigt Padding und Border in der Zellenbreite */
}

/* Spezifische Stile für Feiertage */
.holiday {
    background-color: #ffcccb;
    font-weight: bold;
}

/* Responsive Anpassungen */
@media (max-width: 600px) {
    .month-table td, .month-table th {
        padding: 5px;
        height: 60px; /* Reduzierte Höhe auf kleinen Bildschirmen */
    }
}

/* Stil für die Select-Box und den Button */
select, input[type="submit"] {
    font-size: 1.5rem; /* Vergrößert die Schriftgröße */
    padding: 10px; /* Vergrößert den inneren Abstand */
    margin: 10px; /* Fügt etwas Abstand um die Elemente hinzu */
    border-radius: 5px; /* Abrundung der Ecken */
    border: 1px solid #354d02; /* Optional: Rahmenfarbe */
    background-color: #f2f2f2; /* Hintergrundfarbe */
}

input[type="submit"] {
    background-color: #354d02; /* Hintergrundfarbe für den Button */
    color: white; /* Textfarbe für den Button */
    cursor: pointer; /* Zeigt einen Zeiger an, wenn man über den Button fährt */
}

input[type="submit"]:hover {
    background-color: #4a6a3f; /* Hover-Effekt für den Button */
}

/* Fußzeile */
footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}