:root {
    --bg-color: #050505;
    --text-main: #a0a0a0;
    --text-quote: #888888;
    --text-dim: #444444;
    --accent: #666666;
}

html { background-color: #000000; }

body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    
    
    opacity: 0; 
    
    transition: opacity 0.5s ease-in-out;
    
    background-color: transparent;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    cursor: crosshair;
}

body.loaded {
	opacity: 1;
}

/* Hintergrund & Atmosphäre */
#video-container {
    position: center; top: 0; left: 0;
    width: 100%; height: 100%; z-index: -3;
    filter: grayscale(40%) brightness(55%) contrast(80%);
}
video { width: 100%; height: 100%; object-fit: cover; }

.vignette {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 10%, rgba(0,0,0,0.95) 100%);
    z-index: -1; pointer-events: none;
}

/* Zitate */
#quote-overlay {
    position: absolute; top: 12%; width: 100%;
    text-align: center; font-family: 'Playfair Display', serif;
    font-style: italic; font-size: 1.15rem;
    color: var(--text-quote);
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
    opacity: 0; padding: 0 30px;
    letter-spacing: 0.05rem; pointer-events: none;
}

/* Layout */
#observer-root {
    text-align: center; z-index: 10;
    max-width: 700px;
    padding: 40px;
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.2, 1);
    width: 100%;
}

h1 {
    font-size: 0.9rem; 
    letter-spacing: 1.3rem;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 8rem; 
    font-weight: 300; opacity: 0.8;
}

.hero-text {
    font-size: 1.2rem; 
    line-height: 2.2; /* Mehr Zeilenabstand */
    margin-bottom: 6rem; /* Mehr Abstand zur Navi (war 4rem) */
    font-weight: 300;
}

nav { display: flex; justify-content: center; gap: 4rem; }
nav a {
    color: var(--text-dim); text-decoration: none;
    font-size: 0.85rem; transition: all 0.8s ease;
    text-transform: lowercase; letter-spacing: 0.1rem;
}
nav a:hover { color: #ffffff; letter-spacing: 0.2rem; }

/* Animationen */
.system-glitch {
    animation: global-shake 0.15s cubic-bezier(.36,.07,.19,.97) both;
    filter: invert(1) contrast(3) brightness(0.5) !important;
}
@keyframes global-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes fadeInOut {
    0% { opacity: 0; filter: blur(5px); }
    15%, 85% { opacity: 0.85; filter: blur(0px); }
    100% { opacity: 0; filter: blur(5px); }
}
.animate-quote { animation: fadeInOut 12s infinite ease-in-out; }

/* === ZUSÄTZLICHE SEITEN STYLES === */

/* Aktiver Link in der Navi */
nav a.active {
    color: #fff;
    text-decoration: line-through;
    opacity: 1;
}

/* About & Content Text */
.content-block p {
    font-size: 1rem; line-height: 1.8;
    color: var(--text-main); margin-bottom: 1.5rem;
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.signature { color: var(--accent); font-size: 0.8rem; margin-top: 3rem; }

/* Contact Styles */
.mail-link {
    display: block; font-size: 1.5rem; color: #fff;
    text-decoration: none; margin: 2rem 0;
    font-family: 'Playfair Display', serif; font-style: italic;
    transition: all 0.3s ease;
}
.mail-link:hover { letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.socials { display: flex; gap: 2rem; justify-content: center; margin-top: 1rem; margin-bottom: 4rem; }
.socials a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; }
.socials a:hover { color: var(--text-main); }

/* Project List (Der geile Scheiß) */
.project-list {
    list-style: none; padding: 0; margin-bottom: 4rem;
    text-align: left; max-width: 500px; margin-left: auto; margin-right: auto;
}
.project-list li {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 1rem 0; transition: border-color 0.3s;
}
.project-list li:hover { border-bottom: 1px solid rgba(255,255,255,0.3); }

.glitch-link {
    font-size: 1.2rem; color: #fff; text-decoration: none;
    position: relative; transition: color 0.2s;
}
.glitch-link.dead { color: var(--text-dim); cursor: not-allowed; text-decoration: line-through; }
.status { font-size: 0.7rem; color: var(--accent); font-family: monospace; }

/* Glitch Hover Effect */
.glitch-link:not(.dead):hover {
    color: transparent;
    text-shadow: 2px 0 #ff004c, -2px 0 #00d8ff;
}
.glitch-link:not(.dead):hover::before {
    content: attr(data-text); position: absolute; left: 2px; top: 0;
    color: #fff; overflow: hidden; clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim {
    0% { clip: rect(2px, 9999px, 10px, 0); transform: skew(0.8deg); }
    5% { clip: rect(12px, 9999px, 15px, 0); transform: skew(-0.8deg); }
    10% { clip: rect(44px, 9999px, 5px, 0); transform: skew(0.2deg); }
    15% { clip: rect(4px, 9999px, 84px, 0); transform: skew(0.6deg); }
    100% { clip: rect(62px, 9999px, 20px, 0); transform: skew(0.1deg); }
}
/* === SAFETY GATE OVERLAY === */
#safety-gate {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000000;
    z-index: 9999;
    display: none; justify-content: center; align-items: center;
    text-align: center;
}

/* Versteckt das Gate, wenn akzeptiert */
#safety-gate.visible { display: flex; }

.gate-content {
    max-width: 600px; padding: 2rem;
    border: 1px solid #333;
}

.warning-title {
    color: #ff3333; /* Signalrot */
    font-size: 1.2rem; letter-spacing: 0.2rem;
    margin-bottom: 2rem; text-transform: uppercase;
    animation: pulse-warning 2s infinite;
}

.gate-content p {
    color: #ccc; margin-bottom: 2rem; font-size: 0.9rem;
}

.gate-btn {
    background: transparent; border: 1px solid #666;
    color: #fff; padding: 1rem 2rem;
    font-family: 'Inter', sans-serif; cursor: pointer;
    font-size: 0.8rem; letter-spacing: 0.1rem;
    transition: all 0.3s ease; margin-right: 1rem;
}

.gate-btn:hover { background: #fff; color: #000; }

.gate-link {
    color: #666; font-size: 0.8rem; text-decoration: none;
    margin-left: 1rem;
}
.gate-link:hover { color: #888; text-decoration: underline; }

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}