/*
Description: Custom Styles for Immofischer Plugin
*/

.hidden { display: none !important; }

input[readonly] { border: none; padding: 0; background: none;}

.buttongroup { display: flex; justify-content: space-between;align-items: center; width: 100%;margin-top: 2rem;}
.buttongroup button { font-size: var(--fontsize-s)}
.buttongroup button a { color: var(--light); text-decoration: none;}
.buttongroup button:focus-visible,
.buttongroup button:has(a:focus-visible) {
    background: var(--overlay-medium);
    color: var(--secondary); 
    outline: 2px solid var(--highlight);
    outline-offset: -2px;
}

.buttongroup button:focus-visible a { color: var(--secondary);}
.buttongroup button a:focus-visible {outline: none;}

#filter-list-objektart-objektart { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    list-style-type: none;
    width: 100%;
    padding: 0;
}

#filter-list-objektart li { 
    -webkit-box-flex: 0; 
        -ms-flex: 0 1 auto; 
            flex: 0 1 auto;
    list-style-type: none;
    background: var(--medium); 
    color: var(--light);
    font-size: var(--fontsize-xxs);
    font-weight: 600;
    text-align: center;
    border-radius: var(--border-radius);
    padding: 0.5em 1em;
    margin: 0.5rem;
    cursor: pointer;
}

#filter-list-objektart li:hover { background: var(--secondary);}
#filter-list-objektart li::marker { content: '';}

#filter-list-objektart li a,
#filter-list-objektart li a:hover { color: var(--light); text-decoration: none;}

.immobilien-template-default main .content > * { padding: 0 1rem; }
.immobilien-template-default main .content > *:first-child { padding-top: 4rem; }
.immobilien-template-default main .content > *:last-child { padding-bottom: 4rem; }

.summary { display: grid; grid-template-columns: repeat(4, auto);justify-items: start;width: auto;}
.summary p span { display: block; color: var(--secondary);font-size: var(--fontsize-xl);font-weight: bold }

.wrapper:has(> .gallery) { flex-wrap: wrap;width: 100%;max-width: calc(100vw - 2rem);height: auto;margin-right: 0;overflow: hidden;}

.gallery,
.gallery_thumbs { width: 100%;}

.immosort-archive select { line-height: 1.4em;margin-bottom: 2em;}
#immosort-sort-loading p { text-align: center;margin-bottom: 2em;}

.immobilienliste {}

.immobilienliste .immobilie { padding: 1rem;border: 1px solid var(--overlay-medium);margin-bottom: 1rem;overflow: hidden;}
.immobilie > * { color: var(--dark);}
.immobilie > a {text-decoration: none;}
.immobilie > a:hover {color: var(--txt) !important;opacity: 0.7;}
.immobilie h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    margin-bottom: 0.5em;
}
.immobilie .wp-block-post-image { width: calc(100% + 2rem);margin: -1rem;margin-bottom: 1rem;}

.immobilienliste .immobilie p { margin: 0;}
.immobilie table { width: 100%; text-align: left; font-size: var(--fontsize-m);margin-top: 1em;}
.immobilie table td { width: 60%;padding-top: 0.25em;padding-bottom: 0.25em;border-bottom: 1px solid var(--overlay-medium); }
.immobilie table tr:last-of-type td { border-bottom: none; }
.immobilie table td + td { width: 40%; }

/*** Energieskala ***/

.immobilie table.energie_skala__referenz tr:not(:nth-of-type(2)) {
    background: linear-gradient(to right,  #00aa00 0%,#ffdd00 37%,#fcb400 50%,#fc7e00 60%,#ff0000 92%);
}

.immobilie table.energie_skala__referenz td {  width: calc(100% / 56);padding: 0.25em;border: none;}
.immobilie table.energie_skala__referenz td.marked {  background: var(--medium);color: var(--light)}
.immobilie table.energie_skala__referenz tr:first-of-type td {  font-weight: 500;}
.immobilie table.energie_skala__referenz tr:first-of-type td:first-of-type {  font-weight: 500;padding: 0.25em 0 0.25em 0.5em; }
.immobilie table.energie_skala__referenz tr:nth-of-type(2) td { text-align:center;line-height: 1;border-top: 0.5em solid var(--light);padding: 0;}
.immobilie table.energie_skala__referenz tr:last-of-type td { padding: 0;padding-bottom: 0.5em }

.immobilie #energie_skala__skala[value] {
display: block; 
width: 100% ; 
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: var(--light);
border: 1px solid var(--light);
outline: none;
}

.immobilie #energie_skala__skala[value]::-webkit-progress-bar {  background-color: transparent;  border-radius: 0;}

.immobilie #energie_skala__skala[value]::-webkit-progress-value {
  background-color: transparent;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1em 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpolygon points='6.5706141 .5 .5 9.5 12.5 9.5 6.5706141 .5' fill='%23333' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

    /* Firefox */
    .immobilie #energie_skala__skala[value]::-moz-progress-bar {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpolygon points='6.5706141 .5 .5 9.5 12.5 9.5 6.5706141 .5' fill='%23333' stroke='%23333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

.immobilie #energie_skala__skala[value=""],
.immobilie #energie_skala__skala[value=""]::-webkit-progress-bar,
.immobilie #energie_skala__skala[value=""]::-webkit-progress-value,
.immobilie #energie_skala__skala[value=""]::-moz-progress-bar {  display: none !important; }

.immobilie .summary { margin: 1rem 0;}
.immobilie small { display: block;text-align: left; margin: 2rem 0 1rem 0;}

.single-immobilien .post-thumbnail { display: none;}
.single-immobilien .buttongroup { display: flex; justify-content: flex-end;align-items: center;}
.single-immobilien .buttongroup button { margin-left: 2rem;}
.gallery_thumbs .swiper-slide { opacity: 0.4; }
.gallery_thumbs .swiper-slide-thumb-active { opacity: 1; }



/*** Media Queries ***/

@media screen and ( min-width: 600px ) {

    #filter-list-objektart li { font-size: var(--fontsize-xs); } 

    .immosort-archive select { max-width: calc(50% - 0.5rem);margin-left: auto;}
    .immobilienliste { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 1rem;margin-bottom: 0;}
    .immobilienliste .immobilie { margin-bottom: 0;}


}
@media screen and ( min-width: 782px ) {
    /* .immobilie .summary,
    .immobilie .expose { width: 50%;} */
    .immosort-archive select { max-width: calc(100% / 3 - 0.5rem);}
    .immobilienliste { grid-template-columns: repeat(3, 1fr);}
    .single-immobilien .wp-block-columns { flex-wrap: nowrap; align-items: flex-start;}

    .wrapper:has(> .gallery) { max-width: calc(68rem * 0.4);}

}

@media screen and (min-width: 1088px) {
    .immosort-archive select { max-width: calc(25% - 0.5rem);}
    .immobilienliste { grid-template-columns: repeat(4, 1fr);}
}

@media screen and (min-width: 1281px) {}

@media screen and (min-width: 1320px) {}

@media print {

    @page {
    size: A4;
    margin: 2cm 2.5cm;
    }

    .page-break {
    break-before: page; /* moderne Property */
    page-break-before: always; /* Fallback */
    padding-top: 12rem;
  }

   body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    }

    #top .nav_responsive, .gallery, .gallery_thumbs, .buttongroup { display: none;}
    .single-immobilien .post-thumbnail { display: block;width: 100%;}
    .single-immobilien  main .content > :first-child { padding-top: 0;}
    .single-immobilien  main .content > .wp-block-columns { flex-wrap: wrap;width: 100%;}
    .single-immobilien  main .content > .wp-block-columns .wp-block-column { flex: 0 0 100% !important;}
    
    .immobilie table.energie_skala__referenz tr:nth-of-type(2) {  display: none !important;}
    .immobilie table.energie_skala__referenz td {  border: none !important;}
    .immobilie table.energie_skala__referenz td.marked {  border: 2px solid var(--txt)!important;}

}