﻿.carousel-control.left,
.carousel-control.right {
    background-image: none
}

.carousel img {
    width: 100%;
}

.carousel-inner .item {
    position: fixed;
    width: 100%;
}

.carousel-caption h3 {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    font-weight: 800;
    text-shadow: black 0.1em 0.1em 0.2em;
    border: 0;
}

// DESKTOP - Seitenverhaeltnis
.carousel-bild-a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
}

.carousel-bild-b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
}

.carousel-bild-c {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
}

.carousel-bild-d {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
}


/* Tablet landscape */
@media only screen and (min-width: 768px) and (max-width: 1005px) {
    .carousel-caption h3 {
        color: white;
    }
}


/* iPhone landscape ?? */

@media only screen and (max-width: 767px) {
    .carousel-caption h3 {
        font-size: 24px;
    }
}


/* aktuelle iPhones Portrait */

@media only screen and (max-width: 511px) {
    .carousel-caption h3 {
        font-size: 24px;
    }
}


/* Ältere Smartphones */

@media only screen and (max-width: 372px) {
    .carousel-caption h3 {
        font-size: 20px;
    }
}

/* Seitenverhaeltnis HXX */
@media only screen and (max-aspect-ratio: 750/1334) {
    .carousel-bild-a {
        position: absolute;
        top: 70%;
        left: 25%;
    }
    .carousel-bild-b {
        position: absolute;
        top: 65%;
        left: 12%;
    }
    .carousel-bild-c {
        position: absolute;
        top: 65%;
        left: 57%;
    }
        .carousel-bild-d {
        position: absolute;
        top: 65%;
        left: 12%;
    }

     .carousel-caption h3 {
        border: 0px solid red;
        color: white;
    }
}

/* Seitenverhaeltnis HX */
@media only screen and (min-aspect-ratio: 750/1334) {
    .carousel-bild-a {
        position: absolute;
        top: 70%;
        left: 25%;
    }
    .carousel-bild-b {
        position: absolute;
        top: 15%;
        left: 45%;
    }
    .carousel-bild-c {
        position: absolute;
        top: 65%;
        left: 57%;
    }
    .carousel-bild-d {
        position: absolute;
        top: 70%;
        left: 2%;
    }

     .carousel-caption h3 {
        border: 0px solid lightgreen;
        color: white;
    }
}

/* Seitenverhaeltnis H */
@media only screen and (min-aspect-ratio: 3/4) {
    .carousel-bild-a {
        position: absolute;
        top: 50%;
        left: 2%;
    }
    .carousel-bild-b {
        position: absolute;
        top: 25%;
        left: 5%;
    }
    .carousel-bild-c {
        position: absolute;
        top: 10%;
        left: 3%;
    }
        .carousel-bild-d {
        position: absolute;
        top: 25%;
        left: 5%;
    }

    .carousel-caption h3 {
        border: 0px solid yellow;
        color: white;
    }
}

/* Seitenverhaeltnis W */
@media only screen and (min-aspect-ratio: 4/3) and (min-width: 768px) {
    .carousel-bild-a {
        position: absolute;
        top: 65%;
        left: 3%;
    }
    .carousel-bild-b {
        position: absolute;
        top: 16%;
        left: 73%;
    }
    .carousel-bild-c {
        position: absolute;
        top: 65%;
        left: 70%;
    }
    .carousel-bild-d {
        position: absolute;
        top: 16%;
        left: 73%;
    }

    .carousel-caption h3 {
        border: 0px solid orange;
        color: white;
    }
}

/* Seitenverhaeltnis W und Toggle */
@media only screen and (min-aspect-ratio: 4/3) and (max-width: 767px) {
    .carousel-bild-a {
        position: absolute;
        top: 24%;
        left: 67%;
    }
    .carousel-bild-b {
        position: absolute;
        top: 16%;
        left: 70%;
    }
    .carousel-bild-c {
        position: absolute;
        top: 45%;
        left: 68%;
    }
    .carousel-bild-d {
        position: absolute;
        top: 16%;
        left: 71%;
    }

    .carousel-caption h3 {
        border: 0px solid orange;
        color: white;
    }
    .carousel-bild-a h3 {
        border: 0px solid orange;
        color: rgba(160,160,160,1);
        text-shadow: black 0.05em 0.05em 0;
    }
}

/* Seitenverhaeltnis XW und Desktop */
@media only screen and (min-aspect-ratio: 1333/750) and (min-width: 768px) {
    .carousel-bild-a {
        position: absolute;
        top: 50%;
        left: 8%;
    }
    .carousel-bild-b {
        position: absolute;
        top: 20%;
        left: 73%;
    }
    .carousel-bild-c {
        position: absolute;
        top: 55%;
        left: 75%;
    }
    .carousel-bild-d {
        position: absolute;
        top: 20%;
        left: 75%;
    }

    .carousel-caption h3 {
        border: 0px solid magenta;
        color: white;
        font-size: 48px;
      }
}

/* Seitenverhaeltnis XW und Toggle */
@media only screen and (min-aspect-ratio: 1333/750) and (max-width: 767px) {
    .carousel-bild-a {
        position: absolute;
        top: 24%;
        left: 70%;
    }
    .carousel-bild-b {
        position: absolute;
        top: 19%;
        left: 74%;
    }
    .carousel-bild-c {
        position: absolute;
        top: 53%;
        left: 72%;
    }
    .carousel-bild-d {
        position: absolute;
        top: 19%;
        left: 74%;
    }

    .carousel-caption h3 {
        border: 0px solid magenta;
        color: white;
    }
    .carousel-bild-a h3 {
        border: 0px solid magenta;
        color: rgba(160,160,160,1);
        text-shadow: black 0.05em 0.05em 0;
    }
}
