/* ********************************************************************************************************************* */
/* ***                                         Header-Foto mit Sticky Hero                                           *** */
/* ********************************************************************************************************************* */

/* Viewport-Handling */
:root { --vh: 100dvh; }
@supports not (height: 100dvh) { :root { --vh: 100vh; } }

/* Effekt-Variablen (werden per JS aktualisiert) */
:root { --progress: 0; --overlay: 0; --scale: 1; }

/* Layout */
* { box-sizing: border-box; }
html, body { margin: 0; }

.cover { display: grid; }

/* Sticky-Hero */
.hero {
  grid-area: 1 / 1;
  position: sticky; top: 0;
  height: var(--vh);            /* Fullscreen – bei Bedarf via Media Queries anpassen */
  overflow: hidden;
  z-index: 0;
}

/* Hintergrundbild aus PHP-Variable */
.hero__bg {
  position: absolute; inset: 0;
  background: var(--hero-bg) center / cover no-repeat;
  transform: scale(var(--scale));
  will-change: transform;
  transition: transform 0.1s cubic-bezier(.25,.1,.25,1);
}

/* Abdunkelung */
.hero__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,var(--overlay));
  pointer-events: none;
  transition: background 0.1s linear;
}

/* Content überdeckt das Hero */
.content {
  grid-area: 1 / 1; z-index: 1;
  margin-top: var(--vh);
/*  background: #f3eee7;   */  
/*  background-color: #faf8f5;  */
  background: linear-gradient(rgba(244,240,238,1) 0%, rgba(255,255,255,1) 80%); 
  padding: 0;   /* 3rem 1.5rem; */
  /* border-radius: 16px 16px 0 0; */
/*   box-shadow: 0 -8px 24px rgba(0,0,0,0.12); */
  position: relative;
}

/* Sanfte Kante oben */
.content::before {
  content: "";
  position: sticky; top: 0;
  height: 96px; margin-top: -96px;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  pointer-events: none;
}

/*  .content p {   */
/*  max-width: 60ch;   */
/*  margin: 1rem auto;  */
/*  line-height: 1.6;  */
/*}    */

/* Optional: anders hohe Heros auf kleineren Geräten   */
/*  @media (max-width: 767px) {   */
/*    .hero { height: 60dvh; }   */
/*    .content { margin-top: 60dvh; }   */
/*  }   */

@media screen and (max-width: 1000px) {
   
/* Viewport-Handling */
:root { --vh: 50dvh; }
@supports not (height: 50dvh) { :root { --vh: 50vh; } }
}    

@media screen and (max-width: 767px) {
  .no-hero-js .hero { position: static; height: auto; overflow: visible;}
  .no-hero-js .content { margin-top: 0; }
  .no-hero-js .hero__bg { transform: none; }
  .no-hero-js .hero__overlay { background: rgba(0,0,0,0.25); /* optional, dezente Abdunkelung */
  }
}