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

:root {
   --gap-normal: 20px;
}

/* Lokale Anpassung nur für dieses Applet */
.layout3 {
   width: fit-content;
   /* Box schrumpft auf Inhalt */
   max-width: 100%;
   /* bleibt auf kleinen Screens responsiv */
   gap: var(--gap-normal);
}

/* Quellbild nur als Datenquelle, nicht sichtbar */
#sourceImage {
   display: none;
}

.layout3 img,
.layout3 canvas {
   display: block;
   max-width: 600px;
   width: 100%;
   /* nimmt die verfügbare Breite im Wrapper */
   height: auto;
   /* Höhe aus Seitenverhältnis ableiten */
   border: 1px solid #ccc;
}

/* ----------------------------------------
   1) Wrapper: Dropdown + Upload
   ---------------------------------------- */
.source-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   width: 100%;
   gap: var(--gap-normal);
}

.source-row__item {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: var(--gap-normal);
   flex-wrap: wrap;
   /* erlaubt Umbruch innerhalb des Items */
}

/* ----------------------------------------
   2) Wrapper: Bilder (Original + Canvas)
   ---------------------------------------- */
.image-row {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   gap: var(--gap-normal);
   width: 100%;
}

.image-row__item {
   display: flex;
   justify-content: center;
   flex: 1 1 0;
}

/* ----------------------------------------
   3) Wrapper: Schieberegler
   ---------------------------------------- */
.controls-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--gap-normal);
   width: 100%;
}

.slider-group {
   display: flex;
   flex-direction: column;
   min-width: 200px;
   text-align: center;
}

.slider-group label {
   font-weight: bold;
}

/* Range nutzt deinen globalen .range-Style */
.slider-group input[type="range"].range {
   width: 100%;
}

/* ----------------------------------------
   4) Wrapper: Buttons
   ---------------------------------------- */
.buttons-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--gap-normal);
   width: 100%;
}

/* ----------------------------------------
   BREAKPOINT B: z.B. <= 768px
   Ab hier untereinander stapeln.
   ---------------------------------------- */
@media (max-width: 768px) {
   .image-row {
      flex-direction: column;
      align-items: center;
   }

   .image-row__item {
      flex: 0 1 auto;
      width: 100%;
   }

   /* Nur im Applet: Schrift kleiner für alles Relevante */
   .layout3,
   .layout3 input,
   .layout3 select,
   .layout3 button,
   .layout3 label {
      font-size: var(--font-size-sm);
   }
}

@media (max-width: 500px) {
   .layout3 {
      --gap-normal: 10px;
   }

   .source-row__item {
      flex-direction: column;
      /* Label oben, Feld darunter */
      align-items: center;
      /* schön mittig */
      text-align: center;
   }

   .source-row__item select,
   .source-row__item input[type="file"] {
      width: 100%;
   }
}