*,
*:before,
*:after,
p,
h2 {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

h2 {
    white-space: nowrap;
    font-size: clamp(1rem, 1.5vw, 2rem);
}

body,
#users {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 18px;
}

body {
    overflow: hidden;
}

a,
a:hover {
    color: #000 !important;
    text-decoration: none;
}

.vh-100 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.col-12 {
    flex: 1;
    display: grid
}

header,
footer {
    background: #e6e6e6 !important;
    color: #808080;
}

header {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

footer {
    box-shadow: rgba(50, 50, 93, 0.25) 0px -2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

footer img {
    height: 50px !important;
}

figure {
    width: 480px !important;
    border: 1px solid #ccc;
    padding: 0 !important;
    display: none;
    position: relative;
}

footer {
    transition: height 0.3s ease;
}

.slide-toggle {
    overflow: hidden;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f9fa;
    padding: 20px;
    border-top: 1px solid #dee2e6;
    transition: transform 0.3s ease-in-out;
    height: 100px;
    position: sticky;
}

.slide-toggle.show {
    height: 100%;
    position: fixed;
    width: 480px;
    margin: auto;
    background: grey !important;
}

.rechtliches,.toggleButton,.btn-close {
    border: none;
    padding: 0;
}

.einblenden > .toggleButton {
    height: 50px;
    width: 50px;
}

.inhalt,
.ausblenden.show,
.ausblenden2.show, .btntoggle, .imgd.show  {
    display: none;
}

.btntoggle  {
padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
  margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto;
}

.inhalt.show,
.ausblenden,
.ausblenden2, .btntoggle.show, .imgd {
    display: block;
    color: #fff
}

.imgd {
    margin:auto;
}

.einblenden.show {
    width: 100%;
    padding: 0px;
    text-align: right !important;
}

.list-group-item {
    margin-bottom: 5px !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 3px, rgba(0, 0, 0, 0.36) 0px 2px 4px;
}

.col-10
{
  justify-self: center;
  align-self: center;
}
.vh-100 {
  max-height: 100vh !important;
}

.modal-dialog{
  margin: auto,height: 100vh
}

.modal-content {
  height: 100vh;
  border: none;
  border-radius: 0;
}

.modal-header,modal-footer{
  border: none;
}

.btn-close{font-size:30px}
.modal-dialog {
height: 100%;
}
@media only screen and (max-width: 480px) {
  h2 {
    font-size: calc(16px + (24 - 16) * ((100vw - 0px) / (480 - 0)));
  }
}

@media screen and (max-width: 479px) {
  figure {
    width: auto !important;
  }
.modal.show .modal-dialog {
  margin: 0px;
}
  .responsive-image {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 414px) {
  h2 {
    font-size: calc(26px * 0.9);
  }
}

@media screen and (max-width: 480px) {
  .slide-toggle.show {
    height: 100%;
    position: fixed;
    width: 100%
  }

  h2 {
    font-size: calc(24px * 0.9);
  }

  .btn {
    text-align: left;
  }

  .mb-4 {
    margin-bottom: .5rem !important;
  }

  .bottom {
    padding-bottom: 90px;
  }
}