/*  CSS 
 * 
 *  public/assets/css/layout_dual_single_dual_01.css   (Nr 01 ist Start-Nr und wird fortlaufend erhöht) 
 *
 * - Responsive Design
 * 
 *  => Layout Website      - Mobil bis 1000px siehe:  @media OR --- ERWEITERUNG FÜR MOBILGERÄTE: ---  
 *     - Single-Segmente-Page    
 *     - Dual-Segment-Page
 *
*/


/* ------------------------- Single-Segment-Page ---------------------------------- */
/* -----------------------------             -------------------------------------- */
/* --------------- Grund-Styling für den General-single-Container ----------------- */
/* -------- z.B. fo_impressum.php, fo_agb.php, x6-login, x6-admin u.a.  ----------- */



/* Der Container sorgt für die äußeren Abstände und die Flexbox-Ausrichtung */
.single-container {
  display: flex;
  padding-left:  20px;          /* 20px Abstand zum linken Bildschirmrand */
  padding-right: 20px;          /* 20px Abstand zum rechten Bildschirmrand */

  width:         100%;
  box-sizing:    border-box;    /* Verhindert, dass das Padding die Gesamtbreite sprengt */

  align-items:   flex-start;
}



/* Eigenschaften für Single-Box */
.single-box {
  flex:             1;                       /* Verteilt den verfügbaren Platz gleichmäßig (beide sind gleich groß) */
  background-color: #f4f4f4;                 /* Nur zur besseren Sichtbarkeit */
  padding:          40px 40px 40px 60px;     /* Innenabstand für den Text */
  border:           1px solid #ccc;
  box-sizing:       border-box; 

  /* Berechnet: 100% Bildschirmhöhe minus 120 Pixel */
  min-height:       calc(100dvh - 160px);

  font-size:        1,2rem; 
  line-height:      1.5;         /* Der Zeilenabstand passt sich automatisch dynamisch an (hier 24px) */
}



/* Eigenschaften für x6_login */

div.login-top-div {
    display:        flex; 
    flex-direction: column; 
    gap:            20px; 
    overflow:       hidden;     
}

div.login-center-div {
    margin: 10px auto 10px auto; 
}

div.login-seite-titel {
   width: 60%; 
}

      /* ---  Mobile Ansicht (max. 1000px)  --- */
      @media screen and (max-width: 1000px) {
             div.login-seite-titel {
                 width: 90%; 
             }
  
             div.login-center-div {
                margin:   10px 2px 10px 2px; 
             }
      }



/* --- Ende - Single-Segment-Seite  ------------------------------------- */




/* --------------------------- Dual-Segmente-Page --------------------------------- */
/* -----------------------------             -------------------------------------- */
/* --------------- Grund-Styling für den General-dual-Container ------------------- */
/* --------------- z.B. direkt.php, cheap.php u.a.              ------------------- */

/*  Ausschließlich für die Dual-Segmente-Seiten                     */ 
/*  - V-1: de<=>en Wechsel-Segmente;                                */
/*  - V-2: Segmente ohne de-en-Kontext und ohne Wechsel (z.B. Doku) */
 

/* Der Container sorgt für die äußeren Abstände und die Flexbox-Ausrichtung */
.dual-container {
  display:       flex;          /* flex: Höhe je nach Inhalt */  
  margin-top:    30px;          /* 30px Abstand nach oben    */
  margin-bottom: 30px;          /* 30px Abstand nach oben    */

  padding-left:  20px;          /* 20px Abstand zum linken Bildschirmrand */
  padding-right: 20px;          /* 20px Abstand zum rechten Bildschirmrand */
  gap:           10px;          /* 10px Trennung zwischen den beiden DIVs */
  width:         100%;
  box-sizing:    border-box;    /* Verhindert, dass das Padding die Gesamtbreite sprengt */

  position:      relative;      /* Wichtig für die Positionierung des Buttons */
  align-items:   flex-stretch;  /* flex-start: Segmente Höhe je nach Inhalt;  flex-stretch: Segment gleich hoch  */ 

  transition:   flex-direction 0.4s ease-in-out;
}


/* Wenn diese Klasse aktiv ist, tauschen links und rechts die Plätze */
.dual-container.reversed {
    flex-direction: row-reverse;
}


/* Styling für das Tausch-Symbol */
#dual-mitte-swap-btn {
    align-self:    flex-start;   /* Setzt den Button an den oberen Rand der Zeile */
    background:    #1a5276;      /* Die Hintergrundfarbe vom Rand */
    color:         white;
    border:        none;
    border-radius: 50%;
    width:         40px;
    height:        40px;
    font-size:     20px;
    cursor:        pointer;
    box-shadow:    0 4px 6px rgba(0,0,0,0.1);
    transition:    transform 0.3s ease, background 0.3s ease;
    z-index:       10;
}

/* Kleiner Animationseffekt beim Drüberfahren */
#dual-mitte-swap-btn:hover {
    background: #2471a3;
    transform:  scale(1.1);
}
 

/* Styling für das No-Button-Symbol - statt mitte-swap-btn */
/* Eingesetzt, um Spalte auseinander zu halten */ 

#dual-mitte-no-btn {
    align-self:    flex-start;       /* Setzt den Button an den oberen Rand der Zeile */
    background:    transparent;      /* Keine Hintergrundfarbe   */
    color:         white;
    border:        none;
    border-radius: 50%;
    width:         20px;
    height:        20px;
    font-size:     1px;
    cursor:        pointer;
    z-index:       10;
}


/* Gemeinsame Eigenschaften für beide Boxen */
.dual-box {
  flex:             1;              /* Verteilt den verfügbaren Platz gleichmäßig (beide sind gleich groß) */
  background-color: #f4f4f4;        /* Nur zur besseren Sichtbarkeit */
  padding:          20px;           /* Innenabstand für den Text */
  border:           1px solid #ccc;
  box-sizing:       border-box; 

  font-size:        1.2rem; 
  line-height:      1.5;            /* Der Zeilenabstand passt sich automatisch dynamisch an (hier 24px) */ 

  transition:       opacity 0.4s ease-in-out;
}


/* Das inaktive Segment wird auf 50% Transparenz gesetzt */
.dual-box.inactive-lang {
    opacity:     0.5;
    user-select: none;     /* Optional: Verhindert, dass man Text im inaktiven Segment versehentlich markiert */
}

/* Das aktive Segment bleibt voll sichtbar (100%) */
.dual-box.active-lang {
    opacity: 1.0;
}


/* --- Hebt die Transparenz auf, wenn man mit der Maus drüberfährt --- */
.dual-box.inactive-lang:hover {
    opacity: 1;
    cursor:  pointer; /* Zeigt dem Nutzer, dass dieses Segment interaktiv ist */
}


      /* ---  Mobile Ansicht (max. 1000px)  --- */
      /* ---  inaktives Seg. display: none  --- */ 
      /* ---  --- */
      @media screen and (max-width: 1000px) {
  
         /* Das inaktive Segment komplett ausblenden */
         .dual-box.inactive-lang {
           display: none       /* !important stellt sicher, dass eventuelle Flex-Stile überschrieben werden */
         }

         /* Das aktive Segment nimmt die volle Breite ein */
         .dual-box.active-lang {
           flex: 1 1 100%;
           width: 100%;
         }

         /* Die Buttons/Abstandshalter in der Mitte ausblenden, da kein Platzwechsel mehr nötig ist */
         #dual-mitte-swap-btn,
         #dual-mitte-no-btn {
           display: none;
         }

         /* Optional: Container-Abstände für Mobilgeräte optimieren */
         .dual-container {
           flex-direction: column; /* Verhindert Darstellungsfehler */
           gap: 0;                 /* Entfernt die Lücke, da nur noch eine Box da ist */
           padding-left: 15px;     /* Etwas schlankeres Padding auf dem Smartphone */
           padding-right: 15px;
         }
      }


/* --- Ende - Dual-Segmente-Seite  ------------------------------------- */