/* =========================================================
   WF MOBILE – HEY Charlottenburg (clean)
   - Tabs (3D / Liste / Filter)
   - Preloader always visible
   - Filter scroll + sticky reset
   - Lightbox true centered (Android-safe)
   ========================================================= */

@media (max-width: 767px){

  :root{ --wf-tab-h: 64px; }

  /* -------------------------------------------------------
     GLOBAL
  ------------------------------------------------------- */

  html, body{
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden; /* Panels übernehmen eigenes Scrolling */
  }

  .dd_webgl_floorplan_wrapper,
  .interface_wrapper{
    width: 100vw !important;
    height: 100dvh !important;
    background: #5c6f62;
    position: relative !important;
  }

  /* kill desktop overlays */
  .disclaimer,
  #footer, #header, #header + hr,
  .interface_footer, .dd__footer{
    display: none !important;
  }

  /* -------------------------------------------------------
     MOBILE TABS
  ------------------------------------------------------- */

  .dd__mobileMenu{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: var(--wf-tab-h);
    display: flex !important;
    background: #5c6f62;
    border-bottom: 1px solid rgba(0,0,0,.1);
    z-index: 20000; /* unter preloader-bg, über content */
  }

  .dd__mobileMenu svg,
  .dd__mobileMenu svg *{
    pointer-events: none !important;
  }

  .dd__mobileMenu-item--active{
    background: rgba(255,255,255,.08);
  }

  /* -------------------------------------------------------
     PANELS (3D / LIST / FILTER)
  ------------------------------------------------------- */

  #v3d-container,
  .interface_menue,
  .interface_filter{
    position: fixed !important;
    top: var(--wf-tab-h);
    left: 0; right: 0; bottom: 0;
    height: calc(100dvh - var(--wf-tab-h));
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 5px !important;
  }

  /* default hidden */
  #v3d-container{ display: none; }
  .interface_menue,
  .interface_filter{ display: none; }

  body.dd__panel--3d-active     #v3d-container{ display: block; }
  body.dd__panel--list-active   .interface_menue{ display: block; }
  body.dd__panel--filter-active .interface_filter{ display: block; }

  /* -------------------------------------------------------
     PRELOADER – ALWAYS VISIBLE (safe)
  ------------------------------------------------------- */

  body.dd__preloading #v3d-container{
    display: block !important;
  }
.interface_table-header{
padding-top: 10px;

}
  body.dd__preloading .v3d-simple-preloader-background{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 30000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #5c6f62 !important;
  }

  body.dd__preloading .v3d-simple-preloader-bar{
    position: fixed !important;
    left: 14px;
    right: 14px;
    bottom: 20px;
    width: auto;
  }

  /* optional: preloader layout tweaks */
  .v3d-preloader__itemwrapper{
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
    height: 50%;
    margin: 0;
    padding: 0;
  }

  /* -------------------------------------------------------
     3D
  ------------------------------------------------------- */

  #v3d-container{
    background: #5c6f62;
    z-index: 1;
  }

  #v3d-container canvas{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* -------------------------------------------------------
     LIST PANEL
  ------------------------------------------------------- */

  .interface_menue{
    background: #fff;
    z-index: 2;
    overflow: hidden;
  }

  .interface_table_wrapper{
    height: 100%;
    overflow: hidden;
    
    background-color: rgba(243, 240, 238, 1);
    pointer-events: all;
  }

  .dataTables_scrollBody{
    height: calc(100dvh - var(--wf-tab-h) - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #tx_ddwohnungsfinder-table thead th,
  #tablepress-3 thead th,
  .dataTables_wrapper table thead th{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    text-align: center !important;
  }

  .dataTables_wrapper table.tablepress{
    font-size: 13px;
  }

  .dd_webgl_floorplan_wrapper td i{
    color: var(--bg-color--filter-border);
    display: block;
    margin-right: 0;
  }

  .dd_webgl_floorplan_wrapper td i::before{
    font-size: 30px;
    color: var(--bg-color--filter-border);
  }

  /* -------------------------------------------------------
     FILTER PANEL – scroll + compact + sticky reset
  ------------------------------------------------------- */

  .interface_filter{
    background: var(--mainColor, #d8d3cb);
    z-index: 3;

    padding: 5px 70px 18px !important; /* unten Platz für sticky reset */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;

    top: var(--wf-tab-h) !important;
    bottom: 0 !important;
    height: calc(100dvh - var(--wf-tab-h)) !important;
  }

  /* Wrapper darf nicht clippen */
  .interface__filter-wrapper,
  .interface_filter_content{
    height: 100% !important;
    overflow: visible !important;
  
  }

  .interface_filter_input_wrapper{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important; /* keine harten Prozent-Paddings mehr */
  }

  .interface_filter-section{
    padding: 10px 0 12px !important;
    margin-top: 18px !important;
    border-bottom: 1px solid rgba(0,0,0,.15);
  }

  .interface_filter-section:last-child{
    border: none;
  }

  .interface_filter_title{
    margin: 0 0 6px !important;
    padding: 10px 0 6px !important;
    font-weight: 800;
    color: var(--thirdColor, #ff5cb9);
  }

  /* slider */
  .noUi-target{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .noUi-connects{
    background: rgba(0,0,0,.15);
    height: 6px;
  }

  .noUi-connect{
    background: var(--thirdColor, #ff5cb9);
  }

  .noUi-horizontal .noUi-handle{
    width: 12px;
    height: 18px;
    background: rgba(0,0,0,.35);
    border: none;
    border-radius: 0;
  }

  .noUi-horizontal .noUi-handle::before{
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--thirdColor, #ff5cb9);
  }

  .noUi-tooltip{
    display: block !important;
    background: none !important;
    border: none !important;
    color: #000;
    font-weight: 800;
    font-size: 12px;
    top: 16px !important;
  }

  /* checkboxes */
  .checkboxWrap.rooms{
    display: flex;
    gap: 8px 14px;
  }

  .checkboxWrap.rooms .pretty .state label{
    font-weight: 700;
    font-size: 13px;
  }
  

  .checkboxWrap.rooms .pretty .state label:before{
    background: rgba(0,0,0,.25);
    width: 18px;
    height: 18px;
    border-radius: 0;
  }


  .checkboxWrap.rooms .pretty.p-default input:checked ~ .state label:before{
    box-shadow: 0 0 0 4px var(--thirdColor, #ff5cb9) inset;
  }

  /* result card */
  .interface_filter_result,
  .interface__filter-result{
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.18);
    text-align: center;
  }

  #filterValue_Count_Number{ font-size: 42px; }

  /* Sticky Reset */
  #btnResetFilter.interface__btn-reset--filter{
    position: sticky;
    bottom: 12px;
    z-index: 999;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 12px !important;
    padding: 12px 14px !important;

    background: var(--thirdColor, #ff5cb9);
    color: #fff !important;

    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;

    cursor: pointer;
  }

  #btnResetFilter.interface__btn-reset--filter i:before{
    color: #fff !important;
  }

  #btnResetFilter.interface__btn-reset--filter:active{
    transform: scale(.98);
  }

  /* -------------------------------------------------------
     LIGHTBOX – viewport fixed + real centering
  ------------------------------------------------------- */

  .interface_lightbox{
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none; /* per JS togglen */
    justify-content: center;
    align-items: center;

    padding: 16px;
    background: rgba(0,0,0,.65);

    width: 100vw;
    height: 100vh;
    left: 0 !important;
    right: 0 !important;
  }

  .interface_lightbox.is-open{
    display: flex;
  }

  .interface_lightbox_content{
    position: relative;
    display: block;

    width: min(92vw, 620px);
    height: min(82vh, 900px);

    margin: 0 auto;
    background-color: var(--color-border);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 15px;

    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    border-radius: 12px;
    overflow: hidden;

    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  .interface_lightbox_content > div:first-child{
    width: 100%;
    height: 100%;
  }

  .interface_lightbox #btnClose{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
  }

  .interface_lightbox #btnPDF{
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 5;

    display: inline-flex;
    gap: 8px;
    align-items: center;

    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #000;
  }

  /* -------------------------------------------------------
     HIDE FLOATING CONTROLS (mobile)
  ------------------------------------------------------- */

  .interface_controls,
  .dd__info-wrapper-box{
    display: none !important;
  }

  /* -------------------------------------------------------
     OPTIONAL: annotation position tweak (wenn du es brauchst)
  ------------------------------------------------------- */
  .v3d-annotation{
    top: -200px;
    left: -50px;
  }

  .interface__btn-close {

    display: none;
  }
}
@media (max-width: 767px){

  /* =====================================================
     PRETTY CHECKBOXES – MOBILE (Animation zurückholen)
     ===================================================== */

  /* 1) Dein globales "display:none" auf :after für mobile rückgängig machen */
  .interface_filter .pretty .state label:after{
    display: block !important;
  }

  /* 2) Base Box (unchecked) */
  .interface_filter .pretty.p-default.p-smooth .state label:before{
    width: 24px !important;
    height: 24px !important;
    border-radius: 0 !important;

    /* grauer Rahmen + transparent innen */
    border: 5px solid #a7a4a1 !important;
    background: transparent !important;

    box-shadow: none !important;
    transition: all .25s ease !important;
  }

  /* 3) Animated Fill Layer */
  .interface_filter .pretty.p-default.p-smooth .state label:after{
    width: 24px !important;
    height: 24px !important;
     border: 5px solid #a7a4a1 !important;

    /* pink innen */
    background: var(--thirdColor, #ff5cb9) !important;

    /* smooth animation */
    opacity: 0;
    transform: scale(.2);
    transition: all .25s ease !important;
  }

  /* 4) Checked State = Rahmen bleibt grau, innen pink fährt rein */
  .interface_filter .pretty.p-default.p-smooth input:checked ~ .state label:after{
    opacity: 1;
    transform: scale(1);
  }

  /* 5) Text styling */
  .interface_filter .pretty .state label{
    height: 24px;
    line-height: 24px;
    text-indent: 2em;
    vertical-align: middle;
    font-weight: 700;
    color: var(--activeColor) !important;
  }

  /* 6) Zimmer-Grid wie bei dir */
  .interface_filter .checkboxWrap.rooms{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px 16px !important;
    align-items: center !important;
  }

}

@media (max-width: 767px){

  /* Reset-Button: Text immer sichtbar auf Touch */
  #btnResetFilter.interface__btn-reset--filter span{
    opacity: 1 !important;
  }

  /* optional: Icon auch voll sichtbar */
  #btnResetFilter.interface__btn-reset--filter i::before{
    opacity: 1 !important;
  }
}