/* =========================================================================
   Startseite (hm-), v26. Mobile first. Warm, editorial, high in contrast; every part has one ground and one job.
     hero cream (white below the photograph on phones) · topics warm white · recognition bordeaux · about warm blush ·
     steps cream · practice warm white · questions cream · invitation deep plum
   Rhythm: light, light, DARK, light, light, light, light, DARK; the two dark parts are kept short.
   Accents: dusty rose, muted olive and warm clay, never all colours in one part. No gradients as fills, no glows, no
   coloured shadows, no milky cards.
   Type: one scale (eyebrow 12px, body 17–18px, lead 19–22px, h3 22–28px, h2 32–52px, h1 34–60px); circle names 14–15px.
   Spacing: 4rem between parts on phones, --hm-sp from 640, 3rem between blocks, 1–1.5rem inside.
   Motion: the hero words rise one after another, the photograph a little slower; the recognition lines, the circles
   (each from its own small direction) and the parts below reveal on scroll; the steps draw their thread. Never
   floating, pulsing or parallax.
   ========================================================================= */

.page-home {
  --hm-cream: #F4EDE5;
  --hm-white: #FFFDFC;
  --hm-ink: #231A1D;
  --hm-wine: #6A2140;
  --hm-deep: #2F1D24;
  --hm-rose: #C9778B;
  --hm-rose-l: #F0BBC8;                   /* eyebrows on bordeaux, 5.8:1 */
  --hm-sage: #747B68;
  --hm-sage-l: #E3E5DA;
  --hm-blush: #EEE0DA;
  --hm-clay: #B86F61;
  --hm-on-dark: #FFF8F3;
  --hm-on-dark-soft: rgb(255 248 243 / .82);
  --hm-line-dark: rgb(255 248 243 / .2);
  --hm-hair: rgb(36 27 30 / .2);
  --hm-r: 24px;                           /* photographs: top right and bottom left only */
  --hm-sp: clamp(4rem, 2.75rem + 3.5vw, 6rem);
  /* the type scale */
  --t-eye: .75rem;
  --t-h1: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
  --t-h2: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);
  --t-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --t-lead: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --lh-body: 1.6;
  /* the shared tokens for this page */
  --color-ink: var(--hm-ink);             /* 15.6:1 on cream */
  --color-ink-soft: #5D5255;
  --color-berry: var(--hm-wine);          /* 10:1 on cream */
  --color-berry-deep: var(--hm-ink);
  --color-pink: var(--hm-rose);
  --color-line: #E2D9CF;
  background: var(--hm-cream);
}
@media (min-width: 900px) { .page-home { --fs-body: 1.125rem; } }
.page-home main { background: var(--hm-cream); }
.page-home .site-header, .page-home .site-header:not(.is-scrolled), .page-home .menu__panel { background: var(--hm-cream); }
.page-home .site-footer { background: var(--hm-cream); border-top-color: var(--hm-hair); }
.page-home .site-footer h2 { color: var(--hm-wine); }

/* ---------- the scale ---------- */
.hm-eyebrow { margin: 0 0 .875rem; font: 600 var(--t-eye)/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-wine); }
.hm-h1 { margin: 0; font: 500 var(--t-h1)/1.04 var(--serif); letter-spacing: -.025em; color: var(--color-ink); text-wrap: pretty; }
.hm-t { margin: 0; font: 500 var(--t-h2)/1.08 var(--serif); letter-spacing: -.02em; color: var(--color-ink); text-wrap: pretty; }
.hm-lead { margin: 1rem 0 0; max-width: 30em; font: 400 var(--t-lead)/1.45 var(--serif); color: var(--color-ink); text-wrap: pretty; }
.page-home main .link { min-height: 48px; }
.hm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 1.5rem; }
.page-home main .photo { display: block; overflow: hidden; border-radius: 0 var(--hm-r) 0 var(--hm-r); }
.page-home main .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1 the hero ----------
   The conversation photograph is the larger surface and both faces stay free. Phones: the photograph across the
   whole width (1:1, 4:3 on small tablets), cropped to the two faces and the door of Raum 2; the bordeaux panel starts
   3rem up on its lower edge (only hands and knees lie there) and runs on the white of the topics below.
   From 900: the photograph on seven columns (5:4), the panel on five columns, low, overlapping the photograph by
   48px (about 7% of its width, over the other woman's back, never her face); a caption names Lätizia. */
.hm-hero { padding-block: 0; row-gap: 0; background: var(--hm-white); }
.hm-hero__fig { grid-column: full; grid-row: 1; margin: 0; min-width: 0; }
.hm-hero__photo { aspect-ratio: 1 / 1; overflow: hidden; background: #E4DAD0; }
.hm-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; }
.hm-hero__cap { display: none; }
.hm-hero__text {
  grid-column: content; grid-row: 2; position: relative; z-index: 1; min-width: 0;
  margin-top: -2.25rem; padding: 1.25rem 1.25rem 1.375rem; border-radius: 0 var(--hm-r) 0 var(--hm-r);
  background: var(--hm-wine); color: var(--hm-on-dark);
}
.hm-hero .hm-eyebrow { margin-bottom: .75rem; color: var(--hm-rose-l); letter-spacing: .1em; }
.hm-hero .hm-h1 { max-width: 13ch; color: var(--hm-on-dark); }
.hm-hero .hm-acts { margin-top: 1.25rem; }
.hm-hero .btn { min-height: 48px; padding: .7rem 1.3rem; background: var(--hm-on-dark); color: var(--hm-wine); }
.hm-hero .btn:hover { background: var(--hm-sage-l); color: var(--hm-ink); }
.hm-hero :focus-visible { outline-color: var(--hm-on-dark); }
@media (max-width: 599.98px) {
  .hm-hero__dot { display: none; }
  .hm-hero__city { display: block; }
  .hm-hero .hm-h1 { max-width: none; }                /* the headline uses the whole card */
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .hm-hero__photo { aspect-ratio: 4 / 3; }
  .hm-hero__photo img { object-position: 50% 64%; }
  .hm-hero__text { grid-column: content-start / c 10; margin-top: -3.5rem; padding: 1.75rem 2rem 2rem; }
}
@media (min-width: 900px) {
  .hm-hero { align-items: end; padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2.5rem, 4vw, 3.5rem); background: var(--hm-cream); }
  .hm-hero__fig { grid-column: c 6 / content-end; grid-row: 1; }
  .hm-hero__photo { aspect-ratio: 5 / 4; max-height: calc(100svh - var(--header-h, 80px) - 7.5rem); min-height: 26rem; border-radius: 0 var(--hm-r) 0 var(--hm-r); }
  .hm-hero__photo img { object-position: 50% 67%; }
  .hm-hero__cap { display: block; margin-top: .75rem; font: 500 .8125rem/1.4 var(--sans); color: var(--color-ink-soft); text-align: right; }
  .hm-hero__text {
    grid-column: content-start / c 6; grid-row: 1; align-self: end;
    margin: 0 -4.5rem 4rem 0; padding: clamp(1.75rem, 2.6vw, 2.75rem);
  }
  .hm-hero .hm-h1 { max-width: 12ch; }
}
@keyframes hm-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes hm-photo { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .hm-hero__text > * { animation: hm-rise 620ms var(--reveal-ease) both; }
  .js .hm-hero__text > :nth-child(2) { animation-delay: 90ms; }
  .js .hm-hero__text > :nth-child(3) { animation-delay: 180ms; }
  .js .hm-hero__fig { animation: hm-photo 1000ms var(--reveal-ease) 120ms both; }
}

/* ---------- 2 the focal topics: a composed constellation ----------
   Equal circles; every circle has its own visible offset (--x, --y), set per item and again per layout, so no column,
   row or odd/even rule shows. Offsets use translate (no layout change); the reveal uses transform, so both compose.
   Phones: two columns under the heading; 640–999: three columns; from 1000 the heading sits left of a 3 × 2
   constellation with larger circles, so the part is shorter and nothing floats in a wide white field. */
.hm-topics { padding-block: 3.25rem 3.5rem; background: var(--hm-white); }
.hm-topics__head { grid-column: content; max-width: 40rem; }
.hm-topics__head .hm-t { font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); font-weight: 550; }
.hm-topics__hint { margin: .75rem 0 0; color: var(--color-ink-soft); }
.hm-orbit {
  --d: clamp(106px, 29vw, 120px);
  --u: clamp(.85px, .27vw, 1.1px);        /* offsets are written in px at 390 and scale with the screen */
  grid-column: content; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; row-gap: 1.75rem;
  margin: 2rem 0 0; padding: 0 0 2.5rem; list-style: none;
}
.hm-orbit > li { min-width: 0; translate: calc(var(--x, 0) * var(--u)) calc(var(--y, 0) * var(--u)); }
/* colours: dark, light, mid, mid-dark, light, mid; strokes in ink on light grounds, cream on dark ones */
.hm-orbit > li:nth-child(1) { --c-bg: var(--hm-wine);   --c-fg: var(--hm-on-dark); --c-bg-h: var(--hm-ink); }
.hm-orbit > li:nth-child(2) { --c-bg: var(--hm-blush); --c-bg-h: var(--hm-rose); --c-fg-h: var(--hm-on-dark); }
.hm-orbit > li:nth-child(3) { --c-bg: var(--hm-rose);   --c-bg-h: var(--hm-wine); --c-fg-h: var(--hm-on-dark); }
.hm-orbit > li:nth-child(4) { --c-bg: var(--hm-sage);   --c-fg: var(--hm-on-dark); --c-bg-h: var(--hm-wine); }
.hm-orbit > li:nth-child(5) { --c-bg: var(--hm-sage-l); --c-bg-h: var(--hm-sage); --c-fg-h: var(--hm-on-dark); }
.hm-orbit > li:nth-child(6) { --c-bg: var(--hm-clay);   --c-fg: var(--hm-on-dark); --c-bg-h: var(--hm-wine); }
/* phones, two columns (left 1 3 5, right 2 4 6): a zigzag of 16–24px across and up to 46px down */
.hm-orbit > li:nth-child(1) { --x: 18;  --y: 0;  --fx: -12px; --fy: 8px; }
.hm-orbit > li:nth-child(2) { --x: -16; --y: 36; --fx: 10px;  --fy: 10px; }
.hm-orbit > li:nth-child(3) { --x: -20; --y: 12; --fx: -6px;  --fy: 12px; }
.hm-orbit > li:nth-child(4) { --x: -24; --y: 4;  --fx: 12px;  --fy: 4px; }
.hm-orbit > li:nth-child(5) { --x: 22;  --y: 18; --fx: -10px; --fy: 10px; }
.hm-orbit > li:nth-child(6) { --x: 2;   --y: 46; --fx: 8px;   --fy: 12px; }
.hm-orbit a { display: flex; flex-direction: column; align-items: center; color: var(--color-ink); text-decoration: none; }
.hm-orbit a:focus-visible { outline: none; }
.hm-orbit__c {
  position: relative; flex: none; width: var(--d); height: var(--d); border-radius: 50%; overflow: hidden;
  background: var(--c-bg); color: var(--c-fg, var(--color-ink));
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}
.hm-orbit__c .ill { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; max-width: none; overflow: visible; }
.page-home .hm-orbit__k {
  margin: .75rem 0 0; max-width: 12em; font: 700 .875rem/1.28 var(--sans); letter-spacing: .005em; text-align: center;
  color: var(--color-ink); text-wrap: pretty; hyphens: manual; text-decoration: underline 1px transparent; text-underline-offset: .3em;
  transition: text-decoration-color 200ms var(--ease);
}
.hm-orbit__l2 { display: block; }         /* "Frauen- &" over "Mädchenberatung" */
.hm-orbit a:is(:hover, :focus-visible) .hm-orbit__c { background: var(--c-bg-h); color: var(--c-fg-h, var(--c-fg, var(--color-ink))); }
.hm-orbit a:is(:hover, :focus-visible) .hm-orbit__k { text-decoration-color: currentColor; }
.hm-orbit a:focus-visible .hm-orbit__c { outline: 2px solid var(--hm-wine); outline-offset: 5px; }
/* each circle enters from its own small direction; the two of a row about 80ms apart */
.js .hm-orbit > li.reveal { transform: translate(var(--fx, 0), var(--fy, 10px)); transition: opacity 520ms var(--reveal-ease) var(--reveal-delay, 0ms), transform 680ms var(--reveal-ease) var(--reveal-delay, 0ms); }
.js .hm-orbit > li.reveal.is-in { transform: none; }
.hm-orbit > li:nth-child(even) { --reveal-delay: 80ms; }
/* three columns, two rows, a new set of offsets (tablets, and beside the heading from 1000) */
@media (min-width: 640px) {
  .hm-topics { padding-block: var(--hm-sp); }
  .hm-orbit { --d: 8rem; --u: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.75rem; margin-top: 2.75rem; }
  .hm-orbit > li:nth-child(1) { --x: 10;  --y: 0; }
  .hm-orbit > li:nth-child(2) { --x: -14; --y: 40; }
  .hm-orbit > li:nth-child(3) { --x: 18;  --y: 12; }
  .hm-orbit > li:nth-child(4) { --x: -16; --y: 26; }
  .hm-orbit > li:nth-child(5) { --x: 12;  --y: -4; }
  .hm-orbit > li:nth-child(6) { --x: -8;  --y: 36; }
  .hm-orbit > li:nth-child(n) { --reveal-delay: 0ms; }
  .hm-orbit > li:nth-child(3n + 2) { --reveal-delay: 80ms; }
  .hm-orbit > li:nth-child(3n) { --reveal-delay: 160ms; }
}
@media (min-width: 900px) {
  .page-home .hm-orbit__k { font-size: .9375rem; }
}
@media (min-width: 1000px) {
  .hm-topics { align-items: center; padding-block: clamp(3.5rem, 2rem + 3vw, 5rem); }
  .hm-topics__head { grid-column: content-start / c 5; grid-row: 1; }
  .hm-topics__head .hm-t, .hm-steps__head .hm-t { font-size: clamp(2.25rem, 1.4rem + 1.6vw, 2.875rem); }
  .hm-orbit { --d: clamp(8.5rem, 4rem + 6vw, 11rem); grid-column: c 5 / content-end; grid-row: 1; column-gap: 2rem; row-gap: 2.25rem; margin-top: 0; padding-bottom: 2.75rem; }
}

/* ---------- 3 recognition, on bordeaux ----------
   Each situation in two parts: the situation strong (h3 size, cream), the open question quiet (lead size, softer),
   broken where a person would pause, so no single word is ever left on a line. Rows are parted by a hairline only.
   The part ends with the reassurance and a quiet link to the steps, not with a second appointment button. */
.hm-known { padding-block: 3.5rem; background: var(--hm-wine); color: var(--hm-on-dark); }
.hm-known__head, .hm-known__list, .hm-known__close { grid-column: content; min-width: 0; }
.hm-known .hm-eyebrow { color: var(--hm-rose-l); }
.hm-known .hm-t { color: var(--hm-on-dark); }
.hm-known__list { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.page-home .hm-known__list > li { padding-block: 1rem; }
.page-home .hm-known__list > li + li { border-top: 1px solid var(--hm-line-dark); }
.page-home .hm-known__list > li:first-child { padding-top: .25rem; }
/* each situation beside the illustration of its topic, in the same circles as the topics above (light grounds on wine) */
.page-home .hm-known__list > li { display: grid; grid-template-columns: var(--kd) minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.hm-known__list { --kd: 72px; }
.hm-known__c { position: relative; width: var(--kd); height: var(--kd); border-radius: 50%; overflow: hidden; background: var(--k-bg); color: var(--k-fg, var(--hm-ink)); }
.hm-known__c .ill { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; max-width: none; overflow: visible; }
.hm-known__list > li:nth-child(1) { --k-bg: var(--hm-rose); }
.hm-known__list > li:nth-child(2) { --k-bg: var(--hm-blush); }
.hm-known__list > li:nth-child(3) { --k-bg: var(--hm-clay); --k-fg: var(--hm-on-dark); }
.hm-known__txt { min-width: 0; }
.hm-known__a { display: block; font: 500 var(--t-h3)/1.2 var(--serif); letter-spacing: -.012em; color: var(--hm-on-dark); text-wrap: pretty; }
.hm-known__b { display: block; margin-top: .25rem; font: 400 var(--t-lead)/1.4 var(--serif); color: var(--hm-on-dark-soft); text-wrap: pretty; }
.hm-known__list > li:nth-child(2) { --reveal-delay: 120ms; }
.hm-known__list > li:nth-child(3) { --reveal-delay: 240ms; }
.hm-known__close { margin-top: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--hm-line-dark); }
.hm-known__close p { margin: 0; max-width: 30em; line-height: 1.6; color: var(--hm-on-dark-soft); text-wrap: pretty; }
.hm-known__close strong { display: block; font-weight: 600; color: var(--hm-on-dark); }
.hm-keep { white-space: nowrap; }   /* the sentence breaks only after its comma, never inside "nicht schon / wissen" */
.page-home .hm-known__link { margin-top: .75rem; color: var(--hm-on-dark); }
.page-home .hm-known__link:hover, .page-home .hm-known__link:focus-visible { color: var(--hm-rose-l); }
.hm-known :focus-visible { outline-color: var(--hm-on-dark); }
@media (min-width: 640px) { .hm-known { padding-block: var(--hm-sp); } .hm-known__list { --kd: 96px; } .page-home .hm-known__list > li { column-gap: 1.5rem; } }
@media (min-width: 900px) {
  .hm-known { align-items: start; }
  .hm-known__head { grid-column: content-start / c 5; grid-row: 1; }
  .hm-known__list { --kd: 104px; grid-column: c 6 / content-end; grid-row: 1 / span 2; margin-top: 0; }
  .page-home .hm-known__list > li:first-child { padding-top: 0; }
  .hm-known__close { grid-column: content-start / c 5; grid-row: 2; align-self: end; margin-top: 2rem; padding-top: 0; border-top: 0; }
}

/* ---------- 4 who she is, on warm blush ----------
   Phones: the greeting, then a compact portrait in the practice (4:3, face and shoulders), her sentence (h3 size,
   "Endlich." in wine), the text in ink with its key phrase in weight only, then two links.
   From 900: a smaller portrait (four columns, 4:5) left; greeting, sentence (larger) and text on six columns right. */
.hm-me { padding-block: var(--hm-sp); row-gap: 0; background: var(--hm-blush); }
.hm-me__head, .hm-me__fig, .hm-me__text, .hm-me__ig { grid-column: content; min-width: 0; }
.hm-me__fig { margin: 1.5rem 0 0; }
.hm-me .photo { aspect-ratio: 4 / 3; }
.hm-me .photo img { object-position: 50% 14%; }
.hm-me__text { margin-top: 1.5rem; }
.hm-me__intro { margin: 0; max-width: 22em; font: 500 var(--t-h3)/1.28 var(--serif); letter-spacing: -.01em; color: var(--hm-ink); text-wrap: pretty; }
.hm-me__yes { color: var(--hm-wine); }
.hm-me__body { margin: 1rem 0 0; max-width: 33em; line-height: 1.65; color: var(--hm-ink); text-wrap: pretty; }
.hm-me__body strong { font-weight: 600; color: var(--hm-wine); }
.hm-me__links { margin: .75rem 0 0; }
/* Instagram: its own row at the bottom, under a hairline */
.hm-me__ig { margin: 2.25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--hm-hair); }
.page-home .hm-ig { gap: .55rem; }
.page-home .hm-ig .ico { width: 1.15rem; height: 1.15rem; }
@media (min-width: 600px) and (max-width: 899.98px) {
  .hm-me__fig { grid-column: content-start / c 9; }
}
@media (min-width: 900px) {
  .hm-me { column-gap: var(--gap); align-items: center; }
  .hm-me__fig { grid-column: content-start / c 5; grid-row: 1 / span 3; margin-top: 0; }
  .hm-me .photo { aspect-ratio: 4 / 5; }
  .hm-me .photo img { object-position: 50% 30%; }
  .hm-me__head { grid-column: c 6 / content-end; grid-row: 1; align-self: end; }
  .hm-me__text { grid-column: c 6 / content-end; grid-row: 2; align-self: start; }
  .hm-me__ig { grid-column: c 6 / content-end; grid-row: 3; align-self: end; margin-top: 2rem; }
  .hm-me__intro { font-size: clamp(1.75rem, 1.2rem + 1.1vw, 2.25rem); line-height: 1.22; }
  .hm-me__body { max-width: 34em; }
}

/* ---------- 5 three steps on one thread, on cream ----------
   Phones: a vertical path. Each number (44px circle) has a 2px line down to the next: a wine track at 28% and the
   wine line on it. With JavaScript (site.js reveal) a step fades in, the line from the step above draws down to it
   (:has(+ li.is-in)) and then its number fills; the first fills as soon as it shows. Without JavaScript, and with
   reduced motion, the finished thread shows (filled numbers, cream on wine, 9.6:1).
   From 800 the thread runs across three columns; from 1000 the heading sits left of it, so the part is short. */
.hm-steps { padding-block: var(--hm-sp); background: var(--hm-cream); }
.hm-steps__head, .hm-steps__list, .hm-note { grid-column: content; min-width: 0; }
.hm-steps__list {
  --n: 2.75rem; --cg: 1rem; --off: scaleY(0);
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.hm-steps__list > li { position: relative; display: grid; grid-template-columns: var(--n) minmax(0, 1fr); column-gap: var(--cg); padding-bottom: 2rem; }
.hm-steps__list > li:last-child { padding-bottom: 0; }
.hm-steps__n {
  grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--n); height: var(--n); border-radius: 50%;
  background: var(--hm-wine); color: var(--hm-on-dark); box-shadow: inset 0 0 0 2px var(--hm-wine);
  font: 500 1.25rem/1 var(--serif);
}
.hm-steps__h { grid-column: 2; display: flex; align-items: center; min-height: var(--n); margin: 0; font: 500 var(--t-h3)/1.2 var(--serif); color: var(--color-ink); }
.hm-steps__list p { grid-column: 2; margin: .25rem 0 0; max-width: 31em; line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
.hm-steps__list > li:not(:last-child)::before,
.hm-steps__list > li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--n) / 2 - 1px); top: calc(var(--n) + .375rem); bottom: .375rem; width: 2px; border-radius: 1px;
}
.hm-steps__list > li:not(:last-child)::before { background: rgb(106 33 64 / .28); }
.hm-steps__list > li:not(:last-child)::after { background: var(--hm-wine); transform-origin: 50% 0; }
.hm-note { margin: 2rem 0 0; padding-left: calc(2.75rem + 1rem); max-width: 44rem; line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
.hm-note strong { display: block; color: var(--color-ink); }
@media (min-width: 800px) {
  .hm-steps__list { --n: 3rem; --cg: clamp(1.5rem, 2.5vw, 2.5rem); --off: scaleX(0); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); margin-top: 2.5rem; }
  .hm-steps__list > li { grid-template-columns: minmax(0, 1fr); align-content: start; padding-bottom: 0; }
  .hm-steps__n { grid-row: auto; font-size: 1.375rem; }
  .hm-steps__h { grid-column: 1; min-height: 0; margin-top: 1.125rem; }
  .hm-steps__list p { grid-column: 1; margin-top: .5rem; }
  .hm-steps__list > li:not(:last-child)::before,
  .hm-steps__list > li:not(:last-child)::after {
    top: calc(var(--n) / 2 - 1px); bottom: auto; left: calc(var(--n) + .5rem); right: calc(.5rem - var(--cg)); width: auto; height: 2px;
  }
  .hm-steps__list > li:not(:last-child)::after { transform-origin: 0 50%; }
  .hm-note { padding-left: 0; margin-top: 2.5rem; }
  .hm-note strong { display: inline; }
}
@media (min-width: 1000px) {
  .hm-steps { align-items: start; }
  .hm-steps__head { grid-column: content-start / c 5; grid-row: 1 / span 2; padding-right: 1rem; }
  .hm-steps__list { grid-column: c 5 / content-end; grid-row: 1; margin-top: .5rem; }
  .hm-note { grid-column: c 5 / content-end; grid-row: 2; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hm-hair); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hm-steps__list > li.reveal::after { transform: var(--off); transition: transform 700ms var(--reveal-ease) var(--line-delay, 0ms); }
  .js .hm-steps__list > li.reveal:has(+ li.is-in)::after { transform: none; }
  .js .hm-steps__list > li.reveal .hm-steps__n {
    background: var(--hm-cream); color: var(--hm-wine);
    transition: background-color 320ms var(--ease) var(--dot-delay, 0ms), color 320ms var(--ease) var(--dot-delay, 0ms);
  }
  .js .hm-steps__list > li.reveal.is-in .hm-steps__n { background: var(--hm-wine); color: var(--hm-on-dark); }
  .hm-steps__list > li:nth-child(1) { --dot-delay: 120ms; }
  .hm-steps__list > li:nth-child(2) { --dot-delay: 560ms; --line-delay: 400ms; }
  .hm-steps__list > li:nth-child(3) { --dot-delay: 960ms; }
}

/* ---------- 6 the practice, on warm white ----------
   One story in a fixed order: the place (eyebrow, heading, two sentences), Raum 2 with a detail laid over its lower
   corner, the address with the way there, then the two independent practices as a quiet note under a hairline.
   From 900 the photographs fill the right half beside the text, so no white field is left. */
.hm-place { padding-block: var(--hm-sp); row-gap: 0; background: var(--hm-white); }
.hm-place__text, .hm-place__pics, .hm-place__where, .hm-place__two { grid-column: content; min-width: 0; }
.hm-place__lead { margin: 1rem 0 0; max-width: 30em; font: 400 var(--t-lead)/1.5 var(--serif); color: var(--hm-ink); text-wrap: pretty; }
.hm-place__pics { position: relative; margin-top: 2rem; padding-bottom: 2.5rem; }
.hm-place__room, .hm-place__detail { margin: 0; }
.hm-place__room .photo { aspect-ratio: 4 / 3; }
.hm-place__room .photo img { object-position: 42% 50%; }
.hm-place__detail { position: absolute; right: 1rem; bottom: 0; width: 34%; }
.hm-place__detail .photo { aspect-ratio: 3 / 4; box-shadow: 0 0 0 5px var(--hm-white); }
.hm-place__where { margin-top: .25rem; }
.hm-place__k { margin: 0 0 .375rem; font: 600 var(--t-eye)/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-wine); }
.hm-place__addr { margin: 0; font: 500 var(--t-h3)/1.3 var(--serif); font-style: normal; color: var(--hm-ink); }
.hm-place__where .link { margin-top: .5rem; }
.hm-place__two { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-place__h { margin: 0; font: 600 var(--fs-body)/1.35 var(--sans); color: var(--hm-ink); }
.hm-place__two p { margin: .5rem 0 0; max-width: 34em; line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
@media (min-width: 600px) and (max-width: 899.98px) {
  .hm-place__room .photo { aspect-ratio: 16 / 9; }
  .hm-place__detail { width: 24%; right: 2rem; }
}
@media (min-width: 900px) {
  .hm-place { align-items: start; }
  .hm-place__text { grid-column: content-start / c 6; grid-row: 1; }
  .hm-place__where { grid-column: content-start / c 6; grid-row: 2; margin-top: 2rem; }
  .hm-place__two { grid-column: content-start / c 6; grid-row: 3; margin-top: 2.5rem; }
  .hm-place__pics { grid-column: c 7 / full-end; grid-row: 1 / span 3; align-self: stretch; margin-top: 0; padding-bottom: 0; }
  .hm-place__room { margin-left: 18%; height: 100%; }
  .hm-place__room .photo { aspect-ratio: auto; height: 100%; min-height: 30rem; border-radius: 0 0 0 var(--hm-r); }
  .hm-place__room .photo img { object-position: 30% 50%; }
  .hm-place__detail { left: 0; right: auto; bottom: 3rem; width: 30%; max-width: 15rem; }
  .hm-place__detail .photo { box-shadow: 0 0 0 6px var(--hm-white); }
}

/* ---------- 7 four questions, on cream ---------- */
.hm-faq { padding-block: var(--hm-sp); background: var(--hm-cream); }
.hm-faq__head, .hm-faq__list, .hm-faq__more { grid-column: content; min-width: 0; }
.hm-faq__list { margin-top: 1.75rem; }
.hm-faq .faq { border-top-color: var(--hm-ink); }
.hm-faq .qa { border-bottom-color: var(--hm-hair); }
.page-home .hm-faq .qa > summary { min-height: 3.75rem; padding-block: .9rem; font-family: var(--serif); font-size: var(--t-lead); color: var(--hm-ink); }
.page-home .hm-faq .qa > summary:hover { color: var(--hm-wine); }
.page-home .hm-faq .qa > summary:focus-visible { outline: 2px solid var(--hm-wine); outline-offset: 2px; border-radius: 2px; }
.page-home .hm-faq .qa__a { line-height: 1.6; color: var(--color-ink-soft); }
.hm-faq__more { margin: 1.5rem 0 0; line-height: 1.6; color: var(--color-ink-soft); }
.hm-faq__more a { display: inline-block; padding-block: 12px; margin-block: -12px; font-weight: 600; color: var(--hm-wine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.hm-faq__more a:hover { color: var(--hm-ink); }
@media (min-width: 900px) {
  .hm-faq { align-items: start; }
  .hm-faq__head { grid-column: content-start / c 5; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h, 80px) + 2rem); }
  .hm-faq__list { grid-column: c 6 / content-end; grid-row: 1; margin-top: 0; }
  .hm-faq__more { grid-column: c 6 / content-end; grid-row: 2; }
}

/* ---------- 8 one invitation, on deep plum ----------
   Phones: question, sentence, button. From 900 the text on seven columns and a small detail of the practice (the
   painting with the migrating birds) on the right, so the part does not end in an empty dark half. */
.hm-close { padding-block: 4rem; background: var(--hm-deep); color: var(--hm-on-dark); }
.hm-close__text { grid-column: content; min-width: 0; }
.hm-close .hm-t { color: var(--hm-on-dark); }
.hm-close .hm-lead { max-width: 26em; color: var(--hm-on-dark-soft); }
.hm-close__fig { display: none; margin: 0; }
.page-home .btn--light { background: var(--hm-on-dark); color: var(--hm-wine); }
.page-home .btn--light:hover { background: var(--hm-white); color: var(--hm-ink); }
.hm-close :focus-visible { outline-color: var(--hm-on-dark); }
@media (min-width: 900px) {
  .hm-close { align-items: center; padding-block: clamp(4rem, 2.5rem + 3vw, 5.5rem); }
  .hm-close__text { grid-column: content-start / c 8; grid-row: 1; }
  .hm-close__fig { display: block; grid-column: c 9 / content-end; grid-row: 1; }
  .hm-close__fig .photo { aspect-ratio: 5 / 4; }
}

/* ---------- scroll reveal: opacity and 12px, about half a second ---------- */
.js .hm-fade-up.reveal { transform: translateY(12px); transition: opacity 500ms var(--reveal-ease) var(--reveal-delay, 0ms), transform 560ms var(--reveal-ease) var(--reveal-delay, 0ms); }
.js .hm-fade-up.reveal.is-in { transform: none; }

/* ---------- phones ---------- */
@media (max-width: 359.98px) {
  .hm-orbit { --d: 88px; column-gap: .5rem; }
  .hm-known__list { --kd: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hm-fade-up.reveal, .js .hm-orbit > li.reveal { transform: none; }
}