:root {

    --Schwarz-Weiß_5: #000000;

    --Schwarz-Weiß_4: #333333;

    --Schwarz-Weiß_3: #666666;

    --Schwarz-Weiß_2: #999999;

    --Schwarz-Weiß_1: #FFFFFF;



    --Cyan_5: #003333;

    --Cyan_4: #339999;

    --Cyan_3: #66CCCC;

    --Cyan_2: #99E6E6;

    --Cyan_1: #CCFFFF;



    --Magenta_5: #330033;

    --Magenta_4: #993399;

    --Magenta_3: #CC66CC;

    --Magenta_2: #E699E6;

    --Magenta_1: #FFCCFF;



    --Gelb_5: #333300;

    --Gelb_4: #999933;

    --Gelb_3: #CCCC66;

    --Gelb_2: #E6E699;

    --Gelb_1: #FFFFCC;



    --Blau_5: #001027;

    --Blau_4: #183c72;

    --Blau_3: #345381;

    --Blau_2: #6088c5;

    --Blau_1: #c5dcff;



    --BlauT_5: #002725;

    --BlauT_4: #186772;

    --BlauT_3: #347c81;

    --BlauT_2: #60bec5;

    --BlauT_1: #c5ffff;



    --Grün_5: #003300;

    --Grün_4: #339933;

    --Grün_3: #66CC66;

    --Grün_2: #99E699;

    --Grün_1: #CCFFCC;



    --Rot_5: #330000;

    --Rot_4: #993333;

    --Rot_3: #CC6666;

    --Rot_2: #E69999;

    --Rot_1: #FFCCCC;

}











body {

    width: 100vw;

    padding: 0;

    margin: 0;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

    background-color: var(--Blau_2);

    color: var(--Blau_5);

    overflow-x: hidden;



    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: center;

    align-items: center;

}



/* Mobile-Stile */

@media screen and (max-width: 768px) {

    header {

        max-width: 100%;

        max-height: 85px;

        background-color: var(--Blau_4);

        padding: 5px 20px;



        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: space-between;

        align-items: center;

    }



    main {

        max-width: 100%;

        padding: 20px;

        



        display: flex;

        flex-direction: column;

        flex-wrap: nowrap;

        justify-content: center;

        align-items: center;

    }





    footer {

        max-width: 100%;

        position: fixed;

        bottom: 0;

        background-color: var(--BlauT_2);

        border: 2px solid var(--BlauT_5);

        padding: 5px 5px;

        margin: 0px ;



        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        justify-content: start;

        align-items: center;

    }

}



/* Desktop-Stile */

@media screen and (min-width: 769px) {

    header {

        width: 769px;

        max-height: 85px;

        background-color: var(--Blau_4);

        color: var(--Blau_5);

        padding: 5px 10px;



        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: space-between;

        align-items: center;

        overflow-y: hidden;

    }



    main {

        width: 709px;

        height: 100%;

        overflow-y: hidden;

        padding: 40px;



        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        align-items: start;

    }





    footer {

        min-width: 700px;

        max-width: 800px;

        height: 50px;

        position: fixed;

        bottom: 0;

        background-color: var(--BlauT_2);

        border: 2px solid var(--BlauT_5);

        padding: 5px 5px;

        margin: 0px ;



        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        justify-content: start;

        align-items: center;

        gap: 5px;

    }

}



/* HAMBURGER MENU */

@media screen and (min-width: 1px) {



.hamburger-menu {

width: 10%;

  }



.hamburger-icon {

    background: none;

    border: none;

    font-size: 30px;

    cursor: pointer;

   z-index: 100990;

}



.hamburger-icon>img {

    width: 50px;

    height: 50px;

}



#rotatingImage {

    transition: transform 1.0s ease-in-out;

    cursor: pointer;

  }



  .menu-items {

    position: fixed;

    top: 100px;

    right: -90%; /* Versteckt das Menü außerhalb des Bildschirms */

    width: 80%;

    height: fit-content;

    background-color: var(--Blau_1);

    border: 2px solid var(--Blau_4);

    box-shadow: -5px 5px 15px 2px #263d5f77;

    border-radius: 20px;

    transition: right 1.0s ease-in-out;

    overflow-y: auto;

  }

  



.menu-items.active {

    right: -20px; /* Bringt das Menü ins Sichtfeld */

  }



.menu-items ul {

    list-style-type: none;

    padding: 0;

    margin-top: 10px;

}



.menu-items li {

    padding: 15px;

    border-bottom: 0px solid var(--Blau_5);

}



.menu-items>ul>li a {

    width: 100%;

    padding: 5px 10px;

    margin: 0px;

    text-decoration: none;

    text-align: center;

    background-color: var(--Blau_2);

    border: 1px solid var(--Blau_5);

    color: var(--Blau_5);

}



.menu-items>ul>li a:hover {

    background-color: var(--Blau_4);

    border: 1px solid var(--Blau_1);

    color: var(--Blau_1);

}



}



.menu-items>ul>li>p {

    text-decoration: none;

    color: var(--Blau_5);

    width: 200px;

    font-size: 0.6em;

    padding: 0;

    margin: 0;

}







/* HEADER */

@media screen and (min-width: 1px){



header>h1 {

    width: calc(100% - 100px);

    font-size: 1.0em;

    color: var(--BlauT_1);

    text-align: left;

    margin: 0px 10px;

}



header>h2 {

    width: calc(90% - 50px);

    font-size: 0.9em;

    color: var(--Blau_1);

    text-align: left;

    margin: 5px 5px 10px 5px;

}



header>h3 {

    width: 100%;

    font-size: 1.0em;

    color: var(--Blau_1);

}



header>span {

    width: calc(100% - 100px);

    font-size: 0.9em;

    color: var(--Blau_1);

    margin: 10px 10px;

}







}



/* MAIN */

@media screen and (min-width: 1px){



main>h2 {

    width: 100%;

    font-size: 1.2em;

    color: var(--Gelb_5);

}



main>h3 {

    width: 100%;

    font-size: 0.7em;

    color: var(--Gelb_5);

}



main>h4 {

    width: 100%;

    font-size: 0.8em;

    font-weight: bolder;

    color: var(--Gelb_5);

}



main>p {

    width: 100%;

    font-size: 1.0em;

    color: var(--Gelb_5);

}



main>a {

    width: 100%;

    padding: 5px;

    margin: 5px;

    text-decoration: none;

    text-align: center;

    border-radius: 5px;

    background-color: var(--Gelb_2);

    color: var(--Gelb_5);

    border: 2px solid var(--Gelb_5);

}



main>ul {

    margin: 5px;

}



main>ul>li {

    width: 100%;

    font-size: 1.2em;

    margin: 10px;

    color: var(--Gelb_5);

    list-style-type: decimal;

}



main>img {

    width: 200px;

    height: auto;

    margin: 10px;

}





main>form {

    max-width: 100%;

    padding: 10px;

    background-color: var(--Gelb_2);

    border: 1px solid var(--Gelb_5);



    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

}



main>form>label {

    width: 100%;

    color: var(--Gelb_5);

}



main>form>input {

    width: calc(70% - 40px);

    font-size: 1.0em;

    padding: 5px;

    background-color: var(--Gelb_1);

}



main>form>button {

    width: 30%;

    padding: 5px;

    margin: 5px;

    text-decoration: none;

    text-align: center;

    border-radius: 5px;

    background-color: var(--Gelb_3);

    color: var(--Gelb_5);

    border: 2px solid var(--Gelb_5);

}



main>form>button:hover {

    background-color: var(--Gelb_5);

    color: var(--Gelb_3);

    border: 2px solid var(--Gelb_3);

}



}



@media screen and (min-width: 1px){

/* TABELEN */



#heim_Bereich {

    width: calc(100% - 0px);

    margin: 0px;

}



#feintlicher_Bereich {

    width: calc(100% - 0px);

    margin: 0px;

}



#heim_Bereich>h3,

#feintlicher_Bereich>h3 {

    margin: 5px 0px;

    padding: 5px;

    color: var(--Blau_3);

    font-size: 0.7em;

}



/* Eigenes_Meer */



#eigenes_Meer {

    width: 320px;

    border-collapse: collapse;

    margin: 2px 0px;

}



#eigenes_Meer th,

#eigenes_Meer td {

    width: 10px;

    height: 20px;

    border: 1px solid var(--Blau_2);

    text-align: center;

    font-size: 0.55em;

    background-color: var(--Blau_1);

}



#eigenes_Meer th {

    background-color: var(--Blau_3);

    color: var(--Blau_1);

}



#eigenes_Meer td {

    cursor: none;

}



#eigenes_Meer td:hover {

    background-color: var(--Blau_4)

}





/* Feindliche_Meere */

#feindliche_Meere {

    width: 320px;

    border-collapse: collapse;

    margin: 2px 0px;

}



#feindliche_Meere th,

#feindliche_Meere td {

    width: 10px;

    height: 20px;

    border: 1px solid var(--Blau_2);

    text-align: center;

    font-size: 0.55em;

    background-color: var(--Blau_1);

}



#feindliche_Meere th {

    background-color: var(--BlauT_3);

    color: var(--Blau_1);

}



#feindliche_Meere td {

    cursor: pointer;

}



#feindliche_Meere td:hover {

    background-color: var(--BlauT_4)

}







}

/* FOOTER */

@media screen and (min-width: 1px){



footer>a {

    width: 100%;

    padding: 5px;

    margin: 5px;

    text-decoration: none;

    text-align: center;

    border-radius: 5px;

    background-color: var(--Blau_1);

    color: var(--Blau_5);

    border: 2px solid var(--Blau_5);

}



footer>a:hover {

    background-color: var(--Blau_4);

    color: var(--Blau_1);

    border: 2px solid var(--Blau_1);

}



footer>form {

    max-width: 30%;

    height: 50px;

    padding: 5px;

    background-color: var(--BlauT_2);

    border: none;



    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: start;

    align-items: start;

}



footer>form>textarea {

    width: 100%;    

    height: 50px;

    font-size: 0.8em;

    padding: 5px 5px;

    background-color: var(--BlauT_1);

    border: 1px solid var(--BlauT_5);

    color: var(--BlauT_5);

    border-radius: 5px;

}



footer>form>input {

    width: 100%;  

    height: 20px;

    padding: 0px;

    margin: 3px;

    font-size: 0.7em;

    text-decoration: none;

    text-align: center;

    border-radius: 5px;

    background-color: var(--BlauT_3);

    color: var(--BlauT_1);

    border: 2px solid var(--BlauT_1);

}



footer>form>input:hover {

    background-color: var(--BlauT_1);

    color: var(--BlauT_3);

    border: 2px solid var(--BlauT_3);

}



footer>#chatContent {

    width: calc(75% - 20px);

    height: 40px;

    padding: 5px;

    margin: 5px 20px;

    font-size: 0.7em;

    overflow-y: scroll;

    overflow-x: hidden;

    background-color: var(--BlauT_1);

    border: 1px solid var(--BlauT_5);

    color: var(--BlauT_5);

    border-radius: 5px;



    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: start;

    align-items: start;



}



}



/* TEXTE */

p {

    width: 100%;

    padding: 5px;

    margin: 5px;

    text-decoration: none;

    text-align: left;

    font-size: 1.0em;

    border-radius: 5px;

    color: var(--BlauT_4);



}











.rot {

    width: fit-content;

    font-size: 0.8en;

    color:  var(--Rot_4);

    background-color: var(--Rot_1);

    margin: 0;

    padding: 5px;

    text-align: center;

    border: 1px solid var(--Rot_4);



}



.greun {

    width: fit-content;

    font-size: 0.8en;

    color: var(--Grün_4);

    background-color: var(--Grün_1);

    margin: 0;

    text-align: center;

    border: 1px solid var(--Grün_4);

}



a {

    width: 200px;

    padding: 5px 10px;

    margin: 10px;

    text-decoration: none;

    text-align: center;

    background-color: var(--Blau_2);

    border: 1px solid var(--Blau_5);

    color: var(--Blau_5);

}



a:hover {

    background-color: var(--Blau_4);

    border: 1px solid var(--Blau_1);

    color: var(--Blau_1);

}