/* Plattenexperte Atelier: the older pages (town pages, galleries, posts and archives).
   Their WPBakery and Renovate content keeps the parent theme's styles, which are loaded on these pages only.
   The parent styles bare elements (p, strong, label: dark grey and Raleway; links in paragraphs: gold; every link
   underlined on hover) and sizes its rows for its own page container (.site-container), which the design's header
   does not print. These rules keep those parent styles out of the design's header, page head and footer, and give
   the content the design's container, typefaces and a calm heading scale. */

/* 1. Header, page head and footer. :where() keeps these at the weight of one class, so they beat the parent's bare
      element rules while every rule of the design (one class plus an element or more) still wins. */
.pe-legacy :where(.topbar, .site-header, .page-head, .site-footer) { font-family: var(--font-body); letter-spacing: normal; }
.pe-legacy :where(.topbar, .site-header, .page-head, .site-footer) :where(p, strong, label, blockquote) { color: inherit; font-family: inherit; }
.pe-legacy :where(.topbar, .site-header, .page-head, .site-footer) :where(p a) { font-weight: inherit; }
.pe-legacy :where(.site-header, .page-head, .site-footer) :where(h1, h2, h3, h4) { font-family: var(--font-head); color: inherit; }
.pe-legacy .page-head h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.15; letter-spacing: var(--head-track); font-weight: var(--head-weight); }
.pe-legacy .site-footer .footer-h { font-family: var(--font-body); letter-spacing: .14em; color: var(--sand); }
.pe-legacy :where(.site-header, .site-footer) :where(ul, ol) { list-style: none; }
.pe-legacy .site-header .sub-menu { margin: 0; }
/* the parent underlines every link on hover and dims linked images; the design's buttons and menu do neither */
.pe-legacy :is(.btn, .offer-mini, .call-icon, .site-logo):hover,
.pe-legacy :is(.topbar, .site-header) a:hover { text-decoration: none; }
.pe-legacy :is(.site-header, .site-footer) a:hover img { opacity: 1; }

/* 2. The content column: the design's container instead of the parent's fixed 1170 px rows. */
.pe-legacy .theme-page { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; box-sizing: border-box; }
.pe-legacy .legacy-page { padding-top: 24px; }
.pe-legacy .legacy-head { padding-bottom: 8px; }

/* 3. Content type: the design's typefaces and colours; a heading scale with the H1 largest (the parent set H1 to
      22 px and H2 to 29 px, the design's section H2 would otherwise reach 44 px here). */
.pe-legacy .theme-page { font-family: var(--font-body); color: var(--ink); }
.pe-legacy .theme-page :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-head); letter-spacing: var(--head-track); color: var(--ink); }
.pe-legacy .theme-page h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; }
.pe-legacy .theme-page h2 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.2; }
.pe-legacy .theme-page h3 { font-size: 21px; line-height: 1.25; }
.pe-legacy .theme-page h4 { font-size: 18px; line-height: 1.3; }
.pe-legacy .theme-page :is(p, li, td, th, label, input, textarea, blockquote) { font-family: var(--font-body); }
.pe-legacy .theme-page :is(p a, table a, .wpb_text_column a) { color: var(--accent); }
.pe-legacy .theme-page img { max-width: 100%; height: auto; }

/* 4. Posts and archives: the parent gives the post text a fixed width (435 px below 1190 px) and narrows it on phones
      only inside its own page container. Here it follows the column instead. */
@media (max-width: 1189.98px) {
  .pe-legacy .blog .post-content,
  .pe-legacy #comments-list .comment-details { width: auto; float: none; overflow: hidden; }
}
@media (max-width: 767.98px) {
  .pe-legacy .blog .post-details { width: auto; float: none; }
  .pe-legacy .blog .post-content { overflow: visible; }
}