.body {
    background-color: rgb(0, 0, 0);
    h1 {
        color: #C7BEA0;
        font-weight: 800;

    }
}

#bjhead {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    margin: 50px;
    transition: filter 0.3s ease;
    z-index: -1;

}

.dunkel {
    filter: brightness(50%)
}

#sbmove {
    transition: filter 0.3s ease;
}

.dunkels {
    filter: brightness(50%)
}

#sbmoves {
    transition: filter 0.3s ease;
}

.dunkelss {
    filter: brightness(50%);
}

.sidebanner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    padding-inline: clamp(16px, 8vw, 120px);
    gap: 260px;
    z-index: -1;
    margin-top: 100px;
}

.sidebanner.bewegen {
    transform: translateY(200px);
}


.sideinfo {

    margin-top: 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;


}
.navbar {
    
    display: flex;
    left: 160px;
    margin-top: 5px;
    right: 50px;
    gap: 20px;
    padding: 5px;
    background-color: transparent;
    border-radius: 5px;

    a {
        color: #C7BEA0;
        text-decoration: none;
        font-size: 16px;
        padding: 5px 5px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        -webkit-text-stroke: 1px white;
        text-shadow: 0px 8px 12px #ffffff98;



}

a:hover {
    box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.04),
    0px 4px 8px rgba(255, 255, 255, 0.07),
    0px 10px 19px rgba(255, 255, 255, 0.11),
    0px 18px 34px rgba(255, 255, 255, 0.15),
    0px 28px 53px rgba(255, 255, 255, 0.19),
    0px 40px 76px rgba(255, 255, 255, 0.22),
    0px 55px 104px rgba(255, 255, 255, 0.26);
    background-color: rgb(163, 163, 163);
    filter: brightness(1);
    filter: blur(1);
    padding: 3px 3px;
    border-radius: 5px;
    border: 2px solid #C7BEA0;
    background-color: #C7BEA0;
    color: white;
    text-decoration: underline;
    -webkit-text-stroke: 0px black;
    cursor: pointer;
    transform: scale(1.3);


}
.band {
    background-color: #C7BEA0;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.04),
    0px 4px 8px rgba(255, 255, 255, 0.07),
    0px 10px 19px rgba(255, 255, 255, 0.11),
    0px 18px 34px rgba(255, 255, 255, 0.15),
    0px 28px 53px rgba(255, 255, 255, 0.19),
    0px 40px 76px rgba(255, 255, 255, 0.22),
    0px 55px 104px rgba(255, 255, 255, 0.26);
}

}

.schnoerkel1 {
    width: 400px;
    display: flex;
    justify-content: center;
    left: 40%;
}
.schnoerkel2 {
    width: 400px;
    display: flex;
    justify-content: center;
    left: 40%;
    margin-top: 0px;
}



.maininfo {
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;   
}



.maim {
    width: 15%;          /* füllt die Grid-Spalte */
  max-width: 1000px;     /* optische Grenze */
  height: auto;         /* WICHTIG */
  display: block;
  margin:  auto;

}

.bandfotos p {
    color: #C7BEA0;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 20px;
}

.bandfotos span {
    color: #C7BEA0;
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 15px;
    margin-top: 0;
}



h3 {
    color: #C7BEA0;
    display: flex;  
    text-align: center;
    justify-content: center;
    padding: 3%;
    letter-spacing: 0.8px;
    font-size: 30px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

* {
  box-sizing: border-box;
}

/* Seitenabstand proportional zum Bildschirm */
.page {
  padding-inline: clamp(16px, 8vw, 120px);
}

/* Grid */
.bandfotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  max-width: 800px; /* verhindert extremes Auseinanderziehen */
  margin: 0 auto;    /* echte Zentrierung */
}

/* einzelnes Mitglied */
.member {
  width: 100%;
  text-align: center;

}

/* Bilder */
.member img {
  width: 100%;          /* füllt die Grid-Spalte */
  max-width: 300px;     /* optische Grenze */
  height: auto;         /* WICHTIG */
  display: block;
  margin: 0 auto;
}

/* Namen */
.member p {
    margin-top: 8px;
    margin-bottom: 3px;
  font-weight: 500;
}



.abspann {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 20px;


    .facebookp:hover {
    box-shadow: 0px 4px 3px rgba(0, 97, 255, 0.09),
    0px 16px 11px rgba(0, 97, 255, 0.18),
    0px 35px 25px rgba(0, 97, 255, 0.26),
    0px 63px 45px rgba(0, 97, 255, 0.35),
    0px 98px 70px rgba(0, 97, 255, 0.44);
    filter: brightness(1.5);
    transform: scale(1.3);
    }


    
    .instagramp:hover {
    box-shadow: 0px 4px 3px rgba(230, 59, 122, 0.09),
    0px 16px 11px rgba(230, 59, 122, 0.18),
    0px 35px 25px rgba(230, 59, 122, 0.26),
    0px 63px 45px rgba(230, 59, 122, 0.35),
    0px 98px 70px rgba(230, 59, 122, 0.44);
    filter: brightness(1.5);
    transform: scale(1.3);
    }
}
.cimp {
    flex-direction: column;
    position: relative;
    top: 10px;
    display: flex;
    gap: 10px;
    justify-content: space-evenly;
    align-items: center;
    margin: 20px;
    a {
        color: #C7BEA0;
    display: flex;
    letter-spacing: 0.8px;
    font-size: 10px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }

}

.footer {
    display: flex;
    justify-content:space-evenly;
    padding-left: 30%;
    padding-right: 30%;
    padding-top:  20px;
    padding-bottom: 20px;
    a {
    display: flex;
    color: #C7BEA0;
    letter-spacing: 0.8px;
    font-size: 10px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }‚

}