/* Contact v88 review refinements.
   These are page-owned refinements layered after contact.css while the page is
   under review. Shared Header presentation remains untouched. */

body[data-page="contact"]{
  --contact-tooltip-padding:.48rem .62rem;
  --contact-tooltip-border:1px solid color-mix(in srgb,var(--hair) 84%,transparent);
  --contact-tooltip-surface:color-mix(in srgb,var(--bg) 97%,var(--ink) 3%);
  --contact-tooltip-color:var(--copy);
  --contact-tooltip-shadow:0 3px 12px color-mix(in srgb,var(--ink) 10%,transparent);
  --contact-tooltip-font-size:.72rem;
  --contact-tooltip-line-height:1.35;
  --contact-action-width:4.5rem;
  --contact-action-gap:1rem;
  --contact-action-rail:calc(var(--contact-action-width) + var(--contact-action-gap));
}

/* Keep action guidance on one Contact-owned visual grammar. State semantics
   remain controlled by data-tooltip-when in the relevant interaction module. */
body[data-page="contact"] .contact-action[data-tooltip]::before{
  padding:var(--contact-tooltip-padding);
  border:var(--contact-tooltip-border);
  background:var(--contact-tooltip-surface);
  color:var(--contact-tooltip-color);
  box-shadow:var(--contact-tooltip-shadow);
  font-size:var(--contact-tooltip-font-size);
  line-height:var(--contact-tooltip-line-height);
}
body[data-page="contact"] .mail-action-row:is(:hover,:has(:focus-visible)) .mail-action[data-tooltip-when="always"]:is(:hover,:focus-visible)::before{
  opacity:1;
  visibility:visible;
  transform:translate(0,50%);
  transition-delay:0s;
}

/* Approved Contact-only optical weight: +8 relative to the shared headline
   curve. Legal-section headings keep the shared headline weight unchanged. */
body[data-page="contact"] #contactHeadline{
  font-weight:calc(var(--headline-weight) + 8);
}

/* Match the established CHARUS kicker weight/size while retaining Contact's
   page-owned margin and the shared .23em/.18em tracking behavior. */
body[data-page="contact"] .kicker{
  font-size:.77rem;
  font-weight:700;
}

/* Preserve the v87 equal rhythm between the three Contact channels. */
body[data-page="contact"] .contact-stack{
  gap:1.9rem;
}

/* Reserve the action rail inside Contact's right shared-grid column. The rail
   width exactly matches the pill width plus its authored gap, so each pill's
   left edge lands on the same right-column content axis used by Imprint and
   Privacy below while the actual Contact controls begin one rail-width later. */
body[data-page="contact"] .hero-contact{
  padding-left:var(--contact-action-rail);
}
body[data-page="contact"] .contact-action{
  width:var(--contact-action-width);
  left:calc(-1 * var(--contact-action-rail));
}

/* Approved reduced mail reveal: no envelope, no decorative underline. The
   address stays visually subordinate while preserving the v87 reveal action.
   The 3px optical offset is intentionally paint/layout-local and does not alter
   the equal channel spacing. */
body[data-page="contact"] .hero-email-target{
  min-height:1.7rem;
}
body[data-page="contact"] .hero-email-reveal{
  min-height:1.7rem;
  position:relative;
  top:3px;
  gap:0;
  padding:0;
  border:0;
  color:color-mix(in srgb,var(--copy) 78%,var(--muted) 22%);
  font-size:1.08rem;
  font-weight:var(--body-copy-weight);
  letter-spacing:var(--body-copy-tracking);
  line-height:1.2;
  opacity:.86;
  transition:color .18s ease,opacity .18s ease;
}
body[data-page="contact"] .hero-email-domain{
  margin-left:0;
}
body[data-page="contact"] .hero-email-reveal:is(:hover,:focus-visible){
  color:var(--copy);
  border-bottom-color:transparent;
  opacity:1;
  transform:none;
}
body[data-page="contact"] .hero-email-reveal:active{
  transform:none;
}
body[data-page="contact"] .hero-email-reveal[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:20;
  left:50%;
  bottom:calc(100% + .5rem);
  width:max-content;
  max-width:min(18rem,70vw);
  padding:var(--contact-tooltip-padding);
  border:var(--contact-tooltip-border);
  background:var(--contact-tooltip-surface);
  color:var(--contact-tooltip-color);
  box-shadow:var(--contact-tooltip-shadow);
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:var(--contact-tooltip-font-size);
  font-weight:400;
  line-height:var(--contact-tooltip-line-height);
  letter-spacing:0;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
body[data-page="contact"] .hero-email-reveal[data-tooltip]:is(:hover,:focus-visible)::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
  transition-delay:0s;
}

/* Pointer hover and genuine keyboard focus own the active Mail action state.
   A click may leave DOM focus inside the row, but non-visible pointer focus is
   not itself a reason to paint Mail as active after the pointer leaves. */
body[data-page="contact"] .mail-action-row:is(:hover,:has(:focus-visible)) .mail-action{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
body[data-page="contact"] .mail-action-row:focus-within:not(:hover):not(:has(:focus-visible)) .mail-action{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Once the visitor has explicitly revealed the persistent address, keep its
   Mail affordance present as a real but visually inactive control. Hover and
   :focus-visible remain the only active visual owners; residual pointer focus
   does not inherit the active presentation. */
body[data-page="contact"] .mail-action-row.is-address-revealed:not(:hover):not(:has(:focus-visible)) .mail-action{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  color:color-mix(in srgb,var(--ink) 34%,transparent);
  filter:saturate(.7);
  transition-delay:0s;
}
body[data-page="contact"] .mail-action-row.is-address-revealed:not(:hover):not(:has(:focus-visible)) .mail-action::after{
  border-color:color-mix(in srgb,var(--ink) 14%,transparent);
  background:color-mix(in srgb,var(--bg) 98%,var(--ink) 2%);
}

/* Extend the empty Message invitation to Feedback without giving the secondary
   term equal visual weight. The native placeholder remains present for the
   textarea state/fallback but is visually replaced by this split prompt so the
   secondary phrase can be quieter. */
body[data-page="contact"] .message-shell{
  position:relative;
}
body[data-page="contact"] .message-area::placeholder{
  color:transparent;
  opacity:0;
}
body[data-page="contact"] .message-placeholder{
  position:absolute;
  z-index:1;
  left:1.05rem;
  top:1rem;
  color:#9a9791;
  font:inherit;
  font-size:.875rem;
  line-height:1.55;
  pointer-events:none;
  transition:opacity .12s ease,visibility 0s linear 0s;
}
body[data-page="contact"] .message-placeholder--de{
  display:none;
}
html[lang="de"] body[data-page="contact"] .message-placeholder--en{
  display:none;
}
html[lang="de"] body[data-page="contact"] .message-placeholder--de{
  display:block;
}
body[data-page="contact"] .message-placeholder__separator{
  opacity:.34;
}
body[data-page="contact"] .message-placeholder__secondary{
  opacity:.56;
}
body[data-page="contact"] .message-area:focus ~ .message-placeholder,
body[data-page="contact"] .message-area:not(:placeholder-shown) ~ .message-placeholder{
  opacity:0;
  visibility:hidden;
  transition-delay:0s,.12s;
}

/* Restore the v87 scrollbar outcome while leaving native vertical textarea
   resizing browser-owned. The platform scrollbar is hidden in every engine;
   contact.js supplies the small overlay thumb and keeps it in sync with real
   textarea scrolling and resizing. */
body[data-page="contact"] .message-area{
  overflow-y:auto;
  padding-right:1.65rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body[data-page="contact"] .message-area::-webkit-scrollbar{
  width:0;
  height:0;
}
body[data-page="contact"] .message-scrollbar{
  position:absolute;
  z-index:3;
  top:.35rem;
  right:.22rem;
  bottom:.92rem;
  width:.7rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility 0s linear .16s;
}
body[data-page="contact"] .message-shell.has-message-overflow:is(:hover,:focus-within) .message-scrollbar,
body[data-page="contact"] .message-scrollbar.is-dragging{
  opacity:.82;
  visibility:visible;
  transition-delay:0s;
}
body[data-page="contact"] .message-scrollbar-thumb{
  position:absolute;
  top:0;
  right:.2rem;
  width:3px;
  min-height:1.7rem;
  border-radius:999px;
  background:rgba(23,25,27,.46);
  cursor:grab;
  pointer-events:auto;
  transform:translateY(0);
  transition:background .16s ease;
  touch-action:none;
}
body[data-page="contact"] .message-scrollbar-thumb:hover,
body[data-page="contact"] .message-scrollbar.is-dragging .message-scrollbar-thumb{
  background:rgba(23,25,27,.68);
}
body[data-page="contact"] .message-scrollbar.is-dragging .message-scrollbar-thumb{
  cursor:grabbing;
}

/* Restore the restrained v87 form-focus language. Message keeps a quiet
   ink outline rather than inheriting the stronger orange action focus ring. */
body[data-page="contact"] .contact-page .message-area:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:0;
}

/* The current Contact-wide focus rule is stronger than the historic v87 input
   rule. Cancel only its external outline so the calendar email field retains
   v87's single integrated focus border/inset treatment. */
body[data-page="contact"] .contact-page .booking-email-input:focus-visible{
  outline:0;
  outline-offset:0;
}

/* Exchange/change proximity response (#134). The existing `current` value from
   contact.js is the only reveal curve. This layer only paints otherwise-hidden
   actions; it never enables them or replaces their real state controller. */
@media(pointer:fine){
  body[data-page="contact"] .contact-hero.has-change-action-proximity .contact-action.is-change-response:not(.mail-action):not(.is-visible),
  body[data-page="contact"] .contact-hero.has-change-action-proximity .mail-action-row:not(.is-address-revealed):not(:hover):not(:has(:focus-visible)) .mail-action.is-change-response{
    opacity:var(--change-action-proximity,0);
    visibility:visible;
    pointer-events:none;
    transition-property:transform,color,filter,visibility;
    transition-delay:0s;
  }
  /* A proximity-only Mail reveal is deliberately painted with the same muted
     inactive grammar as disabled Send/Book. A persistent revealed-address
     state is excluded above and remains a usable resting Mail control. */
  body[data-page="contact"] .contact-hero.has-change-action-proximity .mail-action-row:not(.is-address-revealed):not(:hover):not(:has(:focus-visible)) .mail-action.is-change-response{
    color:color-mix(in srgb,var(--ink) 34%,transparent);
    filter:saturate(.7);
  }
  body[data-page="contact"] .contact-hero.has-change-action-proximity .mail-action-row:not(.is-address-revealed):not(:hover):not(:has(:focus-visible)) .mail-action.is-change-response::after{
    border-color:color-mix(in srgb,var(--ink) 14%,transparent);
    background:color-mix(in srgb,var(--bg) 98%,var(--ink) 2%);
  }
}

@media(max-width:620px){
  body[data-page="contact"]{
    --contact-action-width:4rem;
    --contact-action-gap:.8rem;
  }
}

/* At genuinely narrow widths, a side rail would consume too much of the one-
   column measure. Move all three actions into the existing flow instead. This
   also removes the historical Mail-only negative offset that could clip left. */
@media(max-width:480px){
  body[data-page="contact"] .hero-contact{
    padding-left:0;
  }
  body[data-page="contact"] .contact-action,
  body[data-page="contact"] .mail-action-row .mail-action{
    position:relative;
    left:auto;
    top:auto;
    margin:0 0 .45rem;
    transform:none;
  }
  body[data-page="contact"] .contact-action:hover,
  body[data-page="contact"] .contact-action[disabled]:hover,
  body[data-page="contact"] .mail-action-row .mail-action:hover{
    transform:translateY(-.5px);
  }
  body[data-page="contact"] .contact-action:active,
  body[data-page="contact"] .mail-action-row .mail-action:active{
    transform:scale(.98);
  }
}