@charset "UTF-8";
@media screen {

    #navigation table td:nth-child(2) {
        background-color: #009fe3;
    }
    #navigation table td:nth-child(1) {
        background-color: #163e81;
    }
    #menueResponsive ul li:nth-child(2) {
        background-color: #009fe3;
    }
    #menueResponsive ul li:nth-child(1) {
        background-color: #a1acbb;
    }

    .nav-item {
        display: inline-block;
        padding: 0px;
        height: 220px;
        margin: 0;
    }

    .handy {
        display: none;
    }
    .tablet {
        display: none;
    }

    #content {
        width: 960px;
        margin: 0px auto;
    }
    #banner img {
        width: 960px;
    }
    #rechteck {
        width: 960px;
        height: 35px;
        ;
        background-color: #009fe3;
        margin-top: 40px;
    }
    #rechteck p {
        margin-left: 35px;
        text-align: left;
        color: #ffffff;
        padding-top: 7px;
        font-size: 16px;
    }
    .blauer_balken {
        margin-top: 30px;
        background-color: #009fe3;
        width: 159px;
        height: 15px;
        transition: transform 0.5s ease-in;
    }
    .black:checked ~ .blauer_balken {
        transform: translateX(0);
    }
    .red:checked ~ .blauer_balken {
        transform: translateX(200.25px);
    }
    .yellow:checked ~ .blauer_balken {
        transform: translateX(400.5px);
    }
    .orange:checked ~ .blauer_balken {
        transform: translateX(600.75px);
    }
    .purple:checked ~ .blauer_balken {
        transform: translateX(804px);
    }
    .wrap {
        position: relative;
    }
    #kreis1 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #009fe3;
        margin-top: 35px;
        float: left;
    }


    #kreis1 p {
        color: #ffffff;
        text-align: center;
        padding-top: 70px;
        font-style: normal;
        font-size: 14px;
    }


    #kreis2 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #163e81;
        margin-top: 35px;
        margin-left: 41.25px;
        float: left;
    }
    #kreis2 p {
        color: #ffffff;
        text-align: center;
        padding-top: 70px;
        font-style: normal;
        font-size: 14px;
    }
    #kreis3 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #163e81;
        margin-top: 35px;
        margin-left: 41.25px;
        float: left;
    }
    #kreis3 p {
        color: #ffffff;
        text-align: center;
        padding-top: 70px;
        font-style: normal;
        font-size: 14px;
    }
    #kreis4 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #163e81;
        margin-top: 35px;
        margin-left: 41.25px;
        float: left;
    }
    #kreis4 p {
        color: #ffffff;
        text-align: center;
        padding-top: 70px;
        font-style: normal;
        font-size: 14px;
    }
    #kreis5 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #163e81;
        margin-top: 35px;
        margin-left: 41.25px;
        float: left;
    }
    #kreis5 p {
        color: #ffffff;
        text-align: center;
        padding-top: 50px;
        font-style: normal;
    }
    .boxes {
        position: relative;
        width: 960px;
        height: 420px;
        margin-top: 0px;
        overflow: hidden;
        border-width: 1px;
        border-style: solid;
        border-color: #000;
    }
    .boxes p {
        padding-top: 25px;
        padding-right: 30px;
        padding-left: 30px;
        padding-bottom: 25px;
        font-size: 14px;
    }
    .box {
        width: 960px;
        height: 420px;
        float: left;
    }
    .boxes table {
        padding-left: 15px;
        text-align: left;
        margin-top: -10px;
    }

    .slides {
        width: 4800px;
        height: 420px;
        transition: transform 0.75s ease-in;
    }
    .box.black {
        background-color: white;
    }
    .box.red {
        background-color: white;
    }
    .box.yellow {
        background-color: white;
    }
    .box.orange {
        background-color: white;
    }
    .box.purple {
        background-color: white;
    }
    .black:checked ~ .boxes > .slides {
        transform: translateX(0);
    }
    .red:checked ~ .boxes > .slides {
        transform: translateX(-960px);
    }
    .yellow:checked ~ .boxes > .slides {
        transform: translateX(-1920px);
    }
    .orange:checked ~ .boxes > .slides {
        transform: translateX(-2880px);
    }
    .purple:checked ~ .boxes > .slides {
        transform: translateX(-3840px);
    }
    .labels {
        margin-top: 0px;
    }
    .rnav {
        display: none;
    }
    #rechteck1 {
        width: 960px;
        height: 35px;
        background-color: #009fe3;
        margin-top: 40px;
    }
    #rechteck1 p {
        margin-left: 35px;
        text-align: left;
        color: #ffffff;
        padding-top: 7px;
        font-size: 16px;
    }
    #links2 {
        margin-top: 30px;

    }
    #links2 p {
        color: #000;
        padding-left: 35px;
        font-size: 14px;
    }
    #links2 a {
        color: #163e81;
        padding-left: 15px;
        font-size: 14px;
    }
    #letzterSatz {
        margin-top: 50px;
    }
    #letzterSatz p {
        padding-left: 35px;
        font-size: 14px;
        margin-bottom: 70px;
    }


    body {
        background-image: url(Flugzeug.png);
        background-size: 300px;
        background-repeat: no-repeat;
        background-position: 85% 10px;
        background-color: #fff;
    }
}

@media (max-width: 1400px) {

    body {
        background-size: 200px;
        background-position: 90% 20px;
    }
}


@media (max-width: 980px) {
    body {
        background-image: none;

    }
    #rechteck1 {
        max-width: 960px;
        width: 100%;
        height: 35px;
        background-color: #009fe3;
        margin-top: 40px;
    }



    #content {
        width: 100%;
    }
    #banner img {
        width: 100%;
    }
    #rechteck {
        width: 100%;
        margin-top: 0px;
        height: 35px;
    }
    #rechteck p {
        margin-left: 35px;
        text-align: left;
        color: #ffffff;
        padding-top: 7px;
        font-size: 16px;
    }
    .box {
        width: 724px;
        height: 420px;
    }
    .boxes {
        width: 724px;
        height: 420px;
    }
    .slides {
        width: 3620px;
        height: 420px;
    }
    .black:checked ~ .boxes > .slides {
        transform: translateX(0);
    }
    .red:checked ~ .boxes > .slides {
        transform: translateX(-724px);
    }
    .yellow:checked ~ .boxes > .slides {
        transform: translateX(-1448px);
    }
    .orange:checked ~ .boxes > .slides {
        transform: translateX(-2172px);
    }
    .purple:checked ~ .boxes > .slides {
        transform: translateX(-2896px);
    }
    #kreis1 {
        width: 120px;
        height: 120px;
        border-radius: 120px;
        margin-top: 50px;

    }
    #kreis1 p {
        padding-top: 50px;
        font-size: 14px;
    }
    #kreis2 {
        width: 120px;
        height: 120px;
        border-radius: 120px;
        margin-top: 50px;
        margin-left: 31px;
    }
    #kreis2 p {
        padding-top: 50px;
        font-size: 14px;
    }
    #kreis3 {
        width: 120px;
        height: 120px;
        border-radius: 120px;
        margin-top: 50px;
        margin-left: 31px;
    }
    #kreis3 p {
        padding-top: 50px;
        font-size: 14px;
    }
    #kreis4 {
        width: 120px;
        height: 120px;
        border-radius: 120px;
        margin-top: 50px;
        margin-left: 31px;
    }
    #kreis4 p {
        padding-top: 50px;
        font-size: 14px;
    }
    #kreis5 {
        width: 120px;
        height: 120px;
        border-radius: 120px;
        margin-top: 50px;
        margin-left: 31px;
    }
    #kreis5 p {
        padding-top: 30px;
        font-size: 14px;
    }
    .blauer_balken {
        width: 140px;
    }
    .black:checked ~ .blauer_balken {
        transform: translateX(0);
    }
    .red:checked ~ .blauer_balken {
        transform: translateX(140px);
    }
    .yellow:checked ~ .blauer_balken {
        transform: translateX(292px);
    }
    .orange:checked ~ .blauer_balken {
        transform: translateX(445px);
    }
    .purple:checked ~ .blauer_balken {
        transform: translateX(586px);
    }
    .wrap {

        margin-left: 5%;

    }





}


@media (max-width: 798px) {
    .pc {
        display: none;
    }

    .tablet {
        display: none;
    }
    .handy {
        display: block;
    }
    #rechteck1 p {
        font-size: 14px;
    }
    #banner img {
        width: 100%;
    }
    #rechteck {
        width: 100%;
    }
    #rechteck p {
        font-size: 14px;
        padding-bottom: 10px;
        margin-left: 20px;
        padding-top: 7px;
    }
    .accordion {
        max-width: 768px;
        width: 100%;
    }
    .kreisbereich {
        max-width: 768px;
        width: 100%;
        height: 160px;
    }
    .kreis1 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #163e81;
        margin-left: 35%;
        margin-top: 5%;
    }
    .kreis1 p {
        color: #ffffff;
        text-align: center;
        padding-top: 70px;
        font-style: normal;
        font-size: 12px;
    }

    .conkreis {
        display: none;
    }
    .conkreis p {
        margin-top: 5%;
        margin-left: 20px;
        margin-right: 20px;
        text-align: left;
        margin-bottom: 5%;
        font-size: 12px;
    }
    .conkreis p b {
        font-size: 12px;
    }
    .conkreis table td {
        font-size: 12px;
    }
    .kreis2 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #163e81;
        margin-left: 35%;
        margin-top: 5%;
    }
    .kreis2 p {
        color: #ffffff;
        text-align: center;
        padding-top: 70px;
        font-style: normal;
        font-size: 12px;
    }
    .kreis3 {
        width: 159px;
        height: 159px;
        border-radius: 159px;
        background-color: #163e81;
        margin-left: 35%;
        margin-top: 5%;
    }
    .kreis3 p {
        color: #ffffff;
        text-align: center;
        padding-top: 50px;
        font-style: normal;
        font-size: 12px;
    }
    #links2 {
        margin-top: 2%;

    }

    #links2 a {
        margin-left: 20px;
        font-size: 12px;

    }
    #links2 p {
        margin-top: 25px;
        font-size: 12px;
    }
    #letzterSatz {
        margin-right: 30px;
    }
    #letzterSatz p b {
        font-size: 12px;
    }
    #rechteck1 p b {
        margin-left: 25px;
        font-size: 12px;
    }

}


@media (max-width: 480px) {
    .accordion {
        max-width: 610px;
        width: 100%;
    }
    .kreisbereich {
        max-width: 610px;
        width: 100%;
        height: 140px;
    }
    .kreis1 {
        width: 140px;
        height: 140px;
        border-radius: 140px;
        background-color: #163e81;
        margin-left: 30%;
        margin-top: 5%;
    }
    .kreis1 p {
        color: #ffffff;
        text-align: center;
        padding-top: 60px;
        font-style: normal;
        font-size: 12px;
    }
    .conkreis {
        display: none;
    }
    .conkreis p {
        margin-top: 2%;
        margin-left: 20px;
        margin-right: 20px;
        text-align: left;
        margin-bottom: 2%;
        font-size: 12px;
    }
    .kreis2 {
        width: 140px;
        height: 140px;
        border-radius: 140px;
        background-color: #163e81;
        margin-left: 30%;

    }
    .kreis2 p {
        color: #ffffff;
        text-align: center;
        padding-top: 60px;
        font-style: normal;
        font-size: 12px;
    }
    .kreis3 {
        width: 140px;
        height: 140px;
        border-radius: 140px;
        background-color: #163e81;
        margin-left: 30%;
        margin-top: 5%;
    }
    .kreis3 p {
        color: #ffffff;
        text-align: center;
        padding-top: 40px;
        font-style: normal;
        font-size: 12px;
    }
    .conkreis p b {
        font-size: 12px;
    }

}