/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

:root {
  --rect-color: rgba(255, 255, 255, 0.879);
  --main-color: goldenrod;
  --text-color: #b7c6df;
  --dark-grey-color: rgb(42, 40, 40);
  --light-grey-color: #343a40;
  --red-color: rgb(177, 24, 4);
}
.bd-placeholder-img0 {
  /* background-image: url("ChatGPT\ Image\ 2.\ Jan.\ 2026\,\ 16_53_27.png"); */
  background-image: url("header20j.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
}
.bd-placeholder-img1 {
  background-image: url("header-background2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.bd-placeholder-img2 {
  background-image: url("shop/shop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.bd-placeholder-img3 {
  background-image: url("Bandfoto2023.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.bbr_jew-img {
  background-image: url("/shop/bbr_jew.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}
.icon-menu {
  opacity: 95%;
}

.icon-menu ul  /*ul*/ {
  background-color: black;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.icon-menu-shop ul {
  box-shadow:
    -1px 1px 5px 2px black,
    1px 1px 5px 2px black;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.icon-menu-shop li {
  padding: 1em;
}
.hr-basic {
  max-width: 500px;
}
.icon-menu-shop {
  width: 200px;
  margin-bottom: 0.5em;
  margin-left: 2em;
  /* margin-right: 1em; */
}
.icon-menu a,
.icon-menu-shop a {
  display: block;
  text-decoration: none;
  color: white;
  text-align: center;
}

.icon-menu li,
.icon-menu-shop li {
  padding: 1.7% 2% 2% 2%;
  list-style-type: none;

  /* align-items: center; */
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* .btn-bd-primary {
  --bd-violet-bg:goldenrod;
  
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: goldenrod;
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: goldenrod;
  --bs-btn-hover-border-color: goldenrod;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color); 
  --bs-btn-active-bg: goldenrod;
  --bs-btn-active-border-color:  goldenrod;
} */
.carousel .btn {
  background-color: var(--red-color);
  border: var(--red-color);
  margin: 0;
}
.carousel .btn:hover {
  border: var(--main-color);
  color: black;
  margin: 0;
}

.releasebtn .btn-primary,
.releasebtn2 .btn-primary {
  /* background-color: rgb(177, 24, 4);
  border: rgb(177, 24, 4); */
  background-color: var(--light-grey-color);
  color: var(--bs-nav-link-color);
}
.releasebtn .btn,
.releasebtn2 .btn {
  font-weight: 0.5rem;
  border: var(--light-grey-color);
}

.releasebtn .btn-primary:hover,
.releasebtn2 .btn-primary:hover,
.btn:focus,
.btn:active,
.btn.active {
  color: var(--main-color);
}
.releasebtn p {
  margin: 0;
  margin-right: 1em;
  /* padding-bottom: 0.5em; */
  /* padding-right: 1em; */
  margin-bottom: 0.5em;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

body {
  background: black;
  font-family: Arial;
}
footer {
  margin-top: 2em;
  color: #b7c6df;
  text-align: left;
}
.background {
  background: rgb(42, 40, 40);
  background-image: url("header-background.jpg");
  background-blend-mode: darken;
  /* background-size: cover;  */
  background-repeat: repeat;
  /* padding-top: 2em; */
  padding-bottom: 2em;
}

.tabelle td {
  padding-left: 0;
  padding-right: 50px;
}
.tabelle th {
  color: white;
}
.tabelle {
  margin-bottom: 2rem;
}

.navbar .navbar-brand {
  color: var(--main-color);
}
.navbar a:hover {
  color: var(--main-color);
}
.navbar {
  padding-left: 10px;
  padding-right: 10px;
}
.navbar li {
  padding-left: 1em;
  padding-right: 1em;
  font-weight: 800;
}
/* .nav-link.active {
  color: goldenrod !important;
} */
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--main-color);
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
  color: var(--main-color);
  /* text-shadow: 4px 2px 5px rgb(177, 24, 4); */
  text-shadow: 0px 0px 10px var(--red-color);
}
.container-fluid {
  padding: 0;
}
/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.container-sm .row {
  font-size: small;
  /* font-weight: 300; */
  padding: 0;
  margin-top: 0.3em;
  margin-left: auto;
  margin-right: auto;
  /* margin-bottom: 1em; */
  border-style: solid;
  border-color: #46494f;
  /* background: linear-gradient( #46494afb, #5a7482fb);  */
  /* border-bottom: 3px solid black; */
  background-image: url("quadr.png");
  background-size: cover;

  border-width: 1px; /* falls nicht gesetzt */
}

.container-sm {
  padding: 0;
  padding-top: 1.5em;
  color: #b7c6df;
}
.container-xl {
  border-width: 3px;
  border-style: solid;
  border-color: var(--dark-grey-color);
  padding: 0;
}
.container-sm iframe {
  max-width: 100%;
}

.container-sm ul {
  padding: 0;
  margin: 0;
  color: white;
  font-weight: 600;
  list-style-type: none;
}
.container-sm ol {
  line-height: 1.4;
  list-style: square;
  padding: 0;
  margin: 0;
}

.tshop {
  text-align: left;
  margin-bottom: 1em;
}
.tblock {
  padding: 0;
  margin-bottom: 0.5em;
  text-align: center;
}
.Olcenter ol {
  /* width: 300px; */
  display: inline-block;
  text-align: left;
  margin-bottom: 0.3em;
}
.Olcenter ul {
  text-align: left;
}

.relH ul {
  line-height: 2;
  padding: 0;
  margin-top: 0;
  align-items: center;
}

.redHint {
  text-align: left;

  margin-left: 18em;
  padding: 6px;
  margin-bottom: 8px;
  background-color: var(--red-color);
  border-width: 3px;
  border-style: solid;
  border-color: white;
  color: white;
}
.redHint p {
  /* max-width: 700px; */
  margin: 0;
  font-size: smaller;
}
.container-sm li {
  list-style-position: inside;
  /* text-align: left; */
}

.container-sm {
  max-width: 950px;
}

.container-sm img {
  max-width: 100%;
}

.shop img {
  margin-bottom: 1em;
}
.container-lg {
  color: #b7c6df;
  max-width: 950px;
  /* background: var(--light-grey-color); */
  padding: 0;
  /* opacity: 0.9; */
}
.container-lg .col-md .row {
  border: 3px double var(--main-color);
  border-radius: 5px;
  border-style: outset;
  border-color: #46494afb;
  /* background: linear-gradient( #46494afb, #5a7482fb);  */
  /* border-bottom: 3px solid black; */
  background-image: url("quadr.png");
  background-size: cover;
}
.news {
  padding-top: 1em;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
  text-align: left;
  font-size: larger;
}
.news2 {
  margin-top: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 1.5em;
}

.stripe {
  background: url("stripe.png") no-repeat left center;
  background-size: auto 70%; /* Hintergrundbild passt sich der Höhe an */
  padding-left: 4px;
}

.stripe-title {
  color: #fff;
  font-weight: bold;
  font-size: 19px;
  line-height: 36px;
  display: inline-block; /* linksbündig bleiben */
}

.sidebs {
  margin-right: 1em;
  /* max-height: 40px; */
  margin-top: 1em;
  margin-bottom: 1em;
}

.shopblack {
  background-color: black;
  /* line-height: 2; */
  color: blue;
  font-weight: bold;
  box-shadow:
    -1px 1px 3px 2px black,
    1px 1px 3px 2px black;
  max-height: 20px;
}
.shopblack2 {
  background-color: black;
  /* line-height: 2; */
  color: blue;
  font-weight: bold;
  box-shadow:
    -1px 1px 3px 2px black,
    1px 1px 3px 2px black;
}
/* .sidebs {
  margin-top: 1em;
} */

.band p {
  text-align: justify;
  font-size: small;
}
.band img {
  padding-bottom: 1rem;
}
.band .col-sm-8 {
  padding-top: 1rem;
  padding-right: 2rem;
  line-height: 1.2;
  padding-bottom: 1.5rem;
}

.col-sm-8 {
  padding-bottom: 0.3rem;
  padding-top: 0.3rem;
}

.col-sm-4 {
  align-self: flex-end;
  /* padding-bottom: 0.2em; */
  /* padding-top: 4.5em; */
}
.col-sm-5 {
  padding-left: 3em;
  padding-bottom: 0.2em;
}
.col-sm-3 img {
  margin-top: 0.4em;
}
.col-sm-11 {
  height: 600px;
  padding-top: 1rem;
}

.col-sm iframe {
  margin-top: 0.5em;
}
.container-sm-9 {
  margin-top: 0.3em;
  margin-bottom: 0.2em;
}

.navbar-brand img {
  max-width: 90%;
}
.navbar-brand {
  margin: 0;
}
/* Featurettes
------------------------- */
.featurette {
  margin-left: 2rem;
  margin-top: 2rem;
}
.featurette-divider {
  margin: 5rem 0;
}

.featurette-heading {
  letter-spacing: 1rem;
  margin-top: 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
.featurette p {
  margin-left: 2rem;
  margin-right: 2rem;
}
hr.linear {
  border-color: black;
  border-width: 4px;
  margin-top: 0.2em;
  margin-bottom: 0.4em;
  margin-right: 4em;
}
.band .col-sm-4 {
  padding-top: 1.3em;
}
.bandp {
  padding-top: 2em;
}
.col-sm {
  margin-bottom: 0.5em;
}

.news2 img {
  min-width: 60%;
}
h2 {
  margin: 0;
}
.lyrics {
  color: white;
}
.releasebtn {
  margin-left: 2.2em;
}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
}
@media (max-width: 35em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .stripe {
    background-size: contain;
  }
}
@media (min-width: 576px) and (max-width: 900px) {
  .news2 img {
    min-width: 40%;
  }
  .news2 {
    margin-left: 5em;
  }
  .icon-menu-shop {
    margin-top: 0;
    margin-left: 2em;
    width: 160px;
  }
  .releasebtn {
    margin-left: 0.8em;
  }
}
@media (max-width: 576px) {
  .bd-placeholder-img0 {
    margin-top: 4em;
    background-position: top;
  }
  .container-sm .row {
    max-width: 350px;
    font-size: small;
    text-align: left;
  }

  .container-sm .row iframe {
    padding-left: 2.5em;
    padding-bottom: 1em;
    max-width: 90%;
  }
  .col-sm {
    font-size: smaller;
  }
  .container-sm li {
    list-style-position: outside;
    text-align: left;
    margin-left: 1em;
  }
  .background {
    background-repeat: repeat-y;
    background-size: auto;
  }
  .col-sm-4 {
    padding-top: 1em;
  }
  .Olcenter {
    text-align: left;
    margin-left: 3em;
  }

  .releasebtn p {
    margin-left: auto;
    margin-right: auto;
  }
  .releasebtn {
    max-width: 150px;
    margin-left: 1.9em;
  }
  .releasebtn2 {
    gap: 1em !important;
  }
  .relH {
    text-align: left;
    margin-left: 3em;
  }

  .icon-menu-shop {
    margin-top: 1em;
    margin-left: 0;
    width: 160px;
  }
  .news2 {
    padding: 0;
    margin: 0;
  }
  .news {
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1em;
    font-size: small;
  }

  .news iframe {
    width: 90%;
  }
  .news2 img {
    max-width: 70%;
    padding-left: 2.5em;
    padding-right: 1em;
    padding-bottom: 1em;
  }
  .container-lg h3 {
    font-size: small;
  }
  .redHint {
    margin: 0;
    margin-bottom: 1em;
    margin-left: 2em;
    margin-right: 3em;
  }
  .bd-placeholder-img0 {
    background-size: 110%;
  }
  .bd-placeholder-img1 {
    background-position: left;
  }

  .band .col-sm-8 {
    padding-left: 1em;
    padding-right: 1em;
  }
  .band .col-sm-4 img {
    max-width: 60%;
    padding: 0;
  }
  .col-sm-3 img {
    margin-left: 2em;
    min-width: 60%;
  }
  .band .releasebtn {
    gap: 1rem !important;
  }
  .shop {
    text-align: left;
    padding-left: 0.5em;
  }
  .icon-menu {
    font-size: small;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  }
  .shirts img {
    max-width: 70%;
  }
}