#handprint-tab h1,
#handprint-tab h2 {
  color: #7f449d;
  border-color: rgba(127, 68, 157, 204);
}

#result-handprint-tab[data-answer="living"] #h_intro_text i {
  color: #286077;
}
#result-handprint-tab[data-answer="food"] #h_intro_text i {
  color: #2b7a5f;
}
#result-handprint-tab[data-answer="mobility"] #h_intro_text i {
  color: #832364;
}
#result-handprint-tab[data-answer="consumption"] #h_intro_text i {
  color: #f29d38;
}
.result-selection {
  display: none;
}
.result-handprint>a {
  float: right;
}
body.mode-handprint div.result-selection {
  justify-content: center;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  grid-template-rows: auto auto;
}
div.result-selection ul {
  display: flex;
  grid-area: 1 / 2 / 3 / 4;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px; /* Abstand zwischen Buttons */
  align-items: center; /* vertikale Ausrichtung */
}
div.result-selection ul li {
  width: 50%;
  text-align: center;
}
div.result-selection ul li img {
  opacity: 0.3;
}
div.result-selection ul li.active img {
  opacity: 1;
}
div.result-selection .btn {
  grid-area: 2 / 2 / 3 / 4;
  background-color: #38713f;
  border-color: #38713f;
  color: #fff;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  z-index: 9;
}
.idea-gen > div {
  opacity: 0.5;
}
.idea-gen > div .carousel {
  display: none;
  font-size: 14px;
  color: white;
  margin: 5px;
  text-align: center;
}
.idea-gen > div > h3 + div {
  display: flex;
}
.idea-gen > div > h3 {
  line-height: 2rem;
  text-align: center;
}
.idea-gen > div > div,
.idea-gen .carousel.slide {
  aspect-ratio: 1/1;
  overflow: hidden;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
}
.idea-gen .carousel-indicators {
  bottom: 0;
}
.idea-gen .carousel-indicators li {
  height: 8px;
  width: 8px;
  margin: 0 2px;
}
.idea-gen > div > div > i {
  font-size: 3rem;
}

/* #result-handprint-tab div.accordion div li {
  display: none;
}
#result-handprint-tab div.accordion div li.t_all {
  display: block;
} */
#result-handprint-tab[data-val1="h_q1_a"] div.accordion div li.t_h_q1_a,
#result-handprint-tab[data-val1="h_q1_b"] div.accordion div li.t_h_q1_b,
#result-handprint-tab[data-val1="h_q1_c"] div.accordion div li.t_h_q1_c,
#result-handprint-tab[data-val1="h_q1_d"] div.accordion div li.t_h_q1_d {
  display: block;
}
#result-handprint-tab[data-answer="living"] .idea-gen > div.living i,
#result-handprint-tab[data-answer="food"] .idea-gen > div.food i,
#result-handprint-tab[data-answer="mobility"] .idea-gen > div.mobility i,
#result-handprint-tab[data-answer="consumption"] .idea-gen > div.consumption i {
  display: none;
}
#result-handprint-tab[data-answer="living"] .idea-gen > div.living,
#result-handprint-tab[data-answer="food"] .idea-gen > div.food,
#result-handprint-tab[data-answer="mobility"] .idea-gen > div.mobility,
#result-handprint-tab[data-answer="consumption"] .idea-gen > div.consumption {
  opacity: 1;
}
#result-handprint-tab[data-answer="living"] .idea-gen > div.living .carousel,
#result-handprint-tab[data-answer="food"] .idea-gen > div.food .carousel,
#result-handprint-tab[data-answer="mobility"]
  .idea-gen
  > div.mobility
  .carousel,
#result-handprint-tab[data-answer="consumption"]
  .idea-gen
  > div.consumption
  .carousel {
  display: flex;
  flex-grow: 1;
  margin: 0;
}
#tips_idea div > ul {
  margin-left: 2em;
}

#start-tab .mode-section .handprint-selection {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url(../img/handabdruck.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding-left: 15px;
  padding-right: 15px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
}
body.mode-handprint #start-tab .mode-section .handprint-selection {
  background-image: url(../img/handabdruck.jpg);
}

#start-tab .mode-section .handprint-selection .call-to-action {
  flex: 1;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
  font-size: 10px;
}