@font-face {
    font-family: 'Wtf1Dancefloor';
    src: url('../../assets/fonts/Wtf1Dancefloor.woff2') format('woff2'),
         url('../../assets/fonts/Wtf1Dancefloor.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.font-wtf1 {
    font-family: 'Wtf1Dancefloor', sans-serif;
    font-size: 1.5rem; /* Standard Schriftgröße anpassen */
    line-height: 1.2; /* Zeilenhöhe */
    color: inherit; /* Standardfarbe übernehmen */
}

/* Optional: Zusätzliche Anpassungen für spezifische Elemente */
.font-wtf1.large {
    font-size: 4.5rem; /* Größere Schrift */
}

.font-wtf1.small {
    font-size: 1rem; /* Kleinere Schrift */
}

.col_white {
    color: white;
}

.card {
    position: relative;
    background: rgba(5, 15, 35, 0.5); /* Hintergrundfarbe */
    border-radius: 12px; /* Abgerundete Ecken */
    padding: 20px; /* Abstand zum Inhalt */
    z-index: 1; /* Überlagert das Pseudo-Element */
}

/*.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px; /* Gleiche Rundung wie die Karte */
/*    background: linear-gradient(to right, rgb(35,183,209), rgb(212,242,248)); /* Verlauf */
/*    z-index: -1; /* Hinter die Karte platzieren */
/*    padding: 3px; /* Breite des Rahmens */
 /*   -webkit-mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white); /* Maskierung für inneren Bereich */
/*    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}*/

.btn-primary {
    background: linear-gradient(to left, rgb(35,183,209), rgb(212,242,248));
    color: rgb(18,39,75);
    border-style: none;
}

.btn-primary:hover {
    background: linear-gradient(to left, rgb(20, 99, 113), rgb(112, 128, 131));
    color: white;
}

.space20 {
    height: 20px;
    min-height: 20px;
}

.modal-content {
    background-color: rgba(5, 15, 35, 1);
    z-index: 1; /* Überlagert das Pseudo-Element */
    padding: 3px;
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px; /* Gleiche Rundung wie die Karte */
    background: linear-gradient(to left, rgb(35,183,209), rgb(212,242,248)); /* Verlauf */
    z-index: -1; /* Hinter die Karte platzieren */
    padding: 3px; /* Breite des Rahmens */
    -webkit-mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white); /* Maskierung für inneren Bereich */
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.card-title {
    font-size: 2rem;
}


/* TRANSCRIPT */

#transcriptBox {
    width: 100%; /* Volle Breite des Containers */
    height: 250px; /* Höhe des Textfelds */
    resize: none; /* Verhindert Größenänderung durch den Benutzer */
    overflow-y: scroll; /* Aktiviert vertikales Scrollen */
    padding: 10px;
    border: 1px solid rgb(212,242,248);
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #f9f9f900; /* Leicht grauer Hintergrund */
    font-family: Arial, sans-serif; /* Standardschriftart */
    font-size: 14px; /* Schriftgröße */
    line-height: 1.6; /* Zeilenhöhe */
    color: rgb(212,242,248); /* Textfarbe */
    white-space: pre-wrap; /* Behält Zeilenumbrüche und Leerzeichen aus HTML */
    overflow-wrap: break-word; /* Bricht lange Wörter um */
    /* Scrollbar für Firefox */
    scrollbar-color: rgb(35,183,209) rgb(212,242,248); /* Thumb und Track */
    scrollbar-width: thin; /* Dünne Scrollbar */
}

/* Scrollbar für Webkit-basierte Browser */
#transcriptBox::-webkit-scrollbar {
    width: 8px; /* Breite der Scrollbar */
}

#transcriptBox::-webkit-scrollbar-track {
    background: rgb(212,242,248); /* Hintergrund der Scrollbar */
    border-radius: 10px; /* Abgerundete Ecken */
}

#transcriptBox::-webkit-scrollbar-thumb {
    background: rgb(35,183,209); /* Scrollbar "Thumb" (Bewegbarer Bereich) */
    border-radius: 10px; /* Abgerundete Ecken */
}

#transcriptBox::-webkit-scrollbar-thumb:hover {
    background: rgb(255, 255, 255); /* Farbe beim Hover über die Scrollbar */
    width: 8px;
}

/* SUMMARY */
#summaryBox {
    width: 100%; /* Volle Breite des Containers */
    height: 250px; /* Höhe des Textfelds */
    resize: none; /* Verhindert Größenänderung durch den Benutzer */
    overflow-y: scroll; /* Aktiviert vertikales Scrollen */
    padding: 10px;
    border: 1px solid rgb(212,242,248); /* Border-Farbe */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #f9f9f900; /* Transparenter Hintergrund */
    font-family: Arial, sans-serif; /* Standardschriftart */
    font-size: 14px; /* Schriftgröße */
    line-height: 1.6; /* Zeilenhöhe */
    color: rgb(212,242,248); /* Textfarbe */
    white-space: pre-wrap; /* Behält Zeilenumbrüche und Leerzeichen aus HTML */
    overflow-wrap: break-word; /* Bricht lange Wörter um */
    scrollbar-color: rgb(35,183,209) rgb(212,242,248); /* Scrollbar-Farben für Firefox */
    scrollbar-width: thin; /* Dünne Scrollbar */
}

/* Scrollbar für Webkit-basierte Browser */
#summaryBox::-webkit-scrollbar {
    width: 8px; /* Breite der Scrollbar */
}

#summaryBox::-webkit-scrollbar-track {
    background: rgb(212,242,248); /* Hintergrund der Scrollbar */
    border-radius: 10px; /* Abgerundete Ecken */
}

#summaryBox::-webkit-scrollbar-thumb {
    background: rgb(35,183,209); /* Scrollbar "Thumb" (Bewegbarer Bereich) */
    border-radius: 10px; /* Abgerundete Ecken */
}

#summaryBox::-webkit-scrollbar-thumb:hover {
    background: rgb(255, 255, 255); /* Farbe beim Hover über die Scrollbar */
    width: 8px;
}