@charset "UTF-8";

/* =====================================================
   Ehe – iframe-Seite
   Basis (Desktop + Mobile)
   ===================================================== */

/* Grundlayout */
html,
body{
  margin: 0;
  padding: 0;
}

body.page-ehe-iframe{
  background-color: #630;
  color: #ffffff;
}

/* Wrapper transparent halten */
body.page-ehe-iframe .page,
body.page-ehe-iframe .main-content,
body.page-ehe-iframe .content-wrapper,
body.page-ehe-iframe .inside{
  background: transparent;
}

/* =====================================================
   Inhalt
   ===================================================== */

body.page-ehe-iframe .ehe-content{
  background: transparent;
  color: #ffffff;
  padding: 60px 40px;
  max-width: 760px;
  margin: 0 auto;
}

body.page-ehe-iframe .ehe-content h1,
body.page-ehe-iframe .ehe-content h2,
body.page-ehe-iframe .ehe-content h3{
  color: #ffffff;
}

body.page-ehe-iframe .ehe-content p,
body.page-ehe-iframe .ehe-content span,
body.page-ehe-iframe .ehe-content strong,
body.page-ehe-iframe .ehe-content em,
body.page-ehe-iframe .ehe-content a{
  color: #ffffff;
}

body.page-ehe-iframe .ehe-quote{
  font-style: italic;
  opacity: 0.9;
}

body.page-ehe-iframe img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* =====================================================
   MOBILE FIX – NUR MOBILE!
   Entfernt braune Overlay-Fläche über dem Text
   ===================================================== */

@media (max-width: 768px){

  /* iOS Höhe & Hintergrund */
  html,
  body{
    height: 100%;
    background: #630;
  }

  /* THEME-OVERLAYS (Pseudo-Layer) ausschalten */
  body.page-ehe-iframe::before,
  body.page-ehe-iframe::after,
  body.page-ehe-iframe .page::before,
  body.page-ehe-iframe .page::after,
  body.page-ehe-iframe .main-content::before,
  body.page-ehe-iframe .main-content::after,
  body.page-ehe-iframe .content-wrapper::before,
  body.page-ehe-iframe .content-wrapper::after,
  body.page-ehe-iframe .inside::before,
  body.page-ehe-iframe .inside::after{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Stacking Context stabilisieren */
  body.page-ehe-iframe,
  body.page-ehe-iframe .page,
  body.page-ehe-iframe .main-content,
  body.page-ehe-iframe .content-wrapper,
  body.page-ehe-iframe .inside{
    position: relative !important;
    z-index: 0 !important;
  }

  /* Inhalt nach vorne holen */
  body.page-ehe-iframe .ehe-content{
    position: relative !important;
    z-index: 5 !important;

    padding: 40px 20px;
    background: transparent !important;
    color: #ffffff !important;
  }

  body.page-ehe-iframe .ehe-content *{
    color: #ffffff !important;
  }
}


/* =========================================
   Mobile Close Button – zurück zur Home
   ========================================= */
@media (max-width: 768px){
  .ehe-close-x{
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    background: transparent;
    border: none;
    padding: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    z-index: 9999;
  }

  .ehe-close-x:hover{
    opacity: 0.75;
  }
}