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

body {
    font-family: Arial, sans-serif;    /* Generelle Schriftfarbe und Stil für body */
    /*  background-color: #02758A;  */
    color: yellow;
}

a {
    color: yellow;  /* Schriftfarbe für Links */
    text-decoration: none;
}

a:hover {
    color: red;    /* Schriftfarbe für mouseover Link */
}

/* Header */
header {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #253161;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap; /* Ermöglicht das Umfließen der Elemente im Header */
}

.desktop-nav a {
    margin: 0 20px;    /* Abstand zwischen den Links */
}

.language-links img {     /* Höhe, breite und abstand der Sprachbilder */
    width: 34px;
    height: 22px;
    margin: 0 20px;
    border-radius: 5px;
}





/* Main (Hauptbereich) */
main {
    margin-top: 50px; /* Damit der Header den Inhalt nicht überlappt */
    text-align: center;
    margin-bottom: 50px; /* Damit der Footer den Inhalt nicht überlappt */
}

/* Angaben für alle Tabellen auf allen Seiten alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen  */
table {
    margin: 20px auto;
    margin-top: 70px;
    margin-bottom: 80px;
    background-color: none;
    color: white;
    width: 40%;
    max-width: 800px;
    border-spacing: 0;
    text-align: center;
    font-size: 25px;
}

td {
    padding: 10px;      /* legt den abstand für tabellendaten in der zelle fest */
}
/* Angaben für alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen alle Tabellen */




/* Spezielle Angaben für Über uns  Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns */
table.ueber-uns {
    width: 40%;
    max-width: 800px;
    margin-top:80px;  
    color: darkblue;
}

table.ueber-uns td {
    text-align: left;
}

table.ueber-uns h2 {
    text-align: center;
}

table.ueber-uns img {
    width: 100%;   /* Bild passt sich der Zelle der Tabelle an */
    height: auto;  /* Verhindert Verzerrung des Bildes */
    border-radius: 25px;
}
/* Spezielle Angaben für Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns Über uns */




/* Spezielle Angaben für Fotoalben - Tabelle  Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben */
/* Fotoalben - Tabelle */
table.fotoalben {
    width: 40%;
    max-width: 800px;
    border-collapse: collapse;
    margin-top: 100px;
    table-layout: fixed;
}

table.fotoalben td {
    width: 33.33%;   /* Jede Zelle bekommt 1/3 der Gesamtbreite */
    padding: 10px;
    text-align: center;
    border: none;
    border-color: none;
    vertical-align: middle;
}

table.fotoalben img {
    width: 100%;   /* Bild passt sich der Zelle an */
    height: auto; /* Festgelegte Höhe für die Bilder */
    aspect-ratio: 1 / 1;
    object-fit: cover; /* Verhindert Verzerrung, Bild wird beschnitten, um die Zelle auszufüllen */
    border-radius: 25px;
    display: block;
}
/* Spezielle Angaben für Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben Fotoalben */




/* Spezielle Angaben für Videos - Tabelle  Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos */
table.videos {
    width: 40%;
    max-width: 800px;
    border-collapse: collapse;
    margin-top: 80px; /* Abstand zum Header, um Überlappung zu vermeiden */
    table-layout: fixed;
    color: white;
}

table.videos td {
    width: 50%;    /* Jede Zelle bekommt 1/2 der Gesamtbreite */
    padding: 15px;
    text-align: center;
    border: none;
    vertical-align: middle;
    font-size: 25px;
}

table.videos h2 {
    font-size: 30px;
}

table.videos img {
    width: 100%;    /* Bild passt sich der Zelle an */
    height: auto;  /* Festgelegte Höhe für die Bilder */
    aspect-ratio: 1 / 1;  /* Erzwingt ein quadratisches Bild */
    object-fit: cover; /* Verhindert Verzerrung, Bild wird beschnitten, um die Zelle auszufüllen */
    display: block;  /* Verhindert zusätzliche Abstände */
    border-radius: 25px;
   
}
/* Spezielle Angaben für Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos Videos -  */





/* Blinking Text  Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text */
.blinking-text {
    animation: blink 3s linear infinite;
}

@keyframes blink {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
/* Blinking Text  Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text Blinking Text*/



/* Footer */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #253161;
    text-align: center;
    padding: 10px 0;
}



/* Gibt an was passiern soll wenn bildschirm max 768px mobile Version ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 768px) {
    .desktop-nav {
        display: block;
        text-align: center; /* Zentriert die Links */
    }

    table {
    width: 90%;
    max-width: 90%;
    margin-top: 100px;
    }

    table.ueber-uns {
    width: 90%;
    max-width: 90%;
    margin-top: 100px;
    }

    table.videos {
    width: 90%;
    max-width: 90%;
    margin-top: 100px;
    }

    table.videos p {
    font-size: 12px;
    }

    table.fotoalben p {
    font-size: 12px;
    }

    table.fotoalben {
    width: 90%;
    max-width: 90%;
    margin-top: 100px;
    }


   
   
    header {
        text-align: center;
    }
  

    .header-container {
        flex-direction: column; /* Verändert die Richtung der Elemente im Header auf mobiler Ansicht */
    }

    .desktop-nav a {
        display: inline-block;
        margin: 5px 10px;
    }

    .language-links {
        display: block;
        margin-top: 10px;
    }

    .language-links img {
        display: inline-block;
        margin: 0 20px;
    }

    
}
} /* Ende der Angabe für header auf mobilen Geräten ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */