.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10rem;
    margin: 5rem;
}

.frame-one,
.frame-two {
    margin-top: 10rem;
    position: relative;
    padding: 5rem;
    border-radius: 15px;
    justify-content: space-around;
    align-items: center;
    border: none;
L’intelligence artificielle renforce nos états de santé mentale et nos émotions dans le même sens. Pour limiter l'impact sur nos émotions, il est recommandé de ne pas passer plus de deux heures avec un chatbot afin d'éviter qu'elles ne se renforcent dans le négatif. En résumé, l’intelligence artificielle n’améliore pas notre santé mentale et il n'est donc pas recommandé de l’utiliser en cas de maladie psychologique grave, car elle nous incite à continuer à l’utiliser, créant ainsi une dépendance. Il est donc impératif de chercher de l’aide psychologique.
    --p: 0;
    /* Progress von 0 bis 1 */

    background-image:
        linear-gradient(#0C41FB, #0C41FB),
        linear-gradient(#0C41FB, #0C41FB),
        linear-gradient(#0C41FB, #0C41FB),
        linear-gradient(#0C41FB, #0C41FB);
    background-repeat: no-repeat;
    background-position: top left, top right, bottom right, bottom left;

    /* Dynamische Größen per Progress */
    background-size:
        calc(var(--p) * 100%) 5px,
        5px calc((var(--p) - 0.25) * 100% * 4),
        calc((var(--p) - 0.5) * 100% * 2) 5px,
        5px calc((var(--p) - 0.75) * 100% * 4);

    transition: background-size 0.01s linear;
}

/* Topic 1 */
.topic-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
    text-align: left;
}


/* Topic 2 */
.img-chatbot-phone {
    width: 60%;
    max-width: 100%;
    height: auto;
}

.introduction-topic-2 {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
    text-align: left;
}

.introduction-text-2 {
    margin-left: -18rem;
    width: 200rem;

    h3 {
        text-align: left;
    }

    p {
        text-align: left;
    }
}


.sources {
    display: flex;
    flex-direction: row;
    gap: 10rem;

    p {
        text-align: left;
    }
}

body {
    font-family: Arial, sans-serif;
    margin: 40px;
}

h2 {
    margin-bottom: 5px;
}

/* Large charts */
.chart-large {
  width: 500px;
  height: 500px;
  margin: auto;
}

.chart-large canvas {
  width: 100% !important;
  height: 100% !important; /* ensure square */
}

/* Small charts row */
.chart-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  overflow: visible;
}

/* Each mini chart must have a fixed square box */
.chart-small {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: visible;
  text-align: center;
}

.chart-small canvas {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.chart-source {
  text-align: center;
  margin-top: 8px;
  font-style: italic;
  font-size: 0.9rem;
}

.resume{
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-top: 6rem;

    p{
        text-align: left;
    }
}

.img-robot {
    width: 30%;
    max-width: 100%;
    height: 40rem;
    object-fit: contain;
    display: block;
}

/* Graph 2 Style */
/* Toggle-Steuerung */
#controls {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Grundstil für alle Toggle-Labels */
.toggle {
    margin: 0 20px;
    font-family: 'Inter-Medium', sans-serif;
    font-size: 25px;
}

/* Farben passend zur Chart-Farbe */
.toggle.positive {
    color: rgba(200,70,70,1);
}
.toggle.negative {
    color: rgba(70,100,200,1);
}

/* Etwas größere Checkboxen */
input[type="checkbox"] {
    transform: scale(1.3);
    margin-right: 8px;
    vertical-align: middle;
}