/* ============================================================
   CONTACT & LOCATIONS — candidates (sections lab, group CO)
   Every selector carries a .contact-* class. Tokens only; knobs are
   custom properties on their component, with defaults. The kit's
   .form / .field / .consent (FI01) are used unchanged; only their
   placement is styled here.
   ============================================================ */

/* ---- shared ----
   .contact-sr      visually hidden label or live region
   .contact-slot    a marked slot for data the client must supply
   .contact-status  a live office-hours sentence with a square mark
   .contact-done    the thank-you line a demo form shows after sending */
.contact-sr {
  position: absolute; width: 1px; height: 1px; overflow: clip;
  clip-path: inset(50%); white-space: nowrap;
}
.contact-slot {
  color: var(--fg-muted);
  border-bottom: 1px dashed var(--field-edge);
}
.contact-status {
  --contact-live: #2fae6e;   /* open-now mark; the sentence carries the meaning */
  display: flex; align-items: center; gap: var(--sp-2);
  max-width: none; color: var(--fg); font-weight: 500;
}
.contact-status__mark { width: 8px; height: 8px; flex: none; background: var(--fg-dim); }
.contact-status[data-open="true"] .contact-status__mark { background: var(--contact-live); }
.contact-done {
  padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
  font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); max-width: 44ch;
}
.contact-sent .form > :not(.contact-done),
.contact-sent.form > :not(.contact-done) { display: none; }
/* [hidden] must win over the kit's display rules (.btn is inline-flex). */
:where(.contact-route, .contact-one, .contact-talk, .contact-steps, .contact-book, .contact-lines) [hidden] { display: none; }
/* Links outside running text: underlined at rest, like L01. */
:is(.contact-one__lines, .contact-dir__about, .contact-dir__people) a {
  color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .3s, text-decoration-thickness .3s var(--ease-out);
}
@media (hover: hover) {
  :is(.contact-one__lines, .contact-dir__about, .contact-dir__people) a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--brand); }
}
/* A square choice mark in the field's edge and fill; the selected one takes
   the accent (the consent box's language, for radios and checkboxes). */
:is(.contact-route__opt, .contact-steps__opt) input {
  appearance: none; display: grid; place-items: center; flex: none;
  width: 18px; height: 18px; margin: 0;
  border: 1px solid var(--field-edge); border-radius: 0;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  transition: border-color .3s;
}
:is(.contact-route__opt, .contact-steps__opt) input:checked { border-color: var(--brand); }
:is(.contact-route__opt, .contact-steps__opt) input:checked::after { content: ""; width: 8px; height: 8px; background: var(--brand); }
:is(.contact-route__opt, .contact-steps__opt) input:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
@media (forced-colors: active) { :is(.contact-route__opt, .contact-steps__opt) input:checked::after { background: CanvasText; } }

/* ---- CO01 · route first ----
   <section class="contact-route">
     <form class="wrap contact-route__grid">
       <div class="contact-route__lead"> eyebrow · h2 ·
         <fieldset class="contact-route__pick"><legend>…</legend>
           <label class="contact-route__opt"><input type="radio" name="route" value="new" checked>
             <span class="contact-route__opt-t">…</span><span class="contact-route__opt-d">…</span></label> × 3–5
         </fieldset> · p.contact-route__escape (general number) </div>
       <div class="contact-route__side">
         <div class="contact-route__who" data-route="new"> portrait · name · role · when · line </div> × routes
         <div class="form contact-route__form"> fields; route-only ones carry data-route="…" </div>
       </div>
     </form>
   </section>
   Native radios + :has(): the swap works without JS, and the arrow keys move
   between routes. Anything with data-route shows only for its route(s). */
.contact-route__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-8) var(--sp-9); align-items: start;
}
.contact-route h2 { max-width: 13ch; text-wrap: balance; }
.contact-route__pick { margin: var(--sp-7) 0 0; padding: 0; border: 0; min-width: 0; }
.contact-route__legend {
  padding: 0; margin-bottom: var(--sp-3);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.contact-route__opt {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px var(--sp-4); align-items: baseline;
  padding: var(--sp-4) 0; border-top: 1px solid var(--hairline); cursor: pointer;
}
.contact-route__opt:last-of-type { border-bottom: 1px solid var(--hairline); }
.contact-route__opt input { grid-row: 1 / span 2; align-self: start; margin-top: .5em; }
.contact-route__opt-t {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: calc(var(--fs-h2) * .42); line-height: 1.2; letter-spacing: var(--ls-head, normal);
  color: var(--fg-muted); transition: color .3s;
}
.contact-route__opt-d { grid-column: 2; font-size: var(--fs-small); color: var(--fg-dim); }
.contact-route__opt:has(input:checked) .contact-route__opt-t { color: var(--fg); }
@media (hover: hover) { .contact-route__opt:hover .contact-route__opt-t { color: var(--fg); } }
.contact-route__escape { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--fg-muted); }
.contact-route__side { display: grid; gap: var(--sp-6); padding-top: var(--sp-2); }
.contact-route__who {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-5); align-items: end;
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hairline);
}
.contact-route__who .photo { border-radius: var(--img-radius-sm); }
.contact-route__name { font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--fg); }
.contact-route__role { font-size: var(--fs-small); color: var(--fg-dim); }
.contact-route__when { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--fg-muted); }
.contact-route__line { margin-top: var(--sp-1); font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
.contact-route__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.contact-route__grid:has(input[value="new"]:checked) [data-route]:not([data-route~="new"]),
.contact-route__grid:has(input[value="support"]:checked) [data-route]:not([data-route~="support"]),
.contact-route__grid:has(input[value="jobs"]:checked) [data-route]:not([data-route~="jobs"]),
.contact-route__grid:has(input[value="other"]:checked) [data-route]:not([data-route~="other"]) { display: none; }
.contact-route__side [data-route] { animation: contact-fade .5s var(--ease-out); }
@keyframes contact-fade { from { opacity: 0; } }
.contact-route.contact-sent .contact-route__pick { opacity: .5; pointer-events: none; }

/* ---- CO02 · one person, a short form and the promise ----
   <section class="contact-one"><div class="wrap">
     <div class="contact-one__head"> eyebrow · h2 </div>
     <div class="contact-one__grid">
       <div class="contact-one__person"> .photo--people · name · role · ul.contact-one__lines </div>
       <form class="form contact-one__form"> … </form>
     </div>
     <div class="contact-one__next"> eyebrow · <ol> li × 3: n · f (the time) · b · p </ol></div>
   </div></section>
   The promise reads like a receipt: the time is the large figure. */
.contact-one__head h2 { max-width: 15ch; text-wrap: balance; }
.contact-one__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--sp-8) var(--sp-9); margin-top: var(--sp-8); align-items: start;
}
.contact-one__person .photo { max-width: 340px; }
.contact-one__name { margin-top: var(--sp-5); font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--fg); }
.contact-one__role { font-size: var(--fs-small); color: var(--fg-dim); }
.contact-one__lines { list-style: none; margin: var(--sp-5) 0 0; padding: 0; max-width: 340px; border-top: 1px solid var(--hairline); }
.contact-one__lines li {
  display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small); font-variant-numeric: tabular-nums;
}
.contact-one__lines span { color: var(--fg-dim); }
.contact-one__lines b { font-weight: 500; color: var(--fg); }
.contact-one__lines a { overflow-wrap: anywhere; }
.contact-one__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.contact-one__next { margin-top: var(--sp-9); }
.contact-one__next ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.contact-one__next li { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.contact-one__n { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.contact-one__f {
  display: block; margin: var(--sp-4) 0 var(--sp-5);
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: calc(var(--fs-display) * .9); line-height: 1; letter-spacing: var(--ls-head, normal);
  color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.contact-one__next b { display: block; font-size: var(--fs-lead); font-weight: 600; color: var(--fg); }
.contact-one__next li p { margin-top: var(--sp-1); max-width: 36ch; }

/* ---- CO03 · visit: live hours, address, consent map ----
   <section class="contact-visit"><div class="wrap contact-visit__grid">
     <div class="contact-visit__text"> eyebrow · h2 · p.contact-status[data-status] ·
       <div class="contact-visit__cols"> address.contact-visit__addr · table.contact-hours </div> · p.note </div>
     <div class="contact-map"> svg.contact-map__svg · div.contact-map__gate (p + ghost button) </div>
   </div></section>
   The map is drawn, never fetched; the gate asks before anything loads. */
.contact-visit__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8) var(--sp-9); align-items: start; }
.contact-visit h2 { max-width: 12ch; text-wrap: balance; }
.contact-visit .contact-status { margin-top: var(--sp-6); font-size: var(--fs-lead); }
.contact-visit__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.contact-visit__addr { display: flex; flex-direction: column; align-items: flex-start; font-style: normal; line-height: 1.7; color: var(--fg-muted); }
.contact-visit__addr b { color: var(--fg); font-weight: 600; }
.contact-visit__addr .link { margin-top: var(--sp-4); }
.contact-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.contact-hours__cap {
  caption-side: top; text-align: left; padding-bottom: var(--sp-2);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.contact-hours th { padding: 5px 0; text-align: left; font-weight: 400; color: var(--fg-muted); }
.contact-hours td { padding: 5px 0; text-align: right; color: var(--fg-muted); }
.contact-hours tr + tr { border-top: 1px solid var(--hairline); }
.contact-hours .contact-hours__today :is(th, td) { color: var(--fg); font-weight: 600; }
.contact-hours__tag { margin-left: var(--sp-1); font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-muted); }
.contact-visit__note { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--fg-dim); }
.contact-map {
  display: flex; flex-direction: column; overflow: clip;
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-2);
}
.contact-map__svg { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; }
.contact-map__grid path { stroke: var(--hairline); stroke-width: 1; }
.contact-map__river { fill: none; stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: 22; stroke-linecap: round; }
.contact-map__road { fill: none; stroke: var(--fg-dim); stroke-width: 3; stroke-linecap: round; }
.contact-map__street { fill: none; stroke: color-mix(in srgb, var(--fg) 30%, transparent); stroke-width: 1.5; }
.contact-map__svg text { font-family: var(--font-label, var(--font-body)); font-size: var(--fs-small); fill: var(--fg-dim); }
.contact-map__svg .contact-map__tag { fill: var(--fg-muted); font-weight: 700; }
.contact-map__svg .contact-map__place { fill: var(--fg); font-weight: 600; }
.contact-map__pin circle:first-child { fill: color-mix(in srgb, var(--fg) 10%, transparent); stroke: var(--fg); stroke-width: 1.5; }
.contact-map__pin circle:last-child { fill: var(--fg); }
.contact-map__gate {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5); border-top: 1px solid var(--hairline); background: var(--bg-3);
}
.contact-map__gate p { font-size: var(--fs-small); color: var(--fg-muted); max-width: 46ch; }
.contact-map__gate .btn[aria-pressed="true"] { pointer-events: none; }

/* ---- CO04 · the form as a sentence ----
   <section class="contact-talk"><div class="wrap contact-talk__grid">
     <div class="contact-talk__main"> eyebrow · h2 ·
       <form class="form contact-talk__form">
         <p class="contact-talk__sentence">Guten Tag, ich bin
           <label class="contact-sr" for="n">Ihr Name</label><input class="contact-talk__in" id="n" style="--w:9" required> …</p>
         <p class="contact-talk__err">…</p> · .consent · submit
       </form></div>
     <aside class="contact-talk__aside"> portrait · who reads it · direct line </aside>
   </div></section>
   The blanks are FI01 fields set inline at the sentence's size: edge, fill,
   accent focus with the faint glow. --w is a blank's width in characters
   where field-sizing isn't supported. */
.contact-talk {
  --contact-talk-size: calc(var(--fs-h2) * .54);
  --contact-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
.contact-talk__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--sp-8) var(--sp-9); align-items: end; }
.contact-talk h2 { max-width: 14ch; text-wrap: balance; }
.contact-talk__form { margin-top: var(--sp-7); gap: var(--sp-5); }
.contact-talk__sentence {
  max-width: 34em;
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 500;
  font-size: var(--contact-talk-size); line-height: 2; letter-spacing: -.01em;
  color: var(--fg); text-wrap: pretty;
}
.contact-talk__in {
  width: calc(var(--w, 12) * .6em); max-width: 100%; min-width: 0;
  margin: 0 .08em; padding: .06em .32em; vertical-align: baseline;
  font: inherit; font-family: var(--font-label, var(--font-body)); font-weight: 400; font-stretch: 100%;
  color: var(--fg); background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--field-edge); border-radius: 0;
  transition: border-color .3s, box-shadow .3s;
}
@supports (field-sizing: content) {
  .contact-talk__in:not(select) { field-sizing: content; width: auto; min-width: calc(var(--w, 12) * .52em); }
}
.contact-talk__in::placeholder { color: var(--fg-dim); opacity: 1; }
.contact-talk__in:focus { outline-color: transparent; border-color: var(--brand); box-shadow: 0 0 24px color-mix(in srgb, var(--brand) 15%, transparent); }
.contact-talk__in:user-invalid { border-color: var(--err, var(--brand)); }
.contact-talk__sel {
  appearance: none; width: auto; padding-right: 1.3em; cursor: pointer;
  background: var(--contact-chev) right .3em center / .6em no-repeat, color-mix(in srgb, var(--bg) 60%, transparent);
}
.contact-talk__sel option { background: var(--bg-3); color: var(--fg); font-size: var(--fs-body); }
.contact-talk__err { display: none; font-size: var(--fs-small); color: var(--err, var(--brand)); }
.contact-talk__form:has(.contact-talk__in:user-invalid) .contact-talk__err { display: block; }
.contact-talk__aside { display: grid; gap: var(--sp-4); align-content: end; padding-bottom: var(--sp-2); }
.contact-talk__aside .photo { max-width: 200px; }
.contact-talk__reader { font-size: var(--fs-small); max-width: 32ch; }
.contact-talk__reader b { color: var(--fg); font-weight: 600; }

/* ---- CO05 · four questions, contact details last ----
   <section class="contact-steps"><div class="wrap contact-steps__grid">
     <div class="contact-steps__aside"> eyebrow · h2 · lead ·
       <ol class="contact-steps__brief"><li data-state="now|done|todo"> n · k · a (the answer) </li> × 4</ol></div>
     <form class="contact-steps__form"> p.count ·
       <fieldset class="contact-steps__step"><legend class="contact-steps__q">…</legend>
         <div class="contact-steps__opts"><label class="contact-steps__opt"><input type="radio">…</label> …</div>
       </fieldset> × 3 · fieldset (the contact .form) · .contact-steps__nav (back · next) </form>
   </div></section>
   Without JS the fieldsets stand one under another as one form; JS adds
   --armed (one step at a time) and --moving (the slide). */
.contact-steps__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8) var(--sp-9); align-items: start; }
.contact-steps h2 { max-width: 12ch; text-wrap: balance; }
.contact-steps__lead { margin-top: var(--sp-5); max-width: 40ch; }
.contact-steps__brief { list-style: none; margin: var(--sp-7) 0 0; padding: 0; max-width: 520px; border-top: 1px solid var(--hairline); }
.contact-steps__brief li {
  display: grid; grid-template-columns: 3ch 11ch minmax(0, 1fr); gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small); transition: border-color .3s;
}
.contact-steps__n { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.contact-steps__k { color: var(--fg-muted); }
.contact-steps__a { color: var(--fg); overflow-wrap: anywhere; }
.contact-steps__brief li[data-state="now"] { border-bottom-color: var(--fg); }
.contact-steps__brief li[data-state="now"] .contact-steps__k { color: var(--fg); font-weight: 600; }
.contact-steps__brief li[data-state="todo"] .contact-steps__a { color: var(--fg-dim); }
.contact-steps__count {
  display: none; margin-bottom: var(--sp-4);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.contact-steps--armed .contact-steps__count { display: block; }
.contact-steps__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-steps__step + .contact-steps__step { margin-top: var(--sp-8); }
.contact-steps--armed .contact-steps__step + .contact-steps__step { margin-top: 0; }
.contact-steps__q {
  padding: 0; margin-bottom: var(--sp-5);
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: calc(var(--fs-h2) * .6); line-height: 1.15; letter-spacing: var(--ls-head, normal);
  color: var(--fg); text-wrap: balance;
}
.contact-steps__q .field__opt { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; }
.contact-steps__opts { display: grid; border-top: 1px solid var(--hairline); }
.contact-steps__opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
.contact-steps__opt {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-lead); color: var(--fg-muted); cursor: pointer; transition: color .3s;
}
.contact-steps__opt:has(input:checked) { color: var(--fg); }
@media (hover: hover) { .contact-steps__opt:hover { color: var(--fg); } }
.contact-steps__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.contact-steps__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.contact-steps__nav [data-next] { margin-left: auto; }
.contact-steps__hint { margin-top: var(--sp-3); min-height: 1.6em; font-size: var(--fs-small); color: var(--fg-muted); }
.contact-steps--moving .contact-steps__step:not([hidden]) { animation: contact-step-in .55s var(--ease-out); }
.contact-steps--moving .contact-steps__step[data-dir="back"]:not([hidden]) { animation-name: contact-step-back; }
@keyframes contact-step-in { from { opacity: 0; transform: translateX(var(--sp-5)); } }
@keyframes contact-step-back { from { opacity: 0; transform: translateX(calc(var(--sp-5) * -1)); } }

/* ---- CO06 · inquiry, then pick the call ----
   <section class="contact-book"><div class="wrap contact-book__grid">
     <div class="contact-book__ask"> eyebrow · h2 · form.form · p.contact-book__sent[hidden] </div>
     <div class="contact-book__cal" data-state="locked|open">
       <div class="contact-book__who"> portrait · step · with </div>
       <div class="contact-book__week"><div class="contact-book__day"> p.date · button.contact-book__slot × n </div> × 5</div>
       <div class="contact-book__foot"> p.pick · ghost confirm </div>
     </div>
   </div></section>
   The week stands in for the scheduler's embed; it waits, dimmed, until the
   inquiry is sent. The chosen slot inverts (no accent: that is the submit's). */
.contact-book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8) var(--sp-9); align-items: start; }
.contact-book h2 { max-width: 13ch; text-wrap: balance; }
.contact-book__form { margin-top: var(--sp-7); }
.contact-book__sent { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); font-size: var(--fs-lead); color: var(--fg); max-width: 40ch; }
.contact-book__cal {
  padding: var(--sp-6); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-3);
}
.contact-book__who { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-4); align-items: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.contact-book__who .photo { border-radius: var(--img-radius-sm); }
.contact-book__step { font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600; font-size: var(--fs-lead); line-height: 1.35; color: var(--fg); }
.contact-book__with { font-size: var(--fs-small); color: var(--fg-dim); }
.contact-book__week {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2);
  margin-top: var(--sp-5); transition: opacity .4s var(--ease-out);
}
.contact-book__cal[data-state="locked"] .contact-book__week { opacity: .5; }
.contact-book__day { display: grid; gap: var(--sp-1); align-content: start; }
.contact-book__date { margin-bottom: var(--sp-1); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.contact-book__date b { display: block; color: var(--fg); font-weight: 600; }
.contact-book__slot {
  padding: 10px 0; font: inherit; font-family: var(--font-label, var(--font-body)); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; color: var(--fg); background: transparent;
  border: 1px solid var(--field-edge); border-radius: 0; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.contact-book__slot:disabled { cursor: default; }
.contact-book__slot:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (hover: hover) { .contact-book__slot:not(:disabled):hover { border-color: var(--fg); } }
.contact-book__slot[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.contact-book__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.contact-book__pick { font-size: var(--fs-small); color: var(--fg-muted); max-width: 34ch; }
.contact-book__foot .btn:disabled { opacity: .45; cursor: default; }

/* ---- CO07 · direct lines, set large ----
   <section class="contact-lines"><div class="wrap">
     <div class="contact-lines__head"> (eyebrow · h2) · p.contact-status </div>
     <dl class="contact-lines__list"><div class="contact-lines__row"><dt>Telefon</dt>
       <dd><a class="contact-lines__big" href="tel:…">…</a><span class="contact-lines__meta">…</span></dd></div> × 3</dl>
   </div></section>
   The lines are the largest type in the section; --contact-line-size keeps
   the e-mail address on one line from 390 to 1920. */
.contact-lines { --contact-line-size: clamp(22px, 5.2vw, 76px); }
.contact-lines__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5) var(--sp-8); }
.contact-lines h2 { max-width: 13ch; text-wrap: balance; }
.contact-lines__now { margin: 0 0 .5em; }
.contact-lines__list { margin: var(--sp-8) 0 0; }
.contact-lines__row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--sp-5);
  padding: var(--sp-6) 0; border-top: 1px solid var(--hairline);
}
.contact-lines__row:last-child { border-bottom: 1px solid var(--hairline); }
.contact-lines__row dt {
  padding-top: .9em;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.contact-lines__row dd { margin: 0; display: grid; gap: var(--sp-3); justify-items: start; }
.contact-lines__big {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--contact-line-size); line-height: 1.05; letter-spacing: var(--ls-head, normal);
  color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  text-decoration-thickness: .05em; text-underline-offset: .14em;
}
a.contact-lines__big:focus-visible { text-decoration-line: underline; }
@media (hover: hover) { a.contact-lines__big:hover { text-decoration-line: underline; text-decoration-color: var(--brand); } }
.contact-lines__meta { font-size: var(--fs-small); color: var(--fg-muted); }
.contact-lines__copy {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* ---- CO08 · department directory ----
   <section class="contact-dir"><div class="wrap">
     <div class="contact-dir__head"> eyebrow · h2 · p </div>
     <div class="contact-dir__dept">
       <div class="contact-dir__about"> h3 · p · inbox </div>
       <ul class="contact-dir__people"><li> .photo--people · b · role · line · mail </li> …</ul>
     </div> × departments
   </div></section>
   Rows, not a grid of equals: the department explains itself on the left,
   its people stand on the right, portraits still. */
.contact-dir__head h2 { max-width: 15ch; text-wrap: balance; }
.contact-dir__head p { margin-top: var(--sp-5); }
.contact-dir__dept {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6) var(--sp-8);
  padding: var(--sp-7) 0; border-top: 1px solid var(--hairline);
}
.contact-dir__head + .contact-dir__dept { margin-top: var(--sp-8); }
.contact-dir__dept:last-child { border-bottom: 1px solid var(--hairline); }
.contact-dir__about h3 { font-size: calc(var(--fs-h2) * .5); line-height: 1.15; letter-spacing: var(--ls-head, normal); text-wrap: balance; }
.contact-dir__about p { margin-top: var(--sp-3); max-width: 34ch; }
.contact-dir__about a { display: inline-block; margin-top: var(--sp-4); font-size: var(--fs-small); }
.contact-dir__people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
.contact-dir__people li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: var(--fs-small); min-width: 0; }
.contact-dir__people .photo { margin-bottom: var(--sp-3); }
.contact-dir__people b { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.contact-dir__role { color: var(--fg-dim); margin-bottom: var(--sp-2); }
.contact-dir__people a { color: var(--fg-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ---- the group on smaller screens ---- */
@media (max-width: 900px) {
  .contact-route__grid, .contact-one__grid, .contact-visit__grid, .contact-talk__grid,
  .contact-steps__grid, .contact-book__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .contact-one__person { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 var(--sp-5); align-items: end; }
  .contact-one__person .photo { grid-row: 1 / span 3; }
  .contact-one__lines { grid-column: 1 / -1; max-width: none; }
  .contact-one__name { margin-top: 0; }
  .contact-talk__aside { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .contact-talk__aside .link { grid-column: 2; }
  .contact-dir__dept { grid-template-columns: minmax(0, 1fr); }
  .contact-lines__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .contact-lines__row dt { padding-top: 0; }
  .contact-steps__brief { max-width: none; }
}
@media (max-width: 640px) {
  .contact-route__pair, .contact-one__pair, .contact-steps__pair { grid-template-columns: minmax(0, 1fr); }
  .contact-route__who { grid-template-columns: 88px minmax(0, 1fr); gap: var(--sp-4); }
  .contact-one__person { grid-template-columns: 112px minmax(0, 1fr); }
  .contact-one__next ol { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .contact-one__f { margin: var(--sp-2) 0 var(--sp-3); }
  .contact-visit__cols { grid-template-columns: minmax(0, 1fr); }
  .contact-talk { --contact-talk-size: var(--fs-lead); }
  .contact-talk__sentence { line-height: 1.7; }
  .contact-talk__in, .contact-talk__in:not(select) { display: block; width: 100%; margin: .3em 0 .5em; padding: .5em .7em; }
  @supports (field-sizing: content) { .contact-talk__in:not(select) { field-sizing: fixed; } }
  .contact-steps__opts--grid { grid-template-columns: minmax(0, 1fr); }
  .contact-steps__nav [data-next] { margin-left: 0; }
  .contact-book__cal { padding: var(--sp-4); }
  .contact-book__week { gap: 4px; }
  .contact-dir__people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
}
@media (pointer: coarse) { .contact-talk__in { font-size: max(16px, 1em); } }
@media (prefers-reduced-motion: reduce) {
  .contact-route__side [data-route],
  .contact-steps--moving .contact-steps__step:not([hidden]) { animation: none; }
  .contact-book__week, .contact-route__opt-t, .contact-steps__opt { transition: none; }
}


/* ---- 2026-09-11 · BDG page view ---- */
/* CO09–CO11 · BDG's contact page. Three shared parts, each its own
   sub-namespace, then one root per candidate. The kit's .form, .field,
   .select, .pills, .checks and .consent are used unchanged: only their
   placement is set here. None of these roots paints a background: the
   page view gives the section its ground (data-band). */
:where(.contact-ways, .contact-short, .contact-margin) [hidden] { display: none; }
:where(.contact-ways, .contact-short, .contact-margin) .eyebrow { margin-bottom: var(--sp-4); }

/* ---- shared · .contact-kf, BDG's project form ----
   <form class="form contact-kf">
     <p class="contact-kf__title"><b>Projektanfrage</b> Pflicht sind nur …</p>
     <div class="contact-kf__trio"> .field × 3 (Unternehmen, Kontakt, Name optional) </div>
     .field (textarea)
     <div class="contact-kf__opts"> .pills · .pills · .field>.select · .checks · .pills.contact-kf__wide </div>
     .consent · button.btn--accent · p.contact-kf__done[hidden]
   </form> */
.contact-kf__trio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-4);
}
.contact-kf__opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--sp-6) var(--sp-6); align-items: start;
}
.contact-kf__wide, .contact-kf__sub { grid-column: 1 / -1; }
.contact-kf__sub {
  margin-top: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
  font-size: var(--fs-small); color: var(--fg-muted); max-width: none;
}
.contact-kf__title { font-size: var(--fs-small); color: var(--fg-muted); max-width: 52ch; }
.contact-kf__title b, .contact-kf__done::first-line { color: var(--fg); }
.contact-kf__title b {
  display: block; margin-bottom: var(--sp-1);
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--ls-head, normal);
}
.contact-kf__done {
  padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
  font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); max-width: 44ch;
}
.contact-kf__done:focus { outline: 0; }
:where(.contact-ways__form, .contact-short__form)[data-sent] > :not(.contact-kf__done) { display: none; }

/* ---- shared · .contact-dl, the direct lines ----
   <ul class="contact-dl"><li class="contact-dl__row">
     <span class="contact-dl__k"><svg class="ico">…</svg>Telefon</span>
     <a class="contact-dl__v" href="tel:…">+49 …</a><span class="contact-dl__p">Mo–Fr 9:00–17:00 Uhr</span>
   </li> × 3</ul>
   Stacked by default (label, number, promise); a candidate may lay the row out wider. */
.contact-dl { --contact-dl-v: var(--fs-h3); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.contact-dl__row { display: grid; gap: 2px; padding-block: var(--sp-3); border-bottom: 1px solid var(--hairline); }
.contact-dl__k { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); color: var(--fg-dim); }
.contact-dl__k svg {
  width: var(--icon-inline); height: var(--icon-inline); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.contact-dl__v {
  justify-self: start;
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--contact-dl-v); line-height: 1.3; letter-spacing: var(--ls-head, normal);
  font-variant-numeric: tabular-nums; color: var(--fg);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .3s, text-decoration-thickness .3s var(--ease-out);
}
.contact-dl__p { font-size: var(--fs-small); color: var(--fg-muted); }
@media (hover: hover) { .contact-dl__v:hover { text-decoration-thickness: 2px; text-decoration-color: var(--brand); } }

/* ---- shared · .contact-gate, the location with a consent-gated map ----
   <div class="contact-gate">
     <div class="contact-gate__map" role="img"><svg viewBox="0 0 640 360">streets · rail · walk · station · pin</svg>
       <span class="contact-gate__lbl contact-gate__lbl--station">…</span> (--walk, --pin)</div>
     <div class="contact-gate__bar"><p class="contact-gate__note">…</p><button class="btn btn--ghost" aria-pressed="false">Karte laden</button></div>
   </div>
   The panel keeps its hairline edge, so it still reads on a shaded band. */
.contact-gate {
  --gate-street: color-mix(in srgb, var(--fg) 7%, transparent);
  border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: clip; background: var(--bg-2);
}
.contact-gate__map { position: relative; aspect-ratio: 16 / 9; }
.contact-gate__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-gate__streets path { fill: none; stroke: var(--gate-street); stroke-width: 16; }
.contact-gate__rail { fill: none; stroke: var(--fg-dim); stroke-width: 2; }
.contact-gate__ties { fill: none; stroke: var(--fg-dim); stroke-width: 9; stroke-dasharray: 1.5 11; }
.contact-gate__walk { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-dasharray: 1 8; stroke-linecap: round; stroke-linejoin: round; }
.contact-gate__station { fill: var(--bg-2); stroke: var(--fg-dim); stroke-width: 2; }
.contact-gate__pin circle:first-child { fill: var(--bg-2); stroke: var(--fg); stroke-width: 2; }
.contact-gate__pin circle:last-child { fill: var(--fg); }
.contact-gate__lbl {
  position: absolute; padding: 2px 6px; background: var(--bg-2);
  font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); white-space: nowrap;
}
.contact-gate__lbl--station { left: 25.6%; top: 62%; translate: -50% 0; text-align: center; }
.contact-gate__lbl--walk { left: 37.5%; top: 54.4%; translate: -50% -135%; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.contact-gate__lbl--pin { left: 73.4%; top: 40%; translate: -50% 0; text-align: center; }
.contact-gate__lbl--pin b { display: block; color: var(--fg); font-weight: 600; }
.contact-gate__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--hairline);
}
.contact-gate__note { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); max-width: 50ch; }
.contact-gate__bar .btn { flex: none; }
.contact-gate__bar .btn:disabled { opacity: .55; cursor: default; }
.contact-gate__addr { font-style: normal; line-height: 1.6; color: var(--fg-muted); }
.contact-gate__addr b { display: block; color: var(--fg); font-weight: 600; }
.contact-gate__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.contact-gate__facts li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.contact-gate__facts svg {
  width: var(--icon-inline); height: var(--icon-inline); flex: none; margin-top: 1px;
  fill: none; stroke: var(--fg-dim); stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 640px) {
  .contact-gate__lbl { padding: 1px 4px; font-size: var(--fs-eyebrow); }
  .contact-gate__lbl--pin { top: 39%; }
  .contact-gate__bar { flex-direction: column; align-items: flex-start; padding: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .contact-dl__v { transition: none; } }

/* ---- CO09 · Four ways in, four numbered rows ----
   <section class="contact-ways"><div class="wrap">
     <header class="contact-ways__head"><div class="contact-ways__intro"> eyebrow · h1 · p.lead </div>
       <dl class="contact-ways__facts"><div><dt>Erreichbarkeit</dt><dd>Mo–Fr 9–17 Uhr</dd></div> × 3</dl></header>
     <nav class="contact-ways__jump"><a href="#CO09-write"><span class="contact-ways__n">01</span><b>Schreiben</b><span>…</span></a> × 4</nav>
     <div class="contact-ways__row" id="CO09-write">
       <div class="contact-ways__side"><p class="contact-ways__n">01</p><h2>Schreiben</h2><p class="contact-ways__t"><b>…</b> …</p></div>
       form.contact-kf | ul.contact-dl.contact-ways__lines | .contact-ways__book | .contact-ways__visit
     </div> × 4
   </div></section> */
.contact-ways { --ways-cols: minmax(0, 4fr) minmax(0, 8fr); }
.contact-ways__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--sp-7) var(--sp-9); align-items: end;
}
.contact-ways h1 { max-width: 15ch; text-wrap: balance; }
.contact-ways__intro .lead { margin-top: var(--sp-5); max-width: 48ch; text-wrap: pretty; }
.contact-ways__facts { margin: 0; border-top: 1px solid var(--hairline); }
.contact-ways__facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--hairline);
}
.contact-ways__facts dt { font-size: var(--fs-small); color: var(--fg-dim); }
.contact-ways__facts dd {
  margin: 0; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.3; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right;
}
.contact-ways__n { font-size: var(--fs-small); line-height: 1.4; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.contact-ways__jump {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--sp-8); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--hairline);
}
.contact-ways__jump a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sp-3); align-content: start;
  padding: var(--sp-4) var(--sp-4) var(--sp-5) 0; color: var(--fg); text-decoration: none;
}
.contact-ways__jump a + a { padding-left: var(--sp-4); border-left: 1px solid var(--hairline); }
.contact-ways__jump .contact-ways__n { grid-row: span 2; padding-top: .3em; }
.contact-ways__jump b {
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--ls-head, normal);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: transparent; transition: text-decoration-color .3s;
}
.contact-ways__jump a > span:last-child { grid-column: 2; font-size: var(--fs-small); color: var(--fg-muted); }
.contact-ways__jump a:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .contact-ways__jump a:hover b { text-decoration-color: var(--brand); } }
.contact-ways__row {
  display: grid; grid-template-columns: var(--ways-cols); gap: var(--sp-6) var(--sp-9);
  padding-block: var(--sp-8); border-top: 1px solid var(--hairline); scroll-margin-top: var(--header-h);
}
.contact-ways__jump + .contact-ways__row { border-top: 0; }
.contact-ways__row:last-child { padding-bottom: 0; }
.contact-ways__side { align-self: start; }
.contact-ways__side .contact-ways__n { margin-bottom: var(--sp-3); }
.contact-ways__t { margin-top: var(--sp-4); font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); max-width: 30ch; }
.contact-ways__t b { display: block; margin-bottom: 2px; font-size: var(--fs-body); font-weight: 600; color: var(--fg); text-wrap: balance; }
.contact-ways__alt {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); max-width: 30ch;
  font-size: var(--fs-small); color: var(--fg-muted);
}
.contact-ways__alt a {
  display: block; margin-top: 2px; width: fit-content;
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--fs-lead); color: var(--fg); font-variant-numeric: tabular-nums;
}
.contact-ways__lines { --contact-dl-v: calc(var(--fs-h3) * 1.2); }
.contact-ways__lines .contact-dl__row {
  grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 15rem); align-items: baseline;
  gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-4);
}
.contact-ways__lines .contact-dl__p { text-align: right; }
.contact-ways__book {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-5); border-block: 1px solid var(--hairline);
}
.contact-ways__book p { font-size: var(--fs-lead); color: var(--fg); max-width: 34ch; }
.contact-ways__visit { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.contact-ways__where { display: grid; gap: var(--sp-5); justify-items: start; }

@media (max-width: 900px) {
  .contact-ways__head { grid-template-columns: minmax(0, 1fr); }
  .contact-ways__jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-ways__jump a:nth-child(3) { padding-left: 0; border-left: 0; }
  .contact-ways__jump a:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .contact-ways__row { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-7); }
  .contact-ways__t { max-width: 44ch; }
  .contact-ways__visit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .contact-ways__jump { margin-top: var(--sp-7); }
  .contact-ways__jump a { padding-right: var(--sp-2); }
  .contact-ways__jump a:nth-child(even) { padding-left: var(--sp-3); }
  .contact-ways__jump .contact-ways__n { grid-row: auto; padding-top: 0; }
  .contact-ways__jump a { grid-template-columns: minmax(0, 1fr); }
  .contact-ways__jump a > span:last-child { grid-column: 1; }
  .contact-ways__lines .contact-dl__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .contact-ways__lines .contact-dl__p { text-align: left; }
  .contact-ways__book { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .contact-ways__jump b { transition: none; } }

/* ---- CO10 · Three required, the rest on request ----
   <section class="contact-short"><div class="wrap">
     <div class="contact-short__grid">
       <div class="contact-short__lead"> eyebrow · h1 · lead · dl.contact-short__facts ·
         <div class="contact-short__talk"> p.contact-short__h · ul.contact-dl · booking .link </div></div>
       <form class="form contact-kf contact-short__form"> title · trio · message ·
         <div class="contact-short__more">
           <button class="contact-short__toggle" aria-expanded aria-controls="CO10-more" hidden>… <b data-count>0</b>/5 …</button>
           <div class="contact-short__body" id="CO10-more"><div class="contact-short__inner"> .contact-kf__opts </div></div>
         </div> · consent · submit </form>
     </div>
     <div class="contact-short__visit"> address · facts · .contact-gate </div>
   </div></section>
   JS adds .is-folding (the body collapses to a 0fr grid row) and .is-open. */
.contact-short { --short-cols: minmax(0, 5fr) minmax(0, 6fr); }
.contact-short__grid, .contact-short__visit {
  display: grid; grid-template-columns: var(--short-cols); gap: var(--sp-8) var(--sp-9); align-items: start;
}
.contact-short h1 { text-wrap: balance; }
.contact-short__grid { margin-top: var(--sp-8); }
.contact-short__lead .lead { max-width: 42ch; text-wrap: pretty; }
.contact-short__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
  margin: var(--sp-7) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--hairline);
}
.contact-short__facts > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.contact-short__facts dt { font-size: var(--fs-small); color: var(--fg-dim); }
.contact-short__facts dd {
  margin: 0; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--fs-lead); line-height: 1.3; color: var(--fg); font-variant-numeric: tabular-nums;
}
.contact-short__escape { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--fg-muted); }
.contact-short__talk { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--fg); }
.contact-short__h { margin-bottom: var(--sp-3); font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); }
.contact-short__h b { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.contact-short__lines .contact-dl__row {
  grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 13rem); align-items: baseline; gap: var(--sp-1) var(--sp-4);
}
.contact-short__lines .contact-dl__p { text-align: right; }
.contact-short__book {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
}
.contact-short__book .contact-short__h { margin: 0; }
.contact-short__form { padding-top: var(--sp-1); }
.contact-short__more { border-block: 1px solid var(--hairline); }
.contact-short__toggle {
  appearance: none; display: none; width: 100%;
  grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.contact-short.is-folding .contact-short__toggle { display: grid; }
.contact-short__tl b { display: block; font-weight: 600; }
.contact-short__tl span { display: block; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.contact-short__count { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-short__count b { color: var(--fg); font-weight: 600; }
.contact-short__sr { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.contact-short__toggle svg {
  width: var(--icon-inline); height: var(--icon-inline); fill: none; stroke: currentColor;
  stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; transition: rotate .5s var(--ease-out);
}
.contact-short.is-open .contact-short__toggle svg { rotate: 180deg; }
.contact-short__toggle:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .contact-short__toggle:hover .contact-short__tl b { text-decoration: underline; text-underline-offset: .22em; } }
.contact-short.is-folding .contact-short__body { display: grid; grid-template-rows: 0fr; }
.contact-short.is-folding.is-open .contact-short__body { grid-template-rows: 1fr; }
.contact-short.is-moving .contact-short__body { transition: grid-template-rows .5s var(--ease-out); }
.contact-short__inner { min-height: 0; overflow: clip; margin-inline: -6px; padding-inline: 6px; }
.contact-short__inner > .contact-kf__opts { padding-block: var(--sp-2) var(--sp-6); }
.contact-short:not(.is-folding) .contact-short__inner > .contact-kf__opts { padding-top: var(--sp-5); }
.contact-short__visit { margin-top: var(--sp-9); padding-top: var(--sp-8); border-top: 1px solid var(--hairline); }
.contact-short__where { display: grid; gap: var(--sp-4); justify-items: start; }
.contact-short__where .eyebrow, .contact-short__where .contact-short__h { margin-bottom: 0; }

@media (max-width: 900px) {
  .contact-short__grid, .contact-short__visit { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .contact-short h1 { max-width: 16ch; }
  .contact-short__talk { margin-top: var(--sp-7); }
  .contact-short__visit { margin-top: var(--sp-8); padding-top: var(--sp-7); }
}
@media (max-width: 640px) {
  .contact-short__facts { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .contact-short__facts > div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding-block: var(--sp-2); border-bottom: 1px solid var(--hairline); }
  .contact-short__toggle { grid-template-columns: minmax(0, 1fr) auto; }
  .contact-short__toggle svg { grid-column: 2; grid-row: 1; }
  .contact-short__count { grid-column: 1; }
  .contact-short__lines .contact-dl__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .contact-short__lines .contact-dl__p { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-short.is-moving .contact-short__body, .contact-short__toggle svg { transition: none; }
}

/* ---- CO11 · A margin that answers the form ----
   <section class="contact-margin"><div class="wrap">
     <header class="contact-margin__head"> eyebrow · h1 | lead · dl.contact-margin__facts </header>
     <form class="form contact-kf contact-margin__form">
       <div class="contact-margin__part"> p.contact-margin__n · trio · message · done </div> <aside class="contact-margin__note"> required · ul.contact-dl </aside>
       <div class="contact-margin__part"> p.contact-margin__n · .contact-kf__opts </div> <aside class="contact-margin__note contact-margin__note--route"> dl.contact-margin__route[aria-live] </aside>
       <div class="contact-margin__part contact-margin__send"> consent · submit </div> <aside class="contact-margin__note"> booking </aside>
     </form>
     <div class="contact-margin__visit"> address · facts · .contact-gate </div>
   </div></section>
   Parts and notes share a row; the notes' left edges join into one margin rule. */
.contact-margin { --margin-cols: minmax(0, 7fr) minmax(0, 4fr); }
.contact-margin__head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-6) var(--sp-9); align-items: end;
}
.contact-margin h1 { max-width: 13ch; text-wrap: balance; }
.contact-margin__intro .lead { max-width: 44ch; text-wrap: pretty; }
.contact-margin__facts {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sp-2) var(--sp-6);
  margin: var(--sp-5) 0 0;
}
.contact-margin__facts > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.contact-margin__facts dt { font-size: var(--fs-small); color: var(--fg-dim); }
.contact-margin__facts dd {
  margin: 0; font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--fs-lead); line-height: 1.3; color: var(--fg); font-variant-numeric: tabular-nums;
}
.contact-margin__form {
  grid-template-columns: var(--margin-cols); gap: 0 var(--sp-8);
  margin-top: var(--sp-9); border-bottom: 1px solid var(--hairline);
}
.contact-margin__part, .contact-margin__note { padding-block: var(--sp-6); border-top: 1px solid var(--hairline); }
.contact-margin__part { display: grid; gap: var(--sp-4); align-content: start; }
.contact-margin__part:first-child, .contact-margin__part:first-child + .contact-margin__note { border-top-color: var(--fg); }
.contact-margin__note { display: grid; gap: var(--sp-3); align-content: start; padding-left: var(--sp-6); border-left: 1px solid var(--hairline); }
.contact-margin__n {
  display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-1);
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--ls-head, normal); color: var(--fg); max-width: none;
}
.contact-margin__n span { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.contact-margin__h { font-weight: 600; color: var(--fg); }
.contact-margin__k { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); }
.contact-margin__note .contact-dl { margin-top: var(--sp-1); }
.contact-margin__note .link { justify-self: start; }
.contact-margin__route { margin: 0; display: grid; }
.contact-margin__route > div { display: grid; gap: 2px; padding-block: var(--sp-3); border-top: 1px solid var(--hairline); }
.contact-margin__route > div:last-child { border-bottom: 1px solid var(--hairline); }
.contact-margin__route dt { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim); }
.contact-margin__route dd { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.contact-margin__route dd.is-new { animation: contact-margin-in .4s var(--ease-out); }
@keyframes contact-margin-in { from { opacity: 0; } }
.contact-margin__fine { font-size: var(--fs-small); color: var(--fg-dim); }
.contact-margin__send { gap: var(--sp-5); }
.contact-margin__form[data-sent] .contact-margin__part:not(:has(.contact-kf__done)),
.contact-margin__form[data-sent] .contact-margin__note ~ .contact-margin__note,
.contact-margin__form[data-sent] .contact-margin__part > :not(.contact-kf__done, .contact-margin__n) { display: none; }
.contact-margin__visit {
  display: grid; grid-template-columns: var(--margin-cols); gap: var(--sp-7) var(--sp-8); align-items: start;
  margin-top: var(--sp-8);
}
.contact-margin__visit > .contact-gate { order: -1; }
.contact-margin__where { display: grid; gap: var(--sp-4); justify-items: start; padding-left: var(--sp-6); }
.contact-margin__where .eyebrow { margin-bottom: 0; }

@media (max-width: 900px) {
  .contact-margin__head { grid-template-columns: minmax(0, 1fr); }
  .contact-margin h1 { max-width: 16ch; }
  .contact-margin__form { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-8); }
  .contact-margin__note { padding-left: 0; border-left: 0; padding-top: var(--sp-5); }
  .contact-margin__part:first-child + .contact-margin__note { border-top-color: var(--hairline); }
  .contact-margin__note--route { padding-inline: var(--sp-5); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-2); margin-bottom: var(--sp-5); }
  .contact-margin__visit { grid-template-columns: minmax(0, 1fr); }
  .contact-margin__visit > .contact-gate { order: 0; }
  .contact-margin__where { padding-left: 0; }
}
@media (max-width: 640px) {
  .contact-margin__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-margin__facts > div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding-block: var(--sp-2); border-bottom: 1px solid var(--hairline); }
  .contact-margin__facts > div:first-child { border-top: 1px solid var(--hairline); }
  .contact-margin__part, .contact-margin__note { padding-block: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) { .contact-margin__route dd.is-new { animation: none; } }