/* Ergänzungen für About Hintergrund */
.about-hero {
position: relative;
min-height: 40vh;
background: url('../img/vcvv-min.jpg') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.about-hero .overlay {
position: absolute;
inset: 0;
backdrop-filter: brightness(0.45);
}
.about-hero-content { position: relative; text-align:center; }


/* Member Cards */
.members { padding: 4rem 1rem; }
.member-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.member-card {
background: var(--surface);
padding: 1.2rem;
border-radius: var(--radius);
text-align: center;
}
.member-card img {
width:100%; border-radius: var(--radius); margin-bottom:1rem;
}
.member-card h3 { margin-bottom: .5rem; }
.member-card ul { text-align:left; margin-top:.5rem; }
.member-card li { margin-bottom:.3rem; }


/* Mobile Nav Fix */
@media (max-width:700px){
.site-nav{
display:none;
flex-direction:column;
gap:1rem;
background:var(--surface);
padding:1rem;
border-radius:var(--radius);
position:fixed;
right:1rem;
top:60px;
}
}

/* modern.css — minimal, responsive, dark theme */
:root{
--bg:#050506;
--surface:#0b0b0d;
--accent:#ff4747;
--muted:rgba(255,255,255,0.75);
--radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:linear-gradient(180deg,var(--bg),#000);
color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{position:fixed;inset:0 0 auto 0;background:transparent;padding:.8rem 0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;letter-spacing:2px;color:#fff;text-decoration:none}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.4rem}
.site-nav{display:flex;gap:1.2rem}
.site-nav a{color:var(--muted);text-decoration:none;font-weight:600}
.site-nav a:hover{color:#fff}


/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;background: url('../img/vcvv-min.jpg') center/cover no-repeat}
.hero-content{text-align:center;padding:4rem 1rem}
.hero h1{font-size:clamp(2.5rem,7vw,5rem);letter-spacing:6px;margin-bottom:.4rem}
.lead{opacity:.85;font-size:1.125rem}
.hero-ctas{margin-top:1.8rem;display:flex;gap:.8rem;justify-content:center}
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;transition:transform .12s ease}
.btn:hover{transform:translateY(-3px)}
.btn.outline{background:transparent;border:2px solid var(--accent)}

.projekte{min-height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.projekte div{margin:10px;padding:20px;}

/* CONTENT */
.content{padding:6rem 1rem}
.site-footer{padding:2rem 0;text-align:center;color:var(--muted)}


/* RESPONSIVE */
@media (max-width:700px){
.site-nav{position:fixed;right:0;top:64px;background:var(--surface);flex-direction:column;padding:1rem;border-radius:8px;display:none}
.nav-toggle{display:block}
}


/* accessibility focus */
a:focus,button:focus{outline:3px solid rgba(255,71,71,0.25);outline-offset:3px}

/* CALENDAR */
.calendar-section {
  margin-top: 3rem;
}

.calendar {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: 10px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.calendar-header button {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.5rem;
  cursor: pointer;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
}

.day {
  min-height: 90px;
  background: #0e0e12;
  border-radius: 6px;
  padding: .4rem;
  cursor: pointer;
}

.day span {
  font-size: .8rem;
  opacity: .7;
}

.event {
  margin-top: .3rem;
  font-size: .7rem;
  background: var(--accent);
  border-radius: 4px;
  padding: .15rem .3rem;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: 10px;
  width: 300px;
}

.modal-content input {
  width: 100%;
  margin-bottom: .8rem;
  padding: .5rem;
  border-radius: 6px;
  border: none;
}

.day.today {
  outline: 2px solid var(--accent);
  background: rgba(255,71,71,0.15);
}

.next-event {
  margin-bottom: 2rem;
  margin-top: 3rem;
}

.next-event-card {
  background: var(--surface);
  border-left: 4px solid var(--accent);
  padding: 1rem;
  border-radius: 8px;
}

.next-event-card span {
  display: block;
  font-size: .85rem;
  opacity: .8;
  margin-top: .3rem;
}

.muted {
  opacity: .6;
}

.tag {
  display: inline-block;
  padding: .25rem .5rem;
  margin: .2rem;
  border-radius: 4px;
  font-size: .75rem;
  cursor: pointer;
}

.tag.suggestion {
  background: #222;
}

.tag.selected {
  background: var(--accent);
}

#tagSuggestions {
  margin-top: .5rem;
}
.tag.suggestion span:last-child:hover {
  color: #f55;
}
.btn.danger {
  background: #a33;
  margin-top: .5rem;
  display:inline-block;
  padding:.7rem 1.4rem;
  border-radius:8px;
}