/*
  Theme Name: REALONAUT
  Theme URI: https://realonaut.com
  Version: 1.0.0
  Template: Divi
  Author: REALONAUT GmbH
  Author URI: https://realonaut.com
  Description: REALONAUT GmbH | Kochgasse 24, 1080 Vienna, AUSTRIA | realonaut.com | office@realonaut.com | +43 650 28 33 78 7
  Text Domain: realonaut
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/




/* Lock body scroll when open */
.rl-no-scroll {
  overflow: hidden;
  padding-right: var(--scrollbar-width);
}






:root {
  --ms-border-color:#b2b2b2;
  --ms-border-width:1px;
  --ms-body-text-color:#00100b;
  --ms-orange:#d85711;
}






/**
 *    ██      ██  ██████  ██   ██ ████████ ██████   ██████  ██   ██ 
 *    ██      ██ ██       ██   ██    ██    ██   ██ ██    ██  ██ ██  
 *    ██      ██ ██   ███ ███████    ██    ██████  ██    ██   ███   
 *    ██      ██ ██    ██ ██   ██    ██    ██   ██ ██    ██  ██ ██  
 *    ███████ ██  ██████  ██   ██    ██    ██████   ██████  ██   ██ 
 *                                                                  
 *                                                                  
 */







/* =========================================
   MS LIGHTBOX – Slider CSS (fix layout)
   Ziel:
   - Slide: Media nimmt Restplatz
   - Title/Date/Text immer unten sichtbar
   - img/video nie gestretcht (Seitenverhältnis bleibt)
   - oEmbed (div.ms-lb-media) füllt Restplatz mit iframe
========================================= */

/* Overlay shell */
#ms-lb{
  display: none;
  position: fixed;
  z-index: 999999;
  inset: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding: 1rem;
  background: #fafafa;
}

#ms-lb.is-open{
  display: flex;
}

/* close row & nav row */
#ms-lb .ms-lb-button,
#ms-lb .ms-lb-nav{
  display: flex;
  justify-content: flex-end;
  padding-right: var(--scrollbar-width);
}

#ms-lb .ms-lb-nav{
  justify-content: center;
  padding:2rem 1rem;
}

#ms-lb .ms-lb-nav .ms-lb-spacer{
/*  background-color:var(--ms-border-color);*/
  height: var(--ms-border-width);
  align-self: center;
  width: 1rem;
  margin: 0 1rem;
}

/* Buttons */
#ms-lb .ms-lb-close,
#ms-lb .ms-lb-prev,
#ms-lb .ms-lb-next{
  cursor: pointer;
}

#ms-lb button{
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
}

/* Slider area */
#ms-lb .ms-lb-content-slider{
  flex: 1 1 auto;
  min-height: 0;          /* wichtig */
  position: relative;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Viewport/Track */
#ms-lb .ms-lb-viewport{
  flex: 1 1 auto;
  min-height: 0;          /* wichtig */
  overflow: hidden;
  display: flex;
 /* background-image:url(media/ggg-icon-bg.svg);
  background-repeat:no-repeat;
  background-position: center;
  background-size:80px auto;*/
}

#ms-lb .ms-lb-track-wrap{
  flex: 1 1 auto;
  min-height: 0;          /* wichtig */
  height: 100%;
  overflow: hidden;

  padding: 0 4rem 4rem 4rem;
}

#ms-lb .ms-lb-track{
  display: flex;
  height: 100%;
  min-height: 0;          /* wichtig */
  transition: transform 300ms ease;
  will-change: transform;
}

/* Slides: immer 100% des Viewports */
#ms-lb .ms-lb-slide{
  position:relkative;
  flex: 0 0 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;

  font-family: var(--et_global_body_font);
  color: var(--ms-body-text-color);
  font-weight: 500;
  font-size: 18px;

  display: flex;
  flex-direction: column;
  padding:0 4rem 1rem 4rem;

  background-image: 
    linear-gradient(var(--ms-border-color), var(--ms-border-color)), /* Linke Linie */
    linear-gradient(var(--ms-border-color), var(--ms-border-color)); /* Rechte Linie */
  background-size: 0.5px 25%, 0.5px 25%; 
  background-position: 0px bottom, right bottom;
  background-repeat: no-repeat;
}

#ms-lb .ms-lb-slide:nth-child(1){
  background-size: 1px 25%, 0.5px 25%; 
}
#ms-lb .ms-lb-slide:first-child:last-child{
  padding-top:2rem;
  background-image: none;
}


/* 1. Der Button (Container) */
.ms-lb-link-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-decoration: none;
    
    /* Design des Buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 72px; /* Etwas breiter als hoch */
    background-color: rgba(0, 0, 0, 0.5); /* Transparenter schwarzer Hintergrund */
    border-radius: 12px; /* Leicht abgerundet. Für komplett rund (Pille) nimm 24px */
    
    /* Weicher Übergang beim Hover */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover-Effekt (etwas dunkler und minimal größer) */
.ms-lb-link-overlay:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

/* 2. Das kleine weiße Dreieck (Play-Icon) */
.ms-lb-play-icon {
    display: block;
    width: 0;
    height: 0;
    
    /* Das Dreieck per CSS-Borders generiert */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #ffffff; 
    
    /* Optische Mitte-Korrektur (ein Dreieck wirkt sonst linksbündig) */
    margin-left: 4px; 
}




/* Media element (img/video/div.ms-lb-embed) nimmt Restplatz */
#ms-lb .ms-lb-slide > .ms-lb-media{
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  margin-bottom:auto!important;
}

/* IMG: Verhältnis bleibt, nie stretchen */
#ms-lb .ms-lb-slide > img.ms-lb-media{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain; /* optional, ok */
}

/* VIDEO: Verhältnis bleibt, Controls korrekt */
#ms-lb .ms-lb-slide > video.ms-lb-media{
  display: block;       /* wichtig: nicht flex */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
}

/* EMBED-BOX (div) darf flex sein, damit iframe füllt */
#ms-lb .ms-lb-slide > div.ms-lb-media{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* iframe füllt den verfügbaren Restplatz */
#ms-lb .ms-lb-slide > div.ms-lb-media iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Footer-Elemente: bleiben unten sichtbar */
#ms-lb .ms-lb-title,
#ms-lb .ms-lb-date,
#ms-lb .ms-lb-text{
  flex: 0 0 auto;
}

#ms-lb .ms-lb-title{
  margin-top: 0.75rem;   /* statt margin-top:auto (das ist hier nicht nötig) */
  text-transform: uppercase;
}

#ms-lb .ms-lb-loading{
  padding: 2rem;
  margin:4rem auto;
}

/* Text darf scrollen, wenn er zu groß wird */
#ms-lb .ms-lb-text{
  max-height: 30vh;        /* 🔧 anpassen nach Geschmack */
  overflow-y: auto;
  overscroll-behavior: contain;
}








@media (max-width: 512px){
  #ms-lb .ms-lb-track-wrap{
    padding: 0 1px 1rem 1px;
  }

  #ms-lb .ms-lb-slide{
    padding:0 1rem 1rem 1rem;
    
  }
}


/**
 *    ██      ██  ██████  ██   ██ ████████ ██████   ██████  ██   ██ 
 *    ██      ██ ██       ██   ██    ██    ██   ██ ██    ██  ██ ██  
 *    ██      ██ ██   ███ ███████    ██    ██████  ██    ██   ███   
 *    ██      ██ ██    ██ ██   ██    ██    ██   ██ ██    ██  ██ ██  
 *    ███████ ██  ██████  ██   ██    ██    ██████   ██████  ██   ██ 
 *                                                                  
 *                                                                  
 */



/* DIVI Basis LIGHTBOX  */
.mfp-container{
  padding:1rem;
}
.mfp-container *{
  transition:.3s ease!important;
   cursor:pointer!important;
}
.mfp-content{
  height:100%;
  background:#fff;
  padding:0;
}
.mfp-figure,
.mfp-figure:after{
  box-shadow: none;
  height:100%;
}
.mfp-figure{
  max-height:calc(100vh - 4rem);
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.mfp-wrap,
.mfp-container,
.mfp-figure::after{
  background-color:#FFF!important;
  opacity:1.0;
}

.mfp-bg,
.mfp-fade.mfp-bg.mfp-ready,{
   background-color:transparent!important;
}



.mfp-image-holder .mfp-close{
  margin-top:0;
  margin-bottom:auto;
  flex: 0 0 auto;
}

.mfp-image-holder .mfp-close,
.mfp-wrap .mfp-container button:hover,
.mfp-image-holder .mfp-close:hover{
  position:relative;
  color:var(--ms-orange);
  opacity:1.0;
  height:48px!important;
  background-color:#fff!important;
  background-image:url(media/ggg-icon-close.svg)!important;
  background-repeat:no-repeat!important;
  background-size:auto 48px!important;
  background-position:center right!important;
  font-size:0px;
  top:0;right:0;
  padding:0;
  cursor:pointer!important;
}
.mfp-figure figure{
  padding: 0 4rem 0 4rem;
  background:#fff;
  flex: 1;
  min-height:0;
   display:flex;
  align-items: center;
  justify-content: center;
}
.mfp-figure figure img {
  max-height: 100%!important;       /* Bild darf maximal so hoch sein wie der Wrapper */
  max-width: 100%!important;        /* Bild darf maximal so breit sein wie der Wrapper */
  object-fit: contain!important;    /* Verhindert Verzerrung, Bild passt sich ein */
  width: auto!important;            /* Seitenverhältnis beibehalten */
  height: auto!important;           /* Seitenverhältnis beibehalten */
  padding:0!important;
}

.mpf-figure{
  height: 100%;
  display: flex;
}
/* Wirkt auf allgemeinen Inhalt UND Bilder (figure) beim Schließen */
.mfp-wrap.mfp-removing .mfp-content,
.mfp-wrap.mfp-removing .mfp-figure {
  transform: none !important; /* Verhindert jede Skalierung */
  transform: scale(1) !important; /* Fallback für ältere Browser */
}





.mfp-wrap.mfp-removing{
  display:none!important;
}

@media (max-width: 1024px){
 .mfp-figure figure{
  padding: 0 0 0 0;
  background:#fff;
}
}



















[data-lightbox-id]:not([data-lightbox-id=""]):not(.ms-lb-track){
  position:relative;
}

[data-lightbox-id]:not([data-lightbox-id=""]):not(.ms-lb-track):after {
  content: "▶";
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:6;
  position:absolute;
  bottom:0rem;right:0rem;
  width:3rem;height:2rem;
  background-color:var(--ms-orange);
  color:#000;
  font-size:12px;
  cursor:pointer;
}


/* --- Responsive Anpassung --- */

/* Tablet: 2 Spalten */
@media (max-width: 980px) {
  [data-lightbox-id]:not([data-lightbox-id=""]):not(.ms-lb-track):after{
    opacity:.6;
  }
}

/* Handy: 1 Spalte */
@media (max-width: 480px) {

}












body:not(.et-fb):not(.et-bfb) #ms-menu {
  position:fixed;
  top:0;
  left:100%;
  opacity:.0;

  transition: all .15s ease;


}


body:not(.et-fb):not(.et-bfb) #ms-menu.ms-show {
  position:fixed;
  top:0;
  left:0%;
  opacity:1;
  transition: all .25s ease 200ms;
}