* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-image: url('rz_7.png'); /* Pfad zu deinem Bild */
    background-size: cover; /* Bild anpassen, um das Element auszufüllen */
    background-position: center; /* Bild zentrieren */

    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background fixed while scrolling */

    color: white; /* Textfarbe */
    height: 100vh; /* Höhe des Viewports */
    align-items: center; /* Zentriert den Container vertikal */
}



header {
    /* position: fixed;  Footer fixieren */
    top: 0; /* Am oberen Rand des Bildschirms */
    left: 0; /* Links ausrichten */
    right: 0; /* Rechts ausrichten */
    background: rgba(51, 51, 51, 0.8); /* Transparenter Hintergrund für bessere Lesbarkeit */
    color: #fff;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.menu {
    list-style: none;
    display: flex;
}

.menu li {
    margin: 0 1rem;
}

.menu a {
    color: #fff;
    text-decoration: none;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 25px;
    background: #fff;
    margin: 3px 0;
}

main {
    padding: 1rem;
}

section {
    margin: 1rem 0;
}


@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .menu.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
    }
}

footer {
    text-align: center;
    position: fixed; /* Footer fixieren */
    bottom: 0; /* Am unteren Rand des Bildschirms */
    left: 0; /* Links ausrichten */
    right: 0; /* Rechts ausrichten */
    text-align: center;
    padding: 1rem;
    background: rgba(51, 51, 51, 0.8); /* Transparenter Hintergrund für bessere Lesbarkeit */
    color: #fff;
}

.content-section {
    border: 2px solid #fff; /* Weißer Rahmen */
    border-radius: 15px; /* Gerundete Ecken */
    padding: 1rem; /* Innenabstand */
    margin: 2rem ; /* Außenabstand */
    background: rgba(14, 12, 83, 0.8); /* Leicht transparenter Hintergrund für bessere Lesbarkeit */
    display: none; /* Standardmäßig alle Abschnitte ausblenden */
    max-width: 750px; /* Maximale Breite von 1000 Pixeln */
}

.content-section-header {
    padding: 1rem; /* Innenabstand */
    margin: 2rem ; /* Außenabstand */
    display: none; /* Standardmäßig alle Abschnitte ausblenden */
    max-width: 750px; /* Maximale Breite von 1000 Pixeln */
}


.logo-img {
    width: 50%; /* Bild um 50 % verkleinern */
    height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis beizubehalten */
}

/* Standardisierte Textformate */
.blocktext_klein {
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-align: justify;
}

.blocktext_normal {
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: justify;
    hyphens: auto; /* Automatische Worttrennung aktivieren */
    overflow-wrap: break-word; /* Zeilenumbruch bei langen Wörtern */
}

.blocktext_gross {
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-align: justify;
}

.blocktext_sehr_gross {
    font-family: Arial, sans-serif;
    font-size: 18px;
    text-align: justify;
}

.ueberschrift_gross {
    font-family: Arial, sans-serif;
    font-weight: bold; /* Fett */
    font-size: 24px;
}
.ueberschrift_normal {
    font-family: Arial, sans-serif;
    font-weight: bold; /* Fett */
    font-size: 20px;
}
.ueberschrift_normal {
    font-family: Arial, sans-serif;
    font-weight: bold; /* Fett */
    font-size: 18px;
}

.responsive-image {
    max-width: 70%; /* Bild wird auf maximal 70% der Containerbreite gesetzt */
    height: auto; /* Höhe wird automatisch angepasst */
    object-fit: contain; /* Bild wird skaliert, um in den Container zu passen */
    }
        
.responsive-image-service {
    max-width: 40%; /* Bild wird auf maximal 40% der Containerbreite gesetzt */
    height: auto; /* Höhe wird automatisch angepasst */
    /* width: 20%; /* Höhe wird automatisch angepasst */
    object-fit: contain; /* Bild wird skaliert, um in den Container zu passen */
    }
        
.responsive-image-service-klein {
    max-width: 30%; /* Bild wird auf maximal 20% der Containerbreite gesetzt */
    height: auto; /* Höhe wird automatisch angepasst */
    /* width: 20%; */
    object-fit: contain; /* Bild wird skaliert, um in den Container zu passen */
    }

.content-section.active {
    display: block; /* Aktiven Abschnitt anzeigen */
    }
    
table {
    border-collapse: collapse; /* Entfernt die Abstände zwischen den Zellen */
    width: 95%; /* Optional: Setzt die Breite der Tabelle */
}

td {
    padding: 10px; /* Fügt etwas Abstand innerhalb der Zellen hinzu */
    text-align: center; /* Textausrichtung in den Zellen */
    border: none; /* Entfernt die Rahmen der Zellen */
}

ul {
    text-align: left; /* Textausrichtung in den Zellen */
}

.fade {
    animation: fadeInOut 4s infinite; /* Animation für 2 Sekunden, unendlich wiederholen */
}

@keyframes fadeInOut {
    0% {
        opacity: 1; /* Anfangszustand: unsichtbar */
    }
    50% {
        opacity: 0; /* Halbzeit: vollständig sichtbar */
    }
    100% {
        opacity: 1; /* Endzustand: unsichtbar */
    }
}

/* #myImage {
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: block;
    margin: 0 auto;
}

.implode {
    transform: scale(0);
    opacity: 0;
}

*/


#myImage {
    transition: transform 0.3s ease;
    display: block;
    margin: 0 auto;
    /* perspective: 500px; */ /* Perspektive für 3D-Effekt */
}

.rotate {
    animation: spin 1.5s linear forwards; /* 3 Umdrehungen */
    /* animation: spin 1.5s ease-in-out  3; -------------- 3 Umdrehungen */
}

.pressed {
    transform: scale(0.8); /* Verkleinert das Bild auf 90% */
}

@keyframes spin {
    from {
        /* transform: rotate(0deg); */
        transform: rotateY(0deg); /* Startposition */
}
    to {
        /* transform: rotate(1080deg);  */
        transform: rotateY(1080deg); /* 3 Umdrehungen (3 * 360 Grad) = 1080 */
    }
}


#content {
    opacity: 0; /* Start mit unsichtbarem Inhalt */
    transition: opacity 1s ease; /* Übergang für die Opazität */
}

.visible {
    opacity: 1; /* Sichtbar, wenn die Klasse hinzugefügt wird */
}

.hidden {
    display: none; /* Versteckt den Inhalt, wenn die Klasse vorhanden ist */
}


.underline-link {
    text-decoration: underline; /* Underline the text */
    color: inherit;            /* Inherit the text color from the parent element */
    background: none;         /* No background */
    border: none;             /* No border */
    padding: 0;               /* No padding */
    margin: 0;                /* No margin */
}

.left-aligned {
    text-align: left; /* Textausrichtung in den Zellen */
}

.right-aligned {
    text-align: right; /* Textausrichtung in den Zellen */
}


ul {
    list-style-type: disc; /* Stil der Aufzählungszeichen */
    margin: 0;
    padding: 0;
}

ul ul {
    list-style-type: circle; /* Stil der Unterpunkte */
    margin-left: 20px; /* Abstand für Unterpunkte */
}

li {
    margin: 5px 0; /* Abstand zwischen den Listenelementen */
}