.main-video-element-div{
    width: 360px;
    margin-bottom: 30px;
    left: 0%;
    top: 0px;
    border-width: 2px 2px 2px 2px;
    padding: 10px 10px 15px 10px;
    border-color: #B28B15; 
    border-style: solid;
    margin-left: 12px;
    border-radius: 0px 0px 0px 0px;
    #box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

/* 1. Die normale Hintergrundfarbe des PrimeFaces-Buttons überschreiben */
button#form\:j_idt39 {
    background-color: #B28B15 !important;
    background-image: none !important; /* Entfernt eventuelle PrimeFaces-Verläufe */
    color: white !important;
    border: none !important;
}

/* 2. Das Hover-Verhalten (beide Varianten für maximale Sicherheit mit PrimeFaces) */
button#form\:j_idt39:hover, 
button#form\:j_idt39.ui-state-hover {
    background-color: #8c6c10 !important;
    background-image: none !important;
    color: white !important;
}

/* Ändert die Hintergrundfarbe für PrimeFaces Tags */
.ui-tag, .ui-badge {
    background-color: #B28B15 !important; /* Wunschfarbe einsetzen */
    background-image: none !important;    /* Entfernt Theme-Verläufe */
    color: white !important;               /* Textfarbe */
    border: none !important;
}


/* Ändert den blauen Rand in die gewünschte Farbe */
.ui-selectonemenu:hover,
.ui-selectonemenu.ui-state-hover,
.ui-selectcheckboxmenu:hover,
.ui-selectcheckboxmenu.ui-state-hover {
    border-color: #B28B15 !important; /* Ersetzt das Blau mit deinem Gold/Gelb */
    box-shadow: none !important;        /* Entfernt den blauen Schatten-Effekt */
}

/* Ändert die Schriftart der Tags zu Montserrat und verkleinert sie responsiv für Mobilgeräte */
body .ui-tag, 
body .ui-badge,
body .ui-tag-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important; /* Dynamische, mobilfreundliche Grösse */
    font-weight: 400;              /* Nutzt das im Projekt hinterlegte Montserrat-Regular */
}