/*
Projektbeschreibung:
Diese Datei (style.css) regelt das Design der Startseite.
Sie stellt sicher, dass das Bild auf mobilen Geraeten korrekt zentriert wird und Abstaende einhaelt.
Zudem wurde eine CSS-Klasse fuer den Uebergang (Fade-Effekt) der Bilder hinzugefuegt und der gruene Glow-Effekt ist aktiv.
Version: 1.4
Aktualisiert am: 28.05.2026
Beispielzeit: 28.05.2026 08:22:54 CEST
Aenderungen:
- Einsatz von 100dvh fuer korrekte vertikale Zentrierung auf mobilen Browsern.
- max-width mit calc() angepasst fuer garantierte 10px Rand auf kleinen Displays.
*/

/* Grundeinstellungen fuer den gesamten sichtbaren Bereich */
body {
    /* Entfernt Standardabstaende des Browsers */
    margin: 0;
    padding: 0;
    
    /* Fallback fuer aeltere Browser, die dvh nicht kennen */
    height: 100vh;
    
    /* NEU: Nimmt die dynamische Hoehe des Bildschirms ein (behebt das Zentrierungs-Problem bei mobilen URL-Leisten) */
    height: 100dvh;
    width: 100vw;
    
    /* Flexbox fuer die perfekte Zentrierung der Inhalte */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Standard-Hintergrundfarbe gemaess Vorgabe */
    background-color: rgba(255, 193, 7, 0.5) !important;
    
    /* Verhindert unnoetiges Scrollen */
    overflow: hidden;
}

/* Styling fuer das Matrix-Canvas im Hintergrund */
#matrix {
    /* Fixierte Position, damit es immer im Hintergrund bleibt */
    position: fixed;
    top: 0;
    left: 0;
    
    /* Nimmt die gesamte Bildschirmgroesse ein */
    width: 100vw;
    height: 100vh;
    
    /* Legt das Canvas auf die unterste Ebene (hinter das Bild) */
    z-index: -1;
}

/* Styling fuer das zentrale Bild (Mobile Responsiveness & Glow) */
.responsive-img {
    /* NEU: Das Bild darf maximal die Bildschirmbreite minus 20px einnehmen (sorgt fuer genau 10px Abstand links/rechts) */
    max-width: calc(100vw - 30px);
    
    /* NEU: Hoehe ebenfalls dynamisch abriegeln, damit das Bild bei querformatigen Handys nicht herausragt */
    max-height: calc(100dvh - 20px);
    
    /* Behaelt das Seitenverhaeltnis exakt bei, ohne das Bild zu verzerren */
    object-fit: contain;
    
    /* Relativer z-index, damit es vor dem Canvas liegt */
    z-index: 1;
    
    /* Ein weicher Uebergang (Transition) von 1 Sekunde fuer die Deckkraft (Fade-Effekt der Slideshow) */
    transition: opacity 1s ease-in-out;
    opacity: 1;

    /* --- Gruener Matrix-Glow --- */
    
    /* Leicht abgerundete Ecken fuer einen weicheren Glow-Uebergang */
    border-radius: 15px; 
    
    /* Ein duenner, halbdurchsichtiger Rahmen, um das Bild einzufassen */
    border: 2px solid rgba(0, 255, 0, 0.8); 

    /* Der subtile, mehrschichtige Glow-Effekt nach aussen */
    box-shadow: 
        /* Innere, etwas schaerfere Glow-Kante */
        0 0 10px 2px rgba(0, 255, 0, 0.6), 
        /* Aeusserer, sehr weicher und dezenter Glow-Schleier */
        0 0 30px 8px rgba(0, 255, 0, 0.3); 
}

/* Hilfsklasse zum Ausblenden des Bildes waehrend des Bildwechsels (Slideshow) */
.fade-out {
    opacity: 0;
}