/* Styling für das Timer-Widget */
        .cl_timerWidget {
            display: none; 
            position: fixed;
            bottom: 120px;
            right: 20px;
            background-color: rgba(208,128,178,1.0);
            color: #fff;
            padding: 3px 7px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            font-family: Arial, sans-serif;
            z-index: 10000; 
            text-align: center;
        }

        .cl_timerDisplay {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 3px;
            font-variant-numeric: tabular-nums; 
        }

		/* Container, der die Buttons nebeneinander anordnet */
		.cl_timerControls {
			display: flex;
			justify-content: center; /* Zentriert die Button-Gruppe */
			gap: 2px;                /* Kleiner Abstand zwischen den Buttons */
			width: 100%;
		}

        .cl_timerBtn {
            background-color: rgba(160,0,104,1.0);
            color: rgba(253,248,251,1.0);;
            border: none;
            padding: 2px 4px;
            border-radius: 2px;
			min-width: auto;         /* Verhindert künstliche Mindestbreiten */
			width: max-content;      /* Button passt sich exakt dem Inhalt an */
			font-size: 1rem;
            cursor: pointer;
        }

        .cl_timerBtn:hover {
            background-color: rgba(253,248,251,1.0);
            color: rgba(160,0,104,1.0);
        }

.cl_timerWidget2 {
    display: none;
    align-items: center;      /* Richtet Display und Buttons vertikal mittig aus */
    gap: 12px;                /* Abstand zwischen dem Display und der Button-Gruppe */
    font-family: sans-serif;
    width: max-content;       /* Verhindert ungewollte Umbrüche in der Zelle */
}

/* Das Zeit-Display */
.cl_timerDisplay2 {
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 55px;          /* Verhindert, dass das Layout springt, wenn sich die Zahlen ändern */
}

/* Die Container-Box für die drei Buttons */
.cl_timerControls2 {
    display: flex;
    align-items: center;
    gap: 4px;                 /* Abstand zwischen den einzelnen Buttons */
}

/* Die Buttons selbst */
.cl_timerBtn2 {
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
/* Klasse für den abgelaufenen Timer */
.timer-alarm {
    animation: pulse-red 1s infinite alternate;
    border-radius: 10%; /* Optional: Macht das Blinken weicher, falls ein Hintergrund genutzt wird */
}

/* Die Blink-Animation */
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
        filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5)) saturate(2);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
        filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1)) saturate(3) hue-rotate(-10deg);
    }
}