:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #212529;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  --weiss: #fff;
  --schwarz: #000;
  /* --bs-danger-rgb: 176, 112, 73; */
}







main:before {
  display: block;
  content: " ";
  margin-top: 0rem;
  height: 3.5rem;
}
main {
  background-color: #eee;
}
main section {
  background-color: #fff;
  margin-bottom: 1.5rem;
}
label {
  margin-bottom: .5rem;
}
img.contain {
  width: 100%;
  object-fit: contain;
}
img.cover {
  width: 100%;
  object-fit: cover;
}







#avatargroup input[type="radio"] {
  display: none;
  position: relative;
}
#avatargroup input[type="radio"]:checked+label img {
  filter: drop-shadow(0px 0px 4px var(--bs-primary));
}










/* Warenkorb vergrössern und verkleinern */
#warenkorb-bereich .warenkorb-resize {
  width: 100%;
  position: absolute;
  z-index: 999;
  /*
  height: 1.7rem;
  background-color: #fff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  */
  height: 3rem;
  background: linear-gradient(0deg, rgba(255, 255, 255,0.0) 00%, rgb(255, 255, 255) 50%);
  border: none;
}
/*
#warenkorb-bereich .warenkorb-resize:hover {
  background-color: #f7f7f7;
}
*/
#warenkorb-bereich .warenkorb-resize::before {
  content: " ";
  background-color: #ccc;
  width: 2rem;
  height: 0.25rem;
  display: flex;
  position: absolute;
  align-self: center;
  top: 0.75rem;
  left: calc( (100% - 2rem) / 2 );
  border-radius: 0.25rem;
  z-index: 1000;
  opacity: 1.0;
  transition: all 0.5s ease;
}
#warenkorb-bereich .warenkorb-container {
  padding-top: 1rem;
  padding-left: 0rem;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  #warenkorb-bereich .warenkorb-resize {
    height: 100%;
    width: 1.7rem;
    /*
    box-shadow: none;
    */
  }
  #warenkorb-bereich .warenkorb-resize::before {
    content: " ";
    width: 0.25rem;
    height: 2rem;
    top: calc( (100% - 2rem) / 2);
    left: 0.75rem;
    align-self: center;
  }
  #warenkorb-bereich .warenkorb-container {
    padding-top: 0rem;
    padding-left: 1rem;
  }
}






#warenkorb-bereich .warenkorb-container {
  overflow-x: scroll;
}
#warenkorb-bereich {
  width: 100%;
  position: fixed;
  display: flex;
  transition: all 0.5s ease;
  overflow: hidden;
  height: 4rem;
  bottom: -4rem;
  left: 0%;
  border-radius: 10px 10px 0px 0px;
  z-index: 10000;
}
#warenkorb-bereich.sichtbar {
  bottom: 0rem;
}
#warenkorb-bereich.sichtbar.gross {
  height: 85%;
  bottom: 0rem;
}
#inhalt-bereich {
  transition: all 0.5s ease;
}
#inhalt-bereich.sichtbar.gross {
  pointer-events: none;
  user-select: none;
  opacity: 0.75;
}
#inhalt-bereich.sichtbar.gross::before {
  content: " ";
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.75);
  z-index: 10000;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #warenkorb-bereich {
    width: 560px;
    left: calc((100% - 560px) /2);
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  #haupt-bereich {
    position: relative;
  }
  #warenkorb-bereich {
    width: 320px;
    left: auto;
    right: -320px;
    top: 0;
    height: 100%;
    border-radius: 10px 0px 0px 10px;
  }
  #warenkorb-bereich.gross .warenkorb-resize::before {
    opacity: 0.0;
  }
  #warenkorb-bereich.gross:hover .warenkorb-resize::before {
    opacity: 1.0;
  }
  #warenkorb-bereich.sichtbar {
    right: -290px;
  }
  #warenkorb-bereich.sichtbar.gross {
    right: 0px;
    height: 100%;
  }
  #inhalt-bereich {
    width: 100%;
  }
  #inhalt-bereich.sichtbar.gross {
    width: calc(100% - 310px);
  }
  #inhalt-bereich .navbar {
    transition: all 0.5s ease;
  }
  #inhalt-bereich.sichtbar.gross .navbar {
    transform: translateX(calc(-50% - 155px)) !important;
  }
  #inhalt-bereich.sichtbar.gross {
    pointer-events: inherit;
    user-select: inherit;
    opacity: inherit;
  }
  #inhalt-bereich.sichtbar.gross::before {
    content: "";
    background-color: inherit;
    width: 0%;
    height: 0%;
    z-index: 10000;
  }
}















a.card,
a.card h1,
a.card h2,
a.card h3,
a.card h4,
a.card h5,
a.card h6,
a.card p {
  text-decoration: none;
}






.btn,
.card {
  border-radius: 0px;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-danger {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}
.btn-outline-danger {
  color: var(--bs-danger);
  border-color: var(--bs-danger);
}
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active {
  color: var(--weiss);
  background-color: var(--schwarz);
  border-color: var(--schwarz);
}
.btn-danger:focus,
.btn-danger:hover,
.btn-danger:active,
.btn-outline-danger:focus,
.btn-outline-danger:hover,
.btn-outline-danger:active {
  color: var(--weiss);
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}


.btn-check:active + .btn-primary,
.btn-check:focus + .btn-primary,
.btn-primary:active,
.btn-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(200, 200, 200, 0.5);
}





/* inaktive Buttons */
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #000;
  border-color: #000;
  color: #eee !important;
  opacity: 0.2;
}






.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: none !important;
}