@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Oswald:wght@400;700&family=Special+Elite&display=swap');

/* ═══════════════════════════════════════
   RESET & VARIABLES
   ═══════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --red:#c0392b;
  --green:#00ff41;
  --amber:#ffbf00;
  --dark:#0a0a0a;
  --cyan:#00e5ff;
}

body{
  background:var(--dark);
  color:#d0d0d0;
  font-family:'Share Tech Mono',monospace;
  overflow-x:hidden;
  min-height:100vh;
}

body::after{
  content:'';
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(0deg,rgba(0,255,65,0.03) 0px,rgba(0,255,65,0.03) 1px,transparent 1px,transparent 3px);
  pointer-events:none;z-index:9999;
}

/* ═══════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════ */

.classified-bar{
  background:var(--red);color:white;
  text-align:center;padding:8px;
  font-family:'Oswald',sans-serif;
  font-size:14px;letter-spacing:6px;
  text-transform:uppercase;
  animation:blink 3s infinite;
}
@keyframes blink{0%,90%,100%{opacity:1}95%{opacity:.3}}

.signal-bar{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  margin:0;animation:signal 3s infinite;
}
@keyframes signal{0%,100%{opacity:.3}50%{opacity:1}}

.content{position:relative;z-index:1}

/* Terminal */
.terminal{
  background:#0a0a0a;
  border:1px solid #1a1a1a;
  padding:20px;
  max-width:1000px;
  margin:0 auto 60px;
  font-size:12px;color:#555;
  line-height:2;
}
.terminal .cmd{color:var(--green)}
.terminal .val{color:var(--amber)}
.terminal .err{color:var(--red)}
.terminal .cyn{color:var(--cyan)}

.terminal-box{
  background:#0a0a0a;
  border:1px solid #1a1a1a;
  padding:16px 20px;
  font-size:12px;color:#555;
  line-height:2;
  margin:16px 0;
}
.terminal-box .cmd{color:var(--green)}
.terminal-box .val{color:var(--amber)}

/* Section headers */
.section-header{
  font-family:'Oswald',sans-serif;
  font-size:24px;color:var(--green);
  text-transform:uppercase;letter-spacing:4px;
  border-left:4px solid var(--red);
  padding-left:16px;margin-bottom:12px;
}
.section-header .rid{
  display:block;font-size:11px;
  color:#444;letter-spacing:2px;margin-top:4px;
}

/* Footer */
footer{
  text-align:center;
  padding:40px 20px;
  border-top:1px solid #1a1a1a;
  color:#333;font-size:11px;line-height:2.2;
}
footer .satire{
  background:rgba(255,191,0,0.1);
  border:1px solid rgba(255,191,0,0.2);
  display:inline-block;
  padding:8px 20px;margin-bottom:20px;
  color:var(--amber);font-size:12px;letter-spacing:2px;
}
footer a{color:#555;text-decoration:none}
footer a:hover{color:var(--green)}

/* Animation */
.fade-in{
  opacity:0;transform:translateY(20px);
  transition:all .8s ease;
}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Canvas bg */
#bgCanvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0;
  opacity:0.4;
}

/* ═══════════════════════════════════════
   INDEX — HERO
   ═══════════════════════════════════════ */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:40px 20px;
  background:
    radial-gradient(ellipse at 30% 40%,rgba(0,255,65,0.05) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 60%,rgba(192,57,43,0.04) 0%,transparent 50%),
    var(--dark);
}

.hero-logo{
  width:120px;height:120px;
  border:2px solid var(--green);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:30px;
  position:relative;
  animation:logoPulse 3s infinite;
}
.hero-logo::before{
  content:'';position:absolute;
  width:140px;height:140px;
  border:1px solid rgba(0,255,65,0.15);
  border-radius:50%;
  animation:ring 4s infinite;
}
.hero-logo::after{
  content:'';position:absolute;
  width:160px;height:160px;
  border:1px solid rgba(0,255,65,0.08);
  border-radius:50%;
  animation:ring 4s infinite 0.5s;
}
@keyframes logoPulse{0%,100%{box-shadow:0 0 20px rgba(0,255,65,0.2)}50%{box-shadow:0 0 40px rgba(0,255,65,0.4)}}
@keyframes ring{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}

.hero-logo span{
  font-size:48px;
  filter:drop-shadow(0 0 10px rgba(0,255,65,0.5));
}

.hero h1{
  font-family:'Oswald',sans-serif;
  font-size:clamp(36px,7vw,80px);
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:8px;
  text-shadow:0 0 30px rgba(0,255,65,0.4);
  margin-bottom:10px;
  position:relative;
}
.hero h1::before,.hero h1::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;right:0;overflow:hidden;
}
.hero h1::before{color:var(--red);z-index:-1;animation:g1 4s infinite}
.hero h1::after{color:cyan;z-index:-2;animation:g2 4s infinite}
@keyframes g1{0%,94%,100%{clip-path:none;transform:none}95%{clip-path:inset(20% 0 60% 0);transform:translateX(-4px)}96%{clip-path:inset(60% 0 10% 0);transform:translateX(4px)}}
@keyframes g2{0%,96%,100%{clip-path:none;transform:none}97%{clip-path:inset(40% 0 30% 0);transform:translateX(4px)}98%{clip-path:inset(10% 0 70% 0);transform:translateX(-4px)}}

.hero .subtitle{
  font-family:'Oswald',sans-serif;
  font-size:clamp(14px,2vw,20px);
  color:var(--amber);letter-spacing:6px;
  margin-bottom:30px;
}

.hero .desc{
  max-width:600px;
  font-size:13px;line-height:1.9;
  color:#666;margin-bottom:40px;
}

.scroll-hint{
  color:var(--green);font-size:24px;
  animation:bounce 2s infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ═══════════════════════════════════════
   INDEX — AKTEN
   ═══════════════════════════════════════ */

.akten-section{
  max-width:1000px;
  margin:0 auto;
  padding:60px 20px 40px;
}

.section-sub{
  font-size:13px;color:#555;
  margin-bottom:40px;line-height:1.7;
  padding-left:20px;
}

/* File cards */
.files-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;margin-bottom:60px;
}

.file-card{
  background:linear-gradient(135deg,#111,#0d0d0d);
  border:1px solid #222;
  position:relative;
  overflow:hidden;
  transition:all .4s;
  cursor:pointer;
  text-decoration:none;
  display:block;
  color:inherit;
}
.file-card:hover{
  border-color:var(--green);
  box-shadow:0 0 30px rgba(0,255,65,0.1);
  transform:translateY(-4px);
}

.file-card-header{
  background:linear-gradient(135deg,#1a1a1a,#141414);
  padding:16px 20px;
  border-bottom:1px solid #222;
  display:flex;align-items:center;gap:12px;
}
.file-card-header .icon{font-size:28px}
.file-card-header .meta{flex:1}
.file-card-header .akte{
  font-family:'Oswald',sans-serif;
  font-size:10px;color:#555;
  letter-spacing:3px;
}
.file-card-header .title{
  font-family:'Oswald',sans-serif;
  font-size:18px;color:var(--green);
  letter-spacing:2px;margin-top:2px;
}

.file-card-status{
  position:absolute;top:16px;right:16px;
  font-family:'Oswald',sans-serif;
  font-size:9px;letter-spacing:2px;
  padding:3px 8px;border-radius:2px;
}
.status-open{
  background:rgba(0,255,65,0.1);
  border:1px solid rgba(0,255,65,0.3);
  color:var(--green);
}
.status-locked{
  background:rgba(192,57,43,0.1);
  border:1px solid rgba(192,57,43,0.3);
  color:var(--red);
}
.status-pending{
  background:rgba(255,191,0,0.1);
  border:1px solid rgba(255,191,0,0.3);
  color:var(--amber);
}

.file-card-body{padding:20px}
.file-card-body .codename{
  font-family:'Oswald',sans-serif;
  font-size:11px;color:var(--amber);
  letter-spacing:3px;margin-bottom:10px;
}
.file-card-body .desc{
  font-size:12px;color:#777;
  line-height:1.7;margin-bottom:16px;
}

.file-card-footer{
  padding:12px 20px;
  border-top:1px solid #1a1a1a;
  display:flex;justify-content:space-between;
  font-size:10px;color:#444;
}
.file-card-footer .tag{
  color:var(--cyan);
  letter-spacing:1px;
}

.file-card .corner-glow{
  position:absolute;bottom:0;right:0;
  width:100px;height:100px;
  background:radial-gradient(circle at bottom right,rgba(0,255,65,0.06),transparent 70%);
  pointer-events:none;
}

/* Locked card */
.file-card.locked .file-card-body::after{
  content:'AKTE GESPERRT — FREIGABE AUSSTEHEND';
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:11px;color:var(--red);
  letter-spacing:2px;
  margin-top:8px;padding:10px;
  border:1px dashed rgba(192,57,43,0.3);
  text-align:center;
}
.file-card.locked{pointer-events:none;opacity:0.5}

/* ═══════════════════════════════════════
   IMPRESSUM & DATENSCHUTZ
   ═══════════════════════════════════════ */

.back-link{
  display:inline-block;
  padding:20px;
  color:var(--green);
  text-decoration:none;
  font-size:13px;
  letter-spacing:2px;
  transition:color .3s;
}
.back-link:hover{color:var(--amber)}

.legal-container{
  max-width:800px;
  margin:0 auto;
  padding:20px 20px 60px;
}

.legal-header{
  font-family:'Oswald',sans-serif;
  font-size:28px;
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:4px;
  border-left:4px solid var(--red);
  padding-left:16px;
  margin-bottom:8px;
}
.legal-header .rid{
  display:block;font-size:11px;
  color:#444;letter-spacing:2px;margin-top:4px;
}

.legal-section{margin-bottom:50px}

.legal-section h2{
  font-family:'Oswald',sans-serif;
  font-size:18px;
  color:var(--amber);
  letter-spacing:3px;
  text-transform:uppercase;
  margin:30px 0 12px;
  padding-bottom:6px;
  border-bottom:1px solid #1a1a1a;
}

.legal-section p{
  font-size:13px;
  line-height:1.9;
  color:#888;
  margin-bottom:12px;
}

.legal-section a{
  color:var(--cyan);
  text-decoration:none;
}
.legal-section a:hover{
  color:var(--green);
  text-decoration:underline;
}

.legal-section .highlight{color:var(--green)}

.divider{
  border:none;
  border-top:1px solid #1a1a1a;
  margin:50px 0;
}

/* ═══════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════ */

.main-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  border-bottom:1px solid #1a1a1a;
  background:rgba(10,10,10,0.95);
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--green);
}
.nav-logo-icon{font-size:20px}
.nav-logo-text{
  font-family:'Oswald',sans-serif;
  font-size:14px;
  letter-spacing:4px;
  color:var(--green);
}

.nav-links{
  display:flex;
  gap:8px;
}
.nav-links a{
  font-family:'Oswald',sans-serif;
  font-size:11px;
  letter-spacing:3px;
  color:#555;
  text-decoration:none;
  padding:6px 14px;
  border:1px solid transparent;
  transition:all .3s;
}
.nav-links a:hover{
  color:var(--green);
  border-color:#222;
}
.nav-links a.active{
  color:var(--green);
  border-color:rgba(0,255,65,0.3);
  background:rgba(0,255,65,0.05);
}

/* Burger toggle */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:1px solid #222;
  padding:8px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;height:2px;
  background:var(--green);
  transition:all .3s;
}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(3px,4px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(3px,-4px)}

/* Mobile */
@media(max-width:600px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    background:rgba(10,10,10,0.98);
    border-bottom:1px solid #1a1a1a;
    padding:8px;
    z-index:100;
  }
  .nav-links.open{display:flex}
  .main-nav{position:relative}
}

/* ═══════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════ */

.timeline{
  position:relative;
  padding:20px 0;
  margin:30px 0;
}
.timeline::before{
  content:'';
  position:absolute;
  left:20px;top:0;bottom:0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--green),var(--green) 90%,transparent);
  opacity:0.3;
}

.timeline-entry{
  position:relative;
  padding:0 0 40px 56px;
}
.timeline-entry:last-child{padding-bottom:0}

.timeline-entry::before{
  content:'';
  position:absolute;
  left:14px;top:6px;
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid var(--green);
  background:var(--dark);
  z-index:1;
  box-shadow:0 0 10px rgba(0,255,65,0.2);
}

.timeline-entry.classified::before{
  border-color:var(--red);
  box-shadow:0 0 10px rgba(192,57,43,0.2);
}
.timeline-entry.pending::before{
  border-color:var(--amber);
  box-shadow:0 0 10px rgba(255,191,0,0.2);
}

.timeline-date{
  font-family:'Oswald',sans-serif;
  font-size:11px;
  letter-spacing:3px;
  color:var(--green);
  margin-bottom:6px;
}
.timeline-entry.classified .timeline-date{color:var(--red)}
.timeline-entry.pending .timeline-date{color:var(--amber)}

.timeline-title{
  font-family:'Oswald',sans-serif;
  font-size:16px;
  color:var(--amber);
  letter-spacing:2px;
  margin-bottom:8px;
}

.timeline-desc{
  font-size:12px;
  color:#777;
  line-height:1.8;
}
.timeline-desc .highlight{color:var(--green)}

.timeline-tag{
  display:inline-block;
  font-family:'Oswald',sans-serif;
  font-size:9px;
  letter-spacing:2px;
  padding:2px 8px;
  margin-top:8px;
  border-radius:2px;
}
.timeline-tag.real{
  background:rgba(0,255,65,0.1);
  border:1px solid rgba(0,255,65,0.3);
  color:var(--green);
}
.timeline-tag.fiction{
  background:rgba(0,229,255,0.1);
  border:1px solid rgba(0,229,255,0.3);
  color:var(--cyan);
}

@media(max-width:600px){
  .timeline::before{left:12px}
  .timeline-entry{padding-left:42px}
  .timeline-entry::before{left:6px;width:12px;height:12px}
}