/*** Allgemein ***/
        *{
           font-family: "League Spartan", Calibri, sans-serif;
            font-weight: 350;
            color:#484747;
            margin: 0;
            padding: 0;
             box-sizing: border-box;
        }
        html{
            scroll-behavior: smooth;
        }
        img {
          max-width: 100%;
          height: auto;
        }
        ul {
            list-style: none;
        }
        h3{
            font-size: 24px;
            font-weight: 600;
        }
        /*** Struktur ***/
        .navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        }
        .navi {
        display: flex;
        gap: 20px;
        }
        
        .header {
            height: 80vh;
            width: 100%;
            background-image: url(images/bearbeiteteBilderHochzeit/Cover1%20Kopie.jpg);
            background-size: cover;
            background-position: center;
        }
        .container {
            max-width: 1050px;
          width: 100%;
          margin: auto;
          padding: 0 20px;
        }
        .discover {
          display: grid;
          grid-template-columns: 1fr repeat(4, 1fr);
          align-items: center;
          gap: 30px;
          margin-top: 40px;
        }
        .col-quarter {
         flex: 1 1 calc(25% - 20px);
            text-align: center;
        }
        .col-quarter a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        }
        .col-two {
        flex: 1 1 calc(50% - 20px);
        }
        .airbnbplus{
            margin-top: 40px;
        }
        .accommodations{
            margin: 40px 0;
        }
        .footer .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        }
        /*** Speziell ***/
        /* Nav */ 
        #logo{
            width: 70px;
            height: 70px;
            margin: 15px 45px;
            border-radius: 30px;
        }
/* Burger versteckt auf Desktop */
.burger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #484747;
}

        #Logofooter {
            width: 40px;
            height: 40px;
            margin: 20px;
            border-radius: 30px;
        }
        .navi li a {
            text-decoration: none;
            padding: 25px 15px 25px 15px;
        }
        .navi li a:hover {
            border-bottom: 2px solid #212121;
        }
        /* header */
        .search {
          max-width: 900px;
          margin: auto;
          padding-top: 150px;
          text-align: center;
        }
        #claim {
            font-size: 40px;
            color: #fff8f8;
            letter-spacing: 3px;
            text-shadow: 0 0 10px #484747;
            text-align:left;
        }
        .searchbar {
            margin-top: 30px;
        }
        #magnifier {
            width: 40px;
            margin: 27.5px;
        }
        #search {
            width: 100%;
            font-size: 25px;
            padding: 24.5px 0px;
            border: none;
            background-color: rgb(255 240 240 / 50%);
        }
        #searchtext{
            Color:#f9cf8d;
            font-size: 30px;
            font-weight:600;
            font-family: "Cedarville Cursive", cursive;
        }
        /* discover */
        .discover h3 {
        grid-column: 1 / 2;
        font-size: 24px;
        }
        .discoverprev {
          width: 120px;
          height: 120px;
          object-fit: cover;
          border-radius: 12px;
          display: block;
          margin: 0 auto 10px;
        }

        .discovercat {
          font-weight: 600;
          text-decoration: underline;
        }
        .banner {
            width: 100%;
            max-height: 400px;
            background-image: url(images/bearbeiteteBilderHochzeit/Since6.jpg); 
            background-size: cover;
            background-position: bottom;
            margin: 20px 0;
        }
        
        #buttontext {
            font-size: 12px;
            color:whitesmoke
        }
        #button{
            border-radius:30px;
            background-color:red;
            margin: 3px;
        }
        .button-wrapper {
          display: flex;
          justify-content: flex-end; /* Button nach rechts */
          margin-top: 10px;
        }
        #geheimerText {
          opacity: 0;
          transform: translateY(10px);
          transition: all 0.6s ease;
          margin-top: 10px;
          font-weight: bold;
          color:#f9cf8d;
        }
        #geheimerText.show {
          opacity: 1;
          transform: translateY(0);
        }
        .pluscontent {
          padding: 40px;
          color: white;
        }
        .pluscontent p {
            font-size: 22px;
            color:#fff8f8;
            line-height: 1.25;
        }
        .pluscontent img{
            margin-top: 20px;
            width: 40px;
        }
        .pluscontent #signing {
            font-family: "Cedarville Cursive", cursive;
            font-size: 20px;

        }
        /* Accommodations */
        .accommodations h3{
            margin-bottom: 5px;
        }
        .tiles {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
            margin:10px;
        }
        .accomprev {
        border-radius: 10px;
        }
        .category, .city {
            text-transform: uppercase;
            font-size: 15px;
            font-weight: 600;
            display: inline;
        }
        .city{
            margin-left: 4.5px;
        }
        .desc {
            padding-top: 5px;
            font-size: 25px;
            font-weight: 600;
            word-spacing: 2px;
        }
        .price {
            font-weight: 100;
            text-align: justify;
            font-size: 18px;
            padding: 5px 0px;
        }
        #allaccomms {
            margin-top: 30px;
            margin-bottom: 30px;
            margin-left:10px;

        }
        #allaccomms a {
            text-decoration: none;
            font-size: 16px;
            color: #388188;
            letter-spacing: 2px;
        }
        /*Kontakt*/
        .contact-section {
        text-align: center;
        padding: 30px;
        border-radius: 12px;
        max-width: 500px;
        margin: 40px auto;
        }
        .contact-section h3 {
        margin-bottom: 10px;
        }
        .contact {
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 600;
        padding:4px 15px;
        }
        .contact-section a {
        color: #c59d5f;
        text-decoration: none;
        }
        /*Galerie*/
        .gallery {
        padding: 20px 20px;
        border-radius: 15px;
        background: #f5f5f5;
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;
        }
        .gallery h3 {
          font-size: 2.5rem;
          margin-bottom: 10px;
        }
        .gallery-intro {
          margin-bottom: 40px;
          color: #666;
        text-align: justify;
            padding: 0 60px;
        }
        .gallery-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
        }
        /* STACK */
        .gallery-stack {
          cursor: pointer;
        }

        /* Cover */
        .stack-cover {
          position: relative;
          overflow: hidden;
          border-radius: 10px;
        }

        .stack-cover img {
          width: 100%;
          display: block;
          transition: transform 0.4s ease;
        }

        .stack-cover:hover img {
          transform: scale(1.05);
        }

        /* Inhalt */
        .stack-content {
          display: none;
          margin-top: 10px;
         
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 10px;
        }

        .stack-content img {
          width: 100%;
          border-radius: 8px;
          cursor: pointer;
        }

        /* Aktiv */
        .gallery-stack.active .stack-content {
          display: grid;
        }
        .stack-cover{
          position: relative;
          overflow: hidden;
          border-radius: 10px;
        }
        .stack-cover img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.4s ease;
        }
        .stack-cover:hover img {
          transform: scale(1.1);
        }
        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(197, 157, 95, 0.77);
          color:white;
          padding: 15px;
          transform: translateY(100%);
          transition: transform 0.3s ease;
            backdrop-filter: blur(3px);
        }

        .stack-cover:hover .overlay {
          transform: translateY(0);
        }
        /*lightbox*/
         .lightbox {
          display: none;
          position: fixed;
          z-index: 999;
          padding-top: 60px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.9);
        }

        .lightbox-content {
          display: block;
          margin: auto;
          max-width: 80%;
          max-height: 80%;
        }

        .close {
          position: absolute;
          top: 20px;
          right: 40px;
          color: white;
          font-size: 40px;
          cursor: pointer;
        }

        .nav {
          position: absolute;
          top: 50%;
          color: white;
          font-size: 50px;
          cursor: pointer;
          padding: 10px;
          user-select: none;
        }

        .prev { left: 20px; }
        .next { right: 20px; }

        /*Insta*/
        .instagram{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:20px;
        margin: 0 auto;
        padding: 30px;
        max-width: 1000px;
       
}
        /*Footer*/

        .footer .col-quarter {
          flex: 1 1 200px;
                text-align: center;
        }        
        .footer .col-quarter h4{
            font-weight: 600;
            font-size: 14px;
            margin-top:20px;
            margin-bottom: 15px;
        }

        .footer .col-quarter ul li {
            margin: 4px 0px;
        }
        .footer .col-quarter ul li a{
            text-decoration: none;
            font-size: 14px;
            letter-spacing: 1px;
            color: grey;
        }
        #footerhr {
            margin-top: 30px;
        }
        #company {
            margin: 30px 10px;
        }
        #legalnav{
            margin: 30px 0px;
            text-align:center;
        }
        #legalnav li {
            margin: 0px 5px;
            font-size: 14px;
        }
        #legalnav li a {
            text-decoration: none;
        }
        .social {
            height: 15px;
        }

@media (max-width: 900px) {
    
        .discover{
                grid-template-columns: 1fr;
                }   
        .col-quarter {
            flex: 1 1 calc(50% - 20px);
            flex-direction: column;
          }
        }
        @media (max-width: 600px) {
          .col-quarter {
            flex: 1 1 100%;
            flex-direction: column;
          }
                      
            .header {
            height: 80vh;
        }
            }

        @media (max-width: 800px) {
/* Burger */
.burger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #484747;
}

/* Mobile Menü */
@media (max-width: 800px) {

  .burger {
    display: block;
    margin-right: 20px;
  }

  .navi {
    position: absolute;
    top: 80px;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    width: 100%;
    
    flex-direction: column;
    align-items: center;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .navi.active {
    max-height: 400px;
  }

  .navi li {
    margin: 12px 0;
  }
  .navi li a {
    font-family: "League Spartan", Calibri, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #484747;
    text-decoration: none;
    padding: 10px;
    transition: all 0.2s ease;
  }

  .navi li a:hover {
    color: #c59d5f; 
    border-bottom: none;
    transform: scale(1.05);
  }
        
            .discover{
                grid-template-columns: 1fr;
                }     
            
            #logo{
            margin: 30px 15px;
        }
            .instagram{
                grid-template-columns: 1fr;
         }
        #searchtext{
            font-size: 18px
        }
            .gallery {
            max-width: 500px;
            margin: 0 auto;
            }
            .gallery-intro {
            padding: 0 35px;
        }
      .row,
      .tiles {
        flex-direction: column;
      }
      .search {
        width: 100%;
        padding: 50px 10px 0;
      }
        .pluscontent p {
         font-size: 18px;    
        }
            
      #claim {
        font-size: 24px;
        text-align: center;
      }

      .navi {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .navi li {
        margin: 10px 0;
          font-size: 13px;
      }
        
  .search {
    padding-top: 15px;
  }

  /* GRID */
  .col-quarter,
  .col-two {
    flex: 1 1 100%;
  }

  /* TEXT */
  h3 {
    font-size: 25px;
    text-align: center;
  }

  /* BANNER */
  .banner {
    height: 400px;
  }
    .header {
    height: 50vh;
        width:100%;
        }

  /* FOOTER */
  .footer {
    text-align: center;
      margin: 0 auto;
  }

}