/* Begleitung. Only what ../styles.css does not give already: the paper, fonts, header, menu, footer, pen line and watercolour
   washes are the ones of the start page. Three doors side by side from 80em up, one under the other below that. */

.beg-top { position: relative; z-index: 2; padding: clamp(28px, 6.5vh, 80px) var(--gut) 0; }
.beg-eyebrow { margin-bottom: .9em; }
.beg-title { max-width: 13.5em; font: 400 clamp(2.5rem, 3.2vw + 1.3rem, 5.25rem) / 1.04 var(--serif); letter-spacing: -.016em; color: var(--text); text-wrap: balance; }

#r-intro { margin-top: clamp(36px, 6vh, 64px); }
#r-intro .body { margin-top: 1.2em; }
#r-intro .keyline { margin-top: 1.3em; }

.beg-offers { margin-top: clamp(64px, 10vh, 112px); }
.offers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(40px, 4vw, 72px);
  max-width: calc(1240px + 2 * var(--fpad)); margin: 0 auto; padding: 0 var(--fpad);
}
.offer { display: flex; flex-direction: column; padding: 92px 22px 28px; }
.offer__name { font: 400 clamp(1.625rem, .8vw + 1.35rem, 2.0625rem) / 1.12 var(--serif); letter-spacing: -.005em; color: var(--text); text-wrap: balance; }
.offer__sub { margin-top: .6em; font: italic 400 clamp(1.1875rem, .35vw + 1.05rem, 1.375rem) / 1.4 var(--serif); color: var(--ink); text-wrap: pretty; }
.offer__sub--mid { margin-top: 1.6em; }
.offer .body { margin-top: .8em; font-size: .95em; }
.offer__sub--mid + .body { margin-top: .5em; }
.offer__cta { margin-top: auto; padding-top: 1.1em; }
.offer__cta--soon a { display: inline-block; padding: 12px 0; font: 400 1rem / 1.5 var(--sans); color: var(--text-soft); text-decoration: none; }
.offer__cta--link a { display: inline-block; padding: 12px 0; font: 400 1rem / 1.5 var(--sans); color: var(--text-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) { .offer__cta--link a:hover { color: var(--text); } }

#r-frame { margin-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(64px, 9vh, 112px); }
.beg-q { max-width: 20em; }
#r-frame .body { margin-top: .6em; }
.beg-close { margin-top: 1.3em; }
.beg-phone { margin-top: .1em; font: 400 1.125rem / 1.4 var(--sans); }
.beg-phone a { display: inline-block; padding: 10px 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 79.9375em) {
  .offers {
    grid-template-columns: minmax(0, 1fr); row-gap: 18px;
    max-width: calc(40rem + var(--gut) + var(--gr, var(--gut))); padding: 0 var(--gr, var(--gut)) 0 var(--gut);
  }
  .offer { padding: 118px 12px 26px; }
}
@media (min-width: 56.25em) and (max-width: 79.9375em) {
  .beg-top { max-width: calc(40rem + 2 * var(--gut)); margin-inline: auto; }
  #r-intro .c, #r-frame .c { width: min(40rem, 100%); margin-inline: auto; }
}
@media (max-width: 56.1875em) {
  .beg-top { padding-right: var(--gr); }
  .beg-title { font-size: clamp(2.125rem, 9.4vw, 3.25rem); }
}
@media (max-width: 18.75em) {
  .beg-title, .beg-q, .offer__name { hyphens: auto; -webkit-hyphens: auto; }
}
@media print {
  .offer { padding-top: 24px; }
}