@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400&display=swap');

:root {
    --bg-color: #000000;
    --text-color: #e0e0e0;
    --accent: #4facfe;
    --glass: rgba(255, 255, 255, 0.05);
}

body {
    margin: 0; overflow: hidden; background-color: var(--bg-color); color: var(--text-color);
    font-family: 'Roboto', sans-serif; height: 100vh; width: 100vw;
}

#canvas-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}

.content-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none;
}

/* --- FOLIEN --- */
.slide {
    position: absolute; width: 100%; height: 100%;
    opacity: 0; transition: opacity 0.5s ease;
    display: flex; flex-direction: column; justify-content: center;
}

.slide.active { opacity: 1; pointer-events: all; }

/* SPEZIAL: Verzögerter Text (Für Folie 4) */
.slide.delayed-text .slide-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Wenn wir per JS diese Klasse hinzufügen, wird der Text sichtbar */
.slide.delayed-text.show-now .slide-content {
    opacity: 1;
    transform: translateY(0);
}


/* Typ 1: Deckblatt */
.center-slide {
    align-items: center; text-align: center; justify-content: space-between; padding: 8vh 0; box-sizing: border-box;
}
.title-block h1 {
    font-family: 'Orbitron', sans-serif; font-size: 5rem; margin: 0;
    background: linear-gradient(to bottom, #fff, #4facfe);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 50px rgba(79, 172, 254, 0.4);
}
.title-block h2 { font-size: 1.5rem; letter-spacing: 5px; color: #888; margin-top: 10px; text-transform: uppercase; }

.info-block {
    background: var(--glass); padding: 20px 40px; border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px);
    display: flex; gap: 40px; font-size: 1.1rem; color: #ccc;
}
.info-item span { display: block; font-size: 0.8rem; color: var(--accent); text-transform: uppercase; margin-bottom: 5px; }

/* Typ 2: Links */
.left-slide { align-items: flex-start; padding-left: 8%; width: 40%; }
.left-slide h2 {
    font-family: 'Orbitron', sans-serif; font-size: 3rem; color: var(--accent);
    margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px; width: 100%;
}
.left-slide ul { list-style: none; padding: 0; font-size: 1.3rem; line-height: 1.6; }
.left-slide li { margin-bottom: 20px; display: flex; align-items: center; }
.left-slide li::before {
    content: ''; display: inline-block; width: 8px; height: 8px;
    background: var(--accent); border-radius: 50%; margin-right: 15px; box-shadow: 0 0 10px var(--accent);
}

/* UI - COUNTER & PROGRESS */
.progress-bar {
    position: fixed; bottom: 0; left: 0; height: 4px; background: var(--accent);
    width: 0%; transition: width 0.5s; z-index: 1000; box-shadow: 0 0 15px var(--accent);
}

.slide-counter {
    position: fixed; bottom: 20px; right: 30px;
    font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: #fff;
    background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.3); 
    z-index: 1000; /* Ganz weit vorne */
    opacity: 0; /* Unsichtbar am Anfang */
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.slide-counter.visible { opacity: 1 !important; }