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

.layout3 {
   width: 100%;
   max-width: 700px;
   gap: 20px;
}

.iframe-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 600px;
   border: 1px solid var(--gray);
   border-radius: 8px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   background-color: var(--color-text-inverse);
   opacity: 0;
   transition: opacity 0.5s ease;
   padding: 10px;
}

/* Überschrift im iframe-Bereich */
.iframe-header {
   text-align: center;
   font-weight: bold;
   font-size: var(--font-size-xl);
   color: var(--color-buchner);
}

#question-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 700px;
   text-align: left;
   gap: 10px;
}

.layout3 .radio-group label {
   min-height: 0;
}

#question-div {
   text-align: left;
}

#question-container .radio-group {
   justify-content: center;
   /* statt text-align im JS */
}

.feedback {
   font-style: italic;
}

/* Container für die Buttons, zentriert */
.button-container {
   text-align: center;
   width: 100%;
}

/* Abschlussscreen: Container für alle Zusammenfassungs-Elemente */
#summary-container {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 700px;
   gap: 10px;
   /* Abstand zwischen Sektionen und Button */
   padding: 0 40px;
}

/* Einzelne Sektion (Frage + Auswahl + Hinweis) ist immer 100 % breit */
.summary-section {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

/* Frage im Abschlussscreen fett */
.summary-question {
   font-weight: bold;
}

/* Radio-Buttons im Abschlussscreen mittig ausrichten */
#summary-container .radio-group {
   justify-content: center;
}

/* Zusätzlicher Abstand vor dem Button im Abschlussscreen */
#summary-container .button-container {
   margin-top: 20px;
   /* oder etwas mehr nach Geschmack */
}

#summary-container hr {
   margin: 10px;
}

@media (max-width: 768px) {
   
   #summary-container {
   padding: 0 20px;
}
}

@media (max-width: 550px) {
   button {
      font-size: var(--font-size-sm);
   }

   .iframe-header {
      font-size: var(--font-size-lg);
   }

   .layout3 {
      font-size: var(--font-size-sm);
   }

   #summary-container {
   padding: 0px;
}
}