/* ==========================================================================
   ANNOUNCEMENTS BOX - HARDWARE MONITOR DESIGN
   ========================================================================== */

/* Äußerer Container (Exakt auf Ihre 18rem-Spalte fixiert) */
#announcement-box {
    width: 18rem;
    margin-top: 2.5rem;
    box-sizing: border-box;
	margin-bottom: 2rem;
}

/* Der dünne, computergraue Monitorrahmen */
.monitor-frame {
    background: #cccccc; /* Klassisches Computer-Grau */
    border: 1px solid #aaaaaa; /* Etwas dunklere Außenkante für Plastik-Tiefe */
    border-radius: 6px;
    padding: 6px;
    /* original grosser schatten
	box-shadow: 
        inset 0 1px 2px #ffffff, 
        0 10px 25px rgba(0,0,0,0.5); 
		*/
	
	
    box-shadow: 
        inset 0 1px 2px #ffffff, /* Lichtkante oben */
        0 1px 2px rgba(0,0,0,0.5); /* Schattenwurf auf den Hintergrund */
}

/* Obere, graue Kontrollleiste für die LED */
.monitor-control-bar {
    background: #bbbbbb; /* Minimal dunkleres Grau für die Leiste */
    padding: 4px 8px 6px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #999999;
    margin-bottom: 5px;
}

/* LED-Bereich links */
.led-wrapper {
    display: flex;
    align-items: center;
}

/* Die Hardware-Status-LED (Standardmäßig dunkelrot im matten Gehäuse) */
.status-led {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #5a1111; 
    border-radius: 50%;
    margin-right: 6px;
    border: 1px solid #333333; /* Kleiner Plastikring um die LED */
    transition: all 0.3s ease;
}

/* Wenn die News neu ist, blitzt die LED scharf und alarmierend Rot auf */
.status-led.active {
    background: #ff0000;
    box-shadow: 
        0 0 10px #ff0000, 
        0 0 3px #ffffff;
    animation: led-pulse 1.5s infinite;
}

@keyframes led-pulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* Kleiner Text neben der LED */
.led-label {
    color: #444444;
    font-size: 0.6rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Fiktiver Monitor-Name rechts auf der Leiste */
.monitor-brand {
    color: #666666;
    font-size: 0.6rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Das intensiv leuchtende, neongrüne Display */
.screen-glass-bright {
    position: relative;
    background: #33ff33; 
    border-radius: 3px;
    padding: 12px;
    overflow: hidden;
    box-shadow: 
        inset 0 0 15px rgba(0, 100, 0, 0.7),
        0 1px 3px rgba(0,0,0,0.4);
}

/* Scharfe, dünne Scanlines */
.screen-scanlines-sharp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.12) 50%, 
        transparent 50%
    );
    background-size: 100% 4px; 
    pointer-events: none;
    z-index: 2;
}

/* Inhaltsebene */
.screen-content {
    position: relative;
    z-index: 3;
    font-family: 'Courier New', Courier, monospace;
}

/* Kopfzeile im Bildschirm */
.announcement-header {
    color: #000000; 
    font-size: 0.75rem;
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* Der tiefschwarze, fette Ankündigungstext */
.announcement-content {
    color: #000000; 
    font-size: 0.88rem; 
    font-weight: 900; 
    line-height: 1.4;
    letter-spacing: -0.2px;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   DEPLOYS-FEED LINK INSIDE SCREEN (PURE TEXT LOOK)
   ========================================================================== */

/* Container-Zone auf dem grünen Bildschirm */
.newsletter-terminal-zone {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.3); /* Trennlinie direkt auf dem Grün */
    text-align: left;
}

/* Der pure Text-Link (Tiefschwarz auf grünem Grund) */
.newsletter-text-link {
    display: inline-flex;
    align-items: center;
    color: #000000; /* Absolut tiefschwarze Schrift */
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    font-weight: 900; /* Maximal fett gedruckt für beste Lesbarkeit */
    text-decoration: none; 
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* KORREKTUR: Das tiefschwarze Dreieck blinkt nun rhythmisch am Anfang */
.newsletter-text-link .blinking-arrow {
    color: #000000; /* Tiefschwarz */
    font-weight: 900;
    margin-right: 6px;
    display: inline-block;
    animation: arrow-blink 1s infinite;
}

/* Rhythmisches Blinken für das schwarze Dreieck */
@keyframes arrow-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Hover-Effekt: Der Text leuchtet beim Drüberfahren weiß auf */
.newsletter-text-link:hover {
    color: #000; /* Text wechselt zu strahlendem Weiß */
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.8);
}

/* Das Dreieck wechselt beim Hover ebenfalls zu Weiß und leuchtet */
.newsletter-text-link:hover .blinking-arrow {
    color: #000;
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.8);
}