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

.layout3 {
   /* display: flex; bleibt okay, flex-direction kommt aus global.css (column) */
   width: 100%;
   max-width: 700px;
   /* oder größer, wie du das Applet haben willst */
   gap: 20px;
}

.iframe-container {
   display: flex;
   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;
}

iframe {
   width: 100%;
   border: none;
}

.slider-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   max-width: 700px;
   width: 100%;
}

.slider-instruction {
   font-weight: bold;
}

input[type=range] {
   width: 100%;
   -webkit-appearance: none;
   height: 10px;
   border-radius: 5px;
   background: linear-gradient(to right, green, yellow, red);
   outline: none;
}

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--color-text-inverse);
   border: 2px solid var(--color-buchner);
   cursor: pointer;
   margin-top: -5px;
}

.slider-labels {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   font-size: var(--font-size-sm);
   text-align: center;
   color: var(--color-text-secondary);
   width: 100%;
   margin: 0 0 10px;
   /* Added horizontal padding to center labels under thumb stops */
   word-break: break-word;
   gap: 10px;
   align-items: center;
}

.slider-labels span {
   white-space: normal;
}

.button-container {
   width: 100%;
   display: flex;
   justify-content: center;
}

#feedback {
   font-style: italic;
   width: 100%;
   text-align: center;
   color: var(--color-text-secondary);
}

@media (max-width: 700px) {
   .slider-labels {
      font-size: var(--font-size-xs);

   }
}

@media (max-width: 768px) {

   .slider-instruction,
   #check-btn {
      font-size: var(--font-size-sm);
   }
}