@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
                                          /*Schrift aus Google Fonts rauskopiert*/
*{
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Poppins', sans-serif;

}
.box{                                        /*für die Box um die Abkürzungen*/
    background: #8c6ca4; 
    border: 2px solid white;
    border-radius: 10px;
    margin: auto;
    padding: 30px;
    width: 500px;
    text-align: center;
}
.zubehoer-box{                              /*für die Box um die Abkürzungen*/
    background: #8c6ca4; 
    border: 2px solid white;
    border-radius: 10px;
    padding: 30px;
    width: 250px;
    justify-content: center;
}
.zubehoer-flex {
    display: flex;           /* ordnet die Boxen nebeneinander an */
    gap: 20px;               /* Abstand zwischen den Boxen */
    justify-content: center; /* zentriert die Boxen horizontal */
    margin-top: 20px;        /* Abstand nach oben */
    flex-wrap: wrap;         /* Zeilenumbruch bei wenig Platz */
}
.link-box {                                    /*für die Boxen um die Links*/
    background: #8c6ca4;
    border: 2px solid white;
    border-radius: 10px;
    margin: 10px 0;
    padding: 10px 5px;
    text-align: center;
}
.hintergrund-rot{                              /*im Index, Hintergrund vom Deadpool*/
    background: #b31f1f;
    border-radius: 10px;
}
.hintergrund-einfarbig{                        /*im Index, Hintergrund von den Babysachen*/
    background: #A9cddd;
    border-radius: 10px;
}
body{                                          /*Hintergrundfarbe generell vom Layout*/  
    background: #1c1f1f;
    border-radius: 10px;
}

.einleitung{
    background: #8c6ca4;                     /*Hintergrundfarbe der Einleitungen auf fast allen Seiten*/
    border: rgb(255, 255, 255) 2px solid;
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 30px; 
    text-align: center;
}
.wrapper{                       /*alle Karten werden automatisch richtig angeordet, (alle .cards) */
    display: flex;              /*Flexbox für die Karten, damit alles richtig angeordnet ist*/
    justify-content: center;    /*Karten werden in der Mitte angeordnet*/
    flex-wrap: wrap;            /*die Karten ordnen sich untereinander an, wenn nicht mehr genug nebeneinander passen*/
    gap: 30px;                  /*Abstand zwischen den Karten*/
}
.card{                              /*Karten generell*/
    height: 250px;
    width: 350px;
    overflow: hidden;               /*falls Text aus der Karte ragt, wird es abgeschnitten (nicht mehrangezeigt, sieht nämlich hässlich aus)*/
    display: flex;                  /*Anordnung in einer Z. */
    justify-content: center;        
    position: relative;             /*Position Inhalt (z.B von .card_content) unten */
    transition: 250ms ease-in-out;  /*wird größer beim hovern*/
}
.card img{   /*Bild in der Karte*/
    height: 100%;
    width: auto;
}
.card_content{                                                                              /*alles, was beim hovern rausfährt*/
    position: absolute;                                                                     /*Inhalt wird unten der Karte positioniert*/
    bottom: 0;
    padding: 10px; 
    width: calc(100% - 20px);                                                               /*Inhalt wird auf die Breite der Karte angepasst*/
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.336) 50%);  /*durch diesem Schatten kann man die Schriften besser lesen*/
    transform: translateY(calc(100% - 80px));                                               /*Inhalt wird versteckt (wo man es nicht sieht)*/
    transition: transform 0.3s ease-in-out;                                                 /*cooler Effekt, damit die Schrift hochfährt, anstatt nur zu erscheinen*/
}
.card_content .content_head { /*Überschrift in der Karte*/
    display: flex;
    flex-direction: column;
    gap: 15px;               /* Abstand zwischen h3 und h4 */
}
.card:hover .card_content{   /*sobald du mit dem Mauszeiger über die Karte fährst, wird wird die Beschreibung komplett angezeigt*/
    transform: translateY(0);
}
.card_content h4 {   
    transform: translateY(-20px); 
    opacity: 1;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /*selbe Effekt wie oben, nur für h4*/
}
.card:hover{
    transform: scale(1.1); /*Karte wird größer, wenn du mit dem Mauszeiger drüber fährst*/
}
h3{
    font-size: 32px;  /*Überschrift bisschen größer, sonst sieht es zu klein aus*/
    font-weight: 600;
}
h4{
    font-size: italic; /*die Schrift sieht besser aus*/
    font-weight: 400;
}

.content_head{
    position: relative;
}
.content_head::after{  /*rote Linie unter der Schwierigkeitsstufe*/
    content: '';
    height: 4px;
    width: 100px;
    background: #FF4B2B;
    position: absolute;
    bottom: -10px;
}