html, body {
    /* height: 100%;  *//* Damit der Viewport 100% Höhe hat */
    margin: 5;
    gap: 10px;
    display: flex;
    flex-direction: column;  /* Ändert das Layout in eine vertikale Richtung */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    font-family: Arial, Helvetica, sans-serif;
}
a {
    color: inherit; /* Erbt die Textfarbe des Eltern-Elements */
    text-decoration: none; /* Entfernt die Unterstreichung */
}



.content {
    display: flex;
    flex-direction: column;  /* Ändert das Layout in eine vertikale Richtung */
    justify-content: center; /* Zentriert die Kapitel vertikal */
    align-items: center;     /* Zentriert die Kapitel horizontal */
    text-align: left;
    width: 90vw;             /* 90% der Breite des Viewports */
    max-width: 600px;       /* Maximale Breite für größere Bildschirme */
    text-align: center;      /* Text innerhalb zentrieren */
    background-color: #51b9482e; /* Hintergrundfarbe als Beispiel */
    border: 1px solid #ccc;  /* Rahmen als visuelle Hilfe */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Schatten */
    border-radius: 10px;     /* Optional: Abgerundete Ecken */
    gap: 20px;               /* Abstand zwischen gestapelten Kapiteln */
   
}

.text{
    text-align: left;
    padding: 10px;
    border: 1px solid #ccc;  /* Rahmen als visuelle Hilfe */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Schatten */
    border-radius: 10px;     /* Optional: Abgerundete Ecken */
    margin: 20px;
    background-color: #51b9488d;
}


.kapitel-zeiterfassung {
    display: flex;
    flex-direction: column;  /* Ändert das Layout in eine vertikale Richtung */
    width: 80%;             /* Breite des Kapitels, zentriert innerhalb des Containers */
    padding: 15px 20px;     /* Innenabstand für Lesbarkeit */
    background-color: #fff; /* Heller Hintergrund für Kontrast */
    border: 1px solid #ddd; /* Dezenter Rahmen */
    border-radius: 8px;     /* Abgerundete Ecken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    margin: 10px;
    /* text-align: left; */       /* Textausrichtung innerhalb eines Kapitels */
}

.kapitel-saison2025 {
    display: flex;
    flex-direction: column;  /* Ändert das Layout in eine vertikale Richtung */
    width: 80%;             /* Breite des Kapitels, zentriert innerhalb des Containers */
    padding: 15px 20px;     /* Innenabstand für Lesbarkeit */
    background-color: #fff; /* Heller Hintergrund für Kontrast */
    border: 1px solid #ddd; /* Dezenter Rahmen */
    border-radius: 8px;     /* Abgerundete Ecken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    margin: 10px;

    /* text-align: left;   */     /* Textausrichtung innerhalb eines Kapitels */
}




#install-button {
    padding: 12px 24px;    /* Etwas mehr Innenabstand */
    font-size: 1.5rem;    /* Angemessene Textgröße */
    font-weight: bold;    /* Fetter Text */
    color: white;    /* Textfarbe bleibt weiß */
    background-color: #6b8e23; /* Olivgrün als Hauptfarbe */
    border: 2px solid #556b2f; /* Etwas dunkleres Grün für die Umrandung */
    border-radius: 8px;    /* Leicht stärker abgerundete Ecken */
    cursor: pointer;    /* Hand-Cursor */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);    /* Dezenter Schatten */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation bleibt */
}

#install-button:hover {
    background-color: #556b2f;    /* Dunkleres Grün bei Hover */
    transform: scale(1.08);       /* Leichte Vergrößerung */
}

#install-button:active {
    background-color: #3c5323;    /* Sehr dunkles Grün bei Klick */
    transform: scale(0.95);       /* Leichte Verkleinerung bei Klick */
}



#button-zur-app {
    padding: 12px 24px;    /* Etwas mehr Innenabstand */
    font-size: 1.5rem;    /* Angemessene Textgröße */
    font-weight: bold;    /* Fetter Text */
    color: white;    /* Textfarbe bleibt weiß */
    background-color: #6b8e23; /* Olivgrün als Hauptfarbe */
    border: 2px solid #556b2f; /* Etwas dunkleres Grün für die Umrandung */
    border-radius: 8px;    /* Leicht stärker abgerundete Ecken */
    cursor: pointer;    /* Hand-Cursor */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);    /* Dezenter Schatten */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation bleibt */
}

#button-zur-app:hover {
    background-color: #556b2f;    /* Dunkleres Grün bei Hover */
    transform: scale(1.08);       /* Leichte Vergrößerung */
}

#button-zur-app:active {
    background-color: #3c5323;    /* Sehr dunkles Grün bei Klick */
    transform: scale(0.95);       /* Leichte Verkleinerung bei Klick */
}



.accordion {
    width: 275px;
    padding: 2px;
    margin: 20px;
    border: 1px solid #ddd;   
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-header {
    width: 100%;
    padding: 15px;
    text-align: left;
    font-size: 18px;
    background: #f5f5f5;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.accordion-header:hover {
    background: #e9e9e9;
}

.accordion-content {
    display: none;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #ddd; 
    flex-direction: column;  /* Ändert das Layout in eine vertikale Richtung */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */

}

.accordion-content p {
    margin: 0;
}


.icon-small {
    width: 25px;
    height: 25px;
}


.whatsapp_button{
   
    position: fixed; 
    bottom: 15px; 
    right: 20px; 
 /*    background-color: #25D366;  */
    padding: 3px; 
    border-radius: 50%; 
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    width: 30px;
    height: 30px;
 
}

.fb_messenger_button{
    position: fixed; 
    bottom: 60px; 
    right: 20px; 
   /*  background-color: #371994;  */
    padding: 3px; 
    border-radius: 50%; 
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    width: 30px;
    height: 30px;
 
}



.logo {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease-in-out forwards;
    display: block;
    margin: 40px auto;  /* Zentriert das Logo horizontal und gibt etwas Abstand */
    width: 242px;  /* Originalbreite */
    height: auto;  /* Höhe automatisch anpassen */
    transition: transform 0.3s ease, opacity 0.3s ease;  /* Weicher Hover-Effekt */
    background-color: #fff;
    border-radius: 10px; 
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kontakt{
    font-size: small;
    margin: 10px;
}