/*
 * Plattenexperte Atelier: the approved design (preview round 11, 26 October 2026), ported to the WordPress child theme.
 * Sources: theme-directions/a-atelier/base.css (structure) and style.css (look). Changes for WordPress:
 * pairing 2 «Klar» (Inter Tight, Inter) is fixed in :root, the preview-only font switch, cookie banner stand-in and
 * placeholder page are gone (Complianz shows the real banner), and the calculator rules live in calculator.css.
 */

/* ---- structure (base.css) ---- */
:root {
  --container: 1200px;
  --gutter: 16px;
  --bg: #fff; --surface: #fff; --ink: #1d2b31; --muted: #5b676b; --line: #d9dddd;
  --cta-bg: #1d2b31; --cta-ink: #fff; --call-bg: transparent; --call-ink: #1d2b31; --call-border: #1d2b31;
  --accent: #8a6a2c; --star: #9a7a3c; --error: #a3261b; --ok: #1f6b3a;
  --radius: 6px; --btn-radius: 6px; --field-radius: 6px;
  --font-head: Georgia, serif; --font-body: system-ui, sans-serif;
  --section-pad: clamp(56px, 7vw, 96px);
  --head-h: 64px;   /* height of the sticky header, measured by site.js */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body { hyphens: manual; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0 0 .5em; line-height: 1.15; overflow-wrap: break-word; hyphens: manual; }
p { margin: 0 0 1em; overflow-wrap: break-word; hyphens: manual; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus, #2a6fdb); outline-offset: 2px; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: #000; padding: 8px 12px; }
.skip:focus { left: 8px; top: 8px; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.2em;
  border-radius: var(--btn-radius); border: 2px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.btn-call { background: var(--call-bg); color: var(--call-ink); border-color: var(--call-border); }
.btn-offer { background: var(--cta-bg); color: var(--cta-ink); }
.btn .lbl-short { display: none; }
.text-link { display: inline; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link .ico { display: inline-block; margin-left: .35em; vertical-align: -.2em; }
.nowrap { white-space: nowrap; }   /* pe_arrow_text(): the last word and the arrow stay together when a link wraps */
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* logo */
.site-logo { display: block; flex: none; }
.site-logo img { width: var(--logo, 64px); height: var(--logo, 64px); }

/* menu: WordPress classes (menu, menu-item, sub-menu, current-menu-item) */
.site-nav .menu, .site-nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; display: flex; align-items: center; gap: .3em; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 10px; background: none; border: 0; }
.menu-toggle .ico { width: 26px; height: 26px; }
.menu-toggle .ico-close, .nav-open .menu-toggle .ico-open { display: none; }
.nav-open .menu-toggle .ico-close { display: block; }
.menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 1100px) {
  .menu-toggle { display: none; }
  .site-nav .menu { display: flex; align-items: center; }
  .site-nav .menu-item { position: relative; }
  .site-nav .sub-menu { position: absolute; top: 100%; left: -12px; min-width: 240px; z-index: 40; opacity: 0; visibility: hidden;
    transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
  .site-nav .menu-item-has-children:hover > .sub-menu, .site-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 1099.98px) {
  .site-nav { display: none; }
  .nav-open .site-nav { display: block; }
  .site-nav .ico-chev { display: none; }
}

/* before and after slider */
.ba-stage { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #cfd3d1; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.ba-stage { -webkit-touch-callout: none; }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M9 7v10l-5-5zm6 0 5 5-5 5z'/%3E%3C/svg%3E");
  background-size: 26px; background-repeat: no-repeat; background-position: center; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba-stage:has(.ba-range:focus-visible) .ba-knob { outline: 3px solid var(--focus, #2a6fdb); outline-offset: 2px; }
.ba-tag { position: absolute; top: 12px; padding: 4px 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; background: rgba(20,30,34,.72); color: #fff; border-radius: 3px; pointer-events: none; }
.ba-tag-before { left: 12px; } .ba-tag-after { right: 12px; }
.ba-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 12px 0 0; font-weight: 600; }
.ba-count { flex: none; font-weight: 400; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.ba-stage.is-dragging { cursor: grabbing; }
/* project choice, round 3: phones show a row of equal photos (never a second line of chips), computers a list with photo and title */
.ba-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ba-tab { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: var(--radius); text-align: left; }
.ba-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); opacity: .72; transition: opacity .15s; -webkit-user-drag: none; }
.ba-tab[aria-selected="true"] .ba-thumb, .ba-tab:hover .ba-thumb { opacity: 1; }
.ba-tab[aria-selected="true"] .ba-thumb { outline: 3px solid var(--ink); outline-offset: 2px; }
.ba-tab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) {
  .ba-tabs { grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; }
  .ba-tab { display: flex; align-items: center; gap: 14px; padding: 7px 14px 7px 7px; background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
  .ba-tab:hover { border-color: var(--ink); }
  .ba-tab[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .ba-thumb { flex: none; width: 54px; height: 54px; border-radius: 4px; opacity: 1; }
  .ba-tab[aria-selected="true"] .ba-thumb { outline: 0; }
  .ba-tab-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: flex; flex-direction: column; line-height: 1.3; }
  .ba-tab-label { font-weight: 600; font-size: 16px; }
  .ba-tab-cat { font-size: 14px; color: var(--muted); }
}
/* reviews and rating */
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.stars { display: inline-flex; gap: 1px; color: var(--star); }
.stars .ico { width: 18px; height: 18px; }
.ratings { display: flex; flex-wrap: wrap; gap: 12px; }
.rating-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rating-num { font-size: 32px; font-weight: 700; line-height: 1; font-family: var(--font-head); }
.rating-src { flex-basis: 100%; font-size: 15px; color: var(--muted); }
.reviews { display: grid; gap: 20px; }
.review { margin: 0; }
.review blockquote { margin: 0; }
.review figcaption { display: flex; flex-direction: column; font-size: 15px; }
.review figcaption span { color: var(--muted); }
/* review row, round 3: swipe on phones, arrows and keyboard on computers; three cards in view from 1000 px */
.rv-track { list-style: none; margin: 0; padding: 2px 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track:focus-visible { outline: 3px solid var(--focus, #2a6fdb); outline-offset: 4px; }
.rv-item { display: flex; scroll-snap-align: start; min-width: 0; }
.rv-item .review { flex: 1; display: flex; flex-direction: column; }
.rv-item .review blockquote { flex: 1; }
@media (min-width: 640px) { .rv-track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; } }
@media (min-width: 1000px) { .rv-track { grid-auto-columns: calc((100% - 40px) / 3); } }
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.rv-count { margin: 0; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.rv-nav { display: flex; gap: 8px; margin-left: auto; }
.rv-btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); }
.rv-btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.rv-btn:disabled { opacity: .35; cursor: default; }
.ico-flip { transform: scaleX(-1); }
@media (max-width: 639.98px) { .rv-count { display: none; } }

/* lists */
.checklist, .steps, .gallery-links, .contact-list, .services { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.checklist .ico { color: var(--accent); width: 22px; height: 22px; margin-top: 2px; }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.regions { display: grid; gap: 16px 32px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.region p { margin: 0; color: var(--muted); }
.price-list { margin: 0; }
.price-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.price-row dt { font-weight: 600; } .price-row dd { margin: 0; }
.contact-list li a, .contact-list .cl-static { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; text-decoration: none; }
.contact-list .ico { width: 22px; height: 22px; margin-top: 3px; color: var(--accent); }
.cl-label { display: block; font-size: 13px; color: var(--muted); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: inherit; }

/* form (stand-in for the form plugin of the new theme) */
.contact-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; min-width: 0; }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.contact-form label, .contact-form legend { font-weight: 600; font-size: 15px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.contact-form legend { padding: 0; margin-bottom: 8px; }
.opt { font-weight: 400; color: var(--muted); }
.contact-form input:not([type="checkbox"]), .contact-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; color: var(--ink);
  background: var(--field-bg, #fff); border: 1px solid var(--field-border, #9aa3a5); border-radius: var(--field-radius); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid var(--field-border, #9aa3a5); border-radius: var(--btn-radius); font-weight: 500; cursor: pointer; background: var(--field-bg, #fff); color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--focus, #2a6fdb); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.form-status { margin: 0; font-weight: 600; }
.form-status.is-error { color: var(--error); } .form-status.is-ok { color: var(--ok); }
/* open phone menu: menu goes below the header row and above the cookie banner */
@media (max-width: 1099.98px) {
  .site-nav { order: 10; }
  .nav-open .site-header { z-index: 70; max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
}

/* ---- look (style.css) ---- */
:root {
  --bg: #f6f2ea; --tint: #ede6d9; --surface: #fffdf9; --ink: #1d3139; --muted: #59625f; --line: #dcd3c3;
  --accent: #8a6a2c;          /* muted brass: links, numbers */
  --sand: #cdb994;            /* light brass on the dark footer and result box */
  --dark: #1a2c33;
  --cta-bg: #1d3139; --cta-ink: #fff; --call-bg: transparent; --call-ink: #1d3139; --call-border: #1d3139;
  --star: #9a7a3c; --focus: #8a6a2c;
  --radius: 6px; --btn-radius: 4px; --field-radius: 4px; --logo: 48px;
  --field-border: #b5aa98; --range-on: #1d3139; --thumb: #1d3139;
  --shadow: 0 18px 40px rgba(29,49,57,.08);
}
:root {
  --font-head: "Inter Tight", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --head-weight: 600; --head-track: -.022em; --body-size: 17px; --h1: clamp(38px, 5.2vw, 66px); --h2: clamp(29px, 3.4vw, 44px);
}

body { font-size: var(--body-size); }
h1, h2, h3 { font-weight: var(--head-weight); letter-spacing: var(--head-track); text-wrap: balance; }
h2 { font-size: var(--h2); }
h3 { font-size: 22px; }
.muted { color: var(--muted); }
.tint { background: var(--tint); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin-bottom: .4em; }
.section-head-row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.section-head-row h2 { margin: 0; }
.section-lead { font-size: 1.06em; color: var(--muted); margin-bottom: 0; }
.btn:hover { filter: brightness(1.15); }
.btn-call:hover { background: var(--ink); color: #fff; filter: none; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: #fff; filter: none; }
.btn-block { width: 100%; }

/* top bar (computers) and the sticky header: white, with a line and, once scrolled, a shadow */
.topbar { display: none; background: var(--dark); color: #dfe4e3; font-size: 14px; }
.topbar-in { display: flex; justify-content: flex-end; gap: 28px; min-height: 36px; align-items: center; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.topbar .ico { color: var(--sand); width: 16px; height: 16px; }
@media (min-width: 1100px) { .topbar { display: block; } }
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.is-scrolled .site-header { box-shadow: 0 6px 22px rgba(29,49,57,.10); }
.header-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 64px; padding: 8px 0; }
.site-logo { margin-right: auto; }
.header-actions { display: none; }
.call-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); }
.call-icon .ico { width: 20px; height: 20px; }
.menu-toggle { margin-right: -10px; color: var(--ink); }
.site-nav { order: 10; flex-basis: 100%; }
@media (min-width: 700px) {
  :root { --logo: 56px; }
  .header-actions { display: flex; gap: 8px; }
  .header-actions .btn { min-height: 44px; padding: 0 1em; }
  .call-icon { display: none; }
}
@media (max-width: 1099.98px) {
  .site-nav { margin-top: 8px; border-top: 1px solid var(--line); }
  .site-nav .menu > li { border-bottom: 1px solid var(--line); }
  .site-nav .menu > li:last-child { border-bottom: 0; }
  .site-nav a { min-height: 50px; font-weight: 600; font-size: 18px; }
  .site-nav .sub-menu { padding: 0 0 8px 16px; }
  .site-nav .sub-menu a { min-height: 44px; font-weight: 400; }
  .site-nav .current-menu-item > a { color: var(--accent); }
}
@media (min-width: 1100px) {
  :root { --logo: 60px; }
  .header-in { flex-wrap: nowrap; gap: 24px; padding: 10px 0; }
  .site-logo { margin-right: 0; }
  .site-nav { order: 0; flex: 1 1 auto; }
  .site-nav a { white-space: nowrap; }
  .site-nav .menu { justify-content: center; gap: 4px 22px; }
  .site-nav .menu > li > a { min-height: 48px; font-weight: 600; font-size: 16px; }
  .site-nav .menu > .current-menu-item > a, .site-nav .menu > .current-menu-ancestor > a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .site-nav .sub-menu { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 30px rgba(29,49,57,.14); padding: 8px; }
  .site-nav .sub-menu a { padding: 10px 12px; border-radius: 4px; font-size: 16px; }
  .site-nav .sub-menu a:hover, .site-nav .sub-menu .current-menu-item a { background: var(--tint); }
  .header-actions .btn { min-height: 46px; }
}
@media (min-width: 1100px) and (max-width: 1299.98px) {
  .site-nav .menu { gap: 4px 14px; }
  .header-actions .btn-call .lbl-long { display: none; }
  .header-actions .btn-call .lbl-short { display: inline; }
}

/* hero: its own tinted band under the white header */
/* phones and tablets: title and text on the photo, see the block at the end of this file */
.hero { background: var(--tint); padding: 28px 0 0; }
.hero-grid { display: flex; flex-direction: column; }
.hero-photo { order: 1; margin: 28px calc(-1 * var(--gutter)) 0; aspect-ratio: 16 / 10; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-title { font-size: var(--h1); line-height: 1.04; margin-bottom: 16px; }
.hero-h1b { display: block; color: var(--accent); }
.hero-lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--muted); max-width: 42ch; margin-bottom: 0; }
.hero-actions { display: grid; gap: 10px; margin: 24px 0 18px; }
.hero .rating { font-size: 16px; }
.hero-service .breadcrumb { margin-top: 4px; }
.hero-actions + .rating { margin-bottom: 0; }
@media (min-width: 560px) { .hero-actions { display: flex; flex-wrap: wrap; } }
@media (max-width: 599.98px) { .hero-photo { aspect-ratio: 4 / 3; } .hero-lead { font-size: 17.5px; } }
@media (min-width: 900px) {
  .hero { padding: clamp(48px, 5vw, 76px) 0; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
  .hero-photo { order: 0; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius); box-shadow: var(--shadow); }
}

/* services */
.services { display: grid; gap: 14px; }
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(4, 1fr); } }
.service-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.service-link:hover { border-color: var(--ink); box-shadow: 0 10px 28px rgba(29,49,57,.12); }
.service-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.service-link:hover .service-img img { transform: scale(1.03); }
.service-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.service-name { font-family: var(--font-head); font-size: 23px; font-weight: var(--head-weight); letter-spacing: var(--head-track); line-height: 1.2; }
.service-sub { color: var(--muted); font-weight: 600; font-size: 15px; }
.service-text { margin: 8px 0 16px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.service-price { display: flex; flex-direction: column; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-from { font-size: 15px; color: var(--muted); }
.sp-from strong { font-family: var(--font-head); font-size: 22px; font-weight: var(--head-weight); letter-spacing: var(--head-track); color: var(--ink); }
.sp-per { font-size: 14.5px; color: var(--muted); }
.service-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; color: var(--accent); }
@media (max-width: 639.98px) {
  /* phones: photo beside the text, so the four services fit in about two screens */
  .service-link { flex-direction: row; }
  .service-img { flex: 0 0 34%; aspect-ratio: auto; }
  .service-body { padding: 14px 16px 16px; }
  .service-name { font-size: 20px; }
  .service-text { font-size: 15px; margin: 4px 0 10px; }
  .service-price { padding-top: 10px; }
  .sp-from strong { font-size: 19px; }
  .service-more { margin-top: 6px; font-size: 15px; }
}
/* Mietpark: part of the services, not a section of its own */
.mietpark { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 16px; margin-top: 20px; padding: 16px 20px; background: var(--tint); border-radius: var(--radius); }
.mietpark p { margin: 0; }
.mietpark .btn { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
.mietpark-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.mietpark-ico .ico { width: 22px; height: 22px; }
@media (min-width: 700px) { .mietpark { grid-template-columns: auto 1fr auto; padding: 14px 16px 14px 20px; } .mietpark .btn { grid-column: auto; } }

/* before and after: projects as a photo list beside the slider (computers), a row of five photos under it (phones) */
.ba { display: grid; gap: 20px; grid-template-areas: "head" "media" "tabs" "more"; }
.ba-side { display: contents; }
.ba-head { grid-area: head; } .ba-media { grid-area: media; } .ba-tabs { grid-area: tabs; } .ba-more { grid-area: more; }
.ba-stage { border-radius: var(--radius); }
.ba-more { font-size: 16px; color: var(--muted); }
.ba-more p { margin: 0; }
.ba-more a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 900px) {
  /* text, project list and gallery links as one block, centred beside the slider */
  .ba { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "side media"; column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .ba-side { display: flex; flex-direction: column; gap: 28px; grid-area: side; }
  .ba-media { width: 100%; max-width: 540px; justify-self: end; }
}

.price-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px 8px; width: min(100%, 380px); }
.price-box h3 { font-size: 18px; margin: 0 0 4px; }
.price-box .price-row { font-size: 17px; }
.price-box .price-row:last-child { border-bottom: 0; }
.price-note { font-size: 14px; color: var(--muted); margin: 2px 0 10px; }   /* round 11: what the calculator includes */
.pl-calc { color: var(--muted); }

/* reviews: all of them in a row that moves sideways */
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.review blockquote p { font-size: 17px; line-height: 1.6; margin: 0; }
.review figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.review figcaption strong { font-weight: 700; }
.rating-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; }

/* about */
.about-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; } }
.about-photo { margin: 0; }
.about-photo img { width: 100%; aspect-ratio: 889 / 500; object-fit: cover; border-radius: var(--radius); }
.about-photo figcaption { font-size: 15px; color: var(--muted); margin-top: 8px; }
.about-quote { margin: 22px 0 24px; padding: 0; }
.about-quote p { font-family: var(--font-head); font-weight: 500; letter-spacing: var(--head-track); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; margin: 0 0 10px; }
.signature { font-family: var(--font-head); font-weight: var(--head-weight); color: var(--accent); font-size: 18px; }

/* contact section of the homepage and the service pages: text and contact details beside the form, tinted, above the dark footer */
.section-contact-cta { background: var(--tint); }
.contact-cta { display: grid; gap: 28px; }
@media (min-width: 960px) { .contact-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 88px); align-items: start; } }
.contact-cta .section-lead { max-width: 46ch; }
.contact-cta .person { margin: 28px 0 10px; }
.contact-cta .contact-list { display: grid; gap: 0 24px; border-top: 1px solid var(--line); padding-top: 8px; }
@media (min-width: 600px) { .contact-cta .contact-list { grid-template-columns: 1fr 1fr; } }
.contact-cta-form { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow); }
.contact-cta-form .contact-form { margin: 0; }

/* service page */
.checklist { display: grid; gap: 0 32px; }
@media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { border-bottom: 1px solid var(--line); }
.why h3 { font-size: 24px; }
.steps { display: grid; gap: 20px; counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step-num { display: block; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 44px; line-height: 1; color: var(--accent); margin-bottom: 14px; }
.step p { margin: 0; color: var(--muted); }
.price-row { font-size: 18px; }
.price-row dd { font-weight: 700; }
.gallery-item { border-radius: var(--radius); }
.after-gallery { margin-top: 20px; }
.regions { grid-template-columns: 1fr; }
@media (min-width: 600px) { .regions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .regions { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .regions { grid-template-columns: repeat(5, 1fr); } }
.region { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.region-title { font-size: 19px; margin-bottom: 6px; }

/* contact page */
.page-head { padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
@media (max-width: 599.98px) { .page-head { padding: 24px 0 28px; } .page-head h1 { margin-bottom: .3em; } .page-head .hero-lead { font-size: 17px; } }
.page-head h1 { font-size: clamp(40px, 5vw, 64px); }
.page-head .hero-lead { max-width: 52ch; }
.section-contact { padding-top: clamp(36px, 5vw, 64px); }
.contact-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 380px 1fr; gap: 56px; align-items: start; } }
.person { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.person p { margin: 0; line-height: 1.4; }
.contact-card .btn-block { margin-bottom: 8px; }
.contact-main h2 { font-size: clamp(26px, 3vw, 34px); }
.wide-photo { margin: 0; }
.wide-photo img { border-radius: var(--radius); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* footer */
.site-footer { background: var(--dark); color: #cdd5d5; font-size: 16px; padding-top: 56px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-logo { display: inline-block; background: #fff; border-radius: 6px; padding: 6px; margin-bottom: 14px; }
.footer-logo img { width: 68px; height: 68px; }
.footer-h { font-family: var(--font-body); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 4px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding: 20px 0 28px; }
.legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 14px; }
.legal .link-btn { color: #fff; }

/* round 3 details */
.ratings { flex-wrap: nowrap; }
.rating-card { flex: 0 0 auto; width: 266px; align-content: flex-start; }
@media (max-width: 559.98px) { .ratings { width: 100%; flex-direction: column; } .rating-card { width: 100%; } }
.about-quote p { letter-spacing: -.005em; }
.contact-form .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contact-form .chip span { display: flex; justify-content: center; text-align: center; width: 100%; padding: 0 8px; font-size: 15px; }
.contact-cta-area { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .split-top { align-items: start; } }
.contact-form .chip { display: flex; }
.contact-form .chip span { min-height: 44px; line-height: 1.25; }
@media (max-width: 439.98px) { .contact-form .chip span { font-size: 14.5px; padding: 0 6px; } }
/* contact page on phones: the call button first in the card, so it is free of the cookie banner on small phones */
@media (max-width: 599.98px) { .contact-card { display: flex; flex-direction: column; } .contact-card .btn-block { order: -1; margin: 0 0 18px; } }
/* phones: the four calculator tabs are boxes of one size, also where a label needs two lines */

/* round 4: phone and tablet header as one unit: name beside the logo, phone and menu as a pair of equal buttons,
   same tint as the first section so it does not look cut off from it (a line and shadow appear once scrolled) */
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 19px; }
.logo-sub { font-size: 12.5px; color: var(--muted); }
@media (min-width: 1100px) { .logo-text { display: none; } }
@media (max-width: 1099.98px) {
  .site-header { background: var(--tint); border-bottom-color: transparent; }
  .is-scrolled .site-header, .nav-open .site-header { border-bottom-color: var(--line); }
  .call-icon { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; }
  .menu-toggle { min-width: 44px; width: 44px; min-height: 44px; height: 44px; margin-right: 0; padding: 0; border: 1px solid var(--field-border); border-radius: 10px; background: var(--surface); }
  .menu-toggle .ico { width: 24px; height: 24px; }
}

/* round 5 (Daniel's phone screenshots of 21 October) */
/* ratings: two equal boxes side by side at every width, stars on both (Ofri 4.9 fills 98 % of the row) */
.ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 544px); flex-wrap: nowrap; }
.rating-card { width: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 18px 15px; }
.rating-src { flex-basis: auto; line-height: 1.35; }
.stars-bar { position: relative; display: inline-flex; }
.stars-bar .stars { flex-wrap: nowrap; }
.stars-bar .ico { flex: none; }
.stars-bg { color: var(--line); }
.stars-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
@media (max-width: 559.98px) {
  .ratings { width: 100%; flex-direction: row; }
  .rating-card { width: auto; padding: 14px 14px 15px; }
  .rating-num { font-size: 30px; }
  .rating-src { font-size: 14px; }
}
/* contact details on phones: icon, label and value on one line each, a compact table over the full width */
@media (max-width: 599.98px) {
  .contact-cta .contact-list { border-top: 0; padding-top: 0; }
  .contact-cta .contact-list li { border-top: 1px solid var(--line); }
  .contact-cta .contact-list li:last-child { border-bottom: 1px solid var(--line); }
  .contact-cta .contact-list li a, .contact-cta .contact-list .cl-static { align-items: center; padding: 12px 0; }
  .contact-cta .contact-list .ico { margin-top: 0; }
  .contact-cta .cl-text { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; align-items: baseline; flex: 1; min-width: 0; }
  .contact-cta .cl-label { font-size: 14px; }
  .contact-cta .cl-value { font-size: 16.5px; overflow-wrap: anywhere; }
}
.cl-value { display: block; }
/* footer on phones and tablets: logo beside the text, Leistungen beside Einsatzgebiete, the pages in two columns */
@media (max-width: 899.98px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "serv regions" "pages pages"; gap: 30px 20px; }
  .footer-brand { grid-area: brand; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .footer-brand .footer-logo { margin: 2px 0 0; padding: 5px; }
  .footer-brand .footer-logo img { width: 54px; height: 54px; }
  .footer-brand > p { margin: 0; }
  .footer-brand .footer-contact { grid-column: 1 / -1; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
  .footer-brand .footer-contact br { display: none; }
  .footer-serv { grid-area: serv; }
  .footer-regions { grid-area: regions; }
  .footer-pages { grid-area: pages; }
  .footer-pages ul { columns: 2; column-gap: 20px; }
  .footer-pages li { break-inside: avoid; }
  .footer-bottom { margin-top: 32px; }
}

/* phones and tablets (Daniel, 21 October): the breadcrumb, title and text sit on the photo, with a dark layer
   that is light at the top, so the bathroom still shows; buttons and rating follow below. The photo area above the text
   is lower on short screens (160 px at 844 px height, 62 px at 664, 50 px at 640), so the Offerte button stays clear
   of the cookie banner also on short phone screens. */
@media (max-width: 899.98px) {
  .hero { padding-top: 0; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(clamp(48px, 50vh - 270px, 160px), auto) auto auto auto auto auto; }
  .hero-text { display: contents; }
  .hero-photo { grid-column: 1; grid-row: 1 / 5; margin: 0 calc(-1 * var(--gutter)); aspect-ratio: auto; height: 100%; position: relative; }
  .hero-photo img { height: 100%; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,27,32,0) 0%, rgba(14,27,32,.32) 30%, rgba(14,27,32,.8) 56%, rgba(14,27,32,.9) 100%); }
  .hero .breadcrumb, .hero .hero-title, .hero .hero-lead { grid-column: 1; position: relative; z-index: 1; }
  .hero .breadcrumb { grid-row: 2; color: rgba(255,255,255,.85); }
  .hero .hero-title { grid-row: 3; color: #fff; }
  .hero-h1b { color: var(--sand); }
  .hero .hero-lead { grid-row: 4; color: rgba(255,255,255,.92); padding-bottom: 22px; }
  .hero-actions { grid-row: 5; margin-top: 18px; }
  .hero .rating { grid-row: 6; padding-bottom: 28px; }
}

/* round 6 (Daniel's pick of 23 October, variation B): phones and tablets get a dark slate bar like the footer, the logo
   on white, the name in white and a sand «Anrufen» button, so the header stands clearly apart from the page.
   The open menu and the tablet buttons are set for the dark ground. */
@media (max-width: 1099.98px) {
  .site-header { background: var(--ink); border-bottom-color: transparent; }
  .is-scrolled .site-header, .nav-open .site-header { border-bottom-color: transparent; }
  .is-scrolled .site-header { box-shadow: 0 6px 22px rgba(29,49,57,.28); }
  .site-logo img { width: 46px; height: 46px; padding: 3px; background: #fff; border-radius: 8px; }
  .logo-name { color: #fff; }
  .logo-sub { color: var(--sand); }
  .call-icon { width: auto; gap: 7px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--sand); color: var(--ink); font-weight: 600; font-size: 15.5px; text-decoration: none; }
  .call-icon .ico { width: 18px; height: 18px; }
  .menu-toggle { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
  .site-nav { border-top-color: rgba(255,255,255,.18); }
  .site-nav .menu > li { border-bottom-color: rgba(255,255,255,.14); }
  .site-nav a { color: #fff; }
  .site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a { color: var(--sand); }
  .header-actions .btn-call { color: #fff; border-color: rgba(255,255,255,.55); }
  .header-actions .btn-call:hover { background: #fff; color: var(--ink); }
  .header-actions .btn-offer { background: var(--sand); color: var(--ink); }
}
/* narrow phones: logo, name and button a little smaller, so logo, «Anrufen» and the menu stay in one row down to 360 px
   with all three font pairings (measured 23 October) */
@media (max-width: 419.98px) {
  .header-in { gap: 0 6px; }
  .site-logo { gap: 8px; }
  .site-logo img { width: 42px; height: 42px; }
  .logo-name { font-size: clamp(16px, 4.6vw, 19px); }
  .logo-sub { font-size: 11.5px; }
  .call-icon { gap: 6px; padding: 0 12px 0 10px; font-size: 15px; }
}

/* round 7: the two further jobs on the Leistungen page, side by side from 800 px */
.more-grid { display: grid; gap: 20px; }
@media (min-width: 800px) { .more-grid { grid-template-columns: 1fr 1fr; } }
.more-card h3 { margin-bottom: .4em; }
.more-card p { margin: 0; }
/* round 7: price boxes with up to five rows (Plattenleger, Treppen) stay beside the heading, each row on one line,
   and the heading starts at the top instead of sinking to the bottom of a tall box */
.calc-head { align-items: flex-start; }
.price-box { width: min(100%, 480px); }
.price-box .price-row { padding: 10px 0; font-size: 16px; column-gap: 12px; }
.price-box .price-row dd { white-space: nowrap; }

/* round 8 (Daniel's screenshots of 23 October) */
/* steps: an icon for each step, and on computers a line that leads from one step to the next */
.step { position: relative; }
.step-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.step-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--tint); color: var(--accent); }
.step-icon .ico { width: 28px; height: 28px; }
.step .step-num { display: inline; margin: 0; font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 800px) {
  .step:not(:last-child)::after { content: ""; position: absolute; top: 52px; left: 100%; width: 20px; border-top: 2px dashed var(--accent); opacity: .55; }
}
/* the "Warum" card: portrait and name on top, three facts at the bottom, as tall as the list beside it */
.split-top .why { display: flex; flex-direction: column; }
.why-person { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.why-person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.why-person > span { display: flex; flex-direction: column; line-height: 1.3; }
.why-person strong { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 18px; }
.why-person > span > span { font-size: 15px; color: var(--muted); }
.why h3 { margin-bottom: .45em; }
.why-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: auto 0 0; padding-top: 22px; }
.why-facts > div { background: var(--tint); border-radius: var(--radius); padding: 14px 14px 13px; }
.why-facts dt { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 34px; line-height: 1; color: var(--accent); }
.why-facts dd { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
@media (max-width: 439.98px) { .why-facts dt { font-size: 28px; } .why-facts > div { padding: 12px 10px; } .why-facts dd { font-size: 13px; } }

/* reviews: the photo reviews of his Google entry first, then the text reviews of his homepage */
.review-photo { padding: 0; overflow: hidden; }
.rp-media { position: relative; display: block; flex: none; width: 100%; padding: 0; border: 0; overflow: hidden; background: var(--tint); cursor: zoom-in; aspect-ratio: 4 / 3; }
.rp-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.rp-media:hover img { transform: scale(1.03); }
.rp-count { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(29,49,57,.82); color: #fff; font-size: 14px; font-weight: 600; }
.rp-count .ico { width: 16px; height: 16px; }
.rp-body { flex: 1; display: flex; flex-direction: column; padding: 20px 24px 22px; }
.rp-meta { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.rp-meta .stars { display: inline-flex; gap: 2px; color: var(--star); }
.rp-meta .ico-star { width: 17px; height: 17px; }
.rp-src { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.review-photo blockquote { flex: 1; }
.review-photo blockquote p { font-size: 16.5px; }
.review-photo figcaption { margin-top: 16px; }
.rp-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rp-more .ico { width: 16px; height: 16px; }
/* the text reviews in the same row: a large quotation mark at the top, the text a little larger to fill the card */
.review-quote { display: flex; flex-direction: column; padding: 22px 24px 22px; }
.rq-mark { display: block; height: 58px; margin: 4px 0 16px; overflow: hidden; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 96px; line-height: .78; color: var(--accent); opacity: .45; }
.review-quote .rp-meta { margin-top: 6px; }
.review-quote blockquote p { font-size: 17.5px; line-height: 1.6; }
/* the window with all photos and the whole review */
.rp-dialog { width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(13,37,44,.35); }
.rp-dialog::backdrop { background: rgba(14,27,32,.72); }
.rp-dlg { display: grid; grid-template-columns: 1fr; max-height: calc(100dvh - 32px); }
@media (min-width: 860px) { .rp-dlg { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); height: min(720px, calc(100dvh - 32px)); } }
.rp-view { position: relative; background: #0e1b20; display: grid; place-items: center; min-height: 0; }
@media (max-width: 859.98px) { .rp-view { height: 52dvh; } }
.rp-big { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.rp-nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,253,249,.92); color: var(--ink); cursor: pointer; }
.rp-prev { left: 12px; } .rp-next { right: 12px; }
.rp-nav[hidden] { display: none; }
.rp-pos { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: rgba(14,27,32,.7); color: #fff; font-size: 14px; }
.rp-side { position: relative; overflow-y: auto; padding: 26px 28px 28px; }
.rp-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.rp-side .rp-meta { margin-right: 56px; }
.rp-name { margin: 6px 0 2px; font-size: 22px; }
.rp-where { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.rp-text p { margin: 0 0 .8em; font-size: 16px; line-height: 1.6; }
.rp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rp-thumbs button { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; }
.rp-thumbs button[aria-current="true"] { border-color: var(--accent); }
.rp-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* area: map with Ottenbach in the middle, a town finder and the towns as a compact list (instead of five boxes) */
.area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.area > * { min-width: 0; }
@media (min-width: 960px) {
  .area { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "text map" "list map"; grid-template-rows: auto 1fr; gap: 0 clamp(40px, 6vw, 80px); align-items: start; }
  .area-text { grid-area: text; } .area-map { grid-area: map; } .area-list { grid-area: list; }
}
.area-text h2 { margin-bottom: .4em; }
.area-text .section-lead { max-width: 46ch; margin-bottom: 22px; }
.finder { margin: 0 0 26px; }
.finder-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.finder-row { display: flex; gap: 10px; }
.finder-row input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--surface); font: inherit; font-size: 17px; color: var(--ink); }
.finder-row .btn { min-height: 52px; }
.finder-out { margin: 12px 0 0; min-height: 1.6em; font-size: 16px; line-height: 1.5; }
.finder-out.is-yes { padding: 12px 14px; border-radius: var(--radius); background: var(--tint); }
.finder-out.is-no { padding: 12px 14px; border-radius: var(--radius); background: var(--tint); }
.finder-out a { color: var(--ink); font-weight: 700; }
.area-list { margin: 0; }
.area-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.area-row:last-child { border-bottom: 1px solid var(--line); }
.area-row dt { font-weight: 700; }
.area-row dd { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.area-map { margin: 0; }
.area-svg { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.area-map figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.area-svg .lakes path { fill: #d5dfe1; stroke: #bfcdd0; stroke-width: 1.5; }
.area-svg .rings circle { fill: none; stroke: #b9ab92; stroke-width: 2; stroke-dasharray: 4 9; }
.area-svg .ring-labels text { font-size: 22px; font-weight: 600; fill: #8f846f; }
.area-svg .cantons text { font-size: 26px; font-weight: 700; letter-spacing: .18em; fill: #b5ab99; }
.area-svg .pl circle { fill: var(--ink); stroke: var(--surface); stroke-width: 3; transition: r .2s; }
.area-svg .pl text { font-size: 25px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; opacity: 0; transition: opacity .2s; }
.area-svg .pl.pl-named text, .area-svg .pl:hover text, .area-svg .pl:focus text, .area-svg .pl.is-hit text { opacity: 1; }
.area-svg .pl:focus { outline: none; }
.area-svg .pl.is-hit circle { fill: var(--accent); r: 11; }
.area-svg .pl.is-hit text { font-size: 30px; font-weight: 700; }
.area-svg .pl-home circle { fill: var(--accent); stroke: var(--surface); stroke-width: 4; }
.area-svg .pl-home .home-ring { fill: rgba(138,106,44,.16); stroke: none; }
.area-svg .pl-home text { font-size: 28px; font-weight: 700; fill: var(--accent); paint-order: stroke; stroke: var(--surface); stroke-width: 6px; stroke-linejoin: round; }
@media (max-width: 599.98px) {
  .area-svg .pl text { font-size: 34px; } .area-svg .pl-home text { font-size: 36px; } .area-svg .cantons text { font-size: 32px; }
  .area-svg .ring-labels text { font-size: 28px; } .area-svg .pl circle { r: 9; }
  .area-row { grid-template-columns: 1fr; padding: 10px 0; }
}

/* round 9 (23 October): the rest of the site. No small labels above the headings anywhere (Daniel reads them as
   made by AI), so the section heads are the heading and its lead only. */
/* a text column wider than the card beside it (Über mich, Mietpark) */
@media (min-width: 900px) { .split-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.section-head-row > .text-link { margin-bottom: 6px; }

/* Über mich: his story beside "Auf einen Blick", then a few photos, his values and his own words as a quote */
.about-story h2 { margin-bottom: .5em; }
.about-story p { max-width: 62ch; }
.about-card h3 { font-size: 21px; margin-bottom: .3em; }
.facts { margin: 0; }
.fact-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.fact-row dt { font-weight: 700; font-size: 15px; line-height: 1.5; }
.fact-row dd { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 439.98px) { .fact-row { grid-template-columns: 1fr; } }
.about-photos { margin-top: clamp(48px, 6vw, 80px); }
.about-photos .section-head { margin-bottom: 20px; }
.values { display: grid; gap: 20px; }
@media (min-width: 800px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value-card .step-icon { margin-bottom: 18px; }
.value-card h3 { margin-bottom: .4em; }
.value-card p { margin: 0; color: var(--muted); }
.about-family { max-width: 780px; margin: clamp(36px, 5vw, 56px) 0 0; }

/* Projekte: the three galleries as tabs with a cover photo, the photos as square tiles, a window for the large photo */
.gl-tabs { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
.gl-tab { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; text-align: left; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.gl-tab img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gl-tab-text { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; }
.gl-tab-name { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 20px; line-height: 1.2; }
.gl-tab-count { font-size: 15px; color: var(--muted); }
.gl-tab:not([aria-selected="true"]):hover { border-color: var(--ink); }
.gl-tab[aria-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 699.98px) {
  /* phones: the three galleries as rows with a small photo, so each name fits on one or two lines */
  .gl-tabs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gl-tab { flex-direction: row; align-items: center; }
  .gl-tab img { flex: none; width: 76px; height: 64px; aspect-ratio: auto; }
  .gl-tab-text { padding: 8px 14px; }
  .gl-tab-name { font-size: 18px; }
}
.gl-panel[hidden] { display: none; }
.gl-text { max-width: 62ch; margin: 0 0 18px; color: var(--muted); }
.gl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1000px) { .gl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.gl-item[hidden] { display: none; }
.gl-open { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--tint); cursor: zoom-in; }
.gl-open img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gl-open:hover img { transform: scale(1.04); }
.gl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; }
.gl-count { margin: 0; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.gl-foot .btn[hidden] { display: none; }
.gl-dialog { width: min(1200px, calc(100vw - 24px)); height: min(880px, calc(100dvh - 24px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 10px; background: #0e1b20; color: #fff; overflow: hidden; }
.gl-dialog::backdrop { background: rgba(14,27,32,.86); }
.gl-view { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.gl-big { width: 100%; height: 100%; object-fit: contain; }
.gl-view .rp-close { z-index: 2; }
.gl-cap { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(14,27,32,.78); font-size: 14px; white-space: nowrap; }

/* Preise: the four starting prices as tiles, then the whole price list in six groups */
.price-tiles { list-style: none; margin: 0 0 clamp(52px, 7vw, 88px); padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .price-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.price-tile { display: flex; flex-direction: column; height: 100%; padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.price-tile:hover { border-color: var(--ink); box-shadow: 0 10px 28px rgba(29,49,57,.12); }
.pt-name { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 21px; line-height: 1.2; margin-bottom: 14px; }
.price-tile .service-more { margin-top: auto; padding-top: 12px; }
@media (max-width: 599.98px) { .price-tile { padding: 16px 14px 14px; } .pt-name { font-size: 18px; margin-bottom: 10px; } .price-tile .sp-from strong { font-size: 19px; } }
.pl-head { margin-bottom: 18px; }
.pl-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.pl-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--field-border); border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 600; font-size: 15px; }
.pl-nav a:hover { border-color: var(--ink); }
/* two columns that fill from the left (1 to 4 beside 5 and 6 are about the same height), no group split */
@media (min-width: 1100px) { .pl-groups { columns: 2; column-gap: 20px; } }
.pl-group { break-inside: avoid; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 8px; }
.pl-h { display: flex; align-items: center; gap: 12px; font-size: 21px; margin: 0 0 8px; }
.pl-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--accent); font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pl-table th { text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.pl-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; line-height: 1.4; }
.pl-table tbody tr:last-child td { border-bottom: 0; }
.pl-pos { width: 3.4em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-unit { color: var(--muted); font-size: 15px; white-space: nowrap; }
.pl-table .pl-price { text-align: right; padding-right: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-chf { display: none; }
@media (max-width: 599.98px) {
  /* phones: each position as two lines, the price beside the work, the unit under it */
  .pl-group { padding: 16px 16px 6px; }
  .pl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pl-table tr { display: grid; grid-template-columns: 2.7em minmax(0, 1fr) auto; column-gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pl-table tbody tr:last-child { border-bottom: 0; }
  .pl-table td { padding: 0; border: 0; }
  .pl-pos { grid-column: 1; grid-row: 1 / 3; width: auto; }
  .pl-desc { grid-column: 2; grid-row: 1; }
  .pl-unit { grid-column: 2; grid-row: 2; font-size: 14px; }
  .pl-table .pl-price { grid-column: 3; grid-row: 1; }
  .pl-chf { display: inline; font-weight: 600; }
}

/* Mietpark: the rental facts in the page head, the machines with a search field and filters, the rules beside the card */
.miet-facts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0 0; }
@media (min-width: 900px) { .miet-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.miet-facts > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.miet-facts dt { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.miet-facts dt .ico { width: 18px; height: 18px; color: var(--accent); }
.miet-facts dd { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 439.98px) { .miet-facts > div { padding: 12px; } .miet-facts dd { font-size: 14px; } }
.mp-tools { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) { .mp-tools { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: end; gap: 28px; } }
.mp-search input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--surface); font: inherit; font-size: 17px; color: var(--ink); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--field-border); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink); }
.mp-chip span { font-weight: 500; color: var(--muted); }
.mp-chip:hover { border-color: var(--ink); }
.mp-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mp-chip[aria-pressed="true"] span { color: var(--sand); }
.mp-count { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.mp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.mp-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mp-item[hidden] { display: none; }
/* narrow phones: a smaller photo, so «Feuchtigkeitsmessgerät» fits its line at 360 px in all three font pairings */
@media (max-width: 399.98px) { .mp-item { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; } }
.mp-img { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.mp-img img { width: 100%; height: 100%; object-fit: contain; }
.mp-noimg { color: var(--line); }
.mp-noimg .ico { width: 40px; height: 40px; }
.mp-name { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.mp-kind { margin: 2px 0 8px; font-size: 14px; color: var(--muted); }
.mp-per { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--ink); }   /* round 11 */
.mp-prices { margin: 0; display: grid; font-size: 15px; }
.mp-prices > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.mp-prices dt { color: var(--muted); }
.mp-prices dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-none { margin: 8px 0 0; padding: 14px 16px; border-radius: var(--radius); background: var(--tint); }
.mp-none a { font-weight: 700; }
.miet-rules { margin-top: 8px; }
.miet-rule { padding: 16px 0; border-top: 1px solid var(--line); }
.miet-rule h3 { font-size: 19px; margin-bottom: 6px; }
.miet-rule p { margin: 0; color: var(--muted); }
.miet-ask { display: flex; flex-direction: column; gap: 10px; }
.miet-ask h3 { font-size: 21px; margin: 6px 0 0; }
.miet-ask p { margin: 0 0 6px; color: var(--muted); }
.miet-ask .btn-block span { overflow-wrap: anywhere; }
.miet-ask .miet-docs-h { font-size: 18px; margin-top: 18px; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.doc-list a .ico { color: var(--accent); }
.doc-list a:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.doc-kind { margin-left: 6px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }

/* canton pages: the canton's towns named on the map and listed with their distance, the others paler */
.kt-towns { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.kt-towns li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.35; }
.kt-km { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.area-svg .pl.pl-dim circle { fill: #b9b2a5; }
.area-svg .cantons text.kt-on { fill: var(--accent); }
.kt-more { margin: 0; font-size: 16px; color: var(--muted); }
.kt-more a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

/* AGB, Datenschutz, Impressum: his texts in one readable column, the contents beside them on computers
   (not .legal: that is the footer's line with the legal links) */
.lg-wrap { display: grid; gap: 28px; }
@media (min-width: 1000px) { .lg-has-toc { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; } .lg-toc { position: sticky; top: calc(var(--head-h) + 20px); } }
.lg-doc { max-width: 780px; }
.lg-toc { padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lg-toc-h { margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; }
.lg-toc a { display: block; padding: 5px 0; font-size: 15px; line-height: 1.4; color: var(--muted); text-decoration: none; }
.lg-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) and (max-width: 999.98px) { .lg-toc ol { columns: 2; column-gap: 28px; } .lg-toc li { break-inside: avoid; } }
.lg-sec { margin-bottom: 40px; }
.lg-sec h2 { font-size: clamp(22px, 2.4vw, 27px); margin-bottom: .6em; }
.lg-clause { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 0 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.lg-num { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.lg-text p { margin: 0 0 .6em; }
.lg-text p:last-child { margin-bottom: 0; }
.lg-doc ul { margin: 0 0 .8em; padding-left: 1.2em; }
.lg-doc li { margin: 3px 0; }
.lg-doc li ul { margin: 4px 0 0; }
.lg-stand { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.imp-facts { max-width: 640px; }
@media (min-width: 440px) { .imp-facts .fact-row { grid-template-columns: 160px minmax(0, 1fr); } }
.imp-facts .fact-row:last-child { border-bottom: 1px solid var(--line); }
.imp-facts a { font-weight: 600; }

/* round 10 (audit of 23 October): «Offerte» beside «Anrufen» in the phone header once the page's own Offerte button has
   scrolled away (site.js sets offer-in-head); the name beside the logo makes room, logo, «Anrufen» and the menu stay put */
.offer-mini { display: none; }
@media (max-width: 699.98px) {
  .offer-in-head .offer-mini { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,.6);
    border-radius: 999px; color: #fff; font-weight: 600; font-size: 15.5px; line-height: 1; text-decoration: none; white-space: nowrap; }
  .offer-in-head .logo-text { display: none; }
}
@media (max-width: 419.98px) { .offer-in-head .offer-mini { padding: 0 12px; font-size: 15px; } }
/* 1.1.0: very small phones (below 360 px, such as 320 px) kept the menu button on a second row. There the name beside
   the logo goes (the logo and the link's label still name the firm), and once «Offerte» joins the header the call button
   shows only its icon (its label «Anrufen: 079 ...» stays for screen readers). 360 px and wider are unchanged. */
@media (max-width: 359.98px) {
  .logo-text { display: none; }
  .offer-in-head .call-icon { width: 44px; padding: 0; gap: 0; }
  .offer-in-head .call-icon .call-label { display: none; }
}
/* the contact form: phone or e-mail as one group, with the note under its title */
.contact-form .field-reach { margin: 0 0 4px; }
.contact-form .field-reach legend { margin-bottom: 2px; }
.field-note { margin: 0 0 10px; font-size: 14.5px; color: var(--muted); }

/* ---------------------------------------------------------------- WordPress additions (not in the preview) */
/* the enquiry form's trap field: out of sight and out of the tab order, people never fill it */
.pe-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-noscript { margin: 12px 0 0; font-size: 15px; }
.form-status.is-busy { color: var(--muted); }
.contact-form button[disabled] { opacity: .6; cursor: progress; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mp-note { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.lg-doc .lg-text > :last-child { margin-bottom: 0; }