/* Datei: Chatverlauf_Absichten/styles.css
   Nur applet-spezifische Klassen – alles andere kommt aus global.css */

.layout3 {
   width: fit-content;
}

/* Innenlayout: links Smartphone, rechts Fragen */
.layout-inner {
   display: flex;
   align-items: flex-start;
}

/* Wrapper für das "Smartphone" (Iframe) */
.iframe-wrapper {
   overflow: hidden;
   /* schneidet evtl. Überstände des skalierten iframes ab */
   flex-shrink: 0;
   /* nicht schmaler werden als width */
}

/* eingebettetes Beispiel als Iframe */
.html-iframe {
   border: none;
   display: block;
   transform-origin: top left;
   /* wichtig für scale(...) im JS */
}

/* Fragenbereich (rechte Spalte bzw. unten bei schmalen Screens) */
.layout-inner .text {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   margin-left: 1rem;
   margin-top: 3rem;
}

/* Frage-Text */
#exercise-container .text p.question {
   font-size: var(--font-size-xl);
   color: var(--color-buchner)
}

/* Formular mit Antworten */
#exercise-container .text form {
   margin-bottom: 0.75rem;
}

/* Radio-Gruppe: globale Styles nutzen, aber untereinander anordnen */
#exercise-container .text .radio-group {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   align-items: flex-start;
   /* linksbündig */
}

/* Labels: etwas Hover-Hintergrund, sonst globaler Stil */
#exercise-container .text .radio-group label {
   border-radius: 4px;
   padding: 0.25rem 0.5rem;
   transition: background 0.2s ease;
}

#exercise-container .text .radio-group label:hover {
   background: var(--gray-light);
}

/* Min-Höhe aus global.css etwas entschärfen */
#exercise-container .radio-group label {
   min-height: 0;
}

/* Button mittig – alle anderen Styles kommen aus global.css (button-Selektor) */
#exercise-container .text button {
   align-self: center;
}

/* Feedback */
#exercise-container #feedback {
   font-style: italic;
   min-height: 1.2em;
   text-align: center;
}

/* Farben fürs Feedback optional über Klassen nutzbar */
#exercise-container #feedback.feedback--correct {
   color: #00bf00;
}

#exercise-container #feedback.feedback--incorrect {
   color: var(--color-buchner);
}

/* Ab 768px: Smartphone oben, Fragen unten; beides mittig im layout3 */
@media (max-width: 600px) {
   #exercise-container .text p.question {
      font-size: var(--font-size-lg);
   }

   .layout-inner {
      flex-direction: column;
      align-items: center;
      /* Smartphone und Fragen mittig im layout3 */
      gap: 1rem;
   }

   .layout-inner .text {
      margin: 0;
   }
}

/* Sehr kleine Geräte: Schrift insgesamt etwas kleiner */
@media (max-width: 550px) {
   #exercise-container .text p.question {
      font-size: var(--font-size-base);
   }

   #exercise-container button {
      font-size: var(--font-size-sm);
   }
     #exercise-container .text .radio-group label {
    font-size: var(--font-size-sm);
  }
}