/*
  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
*/
:root {
  --ms-:#000;
}










/* Subtiler Zero-G-Schwebeeffekt */
body:not(.et-fb) .floating-astronaut img {
  display: block;
  will-change: transform;
  animation: astronaut-float 6s ease-in-out infinite;
}

@keyframes astronaut-float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    /* Sanfter Hub nach oben mit minimaler Drehung */
    transform: translateY(clamp(-1.25rem, -2vw, -0.75rem)) rotate(1.5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Respektiert Systemeinstellungen zur reduzierten Bewegung */
@media (prefers-reduced-motion: reduce) {
  body:not(.et-fb) .floating-astronaut img {
    animation: none;
  }
}





/* Subtiler horizontaler Zero-G-Schwebeeffekt */
body:not(.et-fb) .floating-astronaut-horizontal img {
  display: block;
  will-change: transform;
  animation: astronaut-drift-horizontal 6s ease-in-out infinite;
}

@keyframes astronaut-drift-horizontal {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    /* Sanfter Drift zur Seite mit minimaler Drehung */
    transform: translateX(clamp(-1.25rem, -2vw, -0.75rem)) rotate(-1.5deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

/* Respektiert Systemeinstellungen zur reduzierten Bewegung */
@media (prefers-reduced-motion: reduce) {
  body:not(.et-fb) .floating-astronaut-horizontal img {
    animation: none;
  }
}








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

:root {
  /* Standard-Cursor: Weißer Ring-Hintergrund, oranger Kern r=2 */
  --cursor-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='rgba(255,255,255,0.3)' stroke='%23000000' stroke-width='1.25'/%3E%3Cline x1='12' y1='1' x2='12' y2='4.5' stroke='%23000000' stroke-width='1.25' stroke-linecap='round'/%3E%3Cline x1='12' y1='19.5' x2='12' y2='23' stroke='%23000000' stroke-width='1.25' stroke-linecap='round'/%3E%3Cline x1='1' y1='12' x2='4.5' y2='12' stroke='%23000000' stroke-width='1.25' stroke-linecap='round'/%3E%3Cline x1='19.5' y1='12' x2='23' y2='12' stroke='%23000000' stroke-width='1.25' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23FE5100'/%3E%3C/svg%3E") 12 12, auto;
}

/* Nur im Frontend aktiv – Visual Builder behält System-Cursor */
html:not(.et-fb),
body:not(.et-fb) {
  cursor: var(--cursor-target);
}





/* Der Strahl als echtes DOM-Rechteck */
.retro-laser-beam {
  position: fixed;
  top: 0;
  left: 0;
  width: 0.0625rem; /* 1px */
  background-color: #fe5100;
  pointer-events: none;
  z-index: 9999999;
  transform-origin: top center;
  will-change: transform, opacity;
  animation: beam-strike 0.09s linear forwards;
}

/* Einschlag-Blitz (nur 1 Frame, quadratischer Retro-Pixel) */
.retro-impact-pixel {
  position: fixed;
  width: 0.25rem;  /* 4px */
  height: 0.25rem;
  background-color: #ffffff;
  pointer-events: none;
  z-index: 9999999;
  transform: translate(-50%, -50%);
  animation: pixel-flash 0.08s steps(2, end) forwards;
}

/* Wackler */
img.hit-shake {
  animation: hit-shake 0.12s ease-in-out;
}

@keyframes hit-shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-0.1875rem, 0.09375rem); }
  75% { transform: translate(0.1875rem, -0.09375rem); }
  100% { transform: translate(0, 0); }
}

/* Splitter-Partikel */
.retro-debris {
  position: fixed;
  pointer-events: none;
  z-index: 9999998;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  animation: debris-shatter 0.75s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* Strahl schießt aus der Kanone nach vorne ins Ziel und löst sich auf */
@keyframes beam-strike {
  0% {
    transform: translate3d(var(--ox), var(--oy), 0) rotate(var(--deg)) scaleY(0);
    opacity: 1;
  }
  60% {
    transform: translate3d(var(--ox), var(--oy), 0) rotate(var(--deg)) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--ox), var(--oy), 0) rotate(var(--deg)) scaleY(1);
    opacity: 0;
  }
}

@keyframes pixel-flash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

@keyframes debris-shatter {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.3);
  }
}





















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


.grid{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  --grid-bg: #ffffff;
  --grid-color: rgba(17, 17, 16, 0.08);
  --cross-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 9v2M9 10h2' stroke='rgba(254, 81, 0, 1.0)' stroke-width='0.1' stroke-linecap='square'/%3E%3C/svg%3E");

  /* Geometrie */
  --grid-interval: 4rem;
  --grid-width: 1px;
  --cross-step: 3;
  --cross-interval: calc(var(--grid-interval) * var(--cross-step));
  --p: calc((var(--grid-width) * 0.5) - (var(--cross-interval) * 0.5));

  background-color: var(--grid-bg);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  }

  /* Ebene 1: Linienraster */
  &::before {
    background-size: var(--grid-interval) var(--grid-interval);
    background-image: 
      linear-gradient(to right, var(--grid-color) var(--grid-width), transparent var(--grid-width)),
      linear-gradient(to bottom, var(--grid-color) var(--grid-width), transparent var(--grid-width));
  }

  /* Ebene 2: Kreuze */
  &::after {
    background-position: var(--p) var(--p);
    background-size: var(--cross-interval) var(--cross-interval);
    background-repeat: repeat;
    background-image: var(--cross-svg);
  }
}



.grid-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Farben & Geometrie */
  --grid-bg: #111110;
  --grid-color: rgba(255, 255, 255, 0.08); /* Weißes Basis-Grid */
  --grid-interval: 4rem;
  --grid-width: 1px;

  background-color: var(--grid-bg);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;

    /* Radialer Verlauf (Vignette) */
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);

    /* Linienraster */
    background-size: var(--grid-interval) var(--grid-interval);
    background-image: 
      linear-gradient(to right, var(--grid-color) var(--grid-width), transparent var(--grid-width)),
      linear-gradient(to bottom, var(--grid-color) var(--grid-width), transparent var(--grid-width));
  }
}















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



/* 1. Scroll-Lock für den Hintergrund */
body:not(.et-fb):has(.terminbuchung-ol.active) {
  overflow: hidden;
}

/* 2. Basis-Overlay: Bleibt fixiert, animiert Sichtbarkeit & Blur */
body:not(.et-fb) .terminbuchung-ol {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: 
    opacity 0.25s ease,
    backdrop-filter 0.25s ease,
    -webkit-backdrop-filter 0.25s ease,
    visibility 0.25s ease;
  will-change: opacity, backdrop-filter;
}

/* 3. Vorpositionierung im geschlossenen Zustand */
/* Column 1 (Schließen-Button): Steht oben außerhalb */
body:not(.et-fb) .terminbuchung-ol .et_pb_column_1_tb_header {
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  will-change: transform, opacity;
}

/* Column 2 (Buchungskalender & Formular): Steht unten versetzt */
body:not(.et-fb) .terminbuchung-ol .et_pb_column_2_tb_header {
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  will-change: transform, opacity;
}

/* 4. Overlay Aktiv: Sofort sichtbar & Blur fährt in 250ms hoch */
body:not(.et-fb) .terminbuchung-ol.active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 5. Gestaffelter Einschub nach dem Blur */
/* Schließen-Button gleitet nach 180ms von oben rein */
body:not(.et-fb) .terminbuchung-ol.active .et_pb_column_1_tb_header {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.18s;
  transition-delay: 0.5s;
}

/* Buchung/Grid gleitet sanft nach 220ms von unten rein */
body:not(.et-fb) .terminbuchung-ol.active .et_pb_column_2_tb_header {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.5s;
}








body:not(.et-fb):has(.terminbuchung-ol.active) {
  overflow: hidden;
}

/* 2. Typografie & Farben */
.terminbuchung-ol,
.terminbuchung-ol p,
.terminbuchung-ol h3 {
  color: #f6f5f2 !important;
}

.terminbuchung-ol h3 {
  font-size: clamp(1.25rem, 1.02rem + 0.97vw, 1.75rem) !important;
  font-weight: 650 !important;
}

.step-header {
  padding-bottom: 2rem;
}

/* 3. Struktur-Reset */
.terminbuchung,
.steps,
.step-1 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-direction: column;
}

/* 4. Der Haupt-Scroll-Container (Optimiert) */
#booking-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: 50vh;
  overflow: auto; /* Aktiviert X- und Y-Scroll */
  -webkit-overflow-scrolling: touch; /* Zwingend für iOS */
  
  scrollbar-width: thin; 
  scrollbar-color: #cccccc transparent; 
}

/* WebKit Scrollbar für das Grid */
#booking-grid::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
}
#booking-grid::-webkit-scrollbar-track {
  background: transparent;
}
#booking-grid::-webkit-scrollbar-thumb {
  background-color: #cccccc; 
  border-radius: 1rem;
}

/* 5. Der innere Flex-Container */
.booking-columns {
  display: flex;
  flex-direction: row;
  gap: 0; 
  width: max-content; /* ZWINGEND: Zwingt den Container über 100% hinaus, wenn nötig */
  padding-bottom: 1rem;
  font-weight: 500;
  font-size: 1.0625rem;
}

/* 6. Spalten & Buttons */
.booking-day-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto; 
  gap: 0.5rem;
  padding: 0 0.75rem;
  background-color: rgba(255, 255, 255, 0);
  border-right: 1px solid #6b6a66;
  font-weight: 500;
  font-size: 1.0625rem;
}

.booking-day-column:last-child {
  border-right: none;
}

.booking-columns button:disabled {
  display:none;
}

.booking-columns button {
  color: #000;
  background-color: #fff;
  border: none;
  padding: 0.2em 0.5em;
  font-size: 1.0625rem;
  font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  line-height: 1.6em;
  border-radius: 0.3125rem;
  font-weight: 630;
}

.booking-columns button:not(:disabled):hover {
  background-color: #e9500e;
  color: #000;
  cursor: pointer;
}



/* Ausgewählter Slot bleibt dauerhaft markiert */
.booking-columns button.is-selected {
  background-color: #e9500e !important;
  color: #fff !important; /* oder #000 nach Wunsch */
  border-color: #e9500e !important;
  box-shadow: 0 0 0 2px rgba(233, 80, 14, 0.3);
  font-weight: 700;
}

/* 7. Formulare */


.step-2{
  display:flex;
  flex-direction: column;
}

.step-2 input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;

  border-radius:0.3125rem;
  font-size:17px;
  color:#000;
  border:none;
  outline:none;
  line-height: 1.6em;
  font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif;
  padding:0.2em 0.7em;
  font-weight: 630;
}




#submit-booking,
.back-to-step-1{
  cursor:pointer;
  padding:0.4em 0.7em;
  line-height:1.7em;
  font-weight: 500;
  font-size: 1.0625rem;
  border-radius:22px;
  font-family: var(--et_global_body_font);
  color:#e9500e;
  background-color:#000;
  border:none;
  outline:none;
  margin-bottom:2rem;
}
#submit-booking:hover{
  background-color:#e9500e;
  color:#000;
}


.back-to-step-1{
  color:#6b6a66;
  background:transparent;
  font-size:15px;
}






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



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

.project-masonry-gallery {
  column-count: 1;
  column-gap: 1rem;
  width: 100%;
}

@media (min-width: 48rem) {
  .project-masonry-gallery {
    column-count: 2;
  }
}

@media (min-width: 64rem) {
  .project-masonry-gallery {
    column-count: 3;
  }
}

.project-masonry-item {
  margin: 0 0 1rem 0;
  break-inside: avoid;
}

.project-masonry-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border:1px solid #6b6a66;
}






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



/* 1. Spalten-Absicherung: Block-Flow erzwingen & Clearfix */
.project-intro-wrap .et_pb_column {
  display: block;
}

.project-intro-wrap .et_pb_column::after {
  content: "";
  display: table;
  clear: both;
}

/* 2. Divi 5 BFC-Reset: Verhindert, dass nachfolgende Module das Umfließen blockieren */
.project-intro-wrap .et_pb_module:not(.project-float-img) {
  overflow: visible;
  clear: none;
}

/* 3. Bild-Modul: Float ab Tablet/Desktop */
@media (min-width: 48rem) {
  .project-float-img {
    float: left;
    width: 33%;
    margin-right: 4rem;
    margin-bottom: 4rem;
  }
}

/* 4. Mobile Ansicht: Kein Float, volle Breite */
@media (max-width: 47.9375rem) {
  .project-float-img {
    float: none;
    width: 66%;
    margin-right: auto;
    margin-left:auto;
    margin-bottom: 2rem;
  }
}

/* 5. Bild-Styling */
.project-float-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
  border:1rem solid #FFF;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.18);
}

/* 6. Vertikale Abstände im Header-Bereich */
.project-intro-wrap h1,
.project-intro-wrap .et_pb_heading {
  margin-bottom: 0;
}

.project-intro-wrap .projekt-badges {
  margin-bottom: 0;
}


.projekt-badges{
  max-width:440px;
}