/*

    Diese Datei beinhaltet alle Styles der Komponenten.
    Jede Komponente wird am Beginn mit der Bezeichnung in Uppercase gestartet.
    Jede Zeile muss mit dem HTML Element und der Komponenten-Bezeichnung ( zb a.tf-button ) beginnen.

*/


/* PLAYER COURSE V2 */


div.tf-player-course-v2 {
    font-size: 1.1rem;
    line-height: 1.45em;
}

div.tf-player-course-v2 strong {
    font-weight: bold;
}

div.tf-player-course-v2 em {
    font-style: italic;
}

div.tf-player-course-v2 p:not( :first-child ) {
    margin-top: 1.45em;
}

div.tf-player-course-v2 p:not( :last-child ) {
    margin-bottom: 1.45em;
}

div.tf-player-course-v2 p.small {
    font-size: 0.9rem;
}

div.tf-player-course-v2 h3 {
    font-size: 1.8rem;
    line-height: 1.1em;
    font-weight: bold;
}

div.tf-player-course-v2 h3:not( :first-child ) {
    margin-top: 3.2rem;
}

div.tf-player-course-v2 h3:not( :last-child ) {
    margin-bottom: 1.6rem;
}

div.tf-player-course-v2 h4 {
    font-size: 1.1rem;
    line-height: 1.45em;
    font-weight: bold;
}

div.tf-player-course-v2 h4:not( :first-child ) {
    margin-top: 1.6rem;
}

div.tf-player-course-v2 h4:not( :last-child ) {
    margin-bottom: 0.5rem;
}

div.tf-player-course-v2 h4.fazit {
    border-top: 1px solid var( --main-color );
    padding-top: 0.5rem;
    color: var( --main-color );
}

div.tf-player-course-v2 ul {
    list-style: disc;
    padding-left: 1em;
}

div.tf-player-course-v2 ol {
    list-style: numeric;
    padding-left: 1.5em;
}

div.tf-player-course-v2 ul:not( :first-child ),
div.tf-player-course-v2 ol:not( :first-child ) {
    margin-top: 1.45em;
}

div.tf-player-course-v2 ul:not( :last-child ),
div.tf-player-course-v2 ol:not( :last-child ) {
    margin-bottom: 1.45em;
}

div.tf-player-course-v2 .container {
    position: relative;
    display: block;
    width: 100%;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: var( --background-grey );
}

div.tf-player-course-v2 .container:not( :first-child ) {
    margin-top: 2rem;
}

div.tf-player-course-v2 .container:not( :last-child ) {
    margin-bottom: 2rem;
}

div.tf-player-course-v2 .container.hinweis {
    padding-left: 3.5rem;
}

div.tf-player-course-v2 .container.hinweis::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url( "../../img/Emojis/idea.svg" );
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 1rem;
    top: 1.5rem;
}

div.tf-player-course-v2 .container.handreichung {
    background-color: var( --main-color );
    color: white;
    display: flex;
    gap: 2rem;
    align-items: center;
}

@media only screen and (max-width: 550px) {

    div.tf-player-course-v2 .container.handreichung {
        flex-direction: column;
    }

}

div.tf-player-course-v2 .container.handreichung img {
    display: block;
    height: 200px;
    width: auto;
    rotate: -12deg;
    margin: 1.5rem;
    box-shadow: var( --box-shadow-card );
}

div.tf-player-course-v2 .container.uebung {
    background-color: var( --light-blue );
}

/*div.tf-player-course-v2 .container.audio-container p{
    margin-bottom: 0;
}*/

div.tf-player-course-v2 .container.uebung .headline {
    padding-right: 5rem;
}

div.tf-player-course-v2 .container.uebung .headline::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    background-image: url( "../../img/Emojis/writing.svg" );
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    rotate: -12deg;
}

div.tf-player-course-v2 .container.uebung.musik .headline::before {
    background-image: url( "../../img/Emojis/dart.svg" );
}

div.tf-player-course-v2 .container.uebung.beatbox .headline::before {
    background-image: url( "../../img/Emojis/mikrofon.svg" );
}

div.tf-player-course-v2 .container.uebung .headline * {
    margin-top: 0px;
    margin-bottom: 0px;
}

div.tf-player-course-v2 .container.uebung .headline .sub-headline {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

div.tf-player-course-v2 .container.beat {
    background-color: var( --light-yellow );
    font-weight: bold;
    padding-left: 3.5rem;
}

div.tf-player-course-v2 .container.beat::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url( "../../img/Emojis/drum.svg" );
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 1rem;
    top: 1.5rem;
}

div.tf-player-course-v2 .container.audio .grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
    gap: 1.5rem;
}

div.tf-player-course-v2 .container.audio .grid div p {
    margin-bottom: 1rem;
    font-weight: bold;
}

div.tf-player-course-v2 .container.audio .grid div audio {
    display: block;
    width: 100%;
    height: auto;
}

div.tf-player-course-v2 .container.audio .grid div .tf-button {
    margin-top: 1.5rem;
}

div.tf-player-course-v2 .container.reccomendation .grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

div.tf-player-course-v2 .container.reccomendation .grid > div {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

div.tf-player-course-v2 .container.reccomendation .grid > div .cover {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: white;
    overflow: hidden;
}

div.tf-player-course-v2 .container.reccomendation .grid > div p:has( + h4 ) {
    margin-bottom: 0px;
}

div.tf-player-course-v2 .container.reccomendation .grid > div h4 {
    margin-top: 0px;
}

div.tf-player-course-v2 .tf-button-group:not( :first-child ) {
    margin-top: 3.2rem;
}

div.tf-player-course-v2 .tf-button-group:not( :last-child ) {
    margin-bottom: 3.2rem;
}

div.tf-player-course-v2 .tf-image {
    width: 100%;
}


/* SPECIAL MARGINS */

div.tf-player-course-v2 h4 + * {
    margin-top: 0.5rem !important;
}

div.tf-player-course-v2 .container h4:first-child + * {
    margin-top: 1.6rem !important;
}

div.tf-player-course-v2 .tf-button:not( :first-child ) {
    margin-top: 2rem;
}

div.tf-player-course-v2 .tf-button:not( :last-child ) {
    margin-bottom: 2rem;
}