:root {
    /* Standardwerte für die CSS-Variablen (wird von JS überschrieben) */
    --initial-logo-transform-x: 0px;
    --initial-logo-transform-y: 0px;
    --initial-logo-scale: 1; 
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Pfad zum Hintergrundbild im images/ Ordner */
    background-image: url('images/background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    width: 100vw;

    display: flex;
    justify-content: center; /* Zentriert die Box horizontal */
    align-items: flex-end; /* Richtet die Box am unteren Rand des Containers aus */
    padding-bottom: 10vh; /* Schiebt die Box von unten nach oben (10% der Viewport-Höhe) */
    box-sizing: border-box;
}

/* Das Overlay-Element, das schwarz wird */
.background-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0); 
    z-index: -1; 
    
    /* NEU: Standard-Transition (fürs Verschwinden) ist jetzt 0.8s, gleicher Wert wie beim Einblenden */
    transition: background-color 0.8s ease-in-out, z-index 0s 0.8s; /* z-index delay matches background-color */
    
    pointer-events: none; 
}

/* Wenn der Body die Klasse 'logo-active' hat (Logo geklickt) */
body.logo-active .background-overlay {
    background-color: rgba(0, 0, 0, 1); 
    z-index: 99; 
    /* Gleich schnelle Transition für das Erscheinen (0.8s) */
    transition: background-color 0.8s ease-in-out, z-index 0s 0s; 
    pointer-events: auto; 
}


.content-box {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 20px 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 450px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 1.2em;
    line-height: 1.8;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.3s ease-in-out, opacity 2s ease-in-out; 
    z-index: 10; 
}

.content-box:hover {
    transform: scale(1.05);
}

/* Wenn der Body die Klasse 'logo-active' hat, Box ausblenden */
body.logo-active .content-box {
    opacity: 0; 
    pointer-events: none; 
    z-index: 98; 
}

.content-box p {
    margin: 0 0 15px 0; 
    padding: 0;
}

/* Styling für das primäre Logo in der Box (wird unsichtbar) */
.content-box .logo {
    width: 75px; 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
    cursor: pointer; 
    position: relative; 
    z-index: 20; 
}

/* Styling für den Wrapper des duplizierten Logos */
.logo-on-top-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    opacity: 0; 
    z-index: 100; 
    pointer-events: none; 

    visibility: hidden; 
    /* transition wird vom JS hinzugefügt */
}

/* Styling für das DUPLIZIERTE Logo INNERHALB des Wrappers */
.logo-on-top {
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 

    transform-origin: center center; 

    /* Startzustand des inneren Logos */
    transform: translate(var(--initial-logo-transform-x), var(--initial-logo-transform-y)) scale(var(--initial-logo-scale));
    
    /* Transition wird vom JS hinzugefügt */
    
    pointer-events: none; 
}

/* Wenn der Wrapper animiert ist, wechselt das innere Logo in den Endzustand */
.logo-on-top-wrapper.is-animated .logo-on-top {
    transform: translate(0, 0) scale(1); 
}


/* Styling für das TRANSPARENTE KLICK-OVERLAY */
.logo-click-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    background-color: transparent; 
    z-index: 101; 
    
    opacity: 0; 
    pointer-events: none; 

    visibility: hidden; 
    /* Transition wird vom JS hinzugefügt */
}

/* Zustand, wenn das Klick-Overlay aktiviert ist */
.logo-click-overlay.is-active {
    opacity: 1; 
    pointer-events: auto; 
}

/* Animation für das Klick-Overlay (wenn es animiert werden soll) */
.logo-click-overlay.is-animated {
    transform: translate(var(--initial-logo-transform-x), var(--initial-logo-transform-y)) translate(-50%, -50%) scale(var(--initial-logo-scale));
}