.site-header{
  position: relative;
  overflow: hidden;
  height: clamp(340px, 52vh, 500px);

  transition:
    height .8s cubic-bezier(.22,.61,.36,1);
}

/* =========================================
   IMAGE
========================================= */

.header-image-container{
  height: 100%;
}

.header-image-container img{
  width: 100%;
  height:100%;
  object-fit:cover;

  transition:
    transform 1.2s ease,
    filter .8s ease;

  transform-origin:center center;
}

/* cinematic effect */

.site-header.scrolled .header-image-container img{
  transform:
    scale(1.12)
    translateY(-25px);

  filter: brightness(.78);
}

/* =========================================
   STICKY NAVIGATION
========================================= */

.nav-wrapper{
  position: sticky;
  top: 0;
  z-index: 9999;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  background: rgba(251,247,240,.82);

  border-bottom: 1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;

  padding: .85rem 0;
}

.kurort {
  padding: clamp(2.2rem, 4.6vw, 3.6rem) 0;
 }

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: 1.5rem;
}

.highlight-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  box-shadow: var(--shadow2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.highlight-card:hover {
  box-shadow: 0 20px 60px rgba(30,59,47,0.3);
  transform: translateY(-4px);
}

.highlight-card h2 {
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
  color: #2F4F6F;
}

.highlight-card p {
  color: rgba(31,36,32,0.8);
  line-height: 1.5;
}

.highlight-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius2);
  margin-top: 1rem;
  box-shadow: var(--shadow2);
  object-fit: cover;
}

.additional-info {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow2);
  border: 1px solid var(--line);
  color: rgba(31,36,32,0.85);
  line-height: 1.6;
  margin-top: 3rem;
}

.additional-info h2 {
  font-family: "Fraunces", serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--pine);
}

.additional-info img {
  width: 100%;
  height: auto;
  border-radius: var(--radius2);
  margin: 1rem 0;
  box-shadow: var(--shadow2);
  object-fit: cover;
}

/* Call-to-Action Button nutzt Styles aus common.css */
    /* Mobile nav drawer */
    .drawer{
      display:none;
      position: fixed;
      inset: 0;
      z-index: 60;
      background: rgba(16,24,20,.38);
      backdrop-filter: blur(4px);
    }
    .drawerPanel{
      position:absolute;
      right: 0; top: 0; bottom: 0;
      width: min(420px, 92vw);
      background: linear-gradient(180deg, rgba(251,248,242,.98), rgba(246,242,234,.98));
      border-left: 1px solid rgba(22,36,29,.12);
      box-shadow: -30px 0 70px rgba(16,24,20,.18);
      padding: 1rem;
      display:flex;
      flex-direction:column;
      gap: .75rem;
    }
    .drawerHeader{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1rem;
      padding: .25rem .25rem .6rem;
      border-bottom: 1px solid rgba(22,36,29,.10);
    }
    .drawerClose{
      border: 1px solid rgba(22,36,29,.14);
      background: rgba(251,248,242,.85);
      border-radius: 12px;
      padding:.5rem .6rem;
      cursor:pointer;
      transition: transform .16s ease;
    }
    .drawerClose:hover{ transform: translateY(-1px); }
    .drawerNav{
      padding: .4rem .25rem;
      display:grid;
      gap:.25rem;
    }
    .drawerNav a{
      padding: .8rem .85rem;
      border-radius: 14px;
      border: 1px solid rgba(22,36,29,.10);
      background: rgba(251,248,242,.65);
      font-weight: 700;
      transition: transform .16s ease, background .16s ease;
    }
    .drawerNav a:hover{ background: rgba(215,165,74,.10); transform: translateY(-1px); }

@media (max-width: 980px) {
  .site-header { height: clamp(220px, 32vh, 380px); }
}

@media (max-width: 640px) {
  .site-header { height: clamp(190px, 28vh, 300px); }
}