/* /voice/css/voice.css */
/* Design für den Web-Anrufbeantworter */


/* Hauptbereich */

.voice-container {

    max-width: 600px;

    margin: 40px auto;

    padding: 35px 25px;

    text-align: center;

    border-radius: 20px;

    background: rgba(0, 0, 0, 0.15);

    box-shadow: 0 0 25px rgba(0,0,0,0.35);

}



/* Überschrift */

.voice-container h1 {

    margin-bottom: 25px;

    font-size: 32px;

}



/* Statusanzeige */

#statusAnzeige {

    font-size: 20px;

    margin-bottom: 25px;

}



/* Countdown */

#countdownAnzeige {

    font-size: 70px;

    font-weight: bold;

    margin: 20px;

}



/* LIVE Bereich */

#liveAnzeige {

    margin-top: 25px;

}



.versteckt {

    display: none;

}



/* Blinkender Punkt */

#livePunkt {

    display: inline-block;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: red;

    margin-right: 12px;

    animation: liveBlinken 1s infinite;

}



@keyframes liveBlinken {


    0% {

        opacity: 1;

    }


    50% {

        opacity: 0.2;

    }


    100% {

        opacity: 1;

    }


}





/* LIVE Schrift */

.liveText {

    font-size: 28px;

    font-weight: bold;

    color: red;

}




/* Gesprächszähler */

#zeitZaehler {


    margin-top: 15px;

    font-size: 40px;

    font-weight: bold;

}



/* Buttons */

.voice-controls {

    margin-top: 35px;

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}



.voice-controls button {


    padding: 14px 30px;

    font-size: 17px;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.25s ease;


}




.voice-controls button:hover {


    transform: scale(1.05);

}



/* Start */

#aufnahmeStart {


    background: #238636;

    color: white;


}




/* Stop */

#aufnahmeStop {


    background: #b42318;

    color: white;


}




/* Audioplayer */

#audioPlayer {


    width: 90%;

    margin-top: 30px;


}