/* Dignitas. One shared stylesheet; no WordPress/Kadence selectors or generated IDs.
   1. Tokens/base  2. Header/navigation  3. Home sections  4. Form  5. Documents/footer  6. Responsive */
:root {
  color-scheme: light;
  --blue: #2b6cb0; --blue-hover: #265e9a; --ink: #222; --body: #3b3b3b;
  --muted: #f7f7f7; --white: #fff; --border: #e1e1e1; --social: #fd595a;
  /* Azul corporativo: el del texto «Dignitas» en el logotipo. */
  --navy: #002f66;
  --font-body: "Source Sans Pro", Arial, sans-serif;
  --font-heading: "Montserrat", Arial, sans-serif;
  --font-ui: "Inter", Arial, sans-serif;
  /* Sizing lives in rem so every box, gutter and type size follows the user's browser/OS
     font size. Borders, radii and shadows stay in px: they are optical details, not text. */
  --width: 71.25rem; --width-wide: 80.625rem;
  --gutter: 1.5rem; --gutter-sm: .9375rem;
  /* Single height for every header control: nav links, CTA, language picker and menu. */
  --control-height: 2.875rem;
  --shadow-card: 10px 20px 49px rgba(0, 0, 0, .06);
}
*, *::before, *::after { box-sizing: border-box; }
/* No fixed root font-size (rem keeps tracking the user's preference) and no mobile text
   re-inflation on top of the rem-based layout. */
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--body); background: var(--white); font: 400 1.0625rem/1.6 var(--font-body); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-heading); font-weight: 700; text-wrap: balance; }
h1 { font-size: 3.25rem; line-height: 1.5; }
/* One continuous ramp per level: no fixed jump at a breakpoint, and it still follows the user's font size. */
h2 { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.3125rem); line-height: 1.25; }
h3 { font-size: clamp(1.375rem, 1.2rem + .9vw, 1.875rem); line-height: 1.3; }
p { margin: 0 0 1.5em; text-wrap: pretty; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .125rem; }
a:hover { color: var(--blue-hover); }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }
button, a, summary, input, textarea { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
/* Two-tone focus ring: a light outline that stands out over the dark hero and footer plus a dark
   inner ring that reaches 3:1 over white cards and the form. Text fields keep their own soft style. */
:focus-visible:not(input):not(textarea) { outline: 3px solid #7cc4ff; outline-offset: 2px; box-shadow: 0 0 0 2px rgb(17 17 17 / 85%) !important; }
.container { width: 100%; max-width: var(--width); margin-inline: auto; }
.container--wide { max-width: var(--width-wide); padding-inline: var(--gutter); }
.container--portraits { max-width: var(--width-wide); }
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: middle; fill: currentColor; }
.button { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 999px; padding: 1rem 2.125rem; background: var(--blue); color: var(--white); font: 600 1.0625rem/1.6 var(--font-ui); letter-spacing: -.03em; text-align: center; text-decoration: none; transition: background-color .2s, box-shadow .2s, transform .2s; }
.button:hover, .button:focus-visible { color: var(--white); background: var(--blue-hover); box-shadow: 0 15px 25px -7px rgb(0 0 0 / 10%); transform: translateY(-2px); }
.button:disabled { opacity: .6; cursor: wait; }
.brand-word { color: #355473; font-family: Georgia, serif; font-weight: 600; }
.brand-word--light { color: #7cc4ff; }
.skip-link { position: absolute; left: 1rem; top: -7.5rem; padding: .75rem 1.25rem; z-index: 200; background: white; }
.skip-link:focus { top: .75rem; }
/* Available to assistive technology only. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header: transparent, as in the reference, with the requested language picker. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 30; }
.site-header__inner { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-logo { display: block; flex: 0 0 9.375rem; }
.site-logo img { width: 9.375rem; }
.site-header__actions { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.desktop-navigation { display: flex; align-items: center; }
.desktop-navigation a { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 1rem; border-radius: 999px; color: #fffefe; font-size: 1.125rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.desktop-navigation a:hover { background: var(--blue); color: var(--white); }
.button--header { margin-left: .25rem; min-height: var(--control-height); padding: 0 1.375rem; border-radius: 999px; line-height: 1; white-space: nowrap; }
.header-socials { display: flex; gap: .3125rem; }
.header-socials a { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; background: #eee; color: #555; border-radius: 3px; }
.header-socials a:hover { background: var(--white); color: var(--blue); }
.header-socials .icon { width: 1.125rem; height: 1.125rem; }
.language-picker { position: relative; margin-left: .25rem; font-family: var(--font-body); }
.language-picker summary { min-height: var(--control-height); display: flex; align-items: center; gap: .5rem; padding: 0 .875rem; color: white; font-size: 1rem; font-weight: 600; border: 1px solid rgb(255 255 255 / 40%); border-radius: 999px; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.language-picker summary::-webkit-details-marker, .mobile-menu summary::-webkit-details-marker { display: none; }
.language-picker summary::marker, .mobile-menu summary::marker { content: ""; }
.language-picker img { width: 1.5rem; height: 1rem; object-fit: fill; }
.language-picker summary .icon { width: .75rem; height: .75rem; }
.language-picker summary:hover { background: rgb(255 255 255 / 12%); }
.language-picker[open] summary { background: rgb(0 0 0 / 20%); border-color: rgb(255 255 255 / 65%); }
.language-picker__options { position: absolute; right: 0; top: calc(100% + .625rem); min-width: 10.375rem; padding: .375rem; border-radius: 12px; background: white; box-shadow: 0 10px 40px rgb(0 0 0 / 18%); }
.language-picker__options a { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; color: var(--ink); border-radius: 8px; text-decoration: none; }
.language-picker__options a:hover, .language-picker__options a[aria-current] { color: var(--blue); background: #f0f5fb; }
.language-picker__options a[aria-current] { font-weight: 600; }
.mobile-menu { display: none; }

/* Hero. The photo is a real <img> so the browser discovers the LCP candidate in the HTML (no CSS
   background and no preload) and can negotiate srcset/sizes. The dark overlay stays in CSS so the
   original contrast is unchanged. */
.hero { position: relative; isolation: isolate; margin-bottom: 1.875rem; color: white; }
.hero__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 47% 29%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / 50%); }
.hero__content { position: relative; z-index: 2; max-width: 60rem; margin-inline: auto; padding: 10rem .625rem 3.4375rem; text-align: center; }
/* Title: one single monotonic scale (32px up to 376px wide, 60px from 1436px up) so it never jumps at a breakpoint.
   The rem term keeps it responsive to the user's base font size; the unitless line-height keeps leading proportional. */
.hero__title { max-width: 18ch; margin: 0 auto 1.625rem; font-size: clamp(2rem, 1.38rem + 2.64vw, 3.75rem); line-height: 1.15; color: white; text-wrap: balance; }
.hero__description { max-width: 60ch; margin: 0 auto 1.25rem; font-size: 1.25rem; line-height: 1.6; }
.hero__description:first-of-type { margin-top: 1.875rem; }
.hero__description:last-of-type { margin-bottom: 2.5rem; }
.hero__button { padding-block: 1rem; }

/* Two-column content. The asymmetric insets match the original block layout. */
.section { padding-block: 3.125rem; }
.section--muted { background: var(--muted); }
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-intro { padding: .625rem; min-width: 0; }
html:lang(de) .section-intro h2 { hyphens: auto; overflow-wrap: anywhere; }
.eyebrow { margin: 0 0 1.71875rem; color: var(--blue); font: 400 .9375rem/1 var(--font-ui); letter-spacing: .1333em; text-transform: uppercase; }
.section-intro h2 { margin: -.3125rem 0 1.78125rem; }
.section-intro > p:not(.eyebrow) { margin-bottom: 2.5rem; }
.section-intro > p:last-child { margin-bottom: 0; }
.mission__intro { margin-right: 9.375rem; }
.mission__values-wrap { padding: 1.25rem .625rem .625rem; }
.values-card { width: 90%; margin: 0; padding: 1.875rem; list-style: none; border-radius: 12px; background: white; box-shadow: var(--shadow-card); }
.values-card__item + .values-card__item { margin-top: 1.25rem; }
/* Card titles stay below the section heading of the block they belong to. */
.values-card h3 { margin: 0 0 .3125rem; color: var(--blue); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); line-height: 1.3; }
.values-card p { margin: 0; font: 600 .95625rem/1.5 var(--font-ui); }
.service__intro { padding: 1.25rem; margin-left: 3.75rem; }
/* One real list of six features. Each item is a subtle framed card whose icon becomes a large,
   faded watermark behind the label, with its own tone per service. */
.service__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.875rem 1.25rem; margin: 0 1.25rem 0 0; padding: .625rem; list-style: none; }
.feature { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; display: flex; align-items: center; min-width: 0; min-height: 6rem; padding: 1.5rem 1.25rem; border: 1px solid rgb(34 34 34 / 6%); border-radius: 14px; background: white; box-shadow: 0 1px 2px rgb(34 34 34 / 4%), 0 10px 22px -14px rgb(34 34 34 / 20%); }
/* Isolation keeps the negative z-index inside the card: the icon paints over the white background
   but always below the text. */
.feature__icon { position: absolute; top: 50%; right: -.75rem; z-index: -1; display: grid; place-items: center; width: 5rem; height: 5rem; color: var(--feature-tone, var(--blue)); opacity: .18; transform: translateY(-50%); }
.feature__icon .icon { width: 100%; height: 100%; }
.feature__icon--heart { --feature-tone: #d64545; }
.feature__icon--stethoscope { --feature-tone: #2b6cb0; }
.feature__icon--hands { --feature-tone: #2f9e6f; }
.feature__icon--users { --feature-tone: #7c5cc4; }
.feature__icon--home { --feature-tone: #d9822b; }
.feature__icon--settings { --feature-tone: #5b7285; }
/* The heading always fills the card so every label starts and wraps at the same point;
   a shrink-to-fit flex item would centre short labels inside a narrower box. */
.feature h3 { position: relative; flex: 1 1 auto; min-width: 0; font: 700 1.16875rem/1.4 var(--font-ui); overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Team. No reveal/lazy-opacity effects: the original portraits remain visible on desktop. */
.team__intro { display: grid; grid-template-columns: 46.8% 53.2%; padding-block: .625rem 5rem; }
.team__intro > div { padding: 0 .625rem; }
.team__intro .eyebrow { margin-bottom: 1.71875rem; }
.team__intro h2 { line-height: 1; }
.team__description { padding: 0 .625rem; margin: 2.8125rem 0 0 3.125rem; }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.75rem; padding-bottom: 3.125rem; }
.doctor { position: relative; min-width: 0; container-type: inline-size; }
.doctor__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 20px 20px 80px rgb(0 0 0 / 20%); }
/* Icon and name share the first row; the role spans both columns so it starts at the caption's
   left edge (aligned with the icon) and the "+" gets that extra width before wrapping. */
.doctor__caption { position: absolute; left: 1.875rem; right: 1.875rem; bottom: -.625rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .9375rem; padding: 1.25rem; border-radius: 12px; background: white; }
/* The name line box matches the 1.25rem `.icon` size, so the icon stays vertically centred on the name at every breakpoint. */
.doctor__caption h3 { margin: 0 0 .875rem; font-size: 1.16875rem; line-height: 1.25rem; }
.doctor__icon { color: var(--blue); }
.doctor__caption p { grid-column: 1 / -1; margin: 0; font-size: .95625rem; color: #515151; }
.doctor__more { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; padding: 0; margin-left: .5rem; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); background: #fff; text-decoration: none; vertical-align: -0.15em; transition: background-color .2s, color .2s, transform .2s; }
.doctor__more .icon { width: .9375rem; height: .9375rem; }
.doctor__more:hover { color: white; background: var(--blue); transform: scale(1.08); }
/* The whole card opens the same link: the small "+" stays the visible affordance while the tap
   target becomes the portrait, which matters on touch screens. */
.doctor__more::after { content: ""; position: absolute; inset: 0; }
/* The caption adapts to the width of its own card, not to the viewport: the same card is wide on a
   phone, narrow on a tablet and medium on a desktop. */
@container (max-width: 21rem) { .doctor__caption { left: 1.25rem; right: 1.25rem; column-gap: .625rem; padding: 1rem; } }
@container (max-width: 15rem) { .doctor__caption { left: .625rem; right: .625rem; column-gap: .5rem; } .doctor__caption h3 { font-size: 1.0625rem; } }
/* In a narrow feature card the balancer can leave a single short word alone on a middle line
   ("Coordinación / con / otros recursos"); below this card width the greedy break reads better. */
@container (max-width: 10.5rem) { .feature h3 { text-wrap: pretty; } }

/* Contact: same fields, labels, optional email, consent, social links and button. */
.contact { padding-bottom: 8.75rem; }
.contact__intro { margin-right: 7.5rem; }
.contact__intro h2 { margin: 0 0 2.40625rem; line-height: 1; }
.contact__intro > p:not(.eyebrow) { margin-bottom: 1.59375rem; }
.contact__intro > p:nth-of-type(2) { margin-bottom: 1.25rem; }
/* Direct contact channels: labelled pill buttons (clearer than bare icons and a 44px touch target).
   All of them share one soft tonal recipe — a very light wash of the channel colour, a matching soft
   border, the colour kept in the glyph and the label in ink — so no single channel outshouts the
   rest while each stays recognisable. */
.contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.875rem; }
.contact__action { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .375rem 1.25rem; border-radius: 999px; font: 600 .9375rem/1 var(--font-ui); text-decoration: none; transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.contact__action .icon { width: 1.25rem; height: 1.25rem; }
/* Optical sizing: these two glyphs do not fill their 20px box (WhatsApp carries padding in its
   24x28 viewBox and the mail envelope is smaller than its frame). */
.contact__action--whatsapp .icon { width: 1.375rem; height: 1.375rem; }
.contact__action--mail .icon { width: 1.4375rem; height: 1.4375rem; }
.contact__action--phone { border: 1px solid #cfe0f2; background: linear-gradient(45deg, #ecf4fd, #e3edfb); color: var(--ink); }
.contact__action--phone .icon { color: var(--blue); }
.contact__action--whatsapp { border: 1px solid #c8e7d4; background: linear-gradient(45deg, #eaf9ef, #e2f6eb); color: var(--ink); }
/* #178a43 instead of the logo green: #25d366 only reaches ~1.8:1 against this light wash. */
.contact__action--whatsapp .icon { color: #178a43; }
.contact__action--mail { border: 1px solid #d9e1e8; background: linear-gradient(45deg, #f4f7f9, #edf2f5); color: var(--ink); }
.contact__action--mail .icon { color: #5b7285; }
/* Instagram keeps the brand gradient in the glyph; the rest of the recipe is the same. */
.contact__action--instagram { border: 1px solid #f2d3e2; background: linear-gradient(45deg, #fdeee0, #fbe4f1); color: var(--ink); }
.contact__action:hover, .contact__action:focus-visible { box-shadow: 0 15px 25px -7px rgb(0 0 0 / 10%); transform: translateY(-2px); }
.contact__action--phone:hover, .contact__action--phone:focus-visible { border-color: #adc8e6; background: linear-gradient(45deg, #e1edfb, #d7e7f9); color: var(--ink); }
.contact__action--whatsapp:hover, .contact__action--whatsapp:focus-visible { border-color: #a6d6ba; background: linear-gradient(45deg, #def4e6, #d5f0e0); color: var(--ink); }
.contact__action--mail:hover, .contact__action--mail:focus-visible { border-color: #b8c7d2; background: linear-gradient(45deg, #e9eff4, #e2e9ef); color: var(--ink); }
.contact__action--instagram:hover, .contact__action--instagram:focus-visible { border-color: #e9bcd4; background: linear-gradient(45deg, #fbe4d1, #f8d9ea); color: var(--ink); }
.contact-form { min-width: 0; padding: .625rem; }
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; margin-bottom: .375rem; color: var(--ink); font: 600 .9375rem/1.4 var(--font-ui); }
.required { color: var(--blue); }
.form-field input, .form-field textarea { display: block; width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: .6875rem .875rem; background: white; color: var(--body); font: 400 1rem/1.5 var(--font-body); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.form-field input { min-height: 2.875rem; }
.form-field textarea { min-height: 8.125rem; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(43 108 176 / 14%); outline: none; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #909090; opacity: 1; }
.form-consent__link { display: block; margin-top: .375rem; font: 400 .9375rem/1.4 var(--font-ui); }
.form-consent__label { display: flex; align-items: flex-start; gap: .625rem; color: var(--ink); font: 400 .9375rem/1.5 var(--font-body); }
.form-consent__label input { flex: 0 0 1rem; width: 1rem; height: 1rem; margin: .125rem 0 0; accent-color: var(--blue); }
.contact-form__submit { margin-top: 1.375rem; text-align: center; }
.button--submit { border-radius: 999px; padding: .875rem 2.125rem; font-size: 1rem; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-notice { padding: .875rem 1rem; border: 1px solid var(--blue); background: #edf5fc; font-size: 1rem; }
.form-notice--error { border-color: #a32525; background: #fff5f5; }
.field-error { color: #a32525; font-size: .875rem; margin: .25rem 0 0; }
[aria-invalid="true"] { border-color: #a32525 !important; }
/* AJAX submit: on success the submit button gives way to the confirmation card; the fields stay. */
.contact-form--sent .contact-form__submit { display: none; }
.form-sent { margin-top: 1.375rem; padding: 1.5rem 1.5rem 1.625rem; border: 1px solid #a9d8bd; border-radius: 14px; background: #eaf9ef; }
.form-sent__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .875rem; color: var(--ink); font: 700 1.25rem/1.3 var(--font-heading); }
.form-sent__check { width: 1.25rem; height: 1.25rem; color: #178a43; }
.form-sent__message { margin: 0; font-size: 1.0625rem; }

/* Legal pages retain the source hierarchy, lists, table and breadcrumb. */
.page-document main { display: flow-root; background: var(--muted); }
/* Legal pages open on a white band (no grey block) with a shorter title area. */
.document-hero { padding: 5rem 0 0; min-height: 15.625rem; color: var(--ink); background: var(--white); }
.document-hero > .container { min-height: 10.625rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.document-hero h1 { color: var(--ink); line-height: 1; margin: 0; }
/* The header is transparent, so over the white legal band it switches to dark text/borders. */
.page-document .desktop-navigation a { color: var(--ink); }
.page-document .language-picker summary { color: var(--ink); border-color: rgb(0 0 0 / 22%); }
.page-document .language-picker summary:hover { background: rgb(0 0 0 / 6%); }
.page-document .language-picker[open] summary { background: rgb(0 0 0 / 10%); border-color: rgb(0 0 0 / 45%); }
.page-document .mobile-menu summary { color: var(--ink); border-color: rgb(0 0 0 / 22%); }
.breadcrumbs { color: var(--ink); font-size: .9031rem; margin: 1em 0; }
.breadcrumbs a { color: inherit; }
.document { width: calc(100% - 3rem); max-width: 77.625rem; margin: 0px auto 5rem; padding: 2rem; background: white; box-shadow: 0 15px 15px -10px rgb(0 0 0 / 5%); overflow-wrap: anywhere; }
.document h3 { margin: 1.5em 0 .75em; font-size: 1.875rem; }
.document h4 { margin: 1.4em 0 .75em; font-size: 1.625rem; }
.document > :first-child { margin-top: 0; }
.document ul, .document ol { margin: 0 0 1.5em; padding-left: 2em; }
.document li { margin-bottom: .5em; }
.document li > ul, .document li > ol { margin-top: .5em; }
.document__indent { margin-left: 3rem; }
.document__table { margin: 1.5em 0; max-width: 100%; overflow-x: auto; }
.document table { width: 100%; border-collapse: collapse; text-align: left; }
.document td, .document th { padding: .75rem; border: 1px solid #bdbdbd; vertical-align: top; min-width: 11.25rem; }
.document th { background: var(--muted); }
.document td strong:not(:first-child) { margin-left: .2em; }

/* Footer: three columns on the dark brand background, aligned with the home sections. */
.site-footer { background: var(--ink); color: white; }
.site-footer a { color: white; }
.site-footer__main { display: grid; grid-template-columns: 2.1fr 1fr 1.4fr; gap: 3.75rem; padding-top: 4.375rem; padding-bottom: 3.75rem; }
.site-footer__logo { display: inline-flex; align-items: center; margin-bottom: 1.625rem; padding: .875rem 1.125rem; border-radius: 12px; background: var(--white); box-shadow: 0 14px 34px rgb(0 0 0 / 25%); }
.site-footer__logo img { width: 13.75rem; }
.site-footer__tagline { margin: 0 0 .75rem; color: white; font: 700 1.125rem/1.4 var(--font-heading); }
.site-footer__trust { margin: 0; color: #b9c2cc; font-size: 1rem; }
.site-footer__links h2 { margin: .5rem 0 1.125rem; color: #7cc4ff; font: 600 .8125rem/1.4 var(--font-ui); letter-spacing: .154em; text-transform: uppercase; }
.site-footer__links nav { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.site-footer__links a { text-decoration: none; font-size: 1.03125rem; transition: color .2s, transform .2s; }
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: #7cc4ff; text-decoration: underline; text-underline-offset: .25rem; transform: translateX(2px); }
.site-footer__cta { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__cta h2 { margin: .5rem 0 1.125rem; color: #7cc4ff; font: 600 .8125rem/1.4 var(--font-ui); letter-spacing: .154em; text-transform: uppercase; }
.button--footer { margin-top: 1.5rem; border-radius: 999px; line-height: 1; }
.site-footer__phone { display: inline-flex; align-items: center; gap: .5625rem; margin-top: 0; color: white; font: 1.03125rem/1.4 var(--font-ui); text-decoration: none; transition: color .2s; }
/* Channel colour kept in the glyph, as in the contact pills (their phone icon uses the same token). */
.site-footer__phone .icon { width: 1.1875rem; height: 1.1875rem; color: var(--blue); }
.site-footer__phone:hover, .site-footer__phone:focus-visible { color: #7cc4ff; }
.site-footer__whatsapp { display: inline-flex; align-items: center; gap: .5625rem; margin-top: .75rem; color: white; font: 1.03125rem/1.4 var(--font-ui); text-decoration: none; transition: color .2s; }
/* Same optical correction as the contact pills: the WhatsApp glyph carries padding inside its 24x28 viewBox.
   On this dark background the icon can keep the corporate green (#25d366, ~8:1 against #222); the pills darkened it to #178a43 for their light wash. */
.site-footer__whatsapp .icon { width: 1.3125rem; height: 1.3125rem; color: #25d366; }
.site-footer__whatsapp:hover, .site-footer__whatsapp:focus-visible { color: #7cc4ff; }
.site-footer__mail { display: inline-flex; align-items: center; gap: .5625rem; margin-top: .75rem; color: white; font: 1.03125rem/1.4 var(--font-ui); text-decoration: none; transition: color .2s; }
.site-footer__mail .icon { width: 1.1875rem; height: 1.1875rem; }
.site-footer__mail:hover, .site-footer__mail:focus-visible { color: #7cc4ff; }
.site-footer__instagram { display: inline-flex; align-items: center; gap: .5625rem; margin-top: .75rem; color: white; font: 1.03125rem/1.4 var(--font-ui); text-decoration: none; transition: color .2s; }
.site-footer__instagram .icon { width: 1.1875rem; height: 1.1875rem; }
/* The Instagram glyph keeps the brand gradient baked into the sprite; only the label shifts on hover. */
.site-footer__instagram:hover, .site-footer__instagram:focus-visible { color: #7cc4ff; }
.site-footer__bottom { border-top: 1px solid #3b3b3b; }
.site-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.25rem; }
.site-footer__copyright { margin: 0; color: #b9c2cc; font-size: .9375rem; }
.site-footer__socials { display: flex; align-items: center; gap: .75rem; }
.back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 10; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 2px; color: white; background: #222; border: 1px solid #555; opacity: 0; visibility: hidden; }
.back-to-top.is-visible { opacity: .8; visibility: visible; }
.back-to-top:hover { opacity: 1; color: white; }

/* Floating WhatsApp shortcut on the home page, pinned to the bottom-right corner. */
.whatsapp-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 20; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: white; background: #25d366; box-shadow: 0 10px 24px rgb(0 0 0 / 22%); transition: transform .2s, box-shadow .2s, background-color .2s; }
.whatsapp-float:hover, .whatsapp-float:focus-visible { color: white; background: #1eb959; transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 30px rgb(0 0 0 / 26%); }
.whatsapp-float .icon { width: 1.875rem; height: 1.875rem; }
.whatsapp-float__label { position: absolute; right: calc(100% + .75rem); padding: .5rem .875rem; border-radius: 999px; background: #222; color: white; font: 600 .875rem/1.2 var(--font-ui); white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.whatsapp-float:hover .whatsapp-float__label, .whatsapp-float:focus-visible .whatsapp-float__label { opacity: 1; visibility: visible; transform: translateX(0); }
/* On the home page the back-to-top button mirrors the WhatsApp bubble: same size, circular, stacked above it. */
.page-home .back-to-top { bottom: 5.75rem; width: 3.5rem; height: 3.5rem; border: 0; border-radius: 50%; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: transform .2s, box-shadow .2s, opacity .2s; }
.page-home .back-to-top .icon { width: 1.5rem; height: 1.5rem; }
.page-home .back-to-top:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 30px rgb(0 0 0 / 26%); }

/* Compact header before the longer German labels could collide.
   Breakpoints are in em so they also scale with the browser's default font size. */
@media (max-width: 76.25em) {
  .desktop-navigation, .button--header, .header-socials { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { color: white; display: grid; place-items: center; padding: 0 .625rem; min-width: var(--control-height); min-height: var(--control-height); border: 1px solid rgb(255 255 255 / 40%); border-radius: 999px; }
  .mobile-menu summary .icon { width: 1.9375rem; height: 1.9375rem; }
  .mobile-menu__panel { position: absolute; inset: 5rem var(--gutter) auto; padding: 1.25rem; border-radius: 12px; background: #222; box-shadow: 0 15px 35px rgb(0 0 0 / 20%); }
  .mobile-menu__panel > a:not(.button) { display: block; padding: .875rem 0; border-bottom: 1px solid rgb(255 255 255 / 10%); color: white; text-decoration: none; }
  .mobile-menu__panel .button { margin-top: 1.25rem; }
  .mobile-menu__socials { display: flex; gap: 1.125rem; margin-top: 1.25rem; }
  .mobile-menu__socials a { color: white; padding: .3125rem; }
}
@media (max-width: 83.75em) and (min-width: 64.0625em) {
  .container--portraits { padding-inline: 1.875rem; gap: 2.5rem; }
  .site-footer__main { gap: 2.5rem; }
}
@media (max-width: 64em) {
  /* One uniform section rhythm on tablet and mobile: 2.25rem instead of 3.125rem. */
  .section { padding-block: 2.25rem; }
  .hero__content { padding-inline: 1.5rem; }
  .section-grid, .team__intro { max-width: 43.75rem; grid-template-columns: minmax(0, 1fr); }
  .section-intro { text-align: center; }
  .mission__intro, .service__intro, .contact__intro { margin: 0; }
  .mission__values-wrap { padding-top: 1rem; }
  .values-card { width: 100%; }
  .service__features { padding-top: 2.5rem; margin: 0; }
  .team__intro { padding: .625rem .625rem 3.75rem; text-align: center; }
  .team__description { margin: 2.1875rem 0 0; padding: 0; }
  .team__grid { gap: 2.5rem; padding-inline: 1.25rem; padding-bottom: 1.875rem; }
  .contact__actions { justify-content: center; }
  .contact-form { margin-top: 3.75rem; }
  .site-footer__main { gap: 1.875rem; grid-template-columns: 1.4fr 1fr 1fr; text-align: center; }
  .site-footer__links nav, .site-footer__cta { align-items: center; }
  .site-footer__bottom-inner { font-size: .9375rem; gap: 1rem; }
  .site-footer__socials { gap: .625rem; }
  /* Desktop-only control: touch devices scroll back with a gesture. */
  .back-to-top { display: none; }
}
@media (max-width: 47.9375em) {
  /* One override resizes every header control. */
  :root { --control-height: 2.625rem; }
  h1 { font-size: 2.375rem; }
  .container { padding-inline: var(--gutter-sm); }
  .container--wide { padding-inline: var(--gutter); }
  .site-header__inner { gap: .625rem; }
  .site-header__actions { gap: .1875rem; }
  .site-logo { flex-basis: 9.375rem; }
  .language-picker { margin-left: 0; }
  .language-picker summary { font-size: .875rem; padding: 0 .625rem; gap: .375rem; }
  .language-picker img { width: 1.3125rem; height: .875rem; }
  .hero__content { padding: 6.875rem 1.5625rem 4.375rem; }
  .hero__description { font-size: 1.125rem; line-height: 1.6; }
  .hero { margin-bottom: 1.875rem; }
  .eyebrow { font-size: .8125rem; }
  .mission__intro { padding: .625rem .625rem 0; margin-bottom: 2.5rem; }
  .mission__values-wrap { padding: .625rem 0 0; }
  .values-card { padding: 1.875rem; }
  .service__intro { padding: .625rem; }
  .service__features { padding: 1.25rem .625rem 0; gap: 1.25rem .75rem; }
  .feature { padding: 1.5rem 1rem; }
  .feature__icon { right: -.5rem; width: 4.25rem; height: 4.25rem; }
  .feature h3 { font-size: 1.16875rem; }
  .team__intro { padding-top: 0; padding-bottom: 2.5rem; }
  .team__intro > div { padding-inline: .625rem; }
  .team__intro .eyebrow { margin-bottom: 1.71875rem; }
  .team__description { padding-inline: .625rem; }
  .team__grid { grid-template-columns: 1fr; gap: 4.0625rem; padding: 0 1.25rem .625rem; }
  .doctor__caption { bottom: -1.875rem; }
  .contact__intro { padding: 0; }
  .contact__intro h2 { margin-bottom: 2.40625rem; }
  .contact__actions { margin-top: 1.875rem; }
  .contact-form { padding: 0; margin-top: 6.25rem; }
  .form-field input, .form-field textarea { font-size: 1rem; }
  .form-field input { min-height: 2.75rem; }
  .form-field textarea { min-height: 8.125rem; }
  .site-footer__main { grid-template-columns: 1fr; gap: 2.8125rem; padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .site-footer__logo { margin-bottom: 1.5rem; }
  .site-footer__links h2 { margin-top: 0; }
  .site-footer__cta h2 { margin-bottom: 1.5rem; }
  .site-footer__bottom-inner { flex-direction: column; justify-content: center; text-align: center; min-height: 7.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; gap: .75rem; }
  .site-footer__socials { flex-wrap: wrap; justify-content: center; gap: .5rem .75rem; }
  .document-hero { padding-top: 5rem; padding-bottom: 0; }
  .document-hero h1 { font-size: 2.375rem; overflow-wrap: anywhere; }
  .document { width: calc(100% - 1rem); margin-block: 0px 2rem; padding: 0px 1.5rem 1.5rem; }
  .document h3 { font-size: 1.625rem; }
  .document h4 { font-size: 1.375rem; }
  .document__indent { margin-left: 1.5rem; }
  .document td, .document th { min-width: 9.375rem; }
  .whatsapp-float { width: 3.25rem; height: 3.25rem; bottom: 1rem; right: 1rem; }
  .whatsapp-float .icon { width: 1.6875rem; height: 1.6875rem; }
  .whatsapp-float__label { display: none; }
}
@media (max-width: 23.375em) {
  .site-header__inner { padding-inline: .9375rem; }
  .site-logo, .site-logo img { flex-basis: 7.875rem; width: 7.875rem; }
  .language-picker summary { font-size: .8125rem; gap: .25rem; }
  .mobile-menu summary { padding-inline: .1875rem; min-width: 2.125rem; }
  .hero__content { padding-inline: 1.25rem; }
  .values-card { padding: 1.5625rem; }
  .feature h3 { font-size: 1rem; }
  html:lang(de) .feature h3 { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .site-footer, .back-to-top, .whatsapp-float, .contact-form, .skip-link, .hero__media, .hero::after { display: none; }
  .hero, .document-hero { background: white; color: black; }
  .hero h1, .document-hero h1 { color: black; }
  .hero__content { padding-block: 1.875rem; }
  .document-hero { padding-block: 1.25rem; min-height: 0; }
  .doctor__photo, .values-card, .feature { box-shadow: none; }
}