:root{
  --bg:#070607;
  --panel:#0f0e13;
  --accent:#7b3bd9; /* lila */
  --accent-2:#a57ef0;
  --muted:#bdb7c9;
  --text:#eae7ee;
}
*{box-sizing:border-box}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background:linear-gradient(180deg,var(--bg) 0%, #0b0810 60%); color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:1000px;margin:0 auto;padding:2rem}
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(11,8,16,0.6),rgba(11,8,16,0.2));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:Playfair Display,serif;font-weight:700;color:var(--accent);text-decoration:none;font-size:1.25rem}
.nav a{color:var(--muted);text-decoration:none;margin-left:1rem;font-weight:600}

.brand-wrap{display:flex;align-items:center;gap:.75rem}
.server-profile{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 4px 18px rgba(123,59,217,0.08)}

/* Dropdown navigation */
.nav{display:flex;align-items:center;gap:1rem}
.nav-item{position:relative;display:inline-block;padding-bottom:6px}
.dropdown-menu{position:absolute;top:100%;left:0;background:var(--panel);border-radius:8px;padding:.5rem;box-shadow:0 8px 30px rgba(0,0,0,0.6);display:none;min-width:170px;border:1px solid rgba(255,255,255,0.03);z-index:100000;pointer-events:auto}
.dropdown-menu a{display:block;padding:.45rem .65rem;color:var(--muted);text-decoration:none}
.dropdown-menu a:hover{background:linear-gradient(90deg,rgba(123,59,217,0.08),transparent);color:var(--text)}
.nav-item:hover .dropdown-menu,.nav-item:focus-within .dropdown-menu{display:block}

/* Allow JS-toggle for touch/click devices */
.nav-item.open .dropdown-menu{display:block}

.nav a{color:var(--muted);text-decoration:none;margin-left:1rem;font-weight:600;display:inline-block}

.hero{padding:6rem 0; background-color: rgba(10,8,12,0.6); background-image: linear-gradient(180deg, rgba(7,6,7,0.65), rgba(7,6,7,0.35)), url('Images/Serverprofil.jpg'); background-size:cover; background-position:center; border-bottom:1px solid rgba(255,255,255,0.02)}
.hero-inner{max-width:780px}

/* Fullscreen hero variant: take full viewport height and show image without heavy cropping */
.hero.fullscreen{min-height:100vh;padding:0;display:flex;align-items:center;background-size:contain;background-repeat:no-repeat;background-position:center center;border-bottom:0}
.hero.fullscreen .hero-inner{padding:6rem 0}
.hero h1{font-family:Playfair Display,serif;font-size:3rem;margin:0 0 .25rem;color:var(--text);letter-spacing:0.5px}
.tag{color:var(--accent-2);font-weight:600;margin:0 0 .5rem}
.lead{color:var(--muted);font-size:1.05rem;margin-bottom:1rem}
.btn{display:inline-block;padding:.8rem 1.2rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#070607;border-radius:8px;text-decoration:none;font-weight:700}

.panel{padding:3.25rem 0}
.panel h2{font-family:Playfair Display,serif;color:var(--accent);margin-top:0}
.panel p{color:var(--muted);line-height:1.6}

.story article{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:1.25rem;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.story p{color:var(--text);margin:0 0 .9rem}

/* Bewerbungsformular */
.apply-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.apply-form label{display:block;color:var(--muted);font-size:.95rem}
.apply-form input,.apply-form select,.apply-form textarea{width:100%;padding:.5rem;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text)}
.apply-form .btn{grid-column:1 / -1;width:fit-content}
.apply-result{margin-top:1rem;background:rgba(255,255,255,0.02);padding:1rem;border-radius:6px;border:1px solid rgba(255,255,255,0.03)}

@media (max-width:800px){
  .apply-form{grid-template-columns:1fr}
}

.join .muted{color:rgba(189,183,201,0.8)}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:1.5rem 0;text-align:center;color:var(--muted)}

@media (max-width:600px){
  .hero h1{font-size:2rem}
  .header-inner{padding:0 .5rem}
  .container{padding:1rem}
  .nav a{margin-left:.5rem}
}

/* Galerie & Mitglieder */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1rem}
.gallery-grid .photo{background-size:cover;background-position:center;height:180px;border-radius:10px;display:flex;align-items:flex-end;justify-content:flex-start;padding:.75rem;color:var(--text);font-weight:700;position:relative;overflow:hidden}
.gallery-grid .photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.45));opacity:.9}
.gallery-grid .photo span{position:relative;z-index:2}
.gallery-grid .photo:hover{transform:translateY(-6px);transition:transform .18s ease}
.members-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.member{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);padding:1rem;border-radius:12px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.02)}
.member img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:.6rem}
.member h4{margin:.35rem 0 0;color:var(--accent)}
.member p{margin:.25rem 0 0;color:var(--muted)}
.card{transition:transform .18s ease}
.card:hover{transform:translateY(-6px)}

/* Story improvements */
.story-title{font-family:Playfair Display,serif;color:var(--accent);font-size:2rem;margin-bottom:0.5rem}
.story-article{background:linear-gradient(180deg,rgba(255,255,255,0.015),transparent);padding:1.5rem;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.story-article p{color:var(--text);line-height:1.7;margin:0 0 1rem}

/* Global silver-ribbon overlay and banner helpers */
body{position:relative}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url('Images/JR4nr.jpg');
  background-size:cover;
  background-position:center;
  opacity:0.06;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:0;
}
/* Ensure main content sits above the overlay */
main, footer.site-footer{position:relative;z-index:1}
/* keep header sticky and above the overlay */
.site-header{z-index:100001}

.banner{width:100%;height:260px;border-radius:10px;background-size:cover;background-position:center;margin:12px 0 18px;box-shadow:0 8px 30px rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.03)}
.banner.small{height:160px}
.banner.tall{height:340px}

/* Gallery banners: show full image (contain) without cropping */
.gallery-banner{width:100%;height:420px;border-radius:10px;background-size:contain;background-repeat:no-repeat;background-position:center;margin:14px 0;box-shadow:0 10px 40px rgba(0,0,0,0.6);background-color:rgba(7,6,7,0.45);border:1px solid rgba(255,255,255,0.03)}
.gallery-banner.small{height:220px}
@media (max-width:800px){
  .gallery-banner{height:260px}
}