/* Einbindung der lokalen Schriftart "Smooch Sans" */
@font-face {
    font-family: 'Smooch Sans';
    /* Dateiname wurde geändert */
    src: url('SmoochSans-SemiBold.ttf') format('truetype');
    /* Schriftgewicht auf 600 (SemiBold) gesetzt */
    font-weight: 600;
    font-style: normal;
}

/* Grundlegende Stile für die gesamte Seite */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Smooch Sans', sans-serif;
    background-color: #242427;
    color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Verhindert Scrollbalken */
}

/* Container für das Zitat */
#zitat-container {
    text-align: center;
    max-width: 800px;
    padding: 40px;
    opacity: 1;
    /* Sanfter Übergang beim Wechsel des Zitats */
    transition: opacity 0.7s ease-in-out;
}

/* Styling für den Zitattext */
#zitat-text {
    font-size: 3em;
    /* Schriftgewicht explizit auf 600 (SemiBold) gesetzt */
    font-weight: 600;
    margin: 0;
    position: relative;
}

/* Fügt die Anführungszeichen hinzu */
#zitat-text::before {
    content: '“';
    position: absolute;
    left: -0.6em;
    top: -0.2em;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.3);
}

/* Styling für den Autor */
#zitat-autor {
    font-size: 1.5em;
    font-style: italic;
    margin-top: 20px;
    color: #a9a9a9;
}

/* Der kleine Kreis für die Timer-Visualisierung */
#timer-kreis {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 40px;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 50%; /* Macht das Viereck zu einem Kreis */
    transform-origin: center; /* Animation startet vom Zentrum */
}

/* Die CSS-Animation, die den Kreis schrumpfen lässt */
.shrink-animation {
    animation: shrink 10s linear forwards;
}

@keyframes shrink {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}