/* RESET & BODY */
* { box-sizing:border-box; margin:0; padding:0; font-family:Arial,sans-serif; }
body { min-height:100vh; color:white; transition:0.4s; }
.background { position:fixed; inset:0; background:url("../img/harz.jpg") center/cover no-repeat; filter:blur(6px); z-index:-2; }

/* GLASS BOX */
.glass-box { width:360px; max-width:90%; margin:80px auto; padding:30px; background:rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,0.4); display:flex; flex-direction:column; align-items:center; }

/* SWITCH BUTTONS */
.switch { display:flex; margin-bottom:20px; width:100%; justify-content:center; gap:10px; }
.switch button { padding:10px 25px; background: rgba(255,255,255,0.2); border-radius:8px 8px 0 0; font-weight:bold; cursor:pointer; }
.switch button.active { background:#00c3ff; }

/* FORMS */
.form { display:none; animation:fade 0.4s ease; }
.form.active { display:block; }
input, button { width:100%; max-width:280px; padding:10px; margin:6px 0; border-radius:8px; border:none; text-align:center; }
button { background:#00c3ff; color:white; font-weight:bold; cursor:pointer; }
button:hover { background:#009ad1; }

/* PASSWORD FIELD */
.password-field { position:relative; }
.password-field span { position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:0.6; }
.password-field span:hover { opacity:1; }

/* ADMIN LABEL */
.admin-label { text-align:center; font-size:14px; opacity:0.7; margin-bottom:8px; letter-spacing:1px; }

/* TOAST */
#toastContainer { position:fixed; top:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:9999; }
.toast { background: rgba(0,0,0,0.7); color:white; padding:10px 20px; border-radius:8px; opacity:0; transform:translateY(-20px); transition:0.3s; }
.toast.show { opacity:1; transform:translateY(0); }

/* PORTFOLIO */
.portfolio-root { display:flex; flex-direction:column; gap:80px; padding-bottom:60px; }
.hero, .about-section.parallax { height:90vh; display:flex; justify-content:center; align-items:center; text-align:center; background-attachment: fixed; background-size: cover; background-position: center; }
.hero-inner, .about-section .about-content { background:rgba(0,0,0,0.4); padding:50px; border-radius:12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation:fadeInDown 1s ease; }

.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; margin-top:20px; }
.service-card, .project-card { background: rgba(255,255,255,0.15); padding:20px; border-radius:10px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow:0 5px 15px rgba(0,0,0,0.2); opacity:0; transform:translateY(40px); transition: all 0.6s ease-out; }
.project-card:hover { transform:translateY(-5px); }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:20px; }
.btn-primary { background:#00c3ff; padding:12px 30px; border-radius:8px; color:white; font-weight:bold; text-decoration:none; display:inline-block; }
.btn-primary:hover { background:#008ecf; }

/* ANIMATION */
@keyframes fade { from{opacity:0;} to{opacity:1;} }
@keyframes fadeInDown { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

/* VISIBLE ON SCROLL */
.visible { opacity:1 !important; transform:translateY(0px) !important; }