/* Reusable components: button, link, form, card, pagination, embed notice.
   Colour use follows the brand: ivory and near-black carry the page, teal carries
   buttons and links, mint quiets a quote, gold stays in logo and icons, coral is one dot. */

/* ── Button ── */
.button,
.wp-block-button__link {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-base), box-shadow var(--transition-base);
}
.button:hover,
.wp-block-button__link:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }
/* The whole button (with its text) grows a little and lifts; pressing it sets it back. Reduced motion
   turns the transition off (base.css), so the change is instant. */
.button:hover,
.wp-block-button__link:hover { transform: translateY(-1px) scale(1.04); box-shadow: var(--shadow-menu); }
.button:active,
.wp-block-button__link:active { transform: scale(0.98); box-shadow: none; }
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  padding-inline: var(--space-2);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: transparent; color: var(--color-primary-hover); text-decoration: underline; }
.wp-block-button.is-style-outline > .wp-block-button__link::after { content: " →"; }

/* Text link with arrow ("Wie ich helfen kann →") */
.link-arrow { color: var(--color-primary); font-weight: 500; text-decoration: none; }
.link-arrow:hover { color: var(--color-primary-hover); text-decoration: underline; text-decoration-color: var(--color-gold); text-decoration-thickness: 2px; text-underline-offset: 0.35em; } /* gold underline: a small use of the L's colour; the teal change stays the main signal */
.link-arrow::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: 0.3em; transition: transform var(--transition-base); }
.link-arrow:hover::after { transform: translateX(0.25em); }

/* Small label. The coral dot is a real element (lr_coral_dot() prints it once per page), never a pseudo-element. */
.eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.coral-dot { display: inline-block; flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--color-coral); }

/* ── Section heading ── */
.section-heading { margin-bottom: var(--space-6); }
.section-heading__title { margin-bottom: var(--space-2); font-size: var(--text-3xl); }
.section-heading__sub { margin: 0; color: var(--color-text-muted); }

/* ── Icon (gold, decorative) ── */
.icon { width: 2.5rem; height: 2.5rem; }

/* ── Forms ── */
.form { max-width: var(--container-text); }
.form__row { margin-bottom: var(--space-4); }
.form__label { display: block; margin-bottom: var(--space-1); font-weight: 500; }
.field {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field:hover { border-color: var(--color-primary); }
.form__check { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.form__check input { margin-top: 0.3em; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); }
.form__feedback { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-card); }
.form__feedback:first-child { margin: 0 0 var(--space-4); }
.form__feedback--status { background: var(--color-quote); box-shadow: none; }
.form__feedback--alert  { color: var(--color-danger); }

/* Honeypot: invisible to people and assistive tech (it is also `inert`). */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.search-form { margin-bottom: var(--space-5); }
.search-form__label { display: block; font-weight: 500; margin-bottom: var(--space-1); }
.search-form__row { display: flex; gap: var(--space-3); max-width: 28rem; }

/* ── Card ── */
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base); }
.card:has(.card__link):hover,
.card:has(.card__title a):hover { transform: translateY(-0.125rem); box-shadow: var(--shadow-menu); }
.card:has(.card__link):hover .link-arrow::after { transform: translateX(0.25em); }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.card__link:focus-visible { outline: none; }
.card__image { display: block; overflow: hidden; }
.card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--transition-slow); }
/* The photo of a clickable card zooms in slowly on hover (multiplied with the zoom chosen in the admin). */
.card:has(.card__link):hover .card__image img,
.card:has(.card__title a):hover .card__image img { transform: scale(calc(var(--zoom, 1) * 1.05)); }
.card__body { padding: var(--space-5); }
.card__meta { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.card__title { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--color-primary); }
/* Whole card clickable without nesting links. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__excerpt { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
/* No tile behind the icon: it sits on the background of its card, aligned with the text. */
.card__icon { display: block; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-4); }
/* The offer itself: more room and a larger title. */
.card--feature .card__body { padding: var(--space-6); }
.card--feature .card__title { font-size: var(--text-2xl); }
.card--feature .card__text { color: var(--color-text); font-size: var(--text-md); }
.card__text { margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
/* Quieter card: no shadow, warm surface (a part of the offer, not a second offer). */
.card--quiet { background: var(--panel-bg, var(--color-surface-alt)); box-shadow: none; }
/* The link's ::before stretches over the card; its ::after is the arrow. */
.card__link::before { content: ""; position: absolute; inset: 0; }

.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

.related { margin-top: var(--space-8); max-width: none; }
.related__title { font-size: var(--text-2xl); }

/* ── Pagination ── */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-7); }
.pagination .page-numbers {
  min-width: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}
.pagination .page-numbers.current { background: var(--color-primary); color: var(--color-primary-contrast); }

/* ── Third-party embed notice (inc/embeds.php) ── */
.embed-consent { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-alt); }
/* Core reserves a 16:9 box for a responsive embed; do not reserve it while only the notice shows. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(.embed-consent)::before { display: none; }
.embed-consent__text { margin-bottom: var(--space-3); }
.embed-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: 0; }

/* ── Card badge (card 2 on Home: part of the offer) ── */
.card__badge { width: fit-content; margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-xs); }

/* ── Quote band: full width, mint, or over a photo with a light veil (DECISIONS #57). The veil is a flat tint of
   the page colour, no gradient. The text stays dark, so a photo that is swapped in later keeps its contrast. ── */
.quote-band { position: relative; overflow: hidden; background: var(--color-quote); }
.quote-band__bg { position: absolute; inset: 0; }
.quote-band__bg .media,
.quote-band__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quote-band--image::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) var(--veil, 80%), transparent); }
.quote-band--veil-95 { --veil: 95%; }
.quote-band--veil-80 { --veil: 80%; }
.quote-band--veil-65 { --veil: 65%; }
.quote-band--veil-50 { --veil: 50%; }
.quote-band--veil-35 { --veil: 35%; }
.quote-band__inner { position: relative; z-index: 1; max-width: 52rem; padding-block: var(--space-8); text-align: center; }
.quote-band figure,
.quote-band blockquote { margin: 0; }
.quote-band__text,
.quote-band blockquote p { margin: 0; font-family: var(--font-heading); font-size: calc(var(--text-3xl) * 1.2); line-height: var(--wp--custom--line-height--heading); }
.quote-band figcaption { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); letter-spacing: 0.03em; }
.quote-band--image figcaption { color: var(--color-text); }

/* ── FAQ (details/summary, no JavaScript) ── */
.faq__list { display: grid; gap: var(--space-3); max-width: var(--container-text); }
.faq__item { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--panel-bg, var(--color-surface)); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; font-weight: 500; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg); transition: transform var(--transition-base); }
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__answer { margin-top: var(--space-3); color: var(--color-text-muted); }
.faq__answer > :last-child { margin-bottom: 0; }

/* ── Qualifications: compact (Home) is a quiet list, full (About) is cards ── */
.quals__list { max-width: var(--container-text); margin: 0; padding: 0; list-style: none; }
.quals__list li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.quals__type { color: var(--color-text-subtle); font-size: var(--text-sm); }
.quals__title { margin: 0; font-weight: 500; }
.quals__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.quals__group { margin-bottom: var(--space-6); }
.quals__group-title { font-size: var(--text-xl); }
.quals__cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.quals__file { margin: var(--space-3) 0 0; font-size: var(--text-sm); }

@media (min-width: 52rem) {

  /* Section heading on the left, content on the right. */
  .faq, .quals--full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
  .faq .section-heading, .quals--full .section-heading { margin: 0; }
  .faq__list { max-width: none; }
}

/* ── Page intro (first section of every page): text left, photo or brand plate right ── */
.intro { display: grid; gap: var(--space-6); padding-block: calc(var(--space-7) / 2) var(--space-6); }
.intro__title { max-width: 16ch; margin-bottom: var(--space-4); font-size: var(--text-4xl); line-height: var(--wp--custom--line-height--display); }
.intro__lead { max-width: 32rem; color: var(--color-text-muted); font-size: var(--text-lg); }
.intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.intro__phone { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
/* The quiet side door under an intro (Services → coaching for individuals): small, muted, one text link. */
.intro__door { margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.intro__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); }
.intro--text-only .intro__lead { max-width: 40rem; }

/* The monogram on a warm tile, until a photo is chosen. */

@media (min-width: 52rem) {
  .intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--space-8); padding-block: calc(var(--space-8) / 2) var(--space-7); }
  .intro--text-only { grid-template-columns: minmax(0, 1fr); }
}

/* Quiet entrance of the intro (not with reduced motion). It only moves, it never hides:
   if the animation did not run, everything is still visible. */
@keyframes lr-rise {
  from { transform: translateY(0.75rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .intro__text > * { animation: lr-rise var(--transition-slow) both; }
  .intro__text > :nth-child(2) { animation-delay: 80ms; }
  .intro__text > :nth-child(3) { animation-delay: 160ms; }
  .intro__text > :nth-child(4) { animation-delay: 240ms; }
  .intro__text > :nth-child(5) { animation-delay: 320ms; }
  .intro__media { animation: lr-rise var(--transition-slow) 200ms both; }
}

/* ── Image view (focus point and zoom, chosen in the admin): the wrapper clips the zoom ──
   Only images that were adjusted get the wrapper (image.php), in steps of 10 so no inline style is needed. */
.media { display: block; height: 100%; overflow: hidden; border-radius: var(--media-radius, 0); }
.media img { object-position: var(--fx, 50%) var(--fy, 50%); transform-origin: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--zoom, 1)); }
.media--fx-0 { --fx: 0%; }
.media--fx-10 { --fx: 10%; }
.media--fx-20 { --fx: 20%; }
.media--fx-30 { --fx: 30%; }
.media--fx-40 { --fx: 40%; }
.media--fx-50 { --fx: 50%; }
.media--fx-60 { --fx: 60%; }
.media--fx-70 { --fx: 70%; }
.media--fx-80 { --fx: 80%; }
.media--fx-90 { --fx: 90%; }
.media--fx-100 { --fx: 100%; }
.media--fy-0 { --fy: 0%; }
.media--fy-10 { --fy: 10%; }
.media--fy-20 { --fy: 20%; }
.media--fy-30 { --fy: 30%; }
.media--fy-40 { --fy: 40%; }
.media--fy-50 { --fy: 50%; }
.media--fy-60 { --fy: 60%; }
.media--fy-70 { --fy: 70%; }
.media--fy-80 { --fy: 80%; }
.media--fy-90 { --fy: 90%; }
.media--fy-100 { --fy: 100%; }
.media--zoom-100 { --zoom: 1; }
.media--zoom-110 { --zoom: 1.1; }
.media--zoom-120 { --zoom: 1.2; }
.media--zoom-130 { --zoom: 1.3; }
.media--zoom-140 { --zoom: 1.4; }
.media--zoom-150 { --zoom: 1.5; }
.media--zoom-160 { --zoom: 1.6; }
.media--zoom-170 { --zoom: 1.7; }
.media--zoom-180 { --zoom: 1.8; }
.media--zoom-190 { --zoom: 1.9; }
.media--zoom-200 { --zoom: 2; }
.intro__media, .photo-strip__list li { --media-radius: var(--radius-lg); }
.home-about__media { --media-radius: 50%; }

/* Photo rule. Every content photo has the same radius (--radius-lg; card photos take their card's). The intro
   photo of a page carries a thin gold accent in its corners: two small copies of the gold foot (.lmark, the
   markup is in page-intro.php) set inside its corners and clipped by the photo's radius; the top left one is
   turned half a circle. Home's "Über mich" portrait is the exception: a circle inside a thin gold ring (home.css).
   Sparingly: card photos, strips and the author photo get none. */
.intro__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); --bracket-size: 3.5rem; }
.intro__mark { position: absolute; width: var(--bracket-size); aspect-ratio: 625 / 152; }
.intro__mark--start { top: 0; left: 0; rotate: 180deg; }
.intro__mark--end { right: 0; bottom: 0; }
@media (min-width: 52rem) {
  .intro__media { --bracket-size: 5.5rem; }
}
.author-box__photo { --media-radius: 50%; }


/* ── The gold L ──
   One asset (images/element-foot.svg, the brand's L foot), used as a mask so it scales and takes any colour
   through `color` (gold by default). The size comes from the place that uses it. Large uses are limited to one
   per screen: the corner marks of the intro photo, the gold ring of the Home portrait and the watermark in the dark closing band (DECISIONS #57). */
.lmark { display: block; color: var(--color-gold); background: currentColor; -webkit-mask: url("../images/element-foot.svg") center / contain no-repeat; mask: url("../images/element-foot.svg") center / contain no-repeat; pointer-events: none; }

/* ── The one dark band: the closing call to action on Home (DECISIONS #57) ──
   Fast Schwarz (the text token) as ground, ivory text, an ivory button (teal would not stand out on it) and an ivory
   focus ring. A large L in full gold sits in the bottom right corner, fully inside; its height equals the band's padding (top and bottom are the same), so no text lies on it. */
.button--light { background: var(--color-bg); color: var(--color-text); }
.button--light:hover { background: var(--color-surface); color: var(--color-text); }
.cta-band { --color-focus: var(--color-bg); --pad: calc(var(--space-8) * 2 / 3); --mark-h: var(--pad); --mark-w: calc(var(--mark-h) * 625 / 152); position: relative; background: var(--color-text); color: var(--color-bg); }
.cta-band__clip { position: absolute; inset: 0; overflow: hidden; }
.cta-band__watermark { position: absolute; right: 0; bottom: 0; width: var(--mark-w); aspect-ratio: 625 / 152; -webkit-mask-image: url("../images/element-foot-flat.svg"); mask-image: url("../images/element-foot-flat.svg"); } /* the flat variant: square bottom right corner, flush with the band's edge */
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-5); padding-block: var(--pad); }
.cta-band__title { margin-bottom: var(--space-3); color: var(--color-bg); font-size: calc(var(--text-3xl) * 1.3); }
.cta-band__text { max-width: 32rem; margin: 0; color: var(--color-surface-alt); font-size: var(--text-lg); }
.cta-band__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cta-band__phone { color: var(--color-bg); font-family: var(--font-heading); font-size: calc(var(--text-3xl) * 1.1); line-height: 1; text-decoration: none; }
.cta-band__phone:hover { text-decoration: underline; text-decoration-color: var(--color-gold); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.cta-band__mail { color: var(--color-surface-alt); text-underline-offset: 0.3em; }
.cta-band__mail:hover { color: var(--color-bg); text-decoration-color: var(--color-gold); }
@media (min-width: 52rem) {
  .cta-band { --pad: calc(var(--space-9) * 2 / 3); }
  .cta-band__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-7); align-items: center; padding-block: var(--pad); }
}


/* ── Steps: numbered panels on one thin gold line that ends in a flag (Home "So arbeiten wir zusammen",
   Services "Wie es abläuft"). The numeral is a CSS counter, never typed. ── */
.steps-section .section-heading { margin-bottom: var(--space-7); }
.steps { counter-reset: step; position: relative; display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.steps__item { counter-increment: step; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
/* The numeral sits on the gold line, in a ring of the band's colour that breaks the line behind it. */
.steps__item::before { content: counter(step); position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 2px solid var(--color-gold); border-radius: 50%; background: var(--color-surface); box-shadow: 0 0 0 0.5rem var(--band-bg); color: var(--color-text); font-family: var(--font-heading); font-size: var(--text-xl); line-height: 1; transition: transform var(--transition-base); }
.steps__item:hover::before { transform: scale(1.12); }
.steps__body { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.steps__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.steps__text { margin: 0; color: var(--color-text-muted); }
/* The gold line: one straight thin line through the numerals that ends in a flag planted on it (the goal). On
   phones it runs down the left; from 48rem it runs right. The flag is drawn by ::after (no markup, nothing to read
   out). In icon-flag.svg the pole stands at 25% of the width, from 17% to 87.5% of the height. The line stops a
   small gap (--goal-gap) short of the flag: before the pole on desktop, above the pole's top on phones. */
.steps { --goal: 3.5rem; --goal-gap: var(--space-3); padding-bottom: calc(var(--goal) + var(--space-3)); }
.steps::before { content: ""; position: absolute; z-index: 0; left: calc(1.75rem - 1px); top: 1.75rem; bottom: calc(var(--goal) * 0.84 + var(--goal-gap)); border-left: 2px solid var(--color-gold); pointer-events: none; }
.steps::after { content: ""; position: absolute; left: calc(1.75rem - var(--goal) * 0.25); bottom: 0; width: var(--goal); height: var(--goal); background: url("../images/icon-flag.svg") center / 100% 100% no-repeat; pointer-events: none; }

@media (min-width: 48rem) {
  .steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-5); padding-bottom: 0; }
  /* Every panel fills its column, so all panels in the row have the same height. */
  .steps__item { display: flex; flex-direction: column; }
  .steps__item::before { flex: none; margin-bottom: var(--space-5); }
  .steps__body { flex: 1; }
  .steps__body { padding: var(--space-6); }
  .steps::before { top: calc(1.75rem - 1px); bottom: auto; left: 1.75rem; right: calc(var(--goal) * 0.75 + var(--goal-gap)); border-left: 0; border-top: 2px solid var(--color-gold); }
  .steps::after { top: calc(1.75rem - var(--goal) * 0.875); bottom: auto; left: auto; right: 0; }
}

/* Motion: the panels lift on hover and rise one after the other when their band comes into view (movement only). */
.steps__body { transition: translate var(--transition-slow) calc(var(--i, 0) * 90ms), transform var(--transition-base), box-shadow var(--transition-base); }
.steps__item:hover .steps__body { transform: translateY(-0.25rem); box-shadow: var(--shadow-menu); }
.band[data-reveal="pending"] .steps__body { translate: 0 1.25rem; }
.steps > :nth-child(2) { --i: 1; }
.steps > :nth-child(3) { --i: 2; }
.steps > :nth-child(4) { --i: 3; }
.steps > :nth-child(5) { --i: 4; }

/* ── Small gold line icon or numbered dot above a situation (Home cards, Services situations) ── */
.lineicon { display: block; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-3); fill: none; stroke: var(--color-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.numdot { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-3); border-radius: 50%; background: var(--panel-bg, var(--color-surface-alt)); font-family: var(--font-heading); font-size: var(--text-lg); line-height: 1; }

/* ── Qualification logos: in their own colours, a little larger on hover or focus (DECISIONS #66) ── */
.quals__logo-wrap { display: block; line-height: 0; }
.quals__logo { display: block; width: auto; max-width: 9rem; height: auto; max-height: 2.75rem; object-fit: contain; transition: scale var(--transition-base); }
.quals__list li:hover .quals__logo,
.quals__list li:focus-within .quals__logo,
.quals__card:hover .quals__logo,
.quals__card:focus-within .quals__logo { scale: 1.08; }
.quals__card .quals__logo-wrap { margin-bottom: var(--space-3); }