html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


body {
  margin: 1rem;
  font-family:
    -apple-system,     /* iOS, macOS */
    BlinkMacSystemFont,/* Chrome */
    "Segoe UI",        /* Windows */
    Roboto,            /* Android */
    Oxygen, Ubuntu, Cantarell, "Helvetica Neue", /* Linux */
    sans-serif;
    font-size: 1rem;
}

footer {
  text-align: center;
}
img {
  max-width: 100%;
}
/* ----------------  Tabs oben drüber --------------- */

.nav-tabs {
  display: flex;
  border-bottom: 1px solid #dee2e6;
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  background-color: #f8f9fa;
  color: #007bff;
  text-decoration: none;
  cursor: pointer;
}

.nav-tabs .nav-link:hover {
  border-color: #999;
  background-color: #dee2e6;
}

.nav-tabs .nav-link.active {
  background-color: #0D6EFD;
  color: white;
}

.tab-content {
  /* border: 1px solid #dee2e6; */
  border-top: none;
  padding: 1rem;
  background-color: #fff;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ------------- Branch Container nach rechts --------------- */

.block{
  margin-left: 4.6rem;
  
  @media (max-width: 600px) {
    margin-left: 0rem;
  }

  &.vm {
    background-color: rgb(248, 223, 223);
  
    &.hidden {
      display: none;
    }
  }

  &.vm-upload {
    background-color: rgb(248, 223, 223);
  
    &.hidden {
      display: none;
    }
  }

  &.vm-noupload {
    background-color: rgb(248, 223, 223);
  
    &.hidden {
      display: none;
    }
  }


  &.novm {
    background-color: rgb(220, 247, 220);
  
    &.hidden {
      display: none;
    }
  }

}

/* ------------- Hintergrund-Infos ------------- */

.background-item{
  padding: 0;
}

background-item .summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ------------- Checkliste ------------------- */

.checklist-item{
  border-bottom: 1px solid #ddd;
  padding: 1rem;

  @media (max-width: 600px) {
    padding-left: 0;
  }
}

.checklist-item .summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: inherit;

}

.title {
  font-size: inherit;
}

input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-left: 0rem;
}

button.arrow {
  all: unset; /* reset all Browser-/Button-Styles */
  cursor: pointer;
  font-size: 1rem;
  color: inherit; /* oder z. B. #0d6efd */
  padding: 0;
  margin-left: 1rem;
  line-height: 1;
  transform: translateY(0px);

  @media (max-width: 600px) {
    margin-left: 0.2rem;
  }
}

button.arrow::after {
  font-family: "fontello";
  content: '\e802'; /* nur ein Icon verwenden */
  display: inline-block;
  color: #0d6efd;
  transform: translateY(-2px);
  transform: rotate(0deg);
  transition: transform 0.1s ease;
}

button[aria-expanded="true"]::after {
  transform: rotate(90deg); /* oder 180deg für nach unten */
}

.details {
  padding-left: 4.3rem;
  font-size: 1rem;
  color: #444;

  &.hidden {
    display: none;
  }
}

/* ----------- Entscheid-Buttons ------------- */

.entscheid-buttons {
  display: flex;
  gap: 2rem;
  margin-left: 4.5rem;
}

button.entscheid {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid #007bff;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
  color: #007bff;
  text-decoration: none;
  cursor: pointer;
}

button.entscheid:hover{
  background-color: #0D6EFD;
  color: white;
}

button.entscheid.active{
  background-color: #0D6EFD;
  color: white;
}

/* ----------------------------------------------- */

div.alert {
  padding: 0.5em;
  margin: 1em;
  border-radius: 0.3em;

  @media (max-width: 600px) {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  
  &.error {
    background-color: #eee;
    border-left: 4px solid red;
  }

  &.hinweis {
    background-color: #cdd8f7;
    border-left: 4px solid #0D6EFD;
  }

  & p {
    line-height: 1.2rem;
    padding: 0rem;
    margin: 0rem;
  }
}

.alert.success { border-color: green; background: #e0ffe0; }
.alert.error { border-color: red; background: #ffe0e0; }