/* =========================================================================
   Lätizia Lauton · Heilpraktikerin · Crailsheim
   Shared system only: fonts, tokens, base, the page grid (.g), type, buttons,
   photographs, the L-frame (.lf), reveal, FAQ and mobile folding, form,
   header, footer. Every page composes its own layout in
   /assets/css/pages/<page>.css (linked by build.mjs when the file exists).

   White page, white header. Blush only as a deliberate section ground, strong
   pink and berry sparingly (art direction §0.7). Rectangular geometry: radius 0
   for photos, panels and sections; 2px (--r-control) on form fields; buttons, the menu button and chips are fully round (--r-button).
   No arches, circles, pills, floating cards, badges, shadows or gradients.
   A shared system is NOT a shared composition: this file holds primitives
   only. Classes marked "legacy" stay for pages that still use them; new
   compositions do not use them.
   ========================================================================= */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/dm-sans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/dm-sans-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/newsreader-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/newsreader-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens ---------- */
:root {
  /* colour system: the brief's exact palette. Ratios: text on white / paper / blush */
  --color-white: #FFFFFF;
  /* matte and editorial (client, 2026-11-08): one warm linen ground, dark ink, matte burgundy, rose only as a
     small accent, sand only in small boxes. No pink or sand section grounds. Contrast figures are on linen. */
  --color-paper: #F3F0EB;       /* = the ground (old name) */
  --color-background: #F3F0EB;  /* the page ground: warm linen on every page */
  --color-sand: #E9E2D9;        /* small accents only: info boxes, captions, photo frames */
  --color-blush: #E9E2D9;       /* = --color-sand (old name: small boxes and photo grounds, never a section) */
  --color-pink-soft: #E6CDD3;   /* a dusty powder rose: drawing circles only */
  --color-rose: #E6CDD3;        /* = --color-pink-soft (old name) */
  --color-pink: #C96B86;        /* accent rose: lines, dots, arrows, numerals 40px+ (3.9:1), never body text */
  --color-accent-ink: #9B4762;  /* the accent as small text: eyebrows, subtitles (5.3:1) */
  --color-berry: #4B2230;       /* matte burgundy: buttons, links, labels (12:1); cream on it 12:1 */
  --color-berry-deep: #302024;  /* dark brown-red: hover, the closing card (15:1) */
  --color-ink: #241C20;         /* text and headings (14.9:1) */
  --color-ink-soft: #665D61;    /* secondary text (5.7:1) */
  --color-muted: #6E6569;       /* captions, meta (5.0:1) */
  --color-cream: #F5EEE8;       /* text on the dark closing card */
  --color-line: #DCD5CE;        /* hairlines and dividers (decorative) */
  --color-border: #DCD5CE;      /* = --color-line (old name, still used by rules) */
  --color-border-strong: #BFB5AD; /* stronger decorative rule */
  --color-control: #8E8580;     /* borders of inputs and chips: 3.2:1 on linen (WCAG 1.4.11) */
  --color-fill: #FFF1B8;        /* visible placeholder for missing facts */

  /* type (px at 390 → 1440) */
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --fs-body: clamp(1.0625rem, 1rem + .15vw, 1.125rem);   /* 17 → 18 */
  --fs-lead: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem); /* 19 → 22 (20 from ~1000px) */
  --fs-small: .9375rem;                                   /* 15 */
  --fs-label: .8125rem;                                   /* 13 */
  --fs-h1: clamp(2.375rem, 1.725rem + 2.6667vw, 4.125rem); /* 38 → 66 (default h1; pages pick one of the three below) */
  --fs-h1-quiet: clamp(2.375rem, 1.9rem + 1.9vw, 3.375rem);       /* 38 → 54 */
  --fs-h1-feature: clamp(2.5rem, 1.725rem + 2.6667vw, 4.125rem);  /* 40 → 66 */
  --fs-h1-cover: clamp(2.625rem, 1.6rem + 3.4vw, 4.5rem);         /* 42 → 72 */
  --fs-h2: clamp(1.875rem, 1.35rem + 1.5vw, 2.625rem);    /* 30 → 42 */
  --fs-h3: clamp(1.375rem, 1.15rem + .6vw, 1.75rem);      /* 22 → 27 */
  --lh-body: 1.65;
  --measure: 38rem;                                       /* 608px reading column */

  /* space & shape. Page grid at 1440: gutter 72, content 1296, column 86, gap 24 (n columns = 110n − 24) */
  --max: 1440px;                                          /* content width cap */
  --gutter: 20px;                                         /* page padding: 20 phones, 32 from 600, 32 → 64 from 900, 64 → 80 from 1280 */
  --gap: 8px;                                             /* column gap: 8 phones, 16 from 600, 24 from 900 */
  --header-h: 80px;                                       /* sticky header height: 80 from 600, 64 on phones */
  --sec: clamp(4.5rem, 3rem + 5vw, 8rem);                 /* 72 → 120: default section */
  --sec-s: clamp(3rem, 2.25rem + 2.5vw, 4.5rem);          /* 48 → 72: compact */
  --sec-l: clamp(5.5rem, 3.5rem + 7vw, 10rem);            /* 88 → 157: generous */
  --sec-xl: clamp(6rem, 3rem + 9vw, 12.5rem);             /* 96 → 200: a large pause between sections */
  --r-control: 2px;          /* form fields */
  --r-button: 999px;         /* buttons, the menu button and the chips: fully round */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --reveal-dur: 640ms;
  --reveal-ease: cubic-bezier(.2, .7, .2, 1);             /* every control point in 0..1: no overshoot */
  /* legacy: container edge to viewport edge, for negative-margin bleeds in old page CSS. New compositions bleed with .g lines. */
  --edge: calc((var(--vw, 100vw) - min(var(--vw, 100vw), var(--max) + 2 * var(--gutter))) / 2 + var(--gutter));

  --bg: var(--color-background);
}
/* below 375 the 40px floor of the feature H1 no longer fits its longest line ("Nach dem Absetzen", "Willkommen in der",
   about 8.2 × the font size) into the 20px-gutter column: it follows the width down to 32px */
@media (max-width: 374.98px) { :root { --fs-h1-feature: clamp(2rem, 11.9vw - .3rem, 2.5rem); } }
@media (max-width: 599.98px) { :root { --header-h: 64px; } }
@media (min-width: 600px) { :root { --gutter: 32px; --gap: 16px; } }
@media (min-width: 900px) { :root { --gutter: clamp(2rem, 8.42vw - 2.74rem, 4rem); --gap: 24px; } } /* 32 at 900 → 64 at 1280 */
@media (min-width: 1280px) { :root { --gutter: clamp(4rem, 5vw, 5rem); } }                          /* 64 at 1280, 72 at 1440, 80 from 1600 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
html.js:not(.is-loaded) { scroll-behavior: auto; } /* the jump to a #fragment on page load is instant; site.js adds .is-loaded after load */
body {
  margin: 0; background: var(--color-background); color: var(--color-ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; color: var(--color-ink); text-wrap: pretty; }
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
* + p { margin-top: 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--color-berry); }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--color-berry); outline-offset: 3px; }
::selection { background: var(--color-blush); color: var(--color-ink); }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }

.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1.25rem; background: var(--color-ink); color: var(--color-white); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; color: var(--color-white); }

/* ---------- the page grid .g ----------
   Put .g on a full-width element (a section, or a block directly inside <main>). Lines:
     full-start | c (= c 1 = content-start) … c 12 | c 13 (= content-end) | full-end
   Children default to grid-column: content (c 1 / c 13); .full spans full (viewport edge to edge).
   Place with line names, e.g. c 1 / c 8 (7 columns), full-start / c 9 (8 columns bleeding left),
   c 7 / full-end (6 columns bleeding right), c 3 / c 9 (offset reading column).
   At 1440: c 1 starts at x 72, content 1296, column 86, gap 24, n columns = 110n − 24, a bleed adds 72;
   full-start / c 9 = 928, c 7 / full-end = 708. The same 12 tracks exist on phones (gap 8, column ≈ 21.8 at 390).
   Rows: no row gap; pages set row-gap / margins themselves.
   A nested block that needs the same lines: .g--sub (subgrid) on a direct child of .g. It spans full, so its children
   use the same names and numbers; do not narrow it (a narrower subgrid restarts the c numbering and loses
   full-start / content-start). Never nest .g in a column. */
.g {
  --col: calc((min(100% - 2 * var(--gutter), var(--max)) - 11 * var(--gap)) / 12);
  display: grid; column-gap: var(--gap);
  grid-template-columns: [full-start] minmax(0, 1fr) [content-start] repeat(12, [c] var(--col)) [c content-end] minmax(0, 1fr) [full-end];
}
.g--sub { display: grid; grid-column: full; grid-template-columns: subgrid; }
:where(.g, .g--sub) > * { grid-column: content; min-width: 0; }
:where(.g, .g--sub) > .full { grid-column: full; }

/* ---------- containers ----------
   .wrap: the same content box as .g (--max, --gutter), for text pages and the header/footer. */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--sec); background: var(--bg); color: var(--fg, var(--color-ink)); } /* legacy (Mädchenberatung) */

/* legacy 12-column grid with .c-<start>-<end> spans from 900px (Endometriose only); new compositions use .g */
.grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .grid > * { grid-column: 1 / -1; }
  .c-1-2 { grid-column: 1 / 2; } .c-1-3 { grid-column: 1 / 3; } .c-1-4 { grid-column: 1 / 4; } .c-1-5 { grid-column: 1 / 5; } .c-1-6 { grid-column: 1 / 6; } .c-1-7 { grid-column: 1 / 7; } .c-1-8 { grid-column: 1 / 8; } .c-1-9 { grid-column: 1 / 9; } .c-1-10 { grid-column: 1 / 10; } .c-1-11 { grid-column: 1 / 11; } .c-1-12 { grid-column: 1 / 12; } .c-1-13 { grid-column: 1 / 13; } .c-2-3 { grid-column: 2 / 3; } .c-2-4 { grid-column: 2 / 4; } .c-2-5 { grid-column: 2 / 5; } .c-2-6 { grid-column: 2 / 6; } .c-2-7 { grid-column: 2 / 7; } .c-2-8 { grid-column: 2 / 8; } .c-2-9 { grid-column: 2 / 9; } .c-2-10 { grid-column: 2 / 10; } .c-2-11 { grid-column: 2 / 11; } .c-2-12 { grid-column: 2 / 12; } .c-2-13 { grid-column: 2 / 13; } .c-3-4 { grid-column: 3 / 4; } .c-3-5 { grid-column: 3 / 5; } .c-3-6 { grid-column: 3 / 6; } .c-3-7 { grid-column: 3 / 7; } .c-3-8 { grid-column: 3 / 8; } .c-3-9 { grid-column: 3 / 9; } .c-3-10 { grid-column: 3 / 10; } .c-3-11 { grid-column: 3 / 11; } .c-3-12 { grid-column: 3 / 12; } .c-3-13 { grid-column: 3 / 13; } .c-4-5 { grid-column: 4 / 5; } .c-4-6 { grid-column: 4 / 6; } .c-4-7 { grid-column: 4 / 7; } .c-4-8 { grid-column: 4 / 8; } .c-4-9 { grid-column: 4 / 9; } .c-4-10 { grid-column: 4 / 10; } .c-4-11 { grid-column: 4 / 11; } .c-4-12 { grid-column: 4 / 12; } .c-4-13 { grid-column: 4 / 13; } .c-5-6 { grid-column: 5 / 6; } .c-5-7 { grid-column: 5 / 7; } .c-5-8 { grid-column: 5 / 8; } .c-5-9 { grid-column: 5 / 9; } .c-5-10 { grid-column: 5 / 10; } .c-5-11 { grid-column: 5 / 11; } .c-5-12 { grid-column: 5 / 12; } .c-5-13 { grid-column: 5 / 13; } .c-6-7 { grid-column: 6 / 7; } .c-6-8 { grid-column: 6 / 8; } .c-6-9 { grid-column: 6 / 9; } .c-6-10 { grid-column: 6 / 10; } .c-6-11 { grid-column: 6 / 11; } .c-6-12 { grid-column: 6 / 12; } .c-6-13 { grid-column: 6 / 13; } .c-7-8 { grid-column: 7 / 8; } .c-7-9 { grid-column: 7 / 9; } .c-7-10 { grid-column: 7 / 10; } .c-7-11 { grid-column: 7 / 11; } .c-7-12 { grid-column: 7 / 12; } .c-7-13 { grid-column: 7 / 13; } .c-8-9 { grid-column: 8 / 9; } .c-8-10 { grid-column: 8 / 10; } .c-8-11 { grid-column: 8 / 11; } .c-8-12 { grid-column: 8 / 12; } .c-8-13 { grid-column: 8 / 13; } .c-9-10 { grid-column: 9 / 10; } .c-9-11 { grid-column: 9 / 11; } .c-9-12 { grid-column: 9 / 12; } .c-9-13 { grid-column: 9 / 13; } .c-10-11 { grid-column: 10 / 11; } .c-10-12 { grid-column: 10 / 12; } .c-10-13 { grid-column: 10 / 13; } .c-11-12 { grid-column: 11 / 12; } .c-11-13 { grid-column: 11 / 13; } .c-12-13 { grid-column: 12 / 13; }
}

/* ---------- type ---------- */
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-ink); }
.muted { color: var(--color-ink-soft); }
.small { font-size: var(--fs-small); }
.measure { max-width: var(--measure); }
.mt { margin-top: 1.25rem; }
.mt-l { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-xl { margin-top: clamp(3rem, 6vw, 5rem); }

/* small uppercase label (at most two per page) */
.label, .eyebrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem;
  margin: 0 0 1.25rem; font: 600 var(--fs-label)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-berry);
}

.accent { color: var(--color-pink); }                       /* large type only (24px+) */

/* long text */
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.5rem; font-size: var(--fs-h3); }
.prose h3 { margin-top: 2rem; font-size: 1.375rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: .4rem; }
.prose li::marker { color: var(--color-pink); }
.prose a { color: var(--color-berry); }

/* visible placeholder for facts only Lätizia can confirm: never hide it */

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 54px; padding: .85rem 1.6rem; border: 0; border-radius: var(--r-button);
  background: var(--color-berry); color: var(--color-white);
  font: 600 1rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn .ico { width: 1.1rem; height: 1.1rem; transition: transform .2s var(--ease); }
.btn:hover { background: var(--color-berry-deep); color: var(--color-white); }
.btn:hover .ico { transform: translateX(3px); }
.btn--outline, .btn[aria-current="page"] { background: transparent; color: var(--color-berry); box-shadow: inset 0 0 0 1px var(--color-berry); }
.btn--outline:hover { background: var(--color-berry); color: var(--color-white); }
.btn[aria-current="page"]:hover { background: var(--color-blush); color: var(--color-berry-deep); } /* a button to the page you are on: outlined, stays quiet */
.btn--ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); } /* ink outline (404, termin replies) */
.btn--ghost:hover { background: var(--color-ink); color: var(--color-white); }
.btn--light { background: var(--color-cream); color: var(--color-berry); } /* on dark grounds only */
.btn--light:hover { background: var(--color-blush); color: var(--color-berry-deep); }
.btn--small { min-height: 44px; padding: .55rem 1.1rem; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem 1.75rem; align-items: center; margin-top: 2rem; }

/* text link with an editorial underline that draws in on hover */
.link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-weight: 600; color: var(--color-berry); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease), color .2s var(--ease);
}
.link:hover, .link:focus-visible { color: var(--color-berry-deep); background-size: calc(100% - 1.6rem) 1px; }
.link .ico { width: 1.1rem; height: 1.1rem; transition: transform .2s var(--ease); }
.link:hover .ico { transform: translateX(3px); }

/* ---------- photographs: always rectangular, always cropped on purpose ----------
   bare image: <img class="img ar-32" …> (fills its column, ratio via .ar-*, cropped by object-fit);
   wrapper: <div class="photo"><img …></div> (image fills the box; give the box a ratio or a height).
   .reveal + data-reveal on the .photo gives the clip reveal (see motion below). */
.img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; background: var(--color-blush); }
.ar-169 { aspect-ratio: 16 / 9; } .ar-32 { aspect-ratio: 3 / 2; } .ar-43 { aspect-ratio: 4 / 3; } .ar-54 { aspect-ratio: 5 / 4; }
.ar-11 { aspect-ratio: 1 / 1; } .ar-45 { aspect-ratio: 4 / 5; } .ar-34 { aspect-ratio: 3 / 4; } .ar-23 { aspect-ratio: 2 / 3; }
.photo { position: relative; overflow: hidden; background: var(--color-blush); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--45 { aspect-ratio: 4 / 5; }
.photo--34 { aspect-ratio: 3 / 4; }
.photo--23 { aspect-ratio: 2 / 3; }
.photo--11 { aspect-ratio: 1 / 1; }
.photo--43 { aspect-ratio: 4 / 3; }
.photo--32 { aspect-ratio: 3 / 2; }
.photo--53 { aspect-ratio: 5 / 3; }
.photo--169 { aspect-ratio: 16 / 9; }
.photo--21 { aspect-ratio: 2 / 1; }
.cap { margin-top: .75rem; font-size: var(--fs-small); color: var(--color-ink-soft); }
/* placeholder slot for a photograph that is still to be taken */
.ph { display: grid; align-content: end; gap: .4rem; aspect-ratio: 4 / 3; padding: clamp(1rem, 2vw, 1.5rem); border: 1px dashed #B8962E; background: var(--color-fill); color: #4F3D06; font-size: var(--fs-small); line-height: 1.5; }
.ph strong { font: 600 var(--fs-label)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- the L-frame .lf: the site's one recurring device ----------
   A 2px stroke along one edge of the framed element, a small gap outside it, plus a short perpendicular return.
     .lf          corner bottom-left, long stroke vertical (default)
     .lf--tl      corner top-left      .lf--tr  top-right      .lf--br  bottom-right
     .lf--h       long stroke horizontal (along the top or bottom edge), short return vertical
     .lf--berry   berry instead of pink
     .lf__cap     a caption that hangs from the foot of the L
   What it frames: the whole .lf element; when .lf has a direct child .lf__cap, only its FIRST child (the photo).
   Photo markup: <figure class="lf …"><div class="photo reveal" data-reveal="…"><img …></div><figcaption class="lf__cap">…</figcaption></figure>
   Never on .photo itself (overflow and the reveal's clip-path would cut the stroke). Keep the L on the content side
   of a bleeding photo: body clips anything past the viewport edge.
   Tunable per use (custom properties on the .lf element): --lf-c colour, --lf-w stroke, --lf-gap distance from the
   element (8 → 14), --lf-ret return length (28 → 56), --lf-len long stroke (default element edge + gap; capped at
   9rem on phones), --lf-area grid area of the framed child when a page lays the figure out itself (default 1 / 1 / 2 / 2;
   always give all four lines).
   Budget: at most 2 per page, about 10 site-wide (direction §5). */
:where(.lf) {
  --lf-c: var(--color-pink);
  --lf-w: 2px;
  --lf-gap: clamp(8px, 1vw, 14px);
  --lf-ret: clamp(28px, 3.6vw, 56px);
  --lf-len: calc(100% + var(--lf-gap));
  position: relative;
}
.lf::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none; box-sizing: border-box;
  left: calc(-1 * var(--lf-gap)); bottom: calc(-1 * var(--lf-gap));
  width: var(--lf-ret); height: var(--lf-len);
  border: 0 solid var(--lf-c); border-left-width: var(--lf-w); border-bottom-width: var(--lf-w);
}
.lf--tl::before { top: calc(-1 * var(--lf-gap)); bottom: auto; border-width: var(--lf-w) 0 0 var(--lf-w); }
.lf--tr::before { top: calc(-1 * var(--lf-gap)); bottom: auto; left: auto; right: calc(-1 * var(--lf-gap)); border-width: var(--lf-w) var(--lf-w) 0 0; }
.lf--br::before { left: auto; right: calc(-1 * var(--lf-gap)); border-width: 0 var(--lf-w) var(--lf-w) 0; }
.lf--h::before { width: var(--lf-len); height: var(--lf-ret); }
.lf--berry { --lf-c: var(--color-berry); }
/* with a caption: a one-column grid, the first child in row 1 carries the L, the caption below it */
:where(.lf:has(> .lf__cap)) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
:where(.lf:has(> .lf__cap)) > * { grid-column: 1; min-width: 0; }
.lf:has(> .lf__cap)::before { grid-area: var(--lf-area, 1 / 1 / 2 / 2); } /* all four lines: an absolute child's "auto" line is the padding edge */
.lf__cap { margin-top: calc(var(--lf-gap) + .6rem); padding-inline-start: calc(var(--lf-ret) - var(--lf-gap) + .6rem); font-size: var(--fs-small); line-height: 1.45; color: var(--color-ink-soft); text-wrap: pretty; }
:where(.lf--br) > .lf__cap { padding-inline: 0 calc(var(--lf-ret) - var(--lf-gap) + .6rem); text-align: end; }
:where(.lf--h) > .lf__cap { padding-inline: 0; }
:where(.lf--tl, .lf--tr) > .lf__cap { margin-top: .75rem; padding-inline: 0; text-align: start; }
@media (max-width: 599.98px) {
  :where(.lf) { --lf-len: min(calc(100% + var(--lf-gap)), 9rem); }
}

/* ---------- breadcrumbs (optional; wrap kept ones in <nav aria-label="Brotkrumen">) ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--color-ink-soft); }
.crumbs li { display: flex; align-items: center; gap: .35rem; }
.crumbs li + li::before { content: "/"; color: var(--color-pink); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .35rem; margin-inline: -.35rem; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--color-ink); font-weight: 500; }

/* ---------- FAQ (markup feeds the FAQPage JSON-LD, keep it) ----------
   <details class="qa"[ open]><summary>…</summary><div class="qa__a">…</div></details>; style it through a wrapper. */
.faq { border-top: 1px solid var(--color-ink); }
.qa { border-bottom: 1px solid var(--color-border); }
.qa summary { position: relative; display: block; padding: 1.35rem 3.25rem 1.35rem 0; list-style: none; cursor: pointer; font: 500 clamp(1.1875rem, 1.1rem + .35vw, 1.375rem)/1.35 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before, .qa summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: 16px; height: 1.5px; background: var(--color-berry); transition: transform .25s var(--ease); }
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0); }
.qa summary:hover { color: var(--color-berry); }
.qa__a { padding: 0 0 1.5rem; color: var(--color-ink-soft); }   /* the answer uses the full width; only the question keeps room for its sign */
.qa__a p { margin: 0; max-width: 62ch; }

/* ---------- mobile folding: [data-fold="m"] ----------
   On a wrapper: every details.qa and details.fold inside it is OPEN in the markup (so nothing is hidden without JS
   or on desktop). Below 900px site.js closes them (unless the reader toggled one) and re-opens them at 900+;
   #faq-n deep links still open their question. Never fold warnings, boundaries, waiting-time thresholds,
   the Termin emergency line or the Mädchen legal block.
   details.fold (never class "qa") folds secondary non-FAQ text: <details class="fold" open><summary>Label</summary>…</details>.
   Its summary is hidden from 900px (the text simply shows); a page that wants the summary visible there sets
   display on its own selector. From 900px site.js makes a .fold summary inert: no toggle, no tab stop. */
:where(details.fold) > summary { position: relative; display: flex; align-items: center; min-height: 48px; padding: .6rem 2rem .6rem 0; list-style: none; cursor: pointer; font: 600 1rem/1.3 var(--sans); color: var(--color-berry); }
:where(details.fold) > summary::-webkit-details-marker { display: none; }
:where(details.fold) > summary::before, :where(details.fold) > summary::after { content: ""; position: absolute; right: .35rem; top: 50%; width: 12px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
:where(details.fold) > summary::after { transform: rotate(90deg); }
:where(details.fold[open]) > summary::after { transform: rotate(0); }
@media (min-width: 900px) {
  /* a page that shows it anyway (the Mädchen headwords) gets a plain cursor; site.js keeps the fold open and the summary out of the tab order */
  :where([data-fold="m"] details.fold) > summary { display: none; cursor: default; }
}
@media (max-width: 899.98px) {
  [data-fold="m"] details.qa > summary { display: flex; align-items: center; min-height: 48px; padding: .75rem 2.5rem .75rem 0; font: 500 1.1875rem/1.35 var(--serif); }
  [data-fold="m"] details.qa > summary::before, [data-fold="m"] details.qa > summary::after { right: .35rem; width: 12px; height: 1.5px; background: var(--color-berry); }
  [data-fold="m"] details.qa > .qa__a { padding-right: 0; }
}
/* the transition waits for .fold-anim (site.js, two frames after the first fold): the closing on page load is
   instant, so a #fragment jump never lands where its target was before the folds above it closed */
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  [data-fold="m"] :is(details.qa, details.fold) { interpolate-size: allow-keywords; }
  [data-fold="m"] :is(details.qa, details.fold)::details-content { block-size: 0; overflow-y: clip; }
  .fold-anim [data-fold="m"] :is(details.qa, details.fold)::details-content { transition: block-size 260ms var(--ease), content-visibility 260ms allow-discrete; }
  [data-fold="m"] :is(details.qa, details.fold)[open]::details-content { block-size: auto; }
}

/* ---------- form ---------- */
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { padding: 0; font-weight: 600; font-size: 1rem; }
.opt { font-weight: 400; color: var(--color-ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: .8rem 1rem; border: 1px solid var(--color-control); border-radius: var(--r-control);
  background: var(--color-white); color: var(--color-ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--color-berry); box-shadow: 0 0 0 2px var(--color-berry); }
.field ::placeholder { color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--color-control); border-radius: var(--r-button); background: var(--color-white); font-size: .9375rem; font-weight: 500; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.chip:hover span { border-color: var(--color-berry); }
.chip input:checked + span { background: var(--color-berry); border-color: var(--color-berry); color: var(--color-white); }
.chip input:focus-visible + span { outline: 3px solid var(--color-berry); outline-offset: 2px; }
.form-consent { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-small); line-height: 1.55; cursor: pointer; }
.form-consent input { width: 22px; height: 22px; margin: .1rem 0 0; flex: none; accent-color: var(--color-berry); }
.form-consent a { color: var(--color-berry); }
.form__status { min-height: 1.5em; margin: 0; font-weight: 500; }
.form__status.is-error { color: #A0182F; }
.form[aria-busy="true"] button { opacity: .7; pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem) 1.5rem; border-left: 3px solid var(--color-berry); }
.form-done h2 { margin-bottom: .75rem; }
.form-done:focus { outline: none; }

/* ---------- header ----------
   One masthead on every page: the bouquet mark and the name as a wordmark ("Lätizia" a touch heavier, a short berry
   rule before the role line), then the actions. Exactly --header-h tall (80 from 600, 64 on phones) and never taller
   or shorter while scrolling: the scroll state only changes paint (hairline, role line, mark size), never layout.
   ≥1120: brand · nav · "Termin anfragen" (filled). Below 1120 the actions form one quiet group: an outlined "Termin"
   with leaf corners (the shape of the photographs) · a hairline · the menu trigger (two fine lines and "Menü").
   With JavaScript the header starts without its hairline below 1120 and gains it after 24px of scrolling, while the
   role line fades and the name settles into the middle. */
.site-header { --hair: var(--color-line); position: sticky; top: 0; z-index: 50; background: var(--color-background); box-shadow: inset 0 -1px 0 var(--hair); transition: box-shadow .25s var(--ease); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; margin-right: auto; text-decoration: none; color: var(--color-ink); }
.brand__logo { width: 52px; height: 52px; flex: none; transform-origin: 50% 50%; }
.brand__text { --role-fs: .8125rem; --role-mt: .2rem; display: grid; min-width: 0; line-height: 1.1; }
.brand__name { font: 500 1.1875rem/1.15 var(--serif); letter-spacing: -.005em; white-space: nowrap; }
.brand__role { margin-top: var(--role-mt); font: 500 var(--role-fs)/1.25 var(--sans); letter-spacing: .01em; color: var(--color-ink-soft); white-space: nowrap; }
.site-header .brand__first { font-weight: 600; }
.site-header .brand__last { font-weight: 400; }
/* the same small flower as in the menu, instead of a dash */
.site-header .brand__role::before { content: ""; display: inline-block; width: .85rem; height: .85rem; margin-right: .35rem; vertical-align: -.12em; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C96B86' stroke-width='1.8' stroke-linejoin='round'><circle cx='12' cy='12' r='2.4'/><path d='M12 9.6c-1.9-2.3-1.9-4.7 0-6.3 1.9 1.6 1.9 4 0 6.3Z' transform='rotate(0 12 12)'/><path d='M12 9.6c-1.9-2.3-1.9-4.7 0-6.3 1.9 1.6 1.9 4 0 6.3Z' transform='rotate(72 12 12)'/><path d='M12 9.6c-1.9-2.3-1.9-4.7 0-6.3 1.9 1.6 1.9 4 0 6.3Z' transform='rotate(144 12 12)'/><path d='M12 9.6c-1.9-2.3-1.9-4.7 0-6.3 1.9 1.6 1.9 4 0 6.3Z' transform='rotate(216 12 12)'/><path d='M12 9.6c-1.9-2.3-1.9-4.7 0-6.3 1.9 1.6 1.9 4 0 6.3Z' transform='rotate(288 12 12)'/></svg>") center / contain no-repeat; }
.brand:hover { color: var(--color-ink); }
.site-header__actions { display: flex; align-items: center; flex: none; }
.nav { margin-right: .75rem; }
.nav__list { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; font-size: 1rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav__list a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 8px; height: 1.5px; background: var(--color-pink); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__list a:hover, .nav__list a:focus-visible { color: var(--color-berry); }
.nav__list a:hover::after, .nav__list a:focus-visible::after, .nav__list a[aria-current]::after { transform: none; }
.nav__list a[aria-current="page"] { color: var(--color-berry); }
.nav__list a[aria-current="true"] { color: var(--color-ink); } /* Schwerpunkte while on a topic page: underlined, not coloured */
.nav__cta { flex: none; white-space: nowrap; }
.menu { display: none; }

@media (max-width: 1119.98px) {
  .nav { display: none; }
  .site-header__inner { gap: 1rem; }
  .js .site-header:not(.is-scrolled) { box-shadow: inset 0 -1px 0 transparent; }

  /* the scroll state: paint only */
  .brand__logo, .brand__text, .brand__role { transition: transform .25s var(--ease), opacity .2s var(--ease); }
  .js .site-header.is-scrolled .brand__role { opacity: 0; }
  .js .site-header.is-scrolled .brand__text { transform: translateY(calc((var(--role-fs) * 1.25 + var(--role-mt)) / 2)); }
  .js .site-header.is-scrolled .brand__logo { transform: scale(.88); }

  /* "Termin": outlined, leaf corners, the arrow nudges on hover */
  .nav__cta { gap: .45rem; min-height: 44px; padding: .5rem 1rem; border-radius: 0 14px 0 14px; background: transparent; color: var(--color-berry); box-shadow: inset 0 0 0 1.5px var(--color-berry); font-size: .9375rem; font-weight: 600; }
  .nav__cta:hover { background: var(--color-berry); color: var(--color-white); }
  .nav__cta[aria-current="page"], .nav__cta[aria-current="page"]:hover { background: var(--color-berry); color: var(--color-white); }
  .nav__cta .ico { width: 1rem; height: 1rem; }

  /* the trigger: a hairline before it, two fine lines of unequal length and the word */
  .menu { display: block; }
  .menu > summary {
    position: relative; list-style: none; display: inline-flex; align-items: center; gap: .6rem;
    min-width: 48px; min-height: 48px; margin-left: .5rem; padding: 0 .25rem 0 1.1rem; margin-right: -.25rem;
    font: 500 .9375rem/1 var(--sans); color: var(--color-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu__bars { position: relative; flex: none; width: 22px; height: 8px; }
  .menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s var(--ease), width .25s var(--ease); }
  .menu__bars::before { top: 0; }
  .menu__bars::after { top: 6px; }
  .menu > summary:hover, .menu[open] > summary { color: var(--color-berry); }
  /* the shorter lower line is a pointer hint only: never on touch (a tap leaves :hover behind) and never while open,
     so the cross always has two equal arms turning about the same centre */
  .menu:not([open]) > summary:focus-visible .menu__bars::after { width: 14px; }
  .menu[open] > summary .menu__bars::before { transform: translateY(3px) rotate(45deg); }
  .menu[open] > summary .menu__bars::after { width: 22px; transform: translateY(-3px) rotate(-45deg); }

  /* the open menu: one warm layer under the header, the whole screen, scrolling on its own */
  .menu__panel {
    position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: 49;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-background); border-top: 1px solid var(--color-line);
  }
  .menu[open] .menu__panel { animation: menu-fade .2s var(--ease) both; }
  .menu[open] .menu__inner { animation: menu-in .28s var(--ease) both; }
  .menu__inner {
    display: grid; gap: 2rem; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
    padding: 1.5rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  }
  .menu__panel ul { margin: 0; padding: 0; list-style: none; }
  .menu__panel a { text-decoration: none; }
  .menu__panel:focus { outline: none; }
  .menu__main a { position: relative; display: flex; width: fit-content; align-items: center; min-height: 3.25rem; font: 500 clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem)/1.1 var(--serif); letter-spacing: -.015em; color: var(--color-ink); }
  .menu__main a:hover { color: var(--color-berry); }
  .menu__main a[aria-current] { color: var(--color-berry); }
  .menu__label { margin: 1.75rem 0 .5rem; font: 600 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-ink); }
  /* the topics: no rules or bars; every entry opens with the same small flower in rose, berry and filled on the
     page you are on. The two parts of Frauen- & Mädchenberatung sit indented with the same flower, smaller. */
  .menu__topics a { position: relative; display: flex; width: fit-content; align-items: center; gap: .65rem; min-height: 44px; font: 500 1.0625rem/1.3 var(--sans); color: var(--color-ink); }
  .menu__bloom { flex: none; width: 1.15rem; height: 1.15rem; stroke-width: 1.5; color: var(--color-pink); transition: color .2s var(--ease), transform .3s var(--ease); }
  .menu__topics a:hover .menu__bloom { color: var(--color-berry); transform: rotate(36deg); }
  .menu__topics a[aria-current] .menu__bloom { color: var(--color-berry); fill: rgb(201 107 134 / .28); }
  .menu__topics .menu__sub { margin: -.25rem 0 .25rem; padding-left: 1.8rem; }
  .menu__topics .menu__sub .menu__bloom { width: .9rem; height: .9rem; }
  .menu__topics .menu__sub a { font-size: .9375rem; font-weight: 400; color: var(--color-ink-soft); }
  .menu__topics a:hover { color: var(--color-berry); }
  .menu__topics a[aria-current] { color: var(--color-berry); font-weight: 600; }
  .menu__foot { padding-top: 1.25rem; border-top: 1px solid var(--color-line); }
  .menu__foot li { display: flex; align-items: center; gap: .7rem; min-height: 44px; color: var(--color-ink-soft); }
  .menu__foot .ico { flex: none; width: 1.15rem; height: 1.15rem; color: var(--color-berry); }
  .menu__foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-berry); }
  .menu__foot a:hover { text-decoration: underline; text-underline-offset: .2em; }

  html.menu-open { overflow: hidden; }
  html.menu-open body { padding-right: var(--sbw, 0px); }
}
@media (hover: hover) and (max-width: 1119.98px) { .menu:not([open]) > summary:hover .menu__bars::after { width: 14px; } }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }

/* tablets: main pages left, the topics right, the practice line underneath */
@media (min-width: 600px) and (max-width: 1119.98px) {
  .menu__inner { padding-top: 2.5rem; row-gap: 2.5rem; }
  .menu__nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
  .menu__main { grid-row: 1 / span 2; }
  .menu__label { margin-top: .9rem; }
  .menu__foot { display: flex; flex-wrap: wrap; column-gap: 2.5rem; }
}

/* phones: 64px header, mark 40, name 18px, the role line says only "Heilpraktikerin" (the city is in every hero) */
@media (max-width: 599.98px) {
  .site-header__inner { gap: .5rem; }
  .site-header .brand { gap: .55rem; }
  .site-header .brand__logo { width: 40px; height: 40px; }
  .site-header .brand__name { font-size: 1.125rem; }
  .site-header .brand__text { --role-fs: .75rem; --role-mt: .125rem; }
  .site-header .brand__sep, .site-header .brand__city { display: none; }
  .nav__cta-more { display: none; }                                   /* "Termin anfragen →" becomes "Termin →" */
  .nav__cta { padding-inline: .85rem; }
}
/* below 430 the arrow goes ("Termin" alone); the name never shrinks */
.site-header .brand { flex: none; }
@media (max-width: 429.98px) {
  .nav__cta .ico { display: none; }
}
/* below 375: 16px edges and the word "Menü" under the two lines; below 360 the mark is 36 and the name 17px */
@media (max-width: 374.98px) {
  .site-header__inner { padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .nav__cta { padding-inline: .8rem; }
  .menu > summary { flex-direction: column; justify-content: center; gap: 6px; margin-left: .375rem; padding: 0 .125rem 0 .75rem; font-size: .75rem; font-weight: 600; }
}
@media (max-width: 359.98px) {
  .site-header .brand { gap: .5rem; }
  .site-header .brand__logo { width: 36px; height: 36px; }
  .site-header .brand__name { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .brand__logo, .brand__text, .brand__role, .menu__bars::before, .menu__bars::after, .menu__bloom { transition: none; }
  .menu[open] .menu__panel, .menu[open] .menu__inner { animation: none; }
}

/* ---------- footer ---------- */
/* calm and white-led: one hairline, white ground, ink text, berry labels. No pink or blush ground. Same on every page. */
.site-footer { padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; border-top: 1px solid var(--color-line); background: var(--color-background); color: var(--color-ink); }
.site-footer__grid { display: grid; gap: 2.5rem; }
.site-footer h2 { margin-bottom: 1rem; font: 600 var(--fs-label)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-ink); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer__sub { margin: -.35rem 0 .1rem !important; padding-left: .85rem !important; border-left: 1px solid var(--color-line); font-size: var(--fs-small); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer a:hover { color: var(--color-berry); text-decoration: underline; }
.site-footer__brand p { max-width: 20rem; color: var(--color-ink-soft); }
.site-footer .brand__logo { width: 56px; height: 56px; }
.site-footer__motto { margin-top: 1.25rem; font: 500 1.375rem/1.3 var(--serif); color: var(--color-ink) !important; }
/* every row is 44px; the pin sits on the address's first line, not on the middle of a wrapped block */
.site-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.site-footer__contact .ico { flex: none; margin-top: calc((44px - 1.2rem) / 2); color: var(--color-berry); width: 1.2rem; height: 1.2rem; }
.site-footer__contact address { padding-block: .6rem; padding-block: calc((44px - 1lh) / 2); }
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-line); font-size: var(--fs-small); color: var(--color-ink-soft); }

/* Mobile quick contact: fixed, text-labelled and reachable with one thumb; compact at the right edge so it covers as
   little as possible. build.mjs only exposes real tel:/mailto: actions when Lätizia's own data exists. With
   JavaScript the topic assistant replaces it (see the end of this file), so this is the fallback without scripts. */
.mobile-contact { display: none; }
@media (max-width: 899.98px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mobile-contact {
    position: fixed; z-index: 95;
    right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px));
    display: grid; grid-auto-flow: column; gap: 6px;
    padding: 5px; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px;
    background: #241B1E; color: #F7F1E9; box-shadow: 0 6px 18px rgb(36 27 30 / .18);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 0s;
  }
  /* with JavaScript the topic assistant (bottom right) takes its place */
  .js .mobile-contact { display: none; }
  .mobile-contact a {
    display: inline-flex; justify-content: center; align-items: center; gap: .55rem;
    min-width: 0; min-height: 48px; padding: .65rem 1.15rem; border-radius: 999px;
    color: inherit; font: 700 .9375rem/1.2 var(--sans); text-decoration: none;
  }
  .mobile-contact a:first-child { background: #64233E; }
  .mobile-contact a:hover { color: #FFFFFF; }
  .mobile-contact a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
  .mobile-contact .ico { flex: none; width: 1.15rem; height: 1.15rem; stroke-width: 1.8; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .mobile-contact { transition: none; }
}
/* four columns from 1120. Tablets (760–1119): three tracks. The brand row spans them and repeats them: the lockup
   (52px logo, role on two lines) in the first, the motto and its line from the second, so nothing stands alone
   beside a void; below it Kontakt · Schwerpunkte · Seiten on the same three lines. */
@media (min-width: 1120px) { .site-footer__grid { grid-template-columns: 1.3fr 1.25fr 1fr .8fr; } }
@media (min-width: 760px) and (max-width: 1119.98px) {
  .site-footer__grid, .site-footer__brand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; display: grid; column-gap: 2.5rem; align-items: start; }
  .site-footer__brand > .brand { grid-row: 1 / span 2; margin-right: 0; }
  .site-footer__brand > p { grid-column: 2 / -1; }
  .site-footer__brand > .site-footer__motto { margin-top: 0; max-width: none; }
  .site-footer .brand__logo { width: 52px; height: 52px; }
}
/* the role breaks only after its "·" (build.mjs: Heilpraktikerin&nbsp;· Crailsheim); where the first column is too
   narrow for one line it stands on two lines without the dot, like the phone header */
@media (min-width: 760px) and (max-width: 1279.98px), (max-width: 359.98px) {
  .site-footer .brand__sep { display: none; }
  .site-footer .brand__city { display: block; }
}
/* small tablets (600–759): brand and Kontakt across, Schwerpunkte and Seiten side by side */
@media (max-width: 759.98px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand, .site-footer__reach { grid-column: 1 / -1; }
}
@media (max-width: 599.98px) {
  /* phones: brand + tagline, then Kontakt first (address, booking, Instagram, slightly larger), then Schwerpunkte in
     two balanced columns (the two sub topics are reached from their page and the menu, so they are left out here)
     and Seiten in one row; 48px rows; a tight base line with the legal links */
  .site-footer { padding: 3rem 0 1rem; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer__brand > p:not(.site-footer__motto) { display: none; }
  .site-footer .brand__logo { width: 52px; height: 52px; }
  .site-footer__motto { margin-top: .75rem; font-size: 1.25rem; }
  .site-footer h2 { margin-bottom: .25rem; }
  .site-footer a { min-height: 48px; }
  .site-footer ul a { line-height: 1.3; }
  .site-footer__grid > div:nth-child(3) > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 1rem; align-items: center; }
  .site-footer__grid > div:nth-child(4) > ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .site-footer__grid li { break-inside: avoid; }
  .site-footer__sub { display: none; }
  .site-footer__reach .site-footer__contact { font-size: 1.0625rem; }
  .site-footer__contact .ico { margin-top: calc((48px - 1.2rem) / 2); }
  .site-footer__contact address { padding-block: calc((48px - 1lh) / 2); }
  .site-footer__base { margin-top: 2rem; padding-top: .75rem; gap: 0 1rem; }
}

/* ---------- simple text pages (impressum, datenschutz, 404, form replies); not for the eleven subpages ---------- */
.page-hero { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { max-width: none; }
.page-hero .lead { max-width: 40rem; margin-top: 1.5rem; }

/* ---------- spacing utilities win over component margins ---------- */
.mt.mt, .mt.mt.mt { margin-top: 1.25rem; }
.mt-l.mt-l, .mt-l.mt-l.mt-l { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-xl.mt-xl, .mt-xl.mt-xl.mt-xl { margin-top: clamp(3rem, 6vw, 5rem); }

/* ---------- motion ----------
   Photo: <div class="photo reveal" data-reveal="left|right|up"> (default: down). The clip opens over 640ms from that
   side, the image settles from scale 1.025 over 840ms. site.js watches the enclosing figure (or the parent).
   1–3 large photos per page, never the first-screen photo.
   Text: .reveal on any other element fades in (opacity only, 480ms). At most 2 per page.
   --reveal-delay on the element staggers it. Reduced motion or no IntersectionObserver: everything shows at once. */
.js .reveal { opacity: 0; transition: opacity 480ms var(--reveal-ease) var(--reveal-delay, 0ms); }
.js .reveal.is-in { opacity: 1; }
.js .photo.reveal { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms); }
.js .photo.reveal[data-reveal="left"] { clip-path: inset(0 100% 0 0); }
.js .photo.reveal[data-reveal="right"] { clip-path: inset(0 0 0 100%); }
.js .photo.reveal[data-reveal="up"] { clip-path: inset(100% 0 0 0); }
.js .photo.reveal.is-in { clip-path: inset(0); }
.js .photo.reveal img { transform: scale(1.025); transition: transform calc(var(--reveal-dur) + 200ms) var(--reveal-ease) var(--reveal-delay, 0ms); }
.js .photo.reveal.is-in img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; }
  .js .photo.reveal:is(*, [data-reveal]) { clip-path: none; }
  .js .photo.reveal img { transform: none; }
}
@media print {
  .site-header, .site-footer, .mobile-contact, .btn { display: none; }
  .js .reveal { opacity: 1; }
  .js .photo.reveal:is(*, [data-reveal]) { clip-path: none; }
  .js .photo.reveal img { transform: none; }
}

/* =========================================================================
   BLOCKS (b-): the shared parts of every page below the header (client, 2026-11-07: the homepage parts below
   the cover, "Unterseiten genauso"). One set of grounds, one type scale, one card, one photograph shape.
   Grounds:  everything on the one linen ground. .b-sec parts follow each other with a content-width hairline;
             .b-panel and .b-panel--dark are kept as names but no longer tint (client, 2026-11-08: matte, no colour
             blocks); .b-open is the light page opening; .b-close is the one dark part (dark brown-red card).
   Text colours run through --b-* so a dark panel only swaps the variables; cards and boxes swap them back.
   ========================================================================= */
:root {
  --b-sp: clamp(2.75rem, 2rem + 2.5vw, 4.5rem);   /* 44 → 72: the padding of a part (two meet at every hairline) */
  --b-r: 18px;                                    /* the radius of cards and photographs */
  --b-t-size: clamp(2rem, 1.4rem + 2vw, 3rem);    /* 32 → 48: part headings */
  --b-rose: var(--color-sand);                    /* small sand accents: photo frames, numbered dots */
  --b-pp: clamp(12px, 3vw, 48px);                 /* how far a panel reaches past the content */
  --b-ink: var(--color-ink); --b-soft: var(--color-ink-soft); --b-muted: var(--color-muted);
  --b-acc: var(--color-accent-ink); --b-sub: var(--color-accent-ink); --b-line: var(--color-pink);
  --b-rule: linear-gradient(var(--color-line), var(--color-line)) 50% 0 / min(100% - 2 * var(--gutter), var(--max)) 1px no-repeat;
}

/* ---------- type: eyebrow, page title, part title, subtitle, subheading, lead, label, small ---------- */
.b-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--b-acc); }
.b-eyebrow::before { content: ""; flex: none; width: 1.75rem; height: 1.5px; background: var(--b-line); }
.b-h1 { margin: 0; font: 500 var(--fs-h1-quiet)/1.06 var(--serif); letter-spacing: -.02em; color: var(--b-ink); text-wrap: pretty; }
.b-t { margin: 0; font: 500 var(--b-t-size)/1.12 var(--serif); letter-spacing: -.015em; color: var(--b-ink); text-wrap: pretty; }
.b-s { margin: .75rem 0 0; font: 400 var(--fs-lead)/1.4 var(--serif); color: var(--b-sub); text-wrap: pretty; }
.b-h3 { margin: 0; font: 500 clamp(1.375rem, 1.2rem + .6vw, 1.75rem)/1.25 var(--serif); color: var(--b-ink); text-wrap: pretty; }
.b-lead { margin: 0; font: 500 clamp(1.1875rem, 1.1rem + .35vw, 1.375rem)/1.5 var(--serif); color: var(--b-ink); }
.b-k { margin: 0 0 .5rem; font: 500 .9375rem/1.35 var(--serif); letter-spacing: .09em; text-transform: uppercase; color: var(--color-berry-deep); text-wrap: pretty; }
.b-k small { display: block; margin-top: .15rem; font: 400 .8125rem/1.3 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--b-soft); }
.b-small { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--b-muted); }
.b-meta { margin: .9rem 0 0; font: 600 .9375rem/1.4 var(--sans); color: var(--b-acc); }
.b-sign { margin: 1.25rem 0 0; font: 400 2.125rem/1 var(--serif); color: var(--color-pink); }
.b-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
/* running text: paragraphs, lists and subheadings inside a column */
.b-prose > * + * { margin-top: 1.1rem; }
.b-prose > :first-child { margin-top: 0; }
.b-prose > p:not([class]), .b-prose > ul:not([class]) > li, .b-prose > ol:not([class]) > li { color: var(--b-soft); }
.b-prose > .b-lead { color: var(--b-ink); }
.b-prose > .b-h3 { margin-top: 2rem; }
.b-prose > .b-k { margin-top: 1.75rem; margin-bottom: -.5rem; }
.b-prose a:not(.btn):not(.link) { color: var(--color-berry); text-decoration: underline 1px; text-underline-offset: .2em; }
.b-ticks { margin: 0; padding: 0; list-style: none; }
.b-ticks > li { position: relative; padding-left: 1.4rem; color: var(--b-soft); }
.b-ticks > li + li { margin-top: .55rem; }
.b-ticks > li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-pink); }
.b-ticks--no > li::before { top: .78em; width: 9px; height: 1.5px; border-radius: 0; background: var(--b-soft); }

/* ---------- grounds ---------- */
/* every part on the same linen; a part that follows another (or the opening) starts with a hairline */
.b-sec { padding-block: var(--b-sp); }
:is(.b-open, .b-sec) + .b-sec { background: var(--b-rule); }
.b-panel { position: relative; }

/* ---------- the head of a part: eyebrow, title, subtitle; .b-headrow sets a line or two beside it ---------- */
.b-head { grid-column: content; max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.b-headrow { grid-column: content; display: grid; gap: 1.25rem 3rem; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.b-headrow > .b-head { grid-column: auto; margin-bottom: 0; }
.b-headrow > .b-head + * p { margin: 0 0 .75rem; color: var(--b-soft); }
@media (min-width: 900px) {
  .b-headrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .b-headrow > :last-child:not(.b-head) { padding-bottom: .3rem; }
}

/* ---------- columns: .b-split puts .b-main and .b-side side by side from 900 ---------- */
.b-main, .b-side, .b-wide { grid-column: content; }
.b-split { row-gap: 2.75rem; }
@media (min-width: 900px) {
  .b-split { align-items: start; }
  .b-split--mid { align-items: center; }
  .b-split > .b-main { grid-column: c 1 / c 7; grid-row: 1; }
  .b-split > .b-side { grid-column: c 8 / c 13; grid-row: 1; }
  .b-split--flip > .b-main { grid-column: c 7 / c 13; }
  .b-split--flip > .b-side { grid-column: c 1 / c 6; }
  .b-split--sticky > .b-side, .b-split--sticky > .b-fig { position: sticky; top: 7rem; }
  .b-split > .b-head { grid-row: 1; }
  .b-split > .b-head ~ .b-main, .b-split > .b-head ~ .b-side { grid-row: 2; }
}

/* ---------- photographs: two round corners, a rose ground offset behind ---------- */
.b-fig { position: relative; isolation: isolate; margin: 0; }
.b-fig::before { content: ""; position: absolute; z-index: -1; inset: 2.5rem 2.5rem -12px -12px; border-radius: 0 var(--b-r) 0 var(--b-r); background: var(--b-rose); }
.b-fig--r::before { inset: 2.5rem -12px -12px 2.5rem; }
.b-fig .photo { border-radius: 0 var(--b-r) 0 var(--b-r); aspect-ratio: 4 / 5; }
.b-fig--43 .photo { aspect-ratio: 4 / 3; }
.b-fig--32 .photo { aspect-ratio: 3 / 2; }
.b-fig--11 .photo { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .b-fig::before { inset: 3rem 3rem -1.5rem -1.5rem; }
  .b-fig--r::before { inset: 3rem -1.5rem -1.5rem 3rem; }
}
/* a sentence as a small sand caption over the photograph's foot */
.b-quote {
  position: relative; width: min(88%, 24rem); margin: -3.5rem 0 0 auto; padding: 1.25rem 1.5rem;
  border-radius: 0 var(--b-r) 0 var(--b-r); background: var(--color-sand); color: var(--color-ink);
  font: 500 clamp(1.125rem, 1rem + .4vw, 1.375rem)/1.4 var(--serif); text-wrap: pretty;
}
.b-fig--r .b-quote { margin: -3.5rem auto 0 0; }
@media (min-width: 900px) { .b-quote { margin-right: -2.5rem; } .b-fig--r .b-quote { margin-left: -2.5rem; } }
/* the same sentence standing on its own, in a column: a quiet pull quote with an accent rule, no card */
.b-quote--solo { width: auto; margin: 2rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--color-pink); border-radius: 0; background: none; }
@media (min-width: 900px) { .b-quote--solo { margin: 2rem 0 0; } }

/* ---------- the page opening (subpages): linen, words left, a drawing in a medallion or a photograph right ---------- */
.b-open { padding-block: clamp(2rem, 1.5rem + 2vw, 3.75rem) var(--b-sp); row-gap: 2.25rem; }
.b-open__text { grid-column: content; }
.b-open__text > p:not([class]) { max-width: 36em; margin: 1.25rem 0 0; color: var(--b-soft); }
.b-open__art { grid-column: content; }
.b-medal {
  position: relative; display: block; width: min(78%, 21rem); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; overflow: hidden;
  background: #F7F4F0; box-shadow: inset 0 0 0 1px var(--color-line);
}
.b-medal .ill { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; max-width: none; overflow: visible; }
@media (min-width: 900px) {
  .b-open { align-items: center; }
  .b-open__text { grid-column: c 1 / c 8; }
  .b-open__art { grid-column: c 9 / c 13; }
}

/* ---------- cards: open sheets on linen, a hairline frame, no fill and no shadow ---------- */
.b-cards { grid-column: content; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.b-cards > li { display: flex; }
@media (min-width: 700px) { .b-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .b-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .b-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.b-card {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 0;
  padding: clamp(1.25rem, 1rem + .6vw, 1.6rem); border-radius: var(--b-r); background: none;
  box-shadow: inset 0 0 0 1px var(--color-line); text-decoration: none; color: var(--color-ink);
  transition: box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.b-card--tint { background: none; }
.b-card--icon { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
a.b-card:hover, a.b-card:focus-visible { background: rgb(36 28 32 / .03); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
a.b-card:focus-visible { outline: 3px solid var(--color-berry); outline-offset: 3px; }
.b-card__i { position: relative; width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; background: var(--color-sand); }
.b-card__i .ill { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; max-width: none; overflow: visible; }
.b-card__b { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.b-card .b-k { margin-top: .2rem; }
.b-card p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: var(--b-soft); }
.b-card p:last-child { margin-bottom: 0; }
.b-card__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: 50%; background: var(--b-rose); color: var(--color-berry); font: 500 1.125rem/1 var(--serif); }
.b-card__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; font-size: .9375rem; font-weight: 600; color: var(--color-berry); }
.b-card__more .ico { width: 1.1rem; height: 1.1rem; transition: transform 200ms var(--ease); }
a.b-card:hover .b-card__more .ico { transform: translateX(3px); }

/* ---------- a box: a narrow sand sheet with a title and ruled rows (care notes, what I do and do not do);
   .b-box--dark is kept as a name and looks the same ---------- */
.b-box { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); border-radius: 0 var(--b-r) 0 var(--b-r); background: var(--color-sand); }
.b-box > .b-h3 + * { margin-top: .9rem; }
.b-box > p { margin: 0; color: var(--b-soft); }
.b-box > p + p { margin-top: .9rem; }
.b-rows { margin: 1.25rem 0 0; }
.b-row { padding-block: 1rem; border-top: 1px solid var(--color-border-strong); }
.b-row:last-child { padding-bottom: 0; }
.b-row > .b-k { margin-bottom: .35rem; }
.b-row > p { margin: 0; color: var(--b-soft); }
.b-row > p + p { margin-top: .6rem; }
.b-boxes { grid-column: content; display: grid; gap: 14px; }
@media (min-width: 800px) { .b-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- steps: numbered circles on a thin accent line ---------- */
.b-steps { grid-column: content; position: relative; display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.b-steps::before { content: ""; position: absolute; left: calc(2rem - .75px); top: 2rem; bottom: 2rem; width: 1.5px; background: var(--b-line); }
.b-step { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; align-content: start; }
.b-step__n {
  display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--color-background); box-shadow: inset 0 0 0 1.5px var(--color-pink); color: var(--color-accent-ink); font: 500 1.5rem/1 var(--serif);
}
.b-step:first-child .b-step__n { background: var(--color-berry); box-shadow: none; color: var(--color-white); }
.b-step__b > .b-k { margin-top: 1.1rem; }
.b-step__b > h3:not([class]) { margin: 1.1rem 0 .5rem; font: 500 .9375rem/1.35 var(--serif); letter-spacing: .09em; text-transform: uppercase; color: var(--b-ink); }
.b-step__b > p:not([class]) { margin: 0; color: var(--b-soft); }
.b-step__b > p:not([class]) + p:not([class]) { margin-top: .6rem; }
.b-step__b .b-small { margin-top: .6rem; }
@media (min-width: 800px) {
  .b-steps { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .b-steps::before { left: 2rem; right: 0; top: calc(2rem - .75px); bottom: auto; width: auto; height: 1.5px; }
  .b-step { grid-template-columns: minmax(0, 1fr); }
  .b-step__b { padding-right: 1rem; }
}
/* a line under the steps: the address, a link */
.b-addr { grid-column: content; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; margin: 2.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--b-line) 45%, transparent); color: var(--b-soft); }
.b-addr span:first-child { font: 500 1.25rem/1.3 var(--serif); color: var(--b-ink); }

/* ---------- questions: the head left, the list right ---------- */
.b-faq__head { grid-column: content; margin-bottom: 2rem; }
.b-faq__head .b-small { margin-top: 1.25rem; }
.b-faq__list { grid-column: content; }
.b-faq__list.faq, .b-faq__list .faq { border-top-color: var(--color-ink); }
@media (min-width: 900px) {
  .b-faq { align-items: start; }
  .b-faq__head { grid-column: c 1 / c 6; margin-bottom: 0; position: sticky; top: 7rem; }
  .b-faq__list { grid-column: c 7 / c 13; }
}

/* ---------- a note bar: heart and one sentence ---------- */
.b-note {
  grid-column: content; display: flex; align-items: center; gap: .9rem; margin: 14px 0 0; padding: 1rem 1.5rem;
  border-radius: 0 var(--b-r) 0 var(--b-r); background: var(--color-sand); color: var(--color-ink);
}
.b-note__heart { flex: none; width: 26px; height: 24px; color: var(--color-pink); }
.b-note strong { font-weight: 600; color: var(--color-berry-deep); }

/* ---------- the closing card: the page's one dark part (dark brown-red), words left, button right ---------- */
.b-close { padding-block: 0 var(--b-sp); }
.b-close__card {
  grid-column: content; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem 3rem;
  padding: clamp(2rem, 1.25rem + 3vw, 3.5rem); border-radius: 0 calc(var(--b-r) * 2) 0 calc(var(--b-r) * 2); background: var(--color-berry-deep);
  --b-ink: var(--color-cream); color: var(--color-cream);
}
.b-close__card .btn { background: var(--color-cream); color: var(--color-berry); }
.b-close__card .btn:hover { background: var(--color-sand); color: var(--color-berry-deep); }
.b-close__card a:not(.btn) { color: var(--color-cream); }
.b-close__card :focus-visible { outline-color: var(--color-cream); }
.b-close__text { flex: 1 1 26rem; }
.b-close__text p { margin: .9rem 0 0; font-size: var(--fs-lead); color: rgb(245 238 232 / .82); }
.b-close__act { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.b-close__reach { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: rgb(245 238 232 / .82); }
.b-close__reach a { display: inline-block; padding-block: 11px; margin-block: -11px; }

/* ---------- privacy choices (site.js) ----------
   The banner: a calm card at the bottom (full width minus 16px on phones, 34rem at the left from 760), white on the
   linen ground, a hairline, the leaf corners of the photographs, one soft shadow to lift it off the page.
   "Alle akzeptieren" and "Nur notwendige" are equally large buttons; "Einstellungen" opens the dialog.
   The dialog: a native <dialog> (focus stays inside, Escape closes without change), two rows with switches. */
.js-only { display: none; }
.js .js-only { display: inline; }
.consent[hidden] { display: none; }
.consent {
  position: fixed; z-index: 96; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid; gap: 1rem; max-height: calc(100dvh - var(--header-h) - 32px); overflow-y: auto;
  padding: 1.25rem 1.25rem 1.125rem; border: 1px solid var(--color-line); border-radius: 0 20px 0 20px;
  background: var(--color-white); color: var(--color-ink); box-shadow: 0 10px 30px rgb(36 27 30 / .14);
  animation: consent-in .32s var(--ease) both;
}
.consent__title { margin: 0 0 .4rem; font: 500 1.25rem/1.2 var(--serif); }
.consent__text p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--color-ink-soft); }
.consent__text a { color: var(--color-berry); font-weight: 600; }
.consent__acts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: center; }
.consent__acts .btn { width: 100%; justify-content: center; padding-inline: .75rem; }
.consent__more, .site-footer__consent {
  min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: .25em;
}
.consent__more { grid-column: 1 / -1; justify-self: center; font-size: .9375rem; font-weight: 600; color: var(--color-berry); }
.consent__more:hover, .site-footer__consent:hover { color: var(--color-berry); text-decoration-color: currentColor; }
@media (min-width: 760px) {
  .consent { right: auto; left: max(24px, env(safe-area-inset-left, 0px)); bottom: 24px; width: min(34rem, calc(100vw - 48px)); padding: 1.5rem 1.5rem 1.25rem; }
  .consent__acts { grid-template-columns: auto auto 1fr; }
  .consent__acts .btn { width: auto; }
  .consent__more { grid-column: auto; justify-self: end; }
}
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.consent-dialog {
  width: min(36rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 0 20px 0 20px;
  background: var(--color-white); color: var(--color-ink); box-shadow: 0 20px 50px rgb(36 27 30 / .22);
}
.consent-dialog::backdrop { background: rgb(36 27 30 / .45); }
.consent-dialog[open] { animation: consent-in .28s var(--ease) both; }
.consent-dialog__form { display: grid; gap: 1.25rem; padding: 1.5rem; }
.consent-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.consent-dialog__title { margin: .35rem 0 0; font: 500 1.5rem/1.15 var(--serif); }
.consent-dialog__close { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -.25rem -.5rem 0 0; padding: 0; border: 0; background: none; color: var(--color-ink); cursor: pointer; }
.consent-dialog__close .ico { width: 1.35rem; height: 1.35rem; }
.consent-dialog__close:hover { color: var(--color-berry); }
.consent-dialog__intro { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--color-ink-soft); }
.consent-dialog__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.consent-dialog__list li { padding: 1rem 0; border-bottom: 1px solid var(--color-line); }
.consent-dialog__list p { margin: .35rem 0 0 calc(44px + .85rem); font-size: .875rem; line-height: 1.5; color: var(--color-ink-soft); }
.consent-dialog__acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
@media (max-width: 479.98px) { .consent-dialog__acts .btn { flex: 1 1 100%; justify-content: center; } }

/* a switch drawn over a real checkbox: 44×26 track, berry when on, the disabled "Notwendig" stays on and muted */
.consent-switch { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 44px; cursor: pointer; }
.consent-switch input { position: absolute; left: 0; top: 50%; width: 44px; height: 26px; margin: -13px 0 0; opacity: 0; cursor: inherit; }
.consent-switch__ui { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--color-control); transition: background-color .2s var(--ease); }
.consent-switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-white); transition: transform .2s var(--ease); }
.consent-switch input:checked + .consent-switch__ui { background: var(--color-berry); }
.consent-switch input:checked + .consent-switch__ui::after { transform: translateX(18px); }
.consent-switch input:disabled + .consent-switch__ui { opacity: .55; }
.consent-switch input:disabled ~ .consent-switch__name { cursor: default; }
.consent-switch input:focus-visible + .consent-switch__ui { outline: 3px solid var(--color-berry); outline-offset: 3px; }
.consent-switch__name { font-weight: 600; }

/* an embed that waits for consent ([data-embed]): the placeholder in the photo shape, the map in the same frame */
.b-map { grid-column: content; position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0 24px 0 24px; background: var(--color-sand); }
@media (min-width: 600px) { .b-map { aspect-ratio: 16 / 7; } }
.b-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-map__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 1.5rem; text-align: center; }
.b-map__ph > .ico { width: 1.75rem; height: 1.75rem; color: var(--color-berry); }
.b-map__t { margin: 0; font: 500 1.375rem/1.2 var(--serif); color: var(--color-ink); }
.b-map__note { max-width: 30rem; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--color-ink-soft); }
.b-map__note a { color: var(--color-berry); font-weight: 600; }
.b-map__acts { display: none; margin-top: .5rem; }
.js .b-map__acts { display: grid; justify-items: center; gap: .25rem; }
.b-map__remember { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .875rem; color: var(--color-ink-soft); cursor: pointer; }
.b-map__remember input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-berry); }
.b-map.is-loaded .b-map__ph { display: none; }

@media (prefers-reduced-motion: reduce) {
  .consent, .consent-dialog[open] { animation: none; }
  .consent-switch__ui, .consent-switch__ui::after { transition: none; }
}
@media print { .consent, .consent-dialog { display: none !important; } }
@media (max-width: 599.98px) { .b-map { aspect-ratio: auto; min-height: 23rem; } }
/* a link inside an eyebrow (Frauenheilkunde → its overview) keeps the small type but gets a 44px touch height */
.b-eyebrow a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; }
/* Impressum, Datenschutz, Cookie-Einstellungen: separate items with space between, never a dangling "·" */
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; }
.site-footer__legal .site-footer__consent { font-size: inherit; text-decoration: none; }
.site-footer__legal .site-footer__consent:hover { text-decoration: underline; }
.js .site-footer__legal .js-only { display: inline-flex; align-items: center; }

/* ---------- topic assistant (assistant.js) ----------
   Replaces the mobile appointment bar when JavaScript runs: a launcher at the bottom right and a small chat panel
   that answers with the site's own texts and links. Without JavaScript neither is shown and the bar stays.
   Phones: a bottom sheet. From 760: a card above the launcher's place. */
.assist-launch, .assist-panel { display: none; }
.js .assist-launch {
  position: fixed; z-index: 95;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: .7rem 1.2rem .7rem 1rem;
  border: 0; border-radius: 0 18px 0 18px;
  background: var(--color-berry); color: var(--color-cream);
  font: 700 .9375rem/1.2 var(--sans); cursor: pointer;
  /* a light ring keeps it apart from the dark berry and plum parts of the pages */
  box-shadow: 0 0 0 2px var(--color-cream), 0 8px 22px rgb(36 27 30 / .22);
  visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), background-color .2s var(--ease), visibility 0s linear 200ms;
}
.js .assist-launch.is-visible { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
.assist-launch:hover { background: var(--color-berry-deep); }
.assist-launch:focus-visible { outline: 3px solid var(--color-berry); outline-offset: 3px; }
.assist-launch .ico { flex: none; width: 1.3rem; height: 1.3rem; stroke-width: 1.7; }

.js .assist-panel:not([hidden]) {
  position: fixed; z-index: 97; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  height: min(86vh, 640px); height: min(86dvh, 640px);
  /* its own colours, so it never reads as part of the page: a berry head, a soft rose conversation, a white field */
  --as-rose: #F6E8EC; --as-rose-2: #F0D9E0; --as-line: #E6CDD5;
  background: var(--as-rose); color: var(--color-ink); overflow: hidden;
  border-radius: 0 20px 0 0; box-shadow: 0 0 0 100vmax rgb(36 27 30 / .42), 0 -10px 40px rgb(36 27 30 / .22);
  animation: assist-in 220ms var(--ease);
}
@keyframes assist-in { from { opacity: 0; transform: translateY(14px); } }
html.assist-open .assist-launch { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 759.98px) { html.assist-open { overflow: hidden; } }
@media (min-width: 760px) {
  .js .assist-launch { right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  .js .assist-panel:not([hidden]) {
    left: auto; right: 24px; bottom: 24px; width: 400px;
    height: min(640px, calc(100vh - var(--header-h) - 48px)); height: min(640px, calc(100dvh - var(--header-h) - 48px));
    border-radius: 0 20px 0 20px; box-shadow: 0 0 0 1px rgb(75 34 48 / .12), 0 22px 60px rgb(36 27 30 / .28);
  }
}

.assist-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem .75rem 1rem 1.25rem; background: var(--color-berry); color: var(--color-cream); }
.assist-panel__title { margin: 0; font: 500 1.3125rem/1.2 var(--serif); letter-spacing: -.005em; color: var(--color-cream); }
.assist-panel__sub { margin: .25rem 0 0; font-size: var(--fs-label); line-height: 1.4; color: #F0BBC8; }
.assist-panel__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -4px; padding: 0; border: 0; border-radius: 0 12px 0 12px; background: none; color: var(--color-cream); cursor: pointer; }
.assist-panel__close:hover { background: rgb(255 255 255 / .12); }
.assist-panel__close:focus-visible { outline: 2px solid var(--color-cream); outline-offset: -2px; }
.assist-panel__close .ico { width: 1.35rem; height: 1.35rem; stroke-width: 1.7; }

.assist-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1rem 1.25rem; }
.assist-log:focus { outline: none; }
.assist-log:focus-visible { outline: 2px solid var(--color-berry); outline-offset: -2px; }
.assist-msg { flex: none; max-width: 92%; padding: .8rem 1rem; border-radius: 0 16px 0 16px; font-size: .96875rem; line-height: 1.5; overflow-wrap: anywhere; animation: assist-msg 200ms var(--ease); }
@keyframes assist-msg { from { opacity: 0; transform: translateY(6px); } }
.assist-msg p { margin: 0; }
.assist-msg p + p { margin-top: .5rem; }
.assist-msg--bot { align-self: flex-start; background: var(--color-white); color: var(--color-ink); box-shadow: 0 1px 2px rgb(75 34 48 / .08); }
.assist-msg--you { align-self: flex-end; max-width: 80%; background: var(--color-berry); color: var(--color-cream); }
.assist-msg--alert { box-shadow: inset 3px 0 0 var(--color-accent-ink); }
.assist-msg .assist-note { margin-top: .75rem; font-size: var(--fs-label); color: var(--color-ink-soft); }

.assist-faq { margin-top: .7rem; padding: .5rem 0 .5rem .85rem; border-left: 2px solid var(--color-pink); }
.assist-msg .assist-faq__lead { margin-bottom: .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-ink); }
.assist-faq__q { font-weight: 700; color: var(--color-ink); }
.assist-msg .assist-faq__a { margin-top: .3rem; color: var(--color-ink-soft); }

.assist-links { display: grid; gap: 6px; margin: .75rem 0 0; padding: 0; list-style: none; }
.assist-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; padding: .5rem .8rem; border: 1px solid var(--as-line); border-radius: 0 12px 0 12px; background: var(--as-rose); color: var(--color-berry); text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.assist-link:hover { border-color: var(--color-berry); background: var(--color-white); }
.assist-link:focus-visible { outline: 2px solid var(--color-berry); outline-offset: 2px; }
.assist-link__text { display: grid; gap: 1px; min-width: 0; }
.assist-link__name { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.assist-link__sub { font-size: var(--fs-label); line-height: 1.3; color: var(--color-ink-soft); }
.assist-link .ico { flex: none; width: 1.05rem; height: 1.05rem; transition: transform .2s var(--ease); }
.assist-link:hover .ico { transform: translateX(3px); }

.assist-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .8rem; }
.assist-msg .assist-chips__label { flex-basis: 100%; margin: 0 0 .1rem; font-size: var(--fs-label); color: var(--color-ink-soft); }
.assist-chip { min-height: 44px; padding: .5rem .95rem; border: 1px solid transparent; border-radius: 999px; background: var(--as-rose-2); color: var(--color-berry); font: 600 .9rem/1.2 var(--sans); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.assist-chip:hover { border-color: var(--color-berry); background: var(--color-berry); color: var(--color-cream); }
.assist-chip:focus-visible { outline: 2px solid var(--color-berry); outline-offset: 2px; }

.assist-typing { display: flex; gap: 5px; padding: 1rem 1.1rem; }
.assist-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-muted); animation: assist-dot 1s infinite ease-in-out; }
.assist-typing span:nth-child(2) { animation-delay: .15s; }
.assist-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes assist-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.assist-form { display: flex; gap: 8px; padding: .75rem 1rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--as-line); background: var(--color-white); }
.assist-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 .9rem; border: 1px solid var(--color-control); border-radius: 0 12px 0 12px; background: var(--as-rose); color: var(--color-ink); font: 400 16px/1.3 var(--sans); }
.assist-form input::placeholder { color: var(--color-muted); opacity: 1; }
.assist-form input:focus { outline: 2px solid var(--color-berry); outline-offset: 0; border-color: var(--color-berry); }
.assist-form__send { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0 12px 0 12px; background: var(--color-berry); color: var(--color-cream); cursor: pointer; }
.assist-form__send:hover { background: var(--color-berry-deep); }
.assist-form__send:focus-visible { outline: 2px solid var(--color-berry); outline-offset: 2px; }
.assist-form__send .ico { width: 1.2rem; height: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .js .assist-launch, .assist-link, .assist-link .ico, .assist-chip { transition: none; }
  .js .assist-panel:not([hidden]), .assist-msg { animation: none; }
  .assist-typing span { animation: none; opacity: .6; }
}
@media print { .assist-launch, .assist-panel { display: none !important; } }

/* ---------- key words in longer texts ----------
   The few words that carry a paragraph are set in <strong>: a little bolder, in full ink instead of the soft grey,
   on a faint rose marker, so the block can be skimmed. On dark panels only the weight and the light ink. */
main p strong { font-weight: 600; }
:is(.b-sec, .b-open, .faq, .hm-place, .hm-faq) p strong {
  color: var(--b-ink, var(--color-ink));
  background: linear-gradient(transparent 62%, rgb(230 205 211 / .6) 62%, rgb(230 205 211 / .6) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.b-panel--dark p strong, .b-box--dark p strong { background: none; }