/* color palette: https://coolors.co/809bce-95b8d1-b8e0d2-d6eadf-eac4d5 */
 
body {
    font-family: Arial, Helvetica, sans-serif;
}

 /* Navigation bar large screen */
 .nav {
    overflow: hidden;
    background-color: #809BCE;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    left: 0;
    width: 100%; /* Full width */
    font-size: large;
  }

  /* icon in navigation bar */
.nav a:first-child img {
    float: left;
    padding: 14px 16px;
    margin-left: 20px;
    margin-right: 20px;
}

  /* Links inside the navbar */
  .nav a:not(:first-child) {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 56px 16px;
    width: 19%;
    text-decoration: none;
  }

  .nav a:last-child {
    display: none;
  }
  
  /* Change background on mouse-over */
 .nav a:hover {
    background: #95B8D1;
    color: black;
  }

  /* don't show menu icon on large screens */
.nav .menuIcon {
    display: none;
}

  /* Main content */
  .main {
    background-color: white;
    width: 70%;
    margin-top: 130px; /* Add a top margin to avoid content overlay */
    margin-bottom: 200px; /* Add a bottom margin to avoid content overlay */
    margin-left: auto;
    margin-right: auto;
    padding: 5px 0px;
    flex: 1;

    line-height: 1.5;
    font-size: large;
  } 

  .main img {
    max-width: 100%;
  }

  /* table */
  .unterstuetzungSchlaege {
    background-color: #D6EADF;
  }

  .unterstuetzungSchlaege th, .unterstuetzungSchlaege td {
    padding: 15px;
    border-style: solid;
    border-color: #B8E0D2;
  }

/* Footer */
.footer {
    display: grid;
    grid-template-areas: 
        "Impressum Konto Instagram"
        "Impressum Konto Email"
        "Impressum Konto Whatsapp";
    grid-template-columns: 3fr 3fr 3fr;
    row-gap: 15px;

    position: static; 
    background-color: #809BCE;
    bottom: 0; 
    left: 0;
    width: 99%;
    padding-left: 20px;
}

.footer > div {
    margin-left: 14px;
    margin-right: auto;
}

.footer > div.links {
    grid-area: Impressum; 
}

.footer > div.bank {
    grid-area: Konto;
}

.footer > div.insta {
    grid-area: Instagram;
}

.footer > div.email {
    grid-area: Email;
}

.footer > div.whatsapp {
    grid-area: Whatsapp;
}

/* Alert box */
.alert {
    background-color: #EAC4D5;
    
    padding: 5px 20px 5px 20px;

    width: fit-content;

    border-style: solid;
    border-color: #C45A8A;
    border-width: 2px;
}

.info {
    background-color: #D6EADF;
    
    padding: 5px 20px 5px 20px;

    width: fit-content;

    border-style: solid;
    border-color: #B8E0D2;
    border-width: 2px;
}


/* Pictures */
.pics {
    text-align: left;
}

.pics img {
    width: 25%;
    display: inline-block;
}

.taubenarten {
    width: 55%;
}


/* Contact */
.contactPhone {
        display: none;
    }

/* smartphone */
@media only screen and (max-width: 898px) {
    /* adjust main area */
    .main {
        margin-top: 130px; /* Add a top margin to avoid content overlay */
        margin-bottom: 160px; /* Add a bottom margin to avoid content overlay */
        margin-left: 2.5%;
        margin-right: 2.5%;
        width: 95%;
        padding: 5px 0px;
    }

    /* make images larger */
    .pics img {
        width: 100%;
        padding-bottom: 10px;
    }

    /* nav with menu icon */
    .nav a:not(:first-child) { 
        display: none;
    }
    .nav a:first-child {
        margin-left: auto;
        margin-right: auto;
    }
    .nav a#home {
        padding-top: 35%;
    }
    .nav a.menuIcon {
        float: right;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 35px 5px;
    }
    .nav.responsive .menuIcon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .nav.responsive a:not(:first-child):not(:last-child) {
        float: none;
        display: block;
        text-align: left;
        overflow: visible;
        width: 100%;
        padding: 5% 5%;
    }

    .taubenarten {
        width: 100%;
    }   

    .footer {
        position: static;
        padding-left: 0;
        padding-bottom: 0;
        margin-left: 0;
        margin-bottom: 0;
    }

    /* Contact */
    .contact {
        display: none;
    }

    .contactPhone {
        display: inline;
    }
}


/* öarge tablet / laptop */
@media only screen and (min-width: 899px) and (max-width: 991px) {
    .nav {
        height: fit-content;
    }
    
    /* Links inside the navbar */
    .nav a:not(:first-child) {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 56px 16px;
        width: 15%;
        text-decoration: none;
    }
    
    .nav a:last-child {
        display: none;
    }

    .pics img {
        width: 40%;
    }

    .taubenarten {
        width: 100%;
    } 

    .footer {
        position: static;
        padding-left: 0;
        padding-bottom: 0;
        margin-left: 0;
        margin-bottom: 0;
    }

    .contactPhone {
        display: none;
    }
}

/* small desktop */
@media screen and (min-width: 992px) and (max-width: 1280px) {
    .nav a:first-child img {
        float: left;
        padding: 14px 14px;
        margin-left: 18px;
        margin-right: 18px;
    }
    /* Links inside the navbar */
    .nav a:not(:first-child) {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 56px 16px;
        width: 17%;
        text-decoration: none;
    }

    .nav a:last-child {
        display: none;
    }
}