/*
Theme Name: Wordpress 2025 Theme
Datum: 19.11.2025
Description: A simple Wordpress Theme build for Drupal.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

:root {
  
  --cicolor:#c0a14e;/*#BB9D5A;*/
  --linkcolor:var(--cicolor);
  --textcolor:#fff;
  --textcolor-dark:#111;
  --bgcolor:#111;
  --bgcolor-header: #000;
  --bgcolor-footer:#000;

  --maxwidth:1150px;
  --seitenpadding-topbottom:5vmax;
  --seitenpadding:2rem;

  --button-size:30px;
  --button-color: var(--textcolor-dark);
  --button-background:var(--cicolor);

  @media screen and (max-width:425px) {
      --seitenpadding:1rem;
    }

}





::selection {
    background-color:var(--linkcolor);
}

@font-face{
    font-family:"cifont";
    font-style:normal;
    font-weight:300;
    src:url("fonts/nunito-reg.ttf"),local("Arial");
    font-display:swap
}

@font-face{
    font-family:"cifont-header";
    font-style:normal;
    src:url("fonts/playfairdisplay.ttf"),local("Times New Roman");
    font-display:swap
}


h1,h2,h3,h4,h5,h6{
    font-family:"cifont-header",sans-serif
}
h1,h2,h3,h4,h5{
    line-height:1.3;
    margin:0 0 20px 0;
    position:relative
}
h1{
    font-size:3.7rem;
    @media screen and (max-width:425px) {
      font-size:2.5rem;
    }
}
h2{
    font-size:2.3rem;
     @media screen and (max-width:425px) {
        font-size:1.5rem;
    }
}

body {
    background-color: var(--bgcolor);
    color:var(--textcolor);
    padding:0;
    margin:0;

    font-family:"cifont","Arial",sans-serif;
}


li {
    margin-bottom:1rem; 
}


a {
    color: var(--linkcolor);
    &:hover {
        text-decoration: none;
    }
}

img {
    max-width: 100%;
}
video {
    max-width:100%;
    max-height:80vh;
}

/*veraltet vor wp
section {
  padding-top:var(--seitenpadding-topbottom);
  padding-bottom:var(--seitenpadding-topbottom);
}*/

.paddingtopbottom {
   /* @include paddingtopbottom();*/
   padding-top:var(--seitenpadding-topbottom);
  padding-bottom:var(--seitenpadding-topbottom);
}
.paddinglinksrechts {
   /* @include paddinglinksrechts();*/
    padding-left:var(--seitenpadding);
    padding-right:var(--seitenpadding);
}

.hidden {
    display: none;
}

.limiter {
   /* @include maxwidth('limited');*/
     max-width: var(--maxwidth);
     margin-left:auto;
     margin-right:auto;
}

.maxwidth-full {
  max-width: unset;
  padding-left:unset !important;
  padding-right:unset !important;
}

/* Jeden "Abschnitt" auf Seite begrenzen */
main > section > article{ 
  > div, > p, > figure, > blockquote, > h1, > h2, > h3, >h4, >h5, >ul, >ol {
    max-width: var(--maxwidth);
    margin-left:auto;
    margin-right:auto;

    /* Begrenzung nur mit padding LR */
    @media screen and (max-width:1300px) {
      max-width:unset !important; /* Begrenzung nur mit padding LR */
      padding-left: var(--seitenpadding);
      padding-right: var(--seitenpadding);
    }

    @media screen and (max-width:915px) {
    }
    @media screen and (max-width:425px) {
      
    }
        
  }

  > figure.wp-block-image {
    text-align: center;

  }
}

  



/* HEADER */
header {
    background-color: var(--bgcolor-header);

    > div {
      justify-content: space-between;
      align-items: center;

      padding-left: var(--seitenpadding);
      padding-right: var(--seitenpadding);
    }

    /* Nur für Anpassungen im Header */
    .menu {
        flex-grow:1;
        text-align: right;


        /*@include responsive('tablet-down'){
            display:none; // initial ausblenden, damit es nicht flackert
        }*/

        @media screen and (max-width:915px) {
          display:none;
        }
        @media screen and (max-width:425px) {
        }
        
        nav {
            
            justify-content: space-evenly; /* Menü-Punkte eng zusammen anzeigen */


            /* .menu-main-menu-container */
            &> div {
                

              ul {
                padding:0;
                margin:0;
                display:flex;
                justify-content: space-evenly;
                li {
                  list-style :none;
                  display: block;
                  margin:0;
                }
              }
            }
            
        }
    }

    
    .logo{
      flex-basis: 320px;
      min-width: 320px;
      color:var(--cicolor);

      cursor: pointer;
      
        a {
            transition: all 0.5s;
          font-weight: bold;
          font-family: 'cifont-header';
          white-space: nowrap;
          font-size:2rem;

          padding:1rem;
          text-decoration: none;
      
          display: inline-block;

          @media screen and (max-width:425px) {
          font-size:1.7rem;
         }

             
        > img {
            display: block;
            height:auto;
            padding:5px; /* Rand */
        }

          &:hover{
              filter:brightness(1.5);
          }
      }
      

      /* @include responsive('tablet-down'){
          min-width: unset;
          height:auto;
      }
      @include responsive('phone'){
          flex-basis: unset;
      }
          */

      @media screen and (max-width:915px) {
        min-width: unset;
        height:auto;
      }
      @media screen and (max-width:425px) {
        flex-basis: unset;
      }

  


      /* Custom Logo ausgewählt */
      .custom-logo-link {
        padding: 0;
        display: block;
        &:hover {
          filter:unset;
        }
        img {
          height:auto;
          display: block;
          max-height: 80px;
          width: auto;
          
        }

      }

          
    }

    


    
    /* Responsive Navigation (mobile burger menu) */
    .burger {
        
        display:block !important;
            
        /* Burger-Button */
        &:after {
            display: none;
            content:'☰';
            object-fit: contain;
            font-size: 3rem;
            /*padding-right: 12px;*/
            color:var(--linkcolor);

            /*@include responsive('tablet-down'){
                display:block;
            }*/
            
            @media screen and (max-width:915px) {
              display:block !important;
            }
            @media screen and (max-width:425px) {
            }
        }

        /* Spezialisierung nav für mobile */
        nav {
            display:none;
            z-index: 1;
            width:100%;

            ul {
              top: 0;
              right: 0;
              min-width: 50%;
              position: fixed;

              
              color: var(--textcolor);
              
              /* flex mit klasse .open */
              flex-direction: column;
              justify-content: flex-start;
              align-items: stretch;
              flex-wrap: nowrap;
            
            }


            a {
                background-color: #fefefe;
                border-bottom:1px #eee solid;
                text-align: center; 
                display: block;
                width: 100%;
            }


        }

        /* Burger offen soll Menü zeigen */
        &.open {
          nav {
              display: flex;

              > div {
                width:100%;
                display: flex;
              }
              
              ul {
                display: flex;
                z-index: 100;
                right:var(--button-size);

              }

              /* und einen neuen close button für das menu */
              & .closeburger {
                  /*@include roundbutton(); */
                  position: absolute;
                  bottom: 0;
                 /* transform: translate(-50%, 50%);*/
                  margin-bottom: calc(var(--button-size) / -2);
                  margin-left: calc(var(--button-size) / -2);
              }
              
          }

            

        }

    }
    
}


/* Navigation Standard Header, Footer, oder woanders (aber nicht mobile) */
nav {
    justify-content: space-between;
    align-items: center;
    

    a {
        text-decoration: none;
        padding:5px 10px;
        transition: all 0.5s;
        font-weight: bold;
        font-family: 'cifont-header';
        white-space: nowrap;
        font-size:1.5rem;


        &:hover{
            filter:brightness(1.5);
        }

    }  
}


main {
    position: relative;
}


/* Footer */
footer {
    
    background-color: var(--bgcolor-footer);
    /*@include paddinglinksrechts();*/
    padding-left:var(--seitenpadding);
    padding-right:var(--seitenpadding);

    > .flexwrapper {
        justify-content: space-around;
        align-items: center;
        @media screen and (max-width:915px) {
        }
        @media screen and (max-width:425px) {
              flex-direction: column;
        }

        /* Made by */
      > div:nth-of-type(1) {
        flex-grow:1;
      }
        /* Logo */
      > div:nth-of-type(2) {
         flex-grow:1;
        >a {
          display: block;
          img {
            max-height: 60px;
            width: auto;
            display: block;
          }
        }
      }
    }

    nav.flexwrapper {
        flex-direction: column;
        align-items: flex-start;
        ul  {
          display: inline-flex;
          flex-direction: column;
          padding:0;
          margin:0;
          li {
            list-style: none;
            margin:0;
            display: inline-flex;
          }
        }

        a {
            width:100%;
            font-size:1rem;
            padding: 8px 1vw;
            /*@include responsive('tablet-down'){
                font-size: 0.8rem;
                padding:10px 2px;
            }*/
            @media screen and (max-width:915px) {
              font-size: 0.8rem;
              padding:10px 2px;
            }
            @media screen and (max-width:425px) {
            }
        }

       
    }

    /* Logo */
    img {
        max-height:150px;
    }
}

.flexwrapper{
    display: flex;
}




/* Scroll-Top Button */
.scrolltop {

    /*@include roundbutton(); */

    margin: auto;
    position: fixed;
    bottom:10%;
    right:10%;
    opacity: 0;

    background-color:unset;
    padding:0 !important;

    filter: drop-shadow(0 0 5px rgba(0,0,0,1));

    &.show {
        opacity: 1;
    }

    > div{
        text-align: right;
        border-radius:50%;
        aspect-ratio: 1;
        width:var(--button-size);
        background-color: var(--cicolor);

        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

}



/* Content Button (Close, Scrolltop) */
.contentbutton {
    outline:3px transparent solid;
    background-color: var(--button-background);
    color: var(--button-color);

    cursor: pointer;

    border:0;
    border-radius:calc(var(--button-size) / 2);
    padding:5px 10px;
    font-weight: bold;
    font-size: 20px;
    line-height: 0;
    display: inline-block;
    place-content: center;
    
    min-width:var(--button-size);
    min-height:var(--button-size);
    /*margin-top:calc( var(--button-size) / 2 *-1);
    margin-right:calc( var(--button-size) / 2 *-1);
    */
    transition:all 0.3s;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    
    &:hover {
        transform: scale(1.1);
    }
}

.wp-block-group {
  padding-top:1vmax;
  padding-bottom:1vmax;
 /* outline:1px red solid;*/
}

/* Shortcode Background */
.sc-background {
  position: relative;
  img {
  width:100%;
  max-height:90vh;
  height:500px;
  object-fit: cover;
  display: block;
  }

 > div {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: flex;
    text-align: center;
    flex-direction: column;
    place-content: center;
    align-items: center;
    justify-content: center;
 }
}


.lightbox {
 .lb-caption {
   display: none !important ; 
   
  }

  .lb-number {
    padding-top: 0.3rem;
    font-size: 1rem;
   }
}

/* Shortcode Lightshow */
.sc-lightshow {

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;

  margin-top:var(--seitenpadding-topbottom); /* Rand zu anderen Lightshows wie die gap */
  margin-bottom:var(--seitenpadding-topbottom);

  
  > a {
    position: relative;
      overflow: hidden;

    > img {
      display: block;
    }
    &:after {
      content:'🔍';
      display: grid;
      position: absolute;
      top:0;
      right: 0;
      aspect-ratio: 1;
      place-content: center;
      transition: all 0.3s;
    }
    &:hover {
      &:after {
        transform: scale(1.3);
        transform-origin: top right;
      }
    }
  }

  /* Shortcode-Attribut class="big" == 300px */
  &.big {

    > a {
      display: block;
      > img {
       object-fit: cover; /* da kein thumbnail was quadratisch ist */
        height: 204px; /*204: mobile 2 nebeneinander */
        width: auto;
        aspect-ratio: 2/3;
        min-width:70px;
         display: block;
      }
    }
  }

 
}




.height-auto{
  height:auto;
}

.escort-images-list {
    display: flex;
    flex-wrap: wrap;
    > img {
      flex-basis:33%;
      height: auto;
      max-width: unset;
      width:0;
    }
}

/* Lightshow Bilder links ausrichten */
.flex-start {
  justify-content: flex-start;  
}

/* Kanton Auswahl als Liste */
.kantonauswahlliste-wrapper{
  padding-bottom:2rem;

  display: flex;
  flex-wrap: wrap;
  gap:0.6rem;

  
  > div {
    display: block;
    position: relative;
    > a {
      display:flex;
      align-items: center;
      gap:5px;
    }
  }

 /* .kantonname {
   
  } */
  img {
    width: 30px;
    aspect-ratio: 1;
    height:auto;
  }
}

@media screen and (max-width:500px) {
  .kantonauswahlliste-wrapper{
    a {
      font-size: 0.8rem;
    }
  }
      
}

/* Kanton Seite */
.archive-page {
 
  
  .archive-header {
    display: flex;
    justify-content: start;
    align-items: center;
    gap:1rem;
    padding-left:var(--seitenpadding);
    padding-right:var(--seitenpadding);
    padding-right:var(--seitenpadding);
    h1 {
      margin:0;
    }
  }

  .items-wrapper{
    padding-left:var(--seitenpadding);
    padding-right:var(--seitenpadding);
    padding-top:var(--seitenpadding-topbottom);
    padding-bottom:var(--seitenpadding-topbottom);
    display: flex;
    flex-wrap: wrap;
    gap:var(--seitenpadding);

   

    .item {
      min-width:120px;
      flex-basis: 23%;

      img {
        max-height:500px;
        aspect-ratio: 2/3;
        object-fit: cover;
        object-position: center 80%;
        height:auto;
      }
      
    }
  }

  /*
  Source - https://stackoverflow.com/a
  Posted by beerwin
  Retrieved 2025-11-15, License - CC BY-SA 3.0
  */
  .fallback-archiveimage {
    position: relative;
      background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
      display: inline-block; /*to ensure it wraps correctly around the image, even if it is a a or span tag*/
      width:100%;
      aspect-ratio: 2/3;
      height:auto;

      min-width: 150px; 
      min-height: 150px;
      background-position: center center; /* fallback for older browsers */
      background-size: cover;
      background-repeat: no-repeat;
      border:2px black solid;
      &:after {
        position: absolute;
        display: block;
        width:100%;
        height:100%;
        top:0;
        left:0;
        content:"Kein Bild";
        place-content: center;
        display: grid;
      }

      
    .falbackimage {
        width:100%;
        min-width:150px;
        min-height: 150px;
        background-position: center center; /* fallback for older browsers */
        /*background-size: cover;
        background-repeat: no-repeat;*/
    }
  }

  



   /* Escort Eintrag */
  .entry-content{

    > a.escort-item-link {
      text-decoration: none;
      &:hover {
      > div > div > img {
        filter:saturate(105%) contrast(110%) brightness(105%);
      }
      .banner-whatsapp {
        transform:translate(1rem, 0rem) rotate(-10deg) scale(1.1);
      }
    }
    
    .img-container{
      position: relative;
      > img {
        transition: all 0.3s ease-in-out;
      }
    }

  
    .banner-whatsapp{
      position: absolute;
      bottom:0;
      right:0;
      background-color: #20d466; /* WhatsApp Grün */
      padding: 0.2rem 0.4rem;
      color:var(--bgcolor);
      display: block;
      font-size:0.9rem;
      box-shadow: -5px -5px 10px 2px rgba(0,0,0,0.5);
      transform:translate(1rem, 0rem) rotate(-10deg);
      font-weight: bold;
      transition: all 0.3s ease-in-out;

      @media screen and (max-width:425px) {
        font-size: 0.6rem;
        transform:translate(0.2rem, -0.3rem) rotate(-10deg);
      }

      &:after {
        content: "WhatsApp" ;
      }
    }

      h2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        line-height:1;
        text-overflow: ellipsis;
        min-height: 3.2rem;
        /*font-size:2rem;
        @media screen and (max-width:425px) {
           font-size:1.2rem;
        }
        */

      }
     
    }

    /* Beschreibung */
    p {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      text-overflow: ellipsis;
      min-height: 4rem;
      font-size:1rem;
    }

  }
    
}




.escort-kontakt{
   padding-top:1rem;
    padding-bottom:var(--seitenpadding-topbottom);
 
  font-weight: bold;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  gap:1rem;
  align-items: flex-start;
 
  > div {
    display: flex;
    flex-direction: column;
    
    >div {
      font-family: "cifont-header";
    }
    > a {
      font-family: unset;
    }
   
  }
}

.more-kanton{
    background-color: #141414; 

    max-width: unset;

    padding-top:var(--seitenpadding-topbottom);
    padding-bottom:var(--seitenpadding-topbottom);
    >.limiter {
      > a {
        display: inline-flex;
        align-items: center;
      }
    }
    
}


.single-escort {

  h1 {
    margin-top:var(--seitenpadding);
    line-height: 1;
  }
  .single-escort-header {
    max-width:unset;
    padding:0;
    img {
      display: block;
      width:100%;
      max-height:500px;
      object-fit: cover;
      aspect-ratio: 3/2;
      object-position: center 20%;
    }
  }
}

/* Shortcode Escort Facts */
.sc-escortfacts {
 padding-bottom: var(--seitenpadding-topbottom);
  
 >div {
   padding-top: 1rem;
    padding-bottom: 2rem;
    > div.kantone {
       display: flex;
       
        gap:1rem;

        a {
          display: inline-flex;
          align-items: center;
        }  
      }
   
  }
}




.post-views{

  padding-top:2rem;
  padding-bottom:2rem;
  .post-views-count{
    font:inherit;
    &::before {
      content:"Besuche:";
      margin-right:0.3rem;
      display: inline-block;
    }
  }
}


.escortfacts-kantone {
  a {
     font-weight: bold;
  }
}

/* Escort mit Bild Template Image und Name */
.posts-image-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap:1rem;

    .post-link{
      display: flex;
      align-items: center;
      flex-direction: column;
      width: clamp(80px, 230px, 20%);
   

      .smallimage{
        width:100%;
        height:auto;/*clamp(200px, 50vh, 500px);*/
        aspect-ratio: 2/3;
        object-fit: cover;
        object-position: center 30%;

        max-width: 26vw;
        max-height: 45vh;
      }

      strong {
        text-align: center;

        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        line-height:1;
        text-overflow: ellipsis;

      }
    }


}

.escort-infos {
  padding:0;
  max-width: unset;

  .escort-info-item{
   
    background-color: var(--cicolor);
    color:var(--bgcolor);
    
    display: flex;
    flex-direction: column;

    padding-top:1rem;
    padding-bottom:1rem;
   
    margin-bottom: var(--seitenpadding); /* gap */

    .inhalt {
      padding-left:var(--seitenpadding);
      padding-right:var(--seitenpadding);
      
      .label {
        /*color:var(--cicolor);*/
        font-size:2rem;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        font-family: 'cifont-header';
      }
      .value{

        font-size:1.5rem;
        
      }
    }
    
    
  }
}


.flex-center {
  display: inline-flex;
  align-items: center;
}


.breadcrumb {
  padding-top:10px;
  padding-bottom:10px;
   padding-left:var(--seitenpadding);
      padding-right:var(--seitenpadding);
   .limiter {
    
    
   }

  display: block;
 
  a {
    font-family: inherit;
    font-size: inherit;
    padding:inherit;
  }
}