:root {
  --red: #d70000;
  --blue: #4da3ba;
  --dark-blue: #00637e;
  --petrol: #66a09f;
  --bg-turquoise: #ccdfdf;
  --bg-skyblue: #b3d8e2;
  --bg-red: #f3b3b3;
  --progress-red: #eb8080;
  --bg-orange: #fbe0be;
  --bg-beige: #fff0b3;
  --light-grey: #d3d3d3;
  --yellow: #fffae6;

  --purple: #5b085a;
  --skyblue: #5cc5f3;
  --darkcyan: #006160;
  --orange: #f29725;
  
  --color-focus: #f29725;

  --screen-padding: 20px 20px;
  
  --size: 50px; /* Größe des Diagramms */
  --value: 0;   /* Wert für das erste Diagramm */
  --value1: 0;  /* Wert 1 für das zweite Diagramm */
  --value2: 0;  /* Wert 2 für das zweite Diagramm */

}


/* Beispielstile */
  body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Ebert Regular', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @media screen and (min-width: 1024px){
    body, html {
      font-size: 1.3rem;
    }
  }
  @media screen and (min-width: 1366px){
    body, html {
      font-size: 1.4rem;
    }
  }
  body * {
    font-family: 'Ebert Regular', sans-serif;
    font-weight: 400;
    font-size: 1em;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  body span {
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
  }
  
  .screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-turquoise);
    overflow: hidden;
  }
  
  .screen[aria-hidden="false"] {
    display: flex;
  }

  
  .screen-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    padding: var(--screen-padding);
    margin-left: auto;
    margin-right: auto;
  }

  a {
    text-decoration: none;
    color: black;
  }
  a, button {
    cursor: pointer;
  }

  
  /* Focus */
    :is(a, button, input, textarea, select, label):is(:focus-visible) {
      outline: 2px solid var(--color-focus);
    }
    #start-screen > a:is(:focus-visible) {
      outline-offset: -2px;
    }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Ebert Headline', sans-serif;
    font-weight: 700;
    margin: 0;
    text-align: center;
    line-height: 1;
  }
  h1 {
    font-size: 1.4em;
  }
  h3, h4, h5, h6 {
    font-family: 'Ebert Regular', sans-serif;
    font-weight: 400;
  }
  @media screen and (min-width: 768px){
    h1, h2, h3, h4, h5, h6 {
      line-height: 1.2;
    }
  }

  /* Icon Font - Material Symbols Rounded*/
    .material-symbols-rounded {
      font-family: 'Material Symbols Rounded';
      font-weight: 400;
    }

  strong {
    font-family: 'Ebert Bold', sans-serif;
    font-weight: 600;
  }

  /* Button */
    button {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border: none;
      outline: none;
      border-radius: 0;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      padding: 12px 20px;
      background-color: #fff;
      background-image: none;
      color: var(--red);
      font-size: .8em;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
    }
    .btn-right, button.next {
      position: fixed;
      left: unset;
      right: 20px;
      top: unset;
      bottom: 20px;
    }
    .btn-center {

    }
    button:not(#start-quiz):is(:hover, :focus, :active, :focus-visible, :focus-within) {
      background-color: var(--red);
      color: #fff;
    }
    button#start-quiz:is(:hover, :active) {
      background-color: var(--red);
      color: #fff;
    }
    @media screen and (max-width: 900px){
      /* .progress-bar-wrapper {
        bottom: 80px;
      } */
      .question button.next {
        bottom: 84px;
      }
    }
  
  
/* Startbildschirm */
  #start-screen a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    background-image: url(img/Titelbild-Zukunftstraum-rechts.webp);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
  }
  #start-screen a .screen-wrapper {
    justify-content: flex-end;
  }

  #finish-screen {
    background: #fff;
    background-image: url(img/Titelbild-Zukunftstraum-rechts.webp);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
  }
  #finish-screen .finish-screen-overlay {
    background-color: rgba(255,255,255,.6);
    width: 100%;
    height: 100%;
  }
  .qr-code-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%
  }
  .qr-code-container * {
    text-align: center;
  }
  .qr-code-container > .column {
    width: 50%;
  }
  .qr-code-container .qr-code, 
  .qr-code-container .qr-code:is(:hover, :focus, :active, :focus-visible, :focus-within) {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.2) !important;
    box-shadow: none;
    border: 2px solid transparent;
    max-width: 300px;
    max-height: 300px;
    display: block;
  }
  .qr-code-container .qr-code:is(:hover, :focus, :active, :focus-visible, :focus-within) {
    border-color: var(--red);
  }
  .qr-code-container .qr-code img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Headline (Thought Bubble) */
    .thought-bubble {
      position: absolute;
      top: 55%;
      left: 0;
      width: calc(100% - 40px);
      width: auto;
      hyphens: auto;
    }
    .thought-bubble .app-title span {
      font-size: 1em;
    }
    .thought-bubble * {
      font-family: 'Ebert Headline', sans-serif;
      font-weight: 700;
      color: #fff;
      text-align: left;
    }
    .thought-bubble .app-title {
      margin: 0;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 36px;
    }
    .thought-bubble .app-title span {
      background-color: var(--dark-blue);
      padding: 4px 16px 4px 20px;
      line-height: 1.2;
    }

    @media screen and (min-width: 350px){
      .thought-bubble .app-title  span {
        font-size: clamp(1.2em, 11vw, 2em);
      }
    }
    @media screen and (min-width: 600px){
      .thought-bubble .app-title span {
        padding: 4px 24px 4px 46px;
      }
    }
    @media screen and (min-width: 768px){
      .thought-bubble .app-title {
        gap: 32px;
      }
      .thought-bubble .app-title span {
        padding: 4px 24px 4px 98px;
      }
    }
    @media screen and (min-width: 1024px){
      .thought-bubble .app-title span {
        padding: 4px 24px 4px 114px;
      }
    }
    @media screen and (min-width: 1366px){
      .thought-bubble .app-title span {
        padding: 4px 24px 4px 130px;
      }
    }
    

  /* Logo FES */
    .logo {
      display: none;
    }
    .logo img {
      width: clamp(160px, 60%, 300px);
      height: auto;
      margin: 20px;
      float: right;
    }

/* Intro Screen */
  #intro-screen {
    background: var(--bg-turquoise);
  }
  #intro-screen p {
    text-align: center;
  }


/* Quiz */
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  text-align: center;
}

.question {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  padding: var(--screen-padding);
}
.question-id-1, .question-id-2 {
  background: var(--bg-red);
}
.question-id-3 {
  background: var(--bg-skyblue);
}
.question-id-4 {
  background: var(--bg-orange);
}
.question-id-5 {
  background: var(--bg-skyblue);
}
.question-id-6 {
  background: var(--bg-beige);
}

.question h3 {
  font-family: 'Ebert Headline', sans-serif;
  font-weight: 700;
  font-size: 1.2em;
  max-width: 1024px;
}

/* Options */
  .options {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;

    width: 100%;
    max-width: 400px;
  }
  @media screen and (min-width: 1366px){
    .options {
      max-width: 600px;
    }
  }

  /* Question 4 - Jahrzehnt */
    /* .question-id-4 h3 {
      max-width: 720px;
    } */
    .question-id-4 .options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

  /* Question 5 - Aussage aktuelles Leben */
    :is(.question-id-5, .question-id-6) .options {
      max-width: 720px;
    }

  .question > .options {
    margin-top: 20px;
  }

  .options label {
    text-align: left;
    /* padding-left: 26px; */
    position: relative;
    margin: 0 0 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-items: flex-start;
    cursor: pointer;
  }

  input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    width: 20px;
    height: 20px;
    /* height: 64%;
    width: auto;
    aspect-ratio: 1 / 1; */
    border: 2px solid #000;
    margin: 1px 0 0;
    /* margin: 0;
    position: absolute;
    left: 0;
    top: 4px; */
  }
  input[type="radio"]:checked {
    background-color: var(--red);
    border-color: var(--red);
  }
  label input + span {
    padding-left: 12px;
    width: calc(100% - 20px);
  }
  @media screen and (min-width: 768px){
    input[type="radio"] {
      margin: 4px 0 0;
    }
  }
  @media screen and (min-width: 1024px){
    input[type="radio"] {
      width: 24px;
      height: 24px;
    }
  }
  @media screen and (min-width: 1366px){
    input[type="radio"] {
      margin: 6px 0 0;
      width: 26px;
      height: 26px;
    }
  }


/* Modal no Selection */
  .modal-no-selection {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
  }
  .modal-no-selection.vsbl {
    display: flex;
  }
  .modal-no-selection .alert-modal-wrapper {
    background-color: #fff;
    background-color: var(--bg-turquoise);
    padding: 20px;
    width: 90%;
    max-width: 400px;
  }
  .modal-no-selection .alert-modal-wrapper * {
    text-align: center;
  }

  button.closeModal {
    margin: 20px auto 0;
  }


/* Progress Bar */
.progress-bar-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: unset;
  left: 50vw;
  bottom: 30px;
  transform: translateX(-50%);
  
  width: 90%;
  width: 68%;
  max-width: 560px;
}
#progress-bar-container {
  width: 100%;
  height: 5px;
  background-color: #fff;
  margin: 10px 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
}

#progress-bar {
  position: relative;
  width: 0%;
  height: 100%;
  background-color: var(--progress-red);
  transition: width 0.5s ease-in-out;
}

#progress-bar .progress-bar-status {
  position: absolute;
  left: 100%;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
}
.progress-bar-end {
  background-color: var(--red);
  height: calc(100% + 6px);
  width: auto;
  aspect-ratio: 1/1;
  margin: -3px 0;
}
.progress-bar-percent {
  position: absolute;
  top: unset;
  bottom: calc(100% + 6px);
  white-space: nowrap;
  color: var(--red);
  font-size: .8em;
  font-family: 'Ebert Bold', sans-serif;
}


/*----- Sub Slides -----*/
  
  .sub-slides {
    width: 100%;
    max-width: 1200px;
    padding: 4px 20px 0;
  }
  @media screen and (min-width: 768px){
    .sub-slides {
      padding: 20px 20px 0;
    }
  }

  .sub-slide-options-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 880px;
    margin: 20px auto 0;
  }
  .sub-slide-options-wrapper h4 {
    text-align: left;
    font-family: 'Ebert Bold', sans-serif;
  }
  @media screen and (min-width: 600px){
    .sub-slide-options-wrapper {
      flex-direction: row;
    }
    .sub-slide-options-wrapper > * {
      width: 50%;
    }
  }


  /* Sub Slides Navi */
    .bullets {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
    }

    .bullets button {
      position: static;
      background: transparent;
      padding: 4px;
      box-shadow: none;
    }

    .bullet {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #fff;
      margin: 0 5px;
      padding: 0;
    }

    .bullet.active {
      background-color: var(--red);
    }
    .bullets .bullet.active:first-child {
      margin-left: 50px;
    }
    .bullets .bullet.active:last-child {
      margin-right: 50px;
    }
    @media screen and (min-width: 1024px){
      .bullets .bullet.active:first-child {
        margin-left: 63px;
      }
      .bullets .bullet.active:last-child {
        margin-right: 63px;
      }
    }

    .bullets button {
      font-size: 1.6em;
    }

    .navigation {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }





/*----- Result Screen -----*/

  /* Loading Overlay Hour glass */
    #overlay-loading {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      justify-content: center;
      align-items: center;
      background: #ccdfdf;
      z-index: 1000;
      opacity: 1;
    }
    #overlay-loading[aria-hidden="true"] {
      display: none;
    }
    #overlay-loading[aria-hidden="false"] {
      display: flex;
    }
    #overlay-loading.fade-out {
      opacity: 0;
      display: none;
      animation: overlay-fade-out 1s forwards;
    }
    @keyframes overlay-fade-out {
      0% {
        opacity: 1;
        display: flex;
      }
      99% {
        opacity: 0;
        display: flex;
      }
      100% {
        opacity: 0;
        display: none;
      }
    }

    .hourglass {
      display: block;
      background: #ccdfdf;
      margin: 3em auto;
      width: 2em;
      height: 4em;
      animation: hourglass 1s linear infinite;
    }

    .outer {
      fill: #ffffff;
    }

    .middle {
      fill: #ccdfdf;
    }

    @keyframes hourglass {
      0% {
          transform: rotate(0deg);
          box-shadow: 
              inset #d70000 0 -0em 0 0,
              inset #ccdfdf 0 -2em 0 0,
              inset #d70000 0 -4em 0 0;
      }
      80% {
          transform: rotate(0deg);
          box-shadow: 
              inset #d70000 0 -2em 0 0,
              inset #ccdfdf 0 -2em 0 0,
              inset #d70000 0 -2em 0 0;
      }
      100% {
          transform: rotate(180deg);
          box-shadow: 
              inset #d70000 0 -2em 0 0,
              inset #ccdfdf 0 -2em 0 0,
              inset #d70000 0 -2em 0 0;
      }
    }



  /* Result Slides */
    .result-slide {
      width: 100%;
      max-width: 1200px;
      /* padding: 20px; */
    }
    .result-slide > * {
      margin-bottom: 20px;
    }

  /* Result Navi */
    .result-navi {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;

      position: fixed;
      top: unset;
      bottom: 20px;
    }
    @media screen and (min-width: 768px){
      .result-navi {
        bottom: 30px;
      }
    }
    @media screen and (min-width: 1024px){
      .result-navi {
        bottom: 40px;
      }
    }
    @media screen and (min-width: 1366px){
      .result-navi {
        bottom: 60px;
      }
    }
    .result-navi > button {
      background-color: transparent;
      box-shadow: none;
      padding: 4px;
      font-size: 1.6em;
    }
    .result-navi > button.hide {
      display: none;
    }
    .result-navi .result-bullets {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .result-navi .result-bullets > .bullet.active:first-child {
      margin-left: 50px;
    }
    .result-navi .result-bullets > .bullet.active:last-child {
      margin-right: 50px;
    }
    @media screen and (min-width: 1024px){
      .result-navi .result-bullets > .bullet.active:first-child {
        margin-left: 63px;
      }
      .result-navi .result-bullets > .bullet.active:last-child {
        margin-right: 63px;
      }
    }

    /*--- Finish Button ---*/
      #finish.hidden {
        display: none;
      }
      @media screen and (max-width: 600px){
        #finish {
          bottom: 70px;
        }
      }


  /* Result Dream Type */
    .dream-type-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0;
    }
    /* Image */
      .dream-type-header .dream-type-img-container {
      }
      .dream-type-header .dream-type-img-container img {
        width: 100px;
        height: 100px;
        aspect-ratio: 1 / 1;
        background-color: #fff;
        border-radius: 50%;
        /* width: 100%;
        height: 100%; */
        object-fit: contain;
        object-position: center;
      }
    /* Title */
      .dream-type-header .dream-type-name {
        max-width: 100%;
        hyphens: auto;
      }
    /* Text */
      .result-slide .dream-type-text {
        text-align: center;
      }
    
    @media screen and (min-width: 600px){
      .dream-type-header {
        flex-direction: row;
      }
      .dream-type-header > * {
        width: 25%;
      }
      /* Image */
        .dream-type-header .dream-type-img-container img {
          width: 140px;
          height: 140px;
        }
      /* Title */
        .dream-type-header .dream-type-name {
          width: 50%;
          max-width: none;
        }
    }
    @media screen and (min-width: 1024px){
      .dream-type-header .dream-type-img-container img {
        width: 180px;
        height: 180px;
      }
    }


  /* Dream Types Overview */
    .dream-typesoverview-wrapper {
      position: relative;
    }
    .dream-types-list {
      /* display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 300px; */
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      justify-content: center;
      column-gap: 220px;
      align-items: center;
    }
    .dream-type-column {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      row-gap: 4px;
    }
    .dream-types-list .dream-type-item {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 12px;
      /* clear: both;
      float: right; */
    }
    /* .dream-types-list .dream-type-item:is(:nth-child(5), :nth-child(6), :nth-child(7)) {
      float: left;
    } */

    .dream-type-item .dream-type-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .dream-type-item .dream-type-icon img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-position: center;
      object-fit: contain;
    }

    .dream-type-item .dream-type-text {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      column-gap: 10px;
      font-size: .6em;
    }
    .dream-type-item .dream-type-text .dream-type-color {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 0;
    }
    .dream-type-item .dream-type-text .dream-type-percentage {
      font-family: 'Ebert Bold', sans-serif;
      font-weight: 600;
    }

  /* Dream Types Pie Chart */
    /* Wrapper für das Pie-Chart */
      .dreamtypes-pie-chart-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140px;
        height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
      }

      /* Pie-Chart selbst */
      .dreamtypes-pie-chart-wrapper .dreamtypes-pie-chart {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        /* transform: rotate(-90deg); /* Start bei 12 Uhr */
      }

      /* Innerer Kreis für das Zentrum */
      .dreamtypes-pie-chart-wrapper .pie-inner {
        /* position: absolute;
        width: 70%;
        height: 70%;
        background: var(--bg-turquoise);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1.2em;
        color: #333; */
        z-index: 10;
      }

      /* Einzelne Pie-Slices */
      .dreamtypes-pie-chart-wrapper .pie-slice {
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: circle(50% at 50% 50%);
        transform-origin: center;
      }


  /* @media screen and (min-width: 768px){ */
    .dream-type-column:nth-child(2) {
      justify-content: flex-end;
      flex-direction: column-reverse;
    }
    .dream-type-column:nth-child(2) .dream-type-item {
      flex-direction: row-reverse;
    }
  /* } */

  @media screen and (min-width: 461px) and (max-width: 1079px){
    .dream-type-column .dream-type-item .dream-type-text {
      display: block;
    }
    .dream-type-column .dream-type-item .dream-type-text > span {
      display: block;
      float: left;
    }
    .dream-type-column .dream-type-item .dream-type-text > span.dream-type-name {
      clear: both;
    }
    .dream-type-column:nth-child(2) .dream-type-item .dream-type-text > span {
      float: right;
    }
    .dream-type-column .dream-type-item .dream-type-text > span.dream-type-percentage {
      padding: 3px 8px 0;
    }
  }
  
  @media screen and (max-width: 767px){
    .dreamtypes-pie-chart-wrapper {
      width: 100px;
      height: 100px;
    }
    .dreamtypes-pie-chart-wrapper .pie-inner {
      width: 50%;
      height: 50%;
    }
    .dream-types-list {
      column-gap: 140px;
    }
    .dream-type-item .dream-type-icon {
      width: 50px;
      height: 50px;
    }
    .dream-type-item .dream-type-text .dream-type-color {
      width: 16px;
      height: 16px;
    }
    .dream-type-column .dream-type-item .dream-type-text > span.dream-type-percentage {
      padding: 0 6px;
    }
  }

  @media screen and (max-width: 560px){
    .dreamtypes-pie-chart-wrapper {
      width: 110px;
      height: 110px;
    }
    .dream-types-list {
      column-gap: 140px;
    }
    .dream-type-item .dream-type-icon {
      display: none;
    }
    .dream-type-column {
      row-gap: 16px;
    }
  }
  @media screen and (max-width: 460px){
    /* .dreamtypes-pie-chart-wrapper {
      width: 60px;
      height: 60px;
    }
    .dream-types-list {
      column-gap: 76px;
    }
    .dreamtypes-pie-chart-wrapper .pie-inner {
      width: 40%;
      height: 40%;
    } */
    .dream-typesoverview-wrapper {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
    }
    .dreamtypes-pie-chart-wrapper {
      position: static;
      width: 140px;
      height: 140px;
      transform: none;
    }
    .dreamtypes-pie-chart-wrapper .pie-inner {
      width: 50%;
      height: 50%;
    }
    .dream-types-list {
      column-gap: 24px;
      align-items: flex-start;
      margin-top: 20px;
    }
    .dream-type-column:nth-child(2) .dream-type-item {
      flex-direction: row;
    }
    .dream-type-item .dream-type-text {
      display: block;
    }
    .dream-type-item .dream-type-text span {
      display: block;
      float: left;
    }
    .dream-type-item .dream-type-text .dream-type-name {
      clear: both;
    }
  }

  @media screen and (min-width: 1080px){
    .dream-type-item .dream-type-icon {
      width: 100px;
      height: 100px;
    }
    .dream-type-column:nth-child(2) .dream-type-item .dream-type-text, 
    .dream-type-item .dream-type-text {
      flex-direction: row;
      font-size: .7em;
    }
    .dream-type-column:nth-child(2) .dream-type-item .dream-type-text {
      flex-direction: row-reverse;
    }
  }
  
  @media screen and (min-width: 1366px){
    .dreamtypes-pie-chart-wrapper {
      width: 220px;
      height: 220px;
    }
    .dream-types-list {
      column-gap: 250px;
    }
  }



  .result-slide .row-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
  .result-slide .row-columns > .column {
    width: 100%;
  }
  .result-slide .row-columns .column button {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    justify-content: center;
    height: 100px;
    color: #fff;
  }
  .result-slide .row-columns .column button:is(:hover, :focus, :active, :focus-visible, :focus-within) {
    background-color: var(--red);
  }
  .result-slide .row-columns .column:first-child button {
    background-color: #00637e;
  }
  .result-slide .row-columns .column:nth-child(2) button {
    background-color: #a10000;
  }
  .result-slide .row-columns .column:nth-child(3) button {
    background-color: #00605f;
  }
  /*--- Buttons ---*/
    @media screen and (min-width: 768px){
      .result-slide .row-columns {
        flex-direction: row;
      }
      .result-slide .row-columns > .column {
        width: 33.333%;
      }
      .result-slide .row-columns .column button {
        height: auto;
        aspect-ratio: 1 / 1;
      }
    }


  /* Pie Charts */
    .pie-chart-container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }
    /* .pie-column {
      display: flex;
      justify-content: center;
    }
    .pie-column {
      width: 50%;
    } */
    @media screen and (max-width: 767px){
      .pie-chart-container {
        flex-direction: column;
      }
    }

    .pie-chart {
      --value1: 0; /* Standardwert */
      --value2: 0; /* Standardwert */
      --value3: 0; /* Standardwert */
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: conic-gradient(
        var(--red) 0deg,
        var(--red) calc(var(--value1) * 3.6deg),
        var(--petrol) calc(var(--value1) * 3.6deg),
        var(--petrol) calc(var(--value2) * 3.6deg),
        var(--yellow) calc(var(--value2) * 3.6deg),
        var(--yellow) calc(var(--value3) * 3.6deg)
      );
      position: relative;
      transition: background 1s ease;

      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    }
    
    .pie-inner {
      width: 50%;
      height: 50%;
      background: var(--bg-turquoise);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .pie-chart-container + .pie-chart-container, 
    .pie-chart-container:has(+ .pie-chart-container) {
      width: 50%;
      float: left;
    }

    .chart-legend-bottom {
      max-width: 700px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .chart-legend-bottom > * {
      margin: 0;
      padding-left: 20px;
      position: relative;
    }
    .chart-legend-bottom > * > span.value {
      background-color: var(--red);
      display: block;
      width: 16px;
      height: 16px;
      /* height: 100%;
      width: auto; */
      aspect-ratio: 1 / 1;
      position: absolute;
      left: 0;
    }
    .chart-legend-bottom > *:nth-child(2) > span.value {
      background-color: var(--petrol);
    }
    .chart-legend-bottom > *:nth-child(3) > span.value {
      background-color: var(--yellow);
    }
    @media screen and (min-width: 1024px){
      .chart-legend-bottom > * {
        padding-left: 24px;
      }
      .chart-legend-bottom > * > span.value {
        width: 20px;
        height: 20px;
      }
    }
    @media screen and (min-width: 1366px){
      .chart-legend-bottom > * {
        padding-left: 38px;
      }
      .chart-legend-bottom > * > span.value {
        width: 24px;
        height: 24px;
      }
    }

    .chart-legend-bottom.bar-chart-legend-bottom {
      clear: both;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 20px;
      max-width: none;
      padding-top: 20px;
    }
    .chart-legend-bottom.bar-chart-legend-bottom > *:first-child {
      padding: 0;
    }
    .chart-legend-bottom.bar-chart-legend-bottom > * {
      float: left;
      clear: none;
    }
    .chart-legend-bottom.bar-chart-legend-bottom > * > span.value {

    }
    .chart-legend-bottom.bar-chart-legend-bottom > *:nth-child(2) > span.value {
      background-color: var(--petrol);
    }
    .chart-legend-bottom.bar-chart-legend-bottom > *:nth-child(3) > span.value {
      background-color: var(--yellow);
    }
    .chart-legend-bottom.bar-chart-legend-bottom > *:nth-child(4) > span.value {
      background-color: var(--red);
    }
    .chart-legend-bottom.bar-chart-legend-bottom > *:nth-child(5) > span.value {
      background-color: var(--blue);
    }



  /*----------- Bar Charts ----------*/

    /*----- Sub Slides Bar Chart -----*/
      .bar-chart-subslides {
        
      }
      /*--- Legend ---*/
        .result-slide .bar-chart-legend {
          width: 320px;
          float: left;
        }
        .bar-chart-legend .legend-item {
          margin: 6px 0;
          text-align: right;
          padding: 0 12px;
          hyphens: none;
          white-space: nowrap;
          font-size: .8em;
          line-height: 1.5;
          font-family: 'Ebert Bold', sans-serif;
        }
        .chart-legend-bottom > * {
          font-size: .6em;
        }
        @media screen and (min-width: 1024px){
          /* .chart-legend-bottom > *,  */
          .bar-chart-legend .legend-item {
            font-size: .69em;
          }
        }
        @media screen and (min-width: 1366px){
          /* .chart-legend-bottom > *,  */
          .bar-chart-legend .legend-item {
            font-size: .6em;
          }
        }
      /*--- Chart ---*/
        .bar-chart-legend + .bar-chart-container, 
        .bar-chart-subslides .bar-chart-wrapper {
          width: calc(100% - 360px);
          border-left: 2px solid #000;
          float: left;
        }
        .bar {
          margin: 6px 0;
        }
        .bar-chart-container > .legend-item, 
        .bar-chart-subslides .bar-chart-wrapper .bar-legend {
          font-size: .8em;
          display: none;
          padding-left: 6px;
          font-family: 'Ebert Bold', sans-serif;
        }

    .bar-chart-container {
      /* display: flex;
      flex-direction: column;
      gap: 10px; */
      width: 100%;
      border-left: 2px solid #000;
      /* padding: 8px 0; */
    }

    .bar {
      display: flex;
      height: 28px;
      background-color: var(--yellow);
      background-color: var(--bg-turquoise);
      overflow: visible;
      position: relative;
    }

    .bar-section {
      height: 100%;
      transition: width 1s ease; /* Sanfte Animation */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      font-size: .7em;
    }
    .bar-section > span.inner-value.show-outside {
      position: absolute;
      left: calc(100% + 4px);
      width: 200px;
      font-family: 'Ebert Bold', sans-serif;
    }

    .bar-section > span.percent {
      position: absolute;
      display: block;
      background-color: rgba(255,255,255,.6);
      padding: 0 2px;
      hyphens: none;
      white-space: nowrap;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.3s linear;
      font-family: 'Ebert Bold', sans-serif;
    }
    .bar-section:is(:first-child, :nth-child(3), :nth-child(4)) > span.percent {
      background-color: transparent;
      color: #fff;
    }
    .bar-section:is(:hover, :focus, :active) > span.percent {
      /* top: -50%; */
      opacity: 1;
    }


    @media screen and (max-width: 768px){
      .bar-chart-container > .legend-item {
        display: block;
      }
      .bar-chart-subslides .bar-chart-wrapper .bar-legend {
        display: block;
        font-size: .7em;
      }
      .result-slide .bar-chart-legend {
        display: none;
      }
      .bar-chart-legend + .bar-chart-container, 
      .bar-chart-subslides .bar-chart-wrapper {
        width: 100%;
      }
      .bar {
        margin: 0 0 4px;
      }

      body :is(p, label, input) {
        font-size: .8em;
      }

      .result-slide h1 {
        font-size: 1em;
      }
      .result-slide :is(h3, h4, h5, h6) {
        font-size: .8em;
      }
    }