/* =========================
CYBERPUNK THEME
========================= */

:root{
--bg:#05070a;
--bg2:#0b1117;
--accent:#00ff51;
--accent2:#f2f2f2;
--text:#e8f6ff;
--muted:#6b8a99;
--border:rgba(0,247,255,.2);
--glow:0 0 10px rgba(21, 255, 0, 0.7),
       0 0 25px rgba(0,247,255,.5);
}

/* =========================
Grundstyle
========================= */

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

body{
background:radial-gradient(circle at 20% 20%,#0c141a,#020305);
color:var(--text);
font-family:"Rajdhani",sans-serif;
overflow-x:hidden;
}

/* =========================
MATRIX HINTERGRUND
========================= */

#matrix-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
opacity:.35;
}

/* =========================
SCAN-LINIEN
========================= */

#scanlines{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;

background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.03),
rgba(255,255,255,.03) 1px,
transparent 1px,
transparent 4px
);
}

/* =========================
NAVIGATION
========================= */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
border-bottom:1px solid var(--border);
backdrop-filter:blur(10px);
background:rgba(5,7,10,.6);
}

.nav-logo{
font-family:"Orbitron",sans-serif;
letter-spacing:.1em;
font-weight:900;
color:var(--accent);
text-shadow:var(--glow);
}

.nav-logo span{
color:var(--accent2);
}

.nav-links{
display:flex;
gap:30px;
}

.nav-links a{
color:var(--muted);
text-decoration:none;
font-size:.9rem;
letter-spacing:.1em;
transition:.3s;
}

.nav-links a:hover{
color:var(--accent);
text-shadow:var(--glow);
}



/* =========================
STATUS PUNKT / BLINKED
========================= */

.status-dot{
width:8px;
height:8px;
border-radius:50%;
background:#00ff66;
box-shadow:0 0 8px #00ff66;
animation:pulse 1.5s infinite;
}

@keyframes pulse{
0%{opacity:1}
50%{opacity:.3}
100%{opacity:1}
}

/* =========================
HERO ABTEIL
========================= */

.hero{
text-align:center;
padding:120px 20px;
position:relative;
}

.hero-title{
font-family:"Orbitron";
font-size:5rem;
line-height:1.1;
letter-spacing:.05em;
}

.hero-title .dim{
color:var(--muted);
}

.hero-subtitle{
margin-top:20px;
font-size:1.2rem;
color:var(--muted);
}

.hero-tag{
font-family:"Share Tech Mono",monospace;
color:var(--accent);
margin-bottom:20px;
letter-spacing:.15em;
}

/* =========================
GLITCH
========================= */

.glitch{
position:relative;
color:var(--accent);
text-shadow:var(--glow);
}

.glitch:before,
.glitch:after{
content:attr(data-text);
position:absolute;
left:0;
top:0;
opacity:.7;
}

.glitch:before{
color:#7d0e8b;
transform:translate(-2px,-2px);
}

.glitch:after{
color:#0bef1a;
transform:translate(2px,2px);
}

/* =========================
KNÖPFE
========================= */

.btn{
display:inline-block;
padding:12px 24px;
border:1px solid var(--accent);
text-decoration:none;
color:var(--accent);
font-family:"Share Tech Mono";
letter-spacing:.12em;
transition:.3s;
}

.btn:hover{
background:var(--accent);
color:#000;
box-shadow:var(--glow);
}

.btn.solid{
background:var(--accent);
color:#000;
}

/* =========================
SECTION TITEL
========================= */

.section-head{
display:flex;
align-items:center;
gap:20px;
margin:120px 0 40px 0;
}

.section-num{
font-family:"Share Tech Mono";
color:var(--accent);
}

.section-title{
font-family:"Orbitron";
font-size:1.4rem;
letter-spacing:.15em;
}

.section-line{
flex:1;
height:1px;
background:linear-gradient(to right,var(--accent),transparent);
}

/* =========================
PROJEKTE
========================= */

.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

/* =========================
PROJEKT KARTEN
========================= */

.project-card{
background:rgba(12,20,26,.6);
border:1px solid var(--border);
padding:25px;
position:relative;
transition:.35s;
backdrop-filter:blur(8px);
}

.project-card:hover{
transform:translateY(-6px) scale(1.02);
border-color:var(--accent);
box-shadow:0 0 25px rgba(0,247,255,.25);
}

.card-title{
font-family:"Orbitron";
margin:10px 0;
}

.card-desc{
color:var(--muted);
font-size:.9rem;
line-height:1.5;
}

/* =========================
TAGS
========================= */

.card-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:10px;
}

.tag{
border:1px solid var(--border);
padding:3px 8px;
font-size:.7rem;
font-family:"Share Tech Mono";
color:var(--accent);
}

/* =========================
FORTSCHRITTSANZEIGE
========================= */

.progress-bar{
height:6px;
background:#061017;
margin-top:10px;
}

.progress-fill{
height:100%;
background:linear-gradient(90deg,var(--accent),var(--accent2));
width:var(--prog);
box-shadow:var(--glow);
}

/* =========================
SKILLS
========================= */

.skills-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.skill-chip{
border:1px solid var(--border);
padding:8px 14px;
font-size:.8rem;
font-family:"Share Tech Mono";
color:var(--accent);
transition:.3s;
}

.skill-chip:hover{
background:var(--accent);
color:black;
box-shadow:var(--glow);
}

/* =========================
TERMINAL
========================= */

.terminal-bar{
display:flex;
gap:6px;
padding:10px;
background:#020303;
border:1px solid var(--border);
}

.t-dot{
width:10px;
height:10px;
border-radius:50%;
background:#ff5555;
}

.t-dot:nth-child(2){background:#f1fa8c}
.t-dot:nth-child(3){background:#50fa7b}

.terminal{
background:#020303;
border:1px solid var(--border);
padding:20px;
font-family:"Share Tech Mono";
color:#00ff9c;
min-height:200px;
}

.t-highlight{
color:var(--accent);
}

/* =========================
FOOTER
========================= */

footer{
margin-top:120px;
padding:40px;
text-align:center;
font-size:.8rem;
border-top:1px solid var(--border);
color:var(--muted);
}

footer a{
color:var(--accent);
text-decoration:none;
}

footer a:hover{
text-shadow:var(--glow);
}