:root {
  --primary-bg: #1B0F23;
  --secondary-bg: #18111F;
  --accent-color: #c72dae;
  --text-light: #c72dae;
  --server-bg: rgba(27,15,35,0.5); /* leicht transparent für Serverkarten */
}

body { background: var(--primary-bg); color: var(--text-light); font-family: Arial,sans-serif; margin:0; }
header { background: rgba(27,15,35,0.7); color: var(--text-light); position: fixed; width: 100%; top: 0; z-index:50; box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
header .container { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:0.5rem 1rem;}
header img.logo { height:45px; width:auto; opacity:0; transform:scale(0.8); animation: headerLogoFadeIn 1s forwards; transition: transform 0.3s;}
header img.logo:hover { transform:scale(1.1);}
header nav { display:flex; gap:1rem;}
header nav a { color: var(--text-light); text-decoration:none; font-weight:bold; transition: color 0.3s;}
header nav a:hover { color: var(--accent-color); }

/* Hero */
.hero { position: relative; height:80vh; overflow: hidden; margin-top:60px; }
.slider { position: absolute; width:100%; height:100%; top:0; left:0; z-index:0;}
.slider .slide { position:absolute; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition: opacity 1s; }
#grid-bg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.hero-content { position: relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; background: rgba(27,15,35,0.3); padding:2rem; border-radius:1rem; }
.hero-logo { height:100px; width:auto; margin-bottom:1rem; animation: logoFade 1s infinite alternate; }
@keyframes logoFade {0%{transform:scale(1);}100%{transform:scale(1.05);}}

/* Buttons */
.btn-primary { background: var(--accent-color); color:#fff; padding:0.5rem 1.5rem; border-radius:0.5rem; margin:0.3rem; text-decoration:none; display:inline-block; transition: all 0.3s;}
.btn-primary:hover { transform: translateY(-2px); background:#7a1e6b;}

/* Sections */
.section-padding { padding:4rem 1rem; max-width:1200px; margin:0 auto; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1rem; margin-top:1rem;}
.card { background: var(--server-bg); padding:1rem; border-radius:1rem; text-align:center; position:relative; overflow:hidden; transition: all 0.3s; }
.card:hover { transform: scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,0.5);}
.card img { max-width:100%; height:200px; object-fit:cover; border-radius:0.5rem; margin-bottom:0.5rem;}

/* Animated Border */
.animated-border { border:2px solid transparent; border-radius:12px; background-clip: padding-box; position:relative;}
.animated-border::before { content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; background:linear-gradient(45deg,#1B0F23,#18111F,#1B0F23,#18111F); border-radius:14px; z-index:-1; animation:borderShift 4s linear infinite;}
@keyframes borderShift {0% {background-position:0 0;} 100% {background-position:400% 0;}}

/* Community Buttons */
.community-buttons { display:flex; justify-content:center; gap:2rem; margin-top:1rem;}

/* Footer */
footer {
    background: rgb(7 7 7 / 22%);
    color: #c72dae;
    text-align: center;
    padding: 2rem
32px
 1rem;
    border-radius: 1rem;
    margin-top: 2rem;
}

/* Responsive */
@media(max-width:768px){ header .container{flex-direction:column;align-items:flex-start;} .hero-logo{height:80px;} .hero-content h2{font-size:1.5rem;} .hero-content p{font-size:1rem;} .card img{height:150px;} }