body {
      font-family: "Helvetica Neue", sans-serif;
      background-color: #fff;
      margin: 0;
      padding: 2rem;
      color: #222;
      text-align: center;
    }
    .kapitel { display: none; }
    .kapitel.visible { display: block; }
    .story-text {
      max-width: 600px;
      margin: 0 auto 2rem;
      font-size: 1.2rem;
      line-height: 1.6;
      text-align: left; /* 👈 Hier hinzugefügt */
    }
    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
    }
.card {
  width: 45%; /* passt zwei Karten nebeneinander in eine Zeile */
  aspect-ratio: 3 / 4; /* Verhältnis Breite:Höhe → 3:4 wie bei 180x240px */
  perspective: 1000px;
  cursor: pointer;
}
    .card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

.card.flipped .card-inner {
  transform: rotateY(180deg);
}
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .card-front {
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-front img {
      width: 100%;
      height: auto;
      object-fit: cover; /* oder contain, je nach Layout-Wunsch */

    }
.card-back {
  transform: rotateY(180deg); /* ✔ bleibt */
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .card.correct .card-back {
      background-color: #7e7e7e;
      color: white;
    }
    .card.incorrect .card-back {
      background-color: #7e7e7e;
      color: white;
    }
    .solution-letter {
      font-size: 2rem;
      margin-left: 0.5rem;
    }


button, 
.button {
  background-color: transparent; /* Kein Hintergrund, nur der Rand */
  color: #279348;
  border: 2px solid #279348;
  padding: 10px 20px; /* Abstände rund um den Text */
  border-radius: 15px; /* Abgerundete Ecken */
  font-size: 14px; /* Textgröße */
  cursor: pointer; /* Hand-Symbol bei Hover */
  transition: all 0.3s ease; /* Sanfte Übergänge bei Hover */
  text-decoration: none; /* Keine Unterstreichung */
  text-align: center;
  width: 200px;
}

.button:hover,
button:hover {
  background-color: #279348; /* Heller Hintergrund bei Hover */
  color: #eaecea; /* Textfarbe ändert sich */
  border-color: #eaecea; /* Randfarbe bei Hover ändert sich */
}
 
button:active {
  background-color: #004a80;
  transform: scale(0.97);
}

#kapitel-9 input[type="text"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 8px;
  width: 250px;
  margin-bottom: 1rem;
  text-transform: uppercase; /* sorgt dafür, dass alles großgeschrieben wird */
}

#feedback {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
}

#kapitel-9 {
  display: none;
  max-width: 600px;
  margin: 0 auto;
}
#kapitel-9.visible {
  display: block;
}

.progress-bar-container {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 5px;
  height: 12px;
  margin-top: 1rem;
  overflow: hidden;
}

.progress-bar-aufgabe6, 
.progress-bar-aufgabe7, 
.progress-bar-aufgabe8 {
  height: 100%;
  width: 0%;
  background-color: #4caf50;
  transition: width 0.4s ease-in-out;
  border-radius: 5px;
}

@media (max-width: 768px) {
  [class^="details-"],
  [class^="details-"] img,
  [class^="details-"] video,
  [class^="details-"] iframe {
    max-width: 95%;
    height: auto;
  }

    .story-text {
    max-width: 95%;
  }
  .card {
    width: 48%;       /* Zwei Karten nebeneinander mit kleiner Lücke */
    margin-bottom: 1rem;
  }

  .card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4%;
  padding: 0 1rem; /* 👉 links und rechts je 1rem Abstand */
}

  .card-front img {
    width: 100%;
    height: auto;
    object-fit: cover; /* bleibt, damit die Bilder flächig wirken */
  }

  .card-back {
    font-size: 1.4rem;
    padding: 0.5rem;
  }

  .solution-letter {
    font-size: 1.5rem;
  }
    button {
    display: block;         /* 👉 untereinander statt nebeneinander */
    width: 90%;             /* 👉 fast volle Breite mit Rand */
    max-width: 300px;       /* optional, um es nicht zu breit zu machen */
    margin: 0 auto 1rem;    /* zentriert + Abstand nach unten */
  }
}




@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f0f0f0;
  }

  .story-text {
    color: #e0e0e0;
  }

  .card-front {
    background-color: #2c2c2c;
  }

  .card-front img {
    filter: brightness(0.9) contrast(1.1);
  }

  .card-back {
    background-color: #3a3a3a;
    color: #f5f5f5;
  }

  .card.correct .card-back,
  .card.incorrect .card-back {
    background-color: #444;
    color: #fff;
  }

  button {
    background-color: transparent;
    color: #8bc34a;
    border-color: #8bc34a;
  }

  button:hover {
    background-color: #8bc34a;
    color: #000;
    border-color: #8bc34a;
  }

  button:active {
    background-color: #558b2f;
  }

  #kapitel-9 input[type="text"] {
    background-color: #1e1e1e;
    color: #f0f0f0;
    border-color: #555;
  }

  #feedback {
    color: #f0f0f0;
  }
}