/* Allgemeine Stile, die für alle Geräte gelten */
body {
    font-family: 'Sanchez', serif;
    padding-left: 0vw;
    padding-right: 0vw;
}

/* Stile für Geräte mit einer Bildschirmbreite von 600 Pixeln oder weniger (Handys) */
@media only screen and (max-width: 700px) {
    body {
        background-image: url(Bilder/schmal.gif);
        background-repeat: no-repeat;
        background-position: 50% 0%;
        background-size: 100dvw 100dvh;
    }
}

/* Stile für Geräte mit einer Bildschirmbreite größer als 600 Pixel (PCs) */
@media only screen and (min-width: 701px) {
    body {
        background-image: url(Bilder/weit.gif);
        background-repeat: no-repeat;
        background-position: 50% 0%;
        background-size: 100dvw 100dvh;
    }
}

.block{
    height: 100%;
    width: 100%;
}


.icon{
    width: 2vw;
    height: 2vw;
    margin-left: 1vw;
    border-radius: 1vw;
}

.back{
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    object-fit: fill;
    width: 100%;
    height: 100%;
}

.back2{
    position: absolute;
    right: -0;
    margin-top: -3vw;
    z-index: -1;
    width: 100%;
}




.Unfertiger-Bonus-Box {
    border: 1px solid #ffffff91;
    background-color: rgba(0, 0, 0, 0.329);
    padding: 1%;
    border-radius: 13px;
    margin-bottom: 2.5vw;
    display: block;
    text-align: center;
    text-decoration: solid;
    color: #ffffff91;
}


.Kategoriee{
    
    text-align: center;
    border-radius: 1vw;
    font-size: 1.5vw;
    margin: 1vw;
}
.Kategoriee2{
    
    text-align: center;
    border-radius: 1vw;
    font-size: 1.5vw;
    margin: 1vw;
}


.gridxd{
    transform: translate(-0vw, 5vh);
}



/* Links Oben */
.Nützliche-links {
    border-radius: 1vw;
    background-color: rgba(255, 255, 255, 0.055);
    border: 1px solid #00000041;
    margin-bottom: 0.5vw;
}

.Nützliche-linksx {
    border-radius: 1vw;
    margin-bottom: 0.5vw;
}

.Nützliche-links1 {
    border-radius: 1vw;
    background-color: rgba(255, 255, 255, 0.055);
    border-radius: 13px;
    border: 1px solid #00000041;
}
.Nützliche-links2 {
    border-radius: 1vw;
    border-radius: 13px;
    padding: 1vw;
    margin-bottom: 1.5vw;
}
.button-der-links {
    border-radius: 2vw;
    padding: 1%;
    font-size: 1.5vw
}



.Grid-Staffelung-von-Nützlichen-links {
    display: grid;
    gap: 1%;
    grid-template-columns:1fr 1fr 1fr;
    justify-content: center;
    text-align: center;
}

.Grid-Staffelung-von-Nützlichen-linksx {
    display: grid;
    gap: 1%;
    grid-template-columns:1fr;
    justify-content: center;
    text-align: center;
}

.Grid-Staffelung-von-Nützlichen-links1 {
    display: grid;
    gap: 1%;
    grid-template-columns:1fr 1fr 1fr;
    justify-content: center;
    text-align: center;
    margin-bottom: 2.5vw;
}

.Grid-Staffelung-von-Nützlichen-links2 {
    display: grid;
    grid-template-columns:1fr 1fr;
    justify-items: center;
    text-align: center;
    margin-bottom: 2.5vw;
}

/* Kategorien */
.Kategorien-links {
    background-color: rgba(0, 0, 0, 0.329);
    padding: 1%;
    border-radius: 13px;
    border: 1px solid #ffffff83;
    
}






/* !    VIDEO BILD UND HINTERGRUND  ! */
.Video-Rasterung {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        grid-column-gap: 0.5vw;
        grid-row-gap: 1vw;
        margin-bottom: 2.5vw;
        margin-top: 2.5vw;
        justify-items: center;
        } 

        .Video-Feld-Haupt-Content {
            background-color: rgba(0, 0, 0, 0.377);
            border: 2px solid #ffffff9c;
            border-radius: 1vw;
            padding: 0.5%;
            display: flex;
            text-align: center;
            width: 21vw;
            height: 18vw;
            font-size: 1.5vw;
            margin-top: 2vw;
          }


.Video-Rasterung-bonus {
    display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        grid-column-gap: 1vw;
        grid-row-gap: 1vw;
        margin-bottom: 2.5vw;
}


.Thumpnail {
    border: 2px solid #ffffff9c;
    border-radius: 1vw;
    width:18.5vw;
    height: 13vw;

}


/* !  DAS IST DER TEXT  !*/
a {
    list-style: none;
    overflow: hidden;
    text-decoration: solid;
    color: #ffffff;
    margin:0.5vw;
}

.a2 {
    list-style: none;
    overflow: hidden;
    text-decoration: solid;
    color: #fffffff6;
    margin:0.5vw;
    background-color: rgba(0, 0, 0, 0.356)
}

.a3 {
    list-style: none;
    overflow: hidden;
    border-radius: 1vw;
    color: #ffffff;
    margin:0.5vw;
}
.a4 {
    list-style: none;
    overflow: hidden;
    border-radius: 1vw;
    color: #ffffff;
    margin:0.5vw;
    margin-top: -3vw;
}

.Video-Feld-Haupt-Content:hover {
    background-color: rgba(255, 255, 255, 0.247);
}

.b{
    color: white;
}


.a3:hover {
    text-decoration-line:underline;
    background-color: rgba(5, 5, 0, 0.247);
}


.a2:hover {
    background-color: rgba(117, 116, 116, 0.486);
    text-decoration-line: underline;
}

h1{
    list-style: none;
    overflow: hidden;
    text-decoration: solid;
    color: #be00a591;
    margin:0.5vw;
    font-size: 1.5vw;
    padding: 0.3vw;
}