/* startseite.css */
.hero{
      position: relative;
      min-height: clamp(32rem, 80svh, 52rem);
      display:flex;
      align-items:center;
      overflow:hidden;
      padding-top: clamp(7rem, 11vw, 8rem);
      background:
              linear-gradient(90deg, rgba(43,35,28,.72) 0%, rgba(43,35,28,.50) 35%, rgba(43,35,28,.22) 65%, rgba(43,35,28,.30) 100%),
              url('../img/hero.png') center center / cover no-repeat;
      color: #fff;
    }

    .hero::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:180px;
      background: linear-gradient(to bottom, rgba(244,239,231,0), rgba(244,239,231,1));
    }

    .hero-content{
      position: relative;
      z-index: 2;
      padding-top: clamp(3.5rem, 8vw, 7rem);
      padding-bottom: clamp(2.5rem, 6vw, 5rem);
    }

    .hero h1{
      color: #fff;
      font-size: clamp(3rem, 8vw, 6.4rem);
      line-height: .88;
      max-width: 10ch;
      margin-bottom: 1.2rem;
      overflow-wrap: break-word;
    }

    .hero p{
      font-size: 1.12rem;
      color: rgba(255,255,255,.88);
      max-width: 55ch;
      margin-bottom: 2rem;
    }

    .booking-card{
      position: relative;
      z-index: 3;
      background: rgba(255,250,245,.92);
      border-radius: 24px;
      padding: 1rem;
      margin-top: 2.5rem;
      backdrop-filter: blur(10px);
    }

    .booking-grid{
      display:grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: .75rem;
      align-items: stretch;
    }

    .booking-field{
      background: #fff;
      border: 1px solid rgba(90,70,51,.10);
      border-radius: 18px;
      padding: .95rem 1rem;
      min-height: 72px;
      min-width: 0;
    }

    .booking-field label{
      display:block;
      font-size:.78rem;
      color: var(--muted);
      margin-bottom:.25rem;
      font-weight:600;
    }

    .booking-input{
      border: 0;
      outline: none;
      padding: 0;
      font-weight: 500;
      color: var(--text);
      background: transparent;
      width: 100%;
      min-width: 0;
    }

    /* Cards */
    .soft-card{
      background: rgba(255,255,255,.45);
      border-radius: var(--radius-xl);
      width: 100%;
      min-width: 0;
    }

    .image-card,
    .photo-tile,
    .host-card{
      border-radius: var(--radius-lg);
      overflow:hidden;
      box-shadow: var(--shadow);
      min-height: 100%;
      width: 100%;
      min-width: 0;
    }

    .image-card img,
    .photo-tile img,
    .host-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      object-position: center;
    }

    .equal-height-card{
      min-height: 100%;
    }

    .intro-card{
      padding: 2rem;
      height:100%;
      width: 100%;
      min-width: 0;
    }

    .intro-card h2{
      font-size: clamp(2.1rem, 4vw, 3.6rem);
      margin-bottom: 1rem;
    }

    .philosophy{
      background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.78));
      border-block: 1px solid var(--line);
    }

    .feature-box{
      background: rgba(255,255,255,.55);
      border-radius: 18px;
      padding: 1.5rem 1.25rem;
      height:100%;
      width: 100%;
      min-width: 0;
    }

    .feature-box--soft{
      background: rgba(255,255,255,.72);
      border-radius: 22px;
      padding: 1.65rem 1.35rem;
      box-shadow: 0 14px 35px rgba(28,22,16,.08);
    }

    .feature-box--soft h3{
      font-size: 1.65rem;
      margin-bottom: .5rem;
    }

    .feature-box--soft p{
      font-size: .97rem;
      line-height: 1.55;
    }

    .feature-icon{
      width:54px;
      height:54px;
      border-radius: 50%;
      display:grid;
      place-items:center;
      background: rgba(116,134,108,.14);
      color: var(--green-dark);
      margin-bottom: 1rem;
      font-size: 1.4rem;
      font-weight: 700;
    }

    .cta-panel{
      border-radius: var(--radius-xl);
      overflow:hidden;
      background: #fff;
      width: 100%;
      min-width: 0;
    }

    .cta-panel--philosophy{
      border-radius: 28px;
      overflow: hidden;
      background: rgba(255,255,255,.82);
      box-shadow: 0 20px 50px rgba(28,22,16,.12);
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .cta-panel--philosophy .cta-image{
      min-height: 360px;
      background-size: cover;
      background-position: center;
    }

    .cta-panel-content{
      padding: 1.5rem;
    }

    .cta-title{
      font-size: 2rem;
      margin-bottom: .45rem;
    }

    .cta-text{
      color: var(--muted);
      margin-bottom: 1.1rem;
    }

    .cta-panel .cta-footer,
    .cta-panel--philosophy .cta-footer{
      display:flex;
      flex-wrap:wrap;
      gap: .75rem;
    }

    .cta-panel .cta-footer a,
    .cta-panel--philosophy .cta-footer a{
      flex:1 1 220px;
      text-decoration:none;
      padding: 1.1rem 1.3rem;
      font-weight:600;
      font-size: 1rem;
      border-top: 1px solid var(--line);
      text-align: center;
    }

    .cta-panel .cta-footer a:first-child,
    .cta-panel--philosophy .cta-footer a:first-child{
      background: var(--green);
      color:#fff;
    }

    .cta-panel .cta-footer a:last-child,
    .cta-panel--philosophy .cta-footer a:last-child{
      background: #f5efe6;
      color: var(--text);
    }

    .section-surface{ position: relative; }
    .section-surface--light{
      background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.70));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .section-surface--warm{
      background: linear-gradient(180deg, rgba(248,244,238,.95), rgba(255,255,255,.55));
      border-top: 1px solid rgba(53,47,42,.08);
      border-bottom: 1px solid rgba(53,47,42,.08);
    }
    .section-surface--sand{
      background:
              radial-gradient(circle at top right, rgba(232,223,210,.16), transparent 28%),
              linear-gradient(180deg, rgba(244,239,231,.98), rgba(255,255,255,.60));
      border-top: 1px solid rgba(53,47,42,.08);
      border-bottom: 1px solid rgba(53,47,42,.08);
    }
    .section-surface--neutral{
      background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(248,244,238,.86));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .content-panel{
      background: rgba(255,255,255,.72);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: clamp(1.5rem, 3vw, 2.4rem);
      height: 100%;
    }

    .media-panel{
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow);
      min-height: 100%;
      background: #fff;
      border: 1px solid var(--line);
    }

    .media-panel img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .rooms-section{
      background:
              radial-gradient(circle at top left, rgba(168,181,154,.10), transparent 30%),
              linear-gradient(180deg, rgba(255,255,255,.58), rgba(248,244,238,.92));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .rooms-layout{
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(1.5rem, 3vw, 3rem);
      align-items: center;
    }

    .rooms-media{
      position: relative;
      min-height: 520px;
    }

    .rooms-main-image{
      position: absolute;
      inset: 0 22% 0 0;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
    }

    .rooms-main-image img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .rooms-side-image{
      position: absolute;
      right: 0;
      bottom: 7%;
      width: 42%;
      aspect-ratio: 4 / 5;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
      background: #fff;
    }

    .rooms-side-image img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .rooms-card{
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(53,47,42,.10);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: clamp(1.5rem, 3vw, 2.4rem);
    }

    .rooms-kicker{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .16em;
      color: var(--green);
      font-weight: 700;
      margin-bottom: .9rem;
    }

    .rooms-title{
      font-size: clamp(2.1rem, 4.5vw, 4rem);
      line-height: .95;
      margin-bottom: 1rem;
    }

    .rooms-text{
      color: var(--muted);
      font-size: 1.02rem;
      margin-bottom: 1rem;
      max-width: 42ch;
    }

    .rooms-bullets{
      list-style: none;
      padding: 0;
      margin: 1.25rem 0 1.75rem;
      display: grid;
      gap: .75rem;
    }

    .rooms-bullets li{
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      color: var(--text);
    }

    .rooms-bullets i{
      color: var(--green-dark);
      margin-top: .2rem;
      flex: 0 0 auto;
    }

    .rooms-actions{
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
    }

    .rooms-actions .btn{
      min-width: 170px;
    }

    .restaurant-gallery{
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 1rem;
      min-height: 560px;
    }

    .gallery-card{
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
      background: #fff;
      min-height: 220px;
    }

    .gallery-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .gallery-card--large{
      grid-row: span 2;
    }

    .gallery-stack{
      display: grid;
      gap: 1rem;
    }

    .gallery-label{
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      padding: .6rem .8rem;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      color: var(--text);
      font-size: .86rem;
      font-weight: 700;
      backdrop-filter: blur(8px);
    }

    .hotel-activity-section{
      background:
              radial-gradient(circle at top left, rgba(116,134,108,.07), transparent 30%),
              linear-gradient(180deg, rgba(255,255,255,.64), rgba(248,244,238,.94));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .hotel-activity-layout{
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(1.5rem, 3vw, 2.75rem);
      align-items: stretch;
    }

    .bowling-gallery{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      min-height: 540px;
    }

    .bowling-gallery .gallery-card:first-child{
      grid-column: 1 / -1;
    }

    .info-list{
      list-style: none;
      padding: 0;
      margin: 1.3rem 0 1.7rem;
      display: grid;
      gap: .85rem;
    }

    .info-list li{
      display: flex;
      gap: .75rem;
      align-items: flex-start;
      padding: .95rem 1rem;
      border-radius: 18px;
      background: rgba(116,134,108,.06);
      border: 1px solid rgba(116,134,108,.10);
    }

    .info-list i{
      color: var(--green-dark);
      margin-top: .2rem;
      flex: 0 0 auto;
    }

    .info-list strong{
      display: block;
      color: var(--text);
      margin-bottom: .15rem;
    }

    .info-list span{
      display: block;
      color: var(--muted);
      font-size: .94rem;
      line-height: 1.5;
    }

    .activities-section{
      background:
              radial-gradient(circle at top left, rgba(116,134,108,.07), transparent 30%),
              linear-gradient(180deg, rgba(255,255,255,.64), rgba(248,244,238,.94));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .activities-header{
      max-width: 820px;
      margin: 0 auto 2.25rem;
      text-align: center;
    }

    .activities-header .section-title{
      font-size: clamp(2rem, 4vw, 3.4rem);
      max-width: 30ch;
      margin: 0 auto .9rem;
    }

    .activities-header .lead-soft{
      max-width: 58ch;
      margin: 0 auto;
    }

    .activities-layout{
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(1.5rem, 3vw, 2.75rem);
      align-items: stretch;
    }

    .activities-image{
      min-height: 560px;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
    }

    .activities-image img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .activities-content{
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(53,47,42,.10);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: clamp(1.45rem, 2.8vw, 2.2rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .activities-list{
      list-style: none;
      padding: 0;
      margin: 1.35rem 0 1.7rem;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .9rem;
    }

    .activity-item{
      display: flex;
      gap: .8rem;
      align-items: flex-start;
      background: rgba(116,134,108,.06);
      border: 1px solid rgba(116,134,108,.10);
      border-radius: 18px;
      padding: .95rem;
    }

    .activity-icon{
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(116,134,108,.14);
      color: var(--green-dark);
      flex: 0 0 auto;
      font-size: .98rem;
    }

    .activity-item strong{
      display: block;
      color: var(--text);
      font-size: .98rem;
      margin-bottom: .15rem;
    }

    .activity-item span{
      display: block;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.45;
    }

    .activities-actions{
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
    }

    .activities-actions .btn{
      min-width: 180px;
    }

    .surroundings-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }

    .surroundings-card{
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow);
      height: 100%;
      min-width: 0;
    }

    .surroundings-card img{
      width: 100%;
      height: 210px;
      object-fit: cover;
    }

    .surroundings-card-content{
      padding: 1.2rem;
    }

    .surroundings-card h3{
      font-size: 1.65rem;
      margin-bottom: .45rem;
    }

    .surroundings-card p{
      color: var(--muted);
      font-size: .94rem;
      line-height: 1.55;
      margin-bottom: .85rem;
    }

    .address-line{
      display: flex;
      gap: .55rem;
      align-items: flex-start;
      color: var(--text);
      font-size: .9rem;
      font-weight: 600;
      line-height: 1.45;
    }

    .address-line i{
      color: var(--green-dark);
      margin-top: .18rem;
      flex: 0 0 auto;
    }

    .host-section{
      position: relative;
      background:
              radial-gradient(circle at top right, rgba(168,181,154,.12), transparent 28%),
              linear-gradient(180deg, rgba(255,255,255,.68), rgba(248,244,238,.96));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }

    .host-section::before{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 45%);
      pointer-events: none;
    }

    .host-layout{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
      gap: clamp(1.5rem, 3vw, 3rem);
      align-items: center;
    }

    .host-card{
      position: relative;
      height: 100%;
      min-height: 640px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
      background: #fff;
    }

    .host-card::after{
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 42%;
      background: linear-gradient(to top, rgba(0,0,0,.26), rgba(0,0,0,0));
      pointer-events: none;
    }

    .host-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .host-badge{
      position: absolute;
      left: 1.25rem;
      bottom: 1.25rem;
      z-index: 2;
      max-width: 320px;
      padding: 1rem 1.05rem;
      border-radius: 18px;
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(53,47,42,.10);
      box-shadow: 0 12px 30px rgba(28,22,16,.10);
    }

    .host-badge strong{
      display: block;
      color: var(--text);
      font-size: 1.02rem;
      margin-bottom: .2rem;
    }

    .host-badge span{
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.5;
    }

    .host-content{
      background: rgba(255,255,255,.84);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(53,47,42,.10);
      border-radius: 30px;
      box-shadow: var(--shadow);
      padding: clamp(1.6rem, 3vw, 2.5rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .host-content .eyebrow{
      margin-bottom: .9rem;
    }

    .host-content .section-title{
      margin-bottom: 1rem;
    }

    .host-content .lead-soft{
      max-width: 52ch;
      margin-bottom: 1rem;
    }

    .host-content p{
      color: var(--muted);
    }

    .host-points{
      list-style: none;
      padding: 0;
      margin: 1.35rem 0 1.8rem;
      display: grid;
      gap: .9rem;
    }

    .host-points li{
      display: flex;
      gap: .8rem;
      align-items: flex-start;
      padding: .95rem 1rem;
      border-radius: 18px;
      background: rgba(116,134,108,.06);
      border: 1px solid rgba(116,134,108,.10);
    }

    .host-points i{
      color: var(--green-dark);
      margin-top: .15rem;
      flex: 0 0 auto;
      font-size: 1rem;
    }

    .host-points strong{
      display: block;
      color: var(--text);
      margin-bottom: .15rem;
      font-size: .98rem;
    }

    .host-points span{
      display: block;
      color: var(--muted);
      font-size: .94rem;
      line-height: 1.5;
    }

    .host-actions{
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
    }

    .host-actions .btn{
      min-width: 180px;
    }

    .review-card{
      background: rgba(255,255,255,.70);
      border-radius: 20px;
      padding: 1.6rem;
      height:100%;
      box-shadow: var(--shadow);
      width: 100%;
      min-width: 0;
    }

    .stars{
      color: #a18449;
      letter-spacing: .18em;
      font-size: .95rem;
      margin-bottom: .8rem;
    }

    .restaurant-footer{
      background: var(--footer-bg);
      color: var(--footer-text);
      border-top: 1px solid rgba(255,255,255,.06);
      margin-top: 0;
    }

    .footer-top{
      padding: 2.6rem 0 1.8rem;
      border-bottom: 1px solid var(--footer-border);
    }

    .footer-brand{
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      margin-bottom: .25rem;
    }

    .footer-logo{
      width: 160px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    .footer-heading{
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: .95rem;
    }

    .footer-note{
      font-size: .95rem;
      line-height: 1.65;
      color: var(--footer-muted);
      max-width: 34ch;
    }

    .footer-links{
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li{
      margin-bottom: .55rem;
    }

    .footer-links a,
    .footer-contact a,
    .footer-bottom a{
      color: var(--footer-text);
      text-decoration: none;
      transition: color .2s ease;
    }

    .footer-links a:hover,
    .footer-contact a:hover,
    .footer-bottom a:hover{
      color: #fff;
    }

    .footer-contact strong{
      color: #fff;
      display: block;
      margin-bottom: .35rem;
      font-size: 1rem;
    }

    .footer-contact .phone{
      display: flex;
      align-items: center;
      gap: .45rem;
      font-weight: 700;
      color: #fff;
      font-size: 1.05rem;
      margin-bottom: .15rem;
    }

    .footer-time{
      color: var(--footer-muted);
      font-size: .92rem;
    }

    .newsletter-form{
      display:flex;
      align-items:stretch;
      width: 100%;
      max-width: 340px;
      margin-top: .75rem;
    }

    .newsletter-form input{
      flex: 1 1 auto;
      min-width: 0;
      border: 0;
      outline: none;
      background: #2b2b2b;
      color: #fff;
      padding: .9rem 1rem;
      border-radius: 8px 0 0 8px;
      font-size: .95rem;
    }

    .newsletter-form input::placeholder{
      color: rgba(255,255,255,.35);
    }

    .newsletter-form button{
      flex: 0 0 52px;
      border: 0;
      background: var(--footer-accent);
      color: #fff;
      border-radius: 0 8px 8px 0;
      display:grid;
      place-items:center;
      font-size: 1.15rem;
    }

    .footer-bottom{
      padding: 1rem 0 1.15rem;
    }

    .footer-bottom-inner{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: .9rem;
      color: var(--footer-muted);
    }

    .footer-mini-links{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .45rem;
      color: var(--footer-muted);
    }

    .footer-mini-links a{
      color: var(--footer-muted);
    }

    .footer-mini-links span{
      opacity: .5;
    }

    .socials{
      display: flex;
      align-items: center;
      gap: .55rem;
    }

    .socials a{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.18);
      color: #fff;
      text-decoration: none;
      font-size: .85rem;
      background: rgba(255,255,255,.03);
    }

    .socials a:hover{
      background: rgba(255,255,255,.10);
    }

    @media (min-width: 992px){
      .navbar .dropdown:hover > .dropdown-menu{
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
    }

    @media (max-width: 1199.98px){
      .booking-grid{
        grid-template-columns: 1fr 1fr;
      }

      .booking-grid .d-grid{
        grid-column: 1 / -1;
      }

      .surroundings-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 991.98px){
      .hero{
        min-height: auto;
      }

      .main-nav{
        border-radius: 24px;
      }

      .navbar-collapse{
        padding: 1rem 0 .25rem;
      }

      .navbar-nav{
        background: rgba(255,255,255,.08);
        border-radius: 18px;
        padding: .75rem;
        margin-top: .5rem;
        width: 100%;
      }

      .navbar-wrap.scrolled .navbar-nav{
        background: rgba(51,69,56,.04);
      }

      .navbar .nav-link{
        width: 100%;
        padding: .9rem 1rem !important;
      }

      .navbar .nav-link:not(.dropdown-toggle)::after{
        display: none;
      }

      .navbar .nav-link:hover,
      .navbar .nav-link.active{
        transform: none;
      }

      .rooms-layout,
      .activities-layout,
      .host-layout,
      .hotel-activity-layout{
        grid-template-columns: 1fr;
      }

      .rooms-media{
        min-height: 440px;
        order: 2;
      }

      .rooms-card{
        order: 1;
      }

      .activities-image{
        min-height: 420px;
      }

      .restaurant-gallery{
        min-height: auto;
      }

      .host-card{
        min-height: 440px;
      }

      .brand-mark{
        min-width: 160px;
        min-height: 56px;
      }

      .brand-logo{
        height: 46px;
        max-width: 150px;
      }

      .footer-top{
        padding: 2rem 0 1.5rem;
      }

      .footer-bottom-inner{
        justify-content: center;
        text-align: center;
      }
    }

    @media (max-width: 767.98px){
      html{
        scroll-padding-top: 92px;
      }

      .section-space{
        padding: 3.5rem 0;
      }

      .hero{
        padding-top: 92px;
      }

      .hero-content{
        padding-top: 3.5rem;
        padding-bottom: 4rem;
      }

      .hero h1{
        font-size: clamp(2.5rem, 12vw, 3.5rem);
        line-height: .92;
      }

      .booking-grid{
        grid-template-columns: 1fr;
      }

      .booking-grid .d-grid{
        grid-column: auto;
      }

      .photo-row{
        grid-template-columns: 1fr;
      }

      .cta-panel .cta-footer a{
        flex-basis: 100%;
      }

      .section-title{
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1;
      }

      .booking-field{
        min-height: 60px;
        padding: .85rem .95rem;
      }

      .cta-panel .cta-image{
        min-height: 240px;
      }

      .brand-mark{
        min-width: 140px;
        min-height: 48px;
        padding: .25rem .5rem;
      }

      .brand-logo{
        height: 40px;
        max-width: 130px;
      }

      .newsletter-form{
        max-width: 100%;
      }

      .footer-bottom{
        padding-bottom: 1rem;
      }

      .socials{
        justify-content: center;
      }

      .activities-content,
      .host-content{
        padding: 1.25rem;
        border-radius: 22px;
      }

      .host-card{
        min-height: 320px;
        border-radius: 22px;
      }

      .cta-panel--philosophy .cta-image{
        min-height: 240px;
      }

      .activities-header{
        text-align: left;
        margin-bottom: 1.5rem;
      }

      .activities-header .section-title,
      .activities-header .lead-soft{
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
      }

      .activities-list{
        grid-template-columns: 1fr;
      }

      .activities-actions,
      .host-actions{
        flex-direction: column;
      }

      .rooms-media{
        min-height: 360px;
      }

      .rooms-main-image{
        inset: 0 18% 0 0;
        border-radius: 22px;
      }

      .rooms-side-image{
        width: 46%;
        bottom: 4%;
        border-radius: 18px;
      }

      .rooms-actions .btn,
      .activities-actions .btn,
      .host-actions .btn,
      .section-actions .btn{
        width: 100%;
        min-width: 0;
      }

      .restaurant-gallery,
      .bowling-gallery,
      .surroundings-grid{
        grid-template-columns: 1fr;
      }

      .gallery-card--large,
      .bowling-gallery .gallery-card:first-child{
        grid-column: auto;
        grid-row: auto;
      }

      .gallery-card{
        min-height: 240px;
      }

      .footer-top{
        padding: 1.75rem 0 1.25rem;
      }

      .footer-logo{
        width: 140px;
      }

      .footer-bottom-inner{
        flex-direction: column;
      }

      .footer-mini-links{
        justify-content: center;
        text-align: center;
      }
    }

    @media (max-width: 575.98px){
      .rooms-media{
        min-height: 300px;
      }

      .rooms-main-image{
        inset: 0;
      }

      .rooms-side-image{
        display: none;
      }
    }