/* css/_layout.css - Grundstruktur, Webcam, Timer und Lightbox */

/* Body & Allgemeine Struktur */
body {
    font-family: 'Exo 2', system-ui, sans-serif;
    background: linear-gradient(180deg, var(--bg-color) 0%, #b2b6bd 100%);
    color: var(--text-color);
    margin: 0;
    
    /* FIX: Entfernt das padding, um den ungewollten Scrollbalken zu vermeiden */
    padding: 0; 
    
    min-height: 100vh;
    display: flex;
    /* FIX: Zentrierung entfernen, damit das .container bei Übergröße scrollt */
    align-items: flex-start; 
    justify-content: center;
    transition: background .6s, color .6s; 
}

.container {
    max-width: 950px;
    width: 100%;
    background: var(--panel-bg);
    border-radius: 14px;
    box-shadow: 0 12px 30px var(--shadow-color);
    padding: 1.2rem;
    margin-top: 1rem; 
    transition: background .5s, box-shadow .5s;
}

/* ÜBERSCHRIFT: Styling und Färbung des Highlight-Spans */
h1 {
    font-size: 2.5rem; 
    margin: 0 0 5px 0; 
    font-weight: 600;
    color: var(--text-color); 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    
    /* KORREKTUR: H1 zentrieren und Flexbox entfernen, damit es zusammenbleibt */
    text-align: center;
    /* display: flex; (ENTFERNT) */
    /* align-items: center; (ENTFERNT) */
    /* justify-content: space-between; (ENTFERNT) */
    /* width: 100%; (ENTFERNT) */
}

h1 span.highlight {
    color: var(--accent-color); 
    font-weight: 800; 
    text-shadow: 0 0 5px rgba(255, 140, 0, 0.4); 
    transition: color 0.3s, text-shadow 0.3s;
}

body.dark h1 span.highlight {
    color: var(--accent-color); 
    text-shadow: 0 0 8px rgba(var(--accent-color-rgb), 0.5); 
}

/* Header & Footer */
header {
    /* KORREKTUR: Header-Inhalte (h1 und subtitle-container) zentriert untereinander stapeln */
    display: flex;
    flex-direction: column; /* Stapelt h1 und subtitle-container */
    align-items: center; /* Zentriert beide horizontal */
    /* justify-content: space-between; (ENTFERNT) */
    margin-bottom: 0.3rem; 
}

.header-line, .footer-line {
    border-top: 1px solid var(--divider-color);
    opacity: 0.2;
}
.header-line {
    /* KORREKTUR: Abstand angepasst für die neuen Untertitel */
    margin: 0.5rem 0 1.5rem 0; 
}
.footer-line {
    margin: 1.2rem 0 0.5rem 0;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
    gap: 10px; 
    padding: 0;
    flex-wrap: wrap; 
    align-items: flex-start;
}


/* WEBCAM CONTAINER & OVERLAYS */
.webcam-container {
    position: relative; 
    width: 100%;
    overflow: hidden; 
    border-radius: 8px; 
    
    border: 1px solid var(--divider-color);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    animation: pulse-shadow 4s infinite ease-in-out; 
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(var(--accent-color-rgb), 0.6); 
    }
    100% {
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }
}


.webcam-container #cam {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.5s; 
    min-height: 200px; 
}

/* TIMER POSITION */
#countdown {
    position: absolute; 
    top: 15px;          
    left: 15px;         
    z-index: 10;        
    
    color: var(--text-color-bright); 
    background-color: var(--accent-color); 
    
    padding: 5px 10px; 
    border-radius: 4px;
    font-size: 0.9em; 
    font-weight: 600; 
    
    cursor: pointer; 
    user-select: none;
    transition: background-color 0.3s, color 0.3s, transform 0.1s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* BLINKENDER ROTER EFFEKT */
#countdown.warning {
    background-color: #ff4757; 
    color: white;
    animation: blink-red 0.5s infinite alternate;
}

@keyframes blink-red {
    from { opacity: 1; }
    to { opacity: 0.5; }
}


/* VOLLBILD HINWEIS POSITION */
#fullscreenHint {
    position: absolute;
    bottom: 10px; 
    left: 50%;
    transform: translateX(-50%); 
    
    opacity: 0; 
    transition: opacity 0.3s ease; 
    pointer-events: none; 
    z-index: 10;
    
    color: white;
    background-color: rgba(0, 0, 0, 0.7); 
    
    padding: 4px 10px; 
    border-radius: 5px;
    font-size: 14px; 
    font-weight: 600; 
    
    user-select: none;
}

/* LOADER (Sanduhr) */
#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11; 
    display: none; 
    
    font-size: 3em; 
    color: var(--accent-color); 
    
    animation: spin 1s infinite linear; 
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* LIGHTBOX (Vollbild-Modal) - Basis-Layout */
.lightbox {
    padding: 20px;
}

.lightbox img {
    max-width: 95%;
    max-height: 95%;
    display: block;
    margin: auto;
    pointer-events: none; 
}


/* ========================================================== */
/* KORRIGIERT: SUBTITEL ANIMATION (Rotation: Ein Text nach dem anderen)*/
/* ========================================================== */

/* Container für die rotierenden Untertitel */
.subtitle-container {
    display: block; 
    position: relative;
    
    /* Setzt die Höhe auf die Zeilenhöhe, um nur Platz für einen Text zu schaffen */
    height: 1.3em; /* Leicht erhöht, um Unterlängen (wie 'g') Platz zu geben */
    width: 100%; 
    overflow: hidden; 
    text-align: center; /* Zentriert den rotierenden Text */
    
    font-size: 1.1rem; 
    font-weight: 400;
    /* KORRIGIERT: Abstand nach oben reduziert, um näher an h1 zu sein */
    margin-top: 2px; 
}

/* Einzelne Untertitelzeile */
.subtitle-line {
    /* Stellt sicher, dass alle Zeilen gestapelt sind (absolut) */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    
    color: var(--text-color); /* KORRIGIERT: Nutzt die Standard-Textfarbe (Schwarz/Weiß) */
    font-weight: normal; 
    line-height: 1.2;
    white-space: nowrap; 
    
    /* WICHTIG: Standardmäßig unsichtbar */
    opacity: 0; 
    
    /* KORRIGIERT: Animation für Fade-In/Out (Gesamt 9s, 3s pro Text) */
    animation: subtitle-fade 9s infinite; 
    transition: opacity 0.5s ease-in-out; 
    
    /* KORRIGIERT: Maskierung (Überblenden) am Rand */
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}



/* KEYFRAMES für den Wechsel-Effekt (Fade In/Out) */
@keyframes subtitle-fade {
    /* Jede Phase dauert 33.3% (3s) */
    
    /* Phase 1: Sichtbar */
    0% { opacity: 0; }
    5% { opacity: 1; }  /* 0.5s Fade-In */
    28% { opacity: 1; } /* 2.5s Sichtbar bleiben */
    33.3% { opacity: 0; } /* 0.5s Fade-Out */
    
    /* Phase 2 und 3: Unsichtbar bleiben */
    33.4%, 100% { opacity: 0; }
}

/* Verzögerungen, um die 3s-Phasen zu synchronisieren */
.subtitle-line.line-1 {
    animation-delay: 0s; /* Startet sofort (0s - 3s) */
}
.subtitle-line.line-2 {
    animation-delay: -6s; /* Startet bei 3s im Zyklus (3s - 6s) */
}
.subtitle-line.line-3 {
    animation-delay: -3s; /* Startet bei 6s im Zyklus (6s - 9s) */
    
    /* Farbe wird NICHT mehr überschrieben, da alle die gleiche Farbe haben sollen */
    /* color: var(--accent-color); */ 
    font-weight: normal; /* Alle haben das gleiche Gewicht */
}


/* ========================================================== */
/* CAM-STATUS BANNER (Meldung links unten) */
/* ========================================================== */
.cam-status-overlay {
    /* WICHTIG: Die Positionierung ändern */
    position: absolute;
    top: auto;   /* Entfernt die Top-Positionierung */
    right: auto; /* Entfernt die Right-Positionierung */
    bottom: 10px; /* Positioniert 10px vom unteren Rand */
    left: 10px;  /* Positioniert 10px vom linken Rand */ 
    
    z-index: 15; 
    pointer-events: none; 
    opacity: 0;
    /* KORREKTUR: Slide-Up Effekt hinzugefügt */
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cam-status-overlay.show {
    display: block;
    opacity: 1;
    transform: translateY(0); /* Fährt hoch */
}

/* Die Banner-Styles (Farben, Ränder etc.) bleiben unverändert */
.cam-status-banner {
    padding: 10px 15px;
    border-radius: 8px;
    color: white; 
    font-family: 'Exo 2', system-ui, sans-serif;
    max-width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: auto; 
}

/* Stil für ROTE STÖRUNG (Last-Modified zu alt) */
.cam-status-banner.error-red {
    background-color: rgba(255, 71, 87, 0.9); /* Halbdurchsichtiges Rot */
    border: 1px solid #ff4757;
}

/* Stil für ORANGE WARNUNG (Header-Abruf fehlgeschlagen) */
.cam-status-banner.warning-orange {
    background-color: rgba(255, 165, 0, 0.9); /* Halbdurchsichtiges Orange */
    border: 1px solid #ffa500;
}

.cam-status-banner h2 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.2;
}

.cam-status-banner p {
    margin: 0;
    font-size: 0.9em;
    font-weight: normal;
}

.cam-status-banner .detail-info {
    display: block;
    margin-top: 5px;
    font-size: 0.75em;
    opacity: 0.8;
}

/* ========================================================== */
/* MEDIA QUERIES (Responsivität)                            */
/* ========================================================== */

@media (max-width:600px){
    h1{ 
        font-size: 1.5rem; 
        text-align: center; /* KORRIGIERT: Zentriert auf Mobile */
    } 
    
    /* Der Subtitel-Container wird zentriert ausgerichtet */
    .subtitle-container {
        width: 100%; 
        margin-left: 0;
        /* KORRIGIERT: Höhe und Abstand für Mobile */
        margin-top: 2px; 
        height: 1.2em; 
        text-align: center; 
        font-size: 1rem; 
    }
    .subtitle-line {
        font-size: 1em; 
        /* KORRIGIERT: Positionierung für Zentrierung */
        left: 50%;
        transform: translateX(-50%);
        /* Maskierung (Überblenden) entfernen, da zentriert */
        mask-image: none;
        -webkit-mask-image: none;
    }
    
    .project-title { font-size: 0.9rem; }
}

/* css/_layout.css - ZUSÄTZLICHER CODE FÜR RESPONSIVEN FOOTER */

/* 1. Generelle Flex-Steuerung im Footer anpassen */
footer {
    /* Muss flex-wrap erlauben, damit die Elemente umbrechen können */
    flex-wrap: wrap; 
    /* Stellt sicher, dass die Elemente oben beginnen, wenn sie umbrechen */
    align-items: flex-start;
}

/* css/_layout.css - ZUSÄTZLICHER CODE FÜR RESPONSIVEN FOOTER */

/* 1. Generelle Flex-Steuerung im Footer anpassen */
footer {
    /* Muss flex-wrap erlauben, damit die Elemente umbrechen können */
    flex-wrap: wrap; 
    /* Stellt sicher, dass die Elemente oben beginnen, wenn sie umbrechen */
    align-items: flex-start;
}

/* 2. Media Query für Smartphones (z.B. unter 550px) */
@media (max-width: 550px) { 
    
    /* Der Titel (irmscher.at/tv) kommt in die erste Reihe und nimmt die volle Breite ein */
    .project-title { 
        width: 100%;
        text-align: center; 
        order: 1; /* Erzwingt, dass der Titel zuerst angezeigt wird */
        margin-bottom: 10px; /* Abstand nach unten zu den Buttons */
    }
    
    /* Die Button-Aktionen kommen in die zweite Reihe und werden zentriert */
    .footer-actions {
        width: 100%; /* WICHTIG: Nimmt die volle Breite ein, um die Buttons zu verteilen */
        justify-content: center; /* Zentriert die Button-Gruppe */
        order: 2; /* Erzwingt, dass die Buttons danach angezeigt werden */
        margin-bottom: 5px; /* Kleiner Abstand nach unten */
    }
}