.hero {
  --gold: #82602b;
  --muted: #58544e;
  padding: 0 0 24px;
  background: #dcdcd8;
  color: #25241f;
}
.hero-banner {
  position: relative;
  height: calc(100svh - 85px);
  min-height: 470px;
  max-height: 1000px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #dededb;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: -55px;
  z-index: -1;
  background: url('assets/marketing-portrait-natuerlich.png') center 40% / cover no-repeat;
  filter: blur(55px) grayscale(.4);
  opacity: .22;
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 4;
  border: 1px solid #9b825c55;
  border-radius: 12px;
  pointer-events: none;
}
.header-portrait {
  height: 100%;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: center top;
  mask-image: linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);
  mask-composite: intersect;
}
.header-rating-zone {
  position: absolute;
  inset: auto 0 0;
  padding: 65px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: linear-gradient(transparent,#dcdcd8 76%);
}
.header-google-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px 23px;
  background: #fffef9ed;
  color: #282720;
  border: 1px solid #bba783;
  border-radius: 10px;
  box-shadow: 0 7px 25px #34312a12;
}
.header-google-rating > img { width: 74px; height: 24px; flex-shrink: 0; }
.header-rating-number { font-size: 29px; font-weight: 800; line-height: 1; }
.header-rating-detail { display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 2px; }
.header-rating-stars { color: #916821; font-size: 17px; letter-spacing: 2px; line-height: 1; }
.header-rating-date { font-size: 10px; color: #625e55; }
.header-google-rating:focus-visible { outline-color: #765420; }
.hero .hero-copy { padding: 10px 0 0; }
.hero-copy .eyebrow { color: #82602b; margin-bottom: 10px; }
.hero-copy h1 { font-size: clamp(32px,3.8vw,49px); margin-bottom: 16px; }
.hero-copy .lead { color: #504d46; margin-bottom: 20px; }
.hero-copy .micro { color: #58544e; margin-bottom: 0; }
.hero-copy .button { border-color: #b3975e; }
.google-reviews.wrap { width: min(960px,calc(100% - 48px)); margin: 24px auto; }
@media (hover: hover) and (pointer: fine) {
  .header-google-rating { transition: box-shadow 200ms ease, border-color 200ms ease; }
  .header-google-rating:hover { border-color: #82602b; box-shadow: 0 10px 30px #34312a25; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .hero-banner { height: calc(100svh - 132px); }
}
@media (max-width: 800px) {
  .hero { padding: 0 0 22px; }
  .hero-banner { height: min(calc(100svh - 65px),150vw); min-height: 0; }
  .hero-banner::after { inset: 6px; border-radius: 8px; }
  .header-rating-zone { padding: 55px 16px 18px; }
  .header-google-rating { gap: 14px; padding: 12px 17px; }
  .header-rating-number { font-size: 27px; }
  .hero .hero-copy { padding-top: 8px; }
  .hero-copy h1 { font-size: clamp(30px,7.2vw,42px); }
  .google-reviews.wrap { width: calc(100% - 40px); margin: 20px auto; }
}
.floating[hidden] { display: none; }