.hero-media {
  background: #242424 url('/assets/hero-zimmerei.png') center / cover no-repeat;
}

/* Compact placements reuse the original artwork without cropping or distortion. */
.compact-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hero-badge.compact-logo {
  width: clamp(320px, 34vw, 460px);
  padding: 5px;
  background: #fff;
  box-shadow: 0 10px 32px #0004;
}
.values-mark.compact-logo {
  width: 100%;
  max-width: 390px;
  min-height: 0;
  justify-self: center;
  padding: 8px;
  border: 0;
  background: #fff;
  box-shadow: 12px 18px 0 #0002;
}
@media (max-width: 850px) {
  .values-mark.compact-logo { max-width: 320px; }
}

/* Keep the enlarged hero logo alongside the copy, never on top of it. */
@media (min-width: 1100px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    column-gap: clamp(80px, 7vw, 112px);
    padding-inline: max(28px, calc((100% - var(--max)) / 2 + 28px));
  }
  .hero-content {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .hero-content h1 {
    font-size: clamp(3rem, 5vw, 4.8rem);
    overflow-wrap: break-word;
  }
  .hero-badge.compact-logo {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 460px;
    justify-self: end;
    align-self: center;
  }
}
@media (min-width: 851px) and (max-width: 1099px) {
  .hero { flex-direction: column; align-items: flex-start; padding-bottom: 95px; }
  .hero-content { padding-bottom: 64px; }
  .hero-badge.compact-logo {
    position: relative;
    right: auto;
    bottom: auto;
    width: 380px;
    margin-left: 28px;
  }
}

/* Preserve the town's spelling instead of transforming ß to SS. */
.eyebrow:has(.place-name) { display: block; }
.eyebrow:has(.place-name)::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}
.place-name { text-transform: none; }