.tra-widget-status {
    font-family: Arial, sans-serif;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em 1.5em;
    min-width: 220px;
    box-shadow: 0 2px 8px #0001;
}
.tra-widget-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.7em;
}
.tra-widget-row {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin-bottom: 0.2em;
    font-family: "Arial Rounded MT Bold", Arial, "Liberation Sans", sans-serif;
    font-size: 1.08em;
    letter-spacing: 0.01em;
}
.tra-widget-row.inactive {
    font-style: italic;
}
.tra-widget-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #bbb;
}
.tra-widget-dot.green { background: #4caf50; }
.tra-widget-dot.red   { background: #e53935; }
.tra-widget-dot.gray  { background: #bbb; }
.tra-widget-label {
    flex: 1;
    font-size: 1em;
    font-family: inherit;
    font-weight: bold;
    transition: color 0.1s;
}
.tra-widget-blink { animation: tra-blink 1s steps(2, start) infinite; }
@keyframes tra-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.tra-widget-blink-text { color: #e53935 !important; }
.tra-widget-blink-text-off { color: #222 !important; }
.tra-widget-dot-blink-red { background: #e53935 !important; border-color: #e53935 !important; }

body.dark-mode .tra-widget-status,
body.dark-mode .tra-widget-row,
body.dark-mode {
    background: #23272e !important;
    color: #e0e0e0 !important;
}
body.dark-mode .tra-widget-row { background: #23272e; color: #f0f0f0 !important; }
body.dark-mode .tra-widget-row:nth-child(even) { background: #262b33; }
body.dark-mode .tra-widget-row.inactive { color: #b0b0b0 !important; background: #23272e; opacity: 0.85; }
body.dark-mode .tra-widget-dot.green { background: #3fae5a; }
body.dark-mode .tra-widget-dot.red   { background: #e57373; }
body.dark-mode .tra-widget-dot.gray  { background: #888; }
body.dark-mode .tra-widget-status { border-color: #444; box-shadow: 0 2px 8px #0008; }
body.dark-mode .tra-widget-label { color: #f0f0f0 !important; }

#signalBlinkExample {
    display: none;
    margin-top: 8px;
    font-size: 1.05em;
    font-family: "Arial Rounded MT Bold", Arial, "Liberation Sans", sans-serif;
    font-weight: bold;
    letter-spacing: 0.01em;
}
#signalBlinkExample .tra-widget-dot.green.demo-blink {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-block; border: 1px solid #bbb;
    background: #4caf50; margin-right: 7px;
    box-shadow: 0 0 6px #2ecc40;
    animation: tra-blink 1s steps(2, start) infinite;
}
#signalBlinkExample .demo-blink-text {
    font-weight: bold;
    animation: demo-blink-text 1s steps(2, start) infinite;
    color: #e53935; transition: color 0.1s;
}
@keyframes demo-blink-text { 0%, 100% { color: #e53935; } 50% { color: #222; } }

.tra-widget-times { font-size: 0.98em; font-weight:600; color: #444; margin-left: auto; padding-right: 3px; }
body.dark-mode .tra-widget-times { color: #e0e0e0 !important; }

/* Schriftfarbe via CSS-Variablen (Default: bunt) */
:root {
    --row-text-color-green: #1a7f2e;
    --row-text-color-red: #b80000;
    --row-text-color-gray: #888;
    --row-alpha: 1;
}
/* explizit schwarz/weiß wenn vom Builder gesetzt */
body[style*="--row-text-color-mode:black"] {
    --row-text-color-green: #222;
    --row-text-color-red: #222;
    --row-text-color-gray: #222;
}
body[style*="--row-text-color-mode:white"] {
    --row-text-color-green: #fff;
    --row-text-color-red: #fff;
    --row-text-color-gray: #fff;
}

/* Farbiges Layout – EINHEITLICH mit Alpha-Variable */
.tra-widget-row.colored {
    margin: 0.2em 0;
    padding: 0.0em 0.0em 0.0em 0.5em;
    font-weight: 500;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tra-widget-row.green.colored {
    background: rgba(4,170,1, var(--row-alpha));
    color: var(--row-text-color-green);
    border-left: 7px solid #00670c;
    border-right: 7px solid #00670c;
    border-top: 1px solid #00670c;
    border-bottom: 1px solid #00670c;
    padding-top: 2px;
    padding-bottom: 2px;
}
.tra-widget-row.red.colored {
    background: rgba(140,0,0, var(--row-alpha));
    color: var(--row-text-color-red);
    border-left: 7px solid #630a00;
    border-right: 7px solid #630a00;
    border-top: 1px solid #630a00;
    border-bottom: 1px solid #630a00;
    padding-top: 2px;
    padding-bottom: 2px;
}
.tra-widget-row.gray.colored {
    background: rgba(128,128,128, var(--row-alpha));
    color: var(--row-text-color-gray);
    border-left: 7px solid #515151;
    border-right: 7px solid #515151;
    border-top: 1px solid #515151;
    border-bottom: 1px solid #515151;
    padding-top: 2px;
    padding-bottom: 2px;
}
.tra-widget-row.hourglass.colored {
    background: rgba(255,165,0, var(--row-alpha));
    color: #b97a00;
    border-left: 7px solid rgb(161, 105, 0);
    border-right: 7px solid rgb(161, 105, 0);
    border-top: 1px solid rgb(161, 105, 0);
    border-bottom: 1px solid rgb(161, 105, 0);
    padding-top: 2px;
    padding-bottom: 2px;
}
.tra-widget-row.colored,
.tra-widget-label,
.tra-widget-times {
    /* Interpoliert zwischen Schwarz und Weiß */
    color: rgb(
        calc(0 + (255 - 0) * var(--row-text-color-shade, 0) / 100),
        calc(0 + (255 - 0) * var(--row-text-color-shade, 0) / 100),
        calc(0 + (255 - 0) * var(--row-text-color-shade, 0) / 100)
    );
}

.tra-widget-time-end {
    color: #940202 !important;
    margin-left: 0.5em;
    font-size: 0.9em;
}

body.dark-mode .tra-widget-time-end {
    color: #940202 !important;
}