@font-face {
  font-family: "Caveat";
  src: url("caveat-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

.meadow-page .hero h1 { max-width: 16ch; }

.meadow-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 1.5rem clamp(2rem, 7vw, 7rem);
  padding-block: clamp(3rem, 7vw, 7rem);
}

.meadow-page h2:not(.land-offer h2) { font-size: clamp(2.15rem, 4.5vw, 3.85rem); }
.meadow-page :is(p:not(.eyebrow), blockquote) { font-size: calc(1em + 1pt); }
.meadow-page #natur-titel {
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: clamp(2.45rem, 4.8vw, 4.65rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: .98;
  text-wrap: balance;
  transform: rotate(-3.5deg);
  transform-origin: left center;
}
.meadow-motto-line { margin-inline-start: .35em; }

.meadow-story p:not(.eyebrow), .meadow-hay p:not(.eyebrow) { max-width: 60ch; }
.meadow-copy p:first-child { margin-top: 0; }
.meadow-copy p:last-child { margin-bottom: 0; }
.meadow-story .eyebrow, .meadow-hay .eyebrow { color: var(--moss); }

.meadow-protection { background: var(--sand); }
.meadow-protection .meadow-story { align-items: center; padding-block: clamp(2.5rem, 5vw, 5rem); }

.meadow-hay { padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem); }

.meadow-hay-details {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
}
.meadow-hay-pickup { padding: clamp(1.25rem, 3vw, 2rem); background: var(--sand); }
.meadow-hay-pickup h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.meadow-hay-pickup p { margin-bottom: 0; }
.meadow-bales {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-block: 1rem;
}
.meadow-bales dt { color: var(--moss); font-size: .9rem; }
.meadow-bales dd { margin: .2rem 0 0; font-weight: 700; }
.meadow-hay-contact { margin: 1.35rem 0 0; }
.meadow-hay-contact .text-link { display: inline; }

.meadow-customer {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  margin-block-end: clamp(2.5rem, 6vw, 5rem);
  background: var(--sand);
}

.meadow-show { width: 100%; height: auto; }
#cavalluna-titel img { width: min(100%, 10rem); height: auto; }
.meadow-customer p { max-width: 60ch; }

.meadow-quote {
  margin: 1.25rem 0 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid #aa8046;
}
.meadow-quote blockquote {
  margin: 0 0 .35rem;
  font-style: italic;
  line-height: 1.55;
}
.meadow-quote figcaption { color: var(--moss); font-size: .875rem; }

@media (max-width: 720px) {
  .meadow-story, .meadow-customer, .meadow-hay-details { grid-template-columns: 1fr; }
}

.meadow-panorama {
  margin-block: 0 clamp(2.5rem, 6vw, 5rem);
}

.meadow-panorama img {
  width: 100%;
  aspect-ratio: 2.5 / 1;
  object-fit: cover;
  object-position: center 64%;
}

.meadow-photo { margin-block: 0; }
.meadow-photo:not(.wrap) { margin-inline: 0; }
.meadow-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.meadow-photo figcaption { margin-top: .65rem; color: var(--moss); font-size: .875rem; }
.meadow-gallery { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.meadow-hay-wide { margin-block-start: clamp(1.5rem, 4vw, 3rem); }
.meadow-hay-wide img { aspect-ratio: 2.65 / 1; object-position: center 51%; }
.meadow-gallery > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: .75rem;
}
.meadow-gallery img { aspect-ratio: 3 / 2; }
.meadow-gallery-lead { grid-row: span 2; }
.meadow-gallery-lead img { height: 100%; }

@media (min-width: 721px) {
  .meadow-protection .meadow-story {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
  }
}

@media (max-width: 720px) {
  .meadow-panorama img, .meadow-hay-wide img { aspect-ratio: 3 / 2; }
  .meadow-gallery > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meadow-gallery-lead { grid-column: 1 / -1; grid-row: auto; }
  .meadow-gallery-lead img { height: auto; }
}

.meadow-ink { position: relative; display: inline-block; }
.meadow-ink::after {
  position: absolute;
  inset-inline: 0;
  bottom: -.14em;
  height: .19em;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath fill='%23aa8046' d='M3 14C34 4 64 3 99 5c45 2 73 8 138 0-52 11-91 6-138 3-35-1-64 2-95 9-4 1-5-2-1-3Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
.meadow-quality-mark {
  text-decoration: underline transparent;
  text-underline-offset: .15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M3 7C54 3 104 4 157 6c31 1 53 1 71-3 8-2 11 3 5 7-13 8-66 6-98 5-49-2-79-2-115 1' fill='none' stroke='%23aa8046' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") bottom / 100% .38em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-block-end: .24em;
  white-space: nowrap;
}
@media (forced-colors: active) {
  .meadow-quality-mark { background: none; text-decoration-color: currentColor; }
}

.meadow-photo figcaption { font-style: italic; }

.meadow-zoom { position: relative; display: block; cursor: zoom-in; }
.meadow-zoom span {
  position: absolute;
  inset-inline-end: .5rem;
  inset-block-end: .5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--paper);
  color: var(--forest);
  font-size: 1.25rem;
  font-weight: 700;
}
.meadow-zoom:is(:hover, :focus-visible) span { background: var(--forest); color: var(--paper); }

.meadow-lightbox {
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: .5rem;
  border: 0;
  background: var(--forest);
}
.meadow-lightbox:not([open]) { display: none; }
.meadow-lightbox::backdrop { background: #0d1711e8; }
.meadow-lightbox img { max-height: calc(100dvh - 6rem); object-fit: contain; }
.meadow-lightbox form { display: flex; justify-content: end; padding-bottom: .5rem; }
.meadow-lightbox button {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: var(--paper);
  color: var(--forest);
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}