/* The selected portrait opening hands its space to two real contact links. */
.k-ready .k-direkt .k-story { height: calc(var(--stage-h) * 2.2); }
.k-direkt .k-end { top: 15%; width: 88vw; }
.k-direkt .k-end h2 { font-size: clamp(3.2rem, 7vw, 7rem); }
.k-direkt .k-end p { max-width: 48ch; margin-bottom: 0; }
.k-contact-symbols {
  position: absolute;
  z-index: 6;
  left: 15%;
  right: 15%;
  top: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
}
.k-symbol-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  min-width: 0;
  padding: 10px 0;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.k-symbol-art {
  display: block;
  width: clamp(100px, min(22vw, 28svh), 250px);
  height: clamp(100px, min(22vw, 28svh), 250px);
  flex: none;
  transform-origin: center;
}
.k-symbol-art svg { display: block; width: 100%; height: 100%; }
.k-symbol-wa .k-symbol-art { color: var(--brass); }
.k-symbol-label {
  font: 12px/1.4 var(--f-mono);
  letter-spacing: .035em;
  white-space: nowrap;
}
.k-symbol-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 10px; }
.k-chat-anchor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.k-chat-bubble {
  position: relative;
  display: block;
  flex: none;
  width: max-content;
  max-width: clamp(150px, 21vw, 280px);
  padding: 12px 16px 14px;
  border-radius: 8px 8px 8px 0;
  background: #d9fdd3;
  color: #111b21;
  box-shadow: 0 1px 1px #0004;
  font: 400 clamp(14px, 1.25vw, 18px)/1.35 var(--f-display);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0) scale(.96);
  transform-origin: 28% 100%;
  transition: opacity 120ms ease-out, transform 160ms cubic-bezier(.23, 1, .32, 1), visibility 120ms;
}
.k-chat-bubble::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 12px;
  height: 12px;
  background: #d9fdd3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* Arcs share the earpiece face midpoint (8, 5.5), normal to its slanted edge. */
.k-phone-waves {
  color: var(--brass);
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.k-symbol-wa:focus-visible:not([data-hover-dismissed]) .k-chat-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}
.k-symbol-phone:focus-visible .k-phone-waves { opacity: 1; }
.k-ready .k-contact-symbols { opacity: 0; pointer-events: none; }
.k-ready .k-symbol-label { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .k-symbol-link:hover .k-symbol-art { color: #f39a55; }
  .k-symbol-link:hover .k-symbol-label { color: var(--brass); }
  .k-symbol-wa:hover:not([data-hover-dismissed]) .k-chat-bubble {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
  }
  .k-symbol-phone:hover .k-phone-waves { opacity: 1; }
  .k-symbol-phone:hover .k-phone-waves path {
    animation: k-speaking-wave 1.1s ease-in-out infinite;
  }
  .k-symbol-phone:hover .k-phone-waves path:nth-child(2) { animation-delay: 90ms; }
  .k-symbol-phone:hover .k-phone-waves path:nth-child(3) { animation-delay: 180ms; }
  .k-symbol-phone:hover .k-phone-waves path:nth-child(4) { animation-delay: 270ms; }
}
@keyframes k-speaking-wave {
  0%, 100% { opacity: .24; }
  38% { opacity: 1; }
  76% { opacity: .48; }
}
@media (max-width: 800px) {
  .k-direkt .k-end { top: 18%; width: 88vw; }
  .k-direkt .k-end h2 { font-size: clamp(2.6rem, 12vw, 5rem); }
  .k-direkt .k-end p { font-size: 1.15rem; max-width: 30ch; margin-top: 22px; }
  .k-contact-symbols { left: 6%; right: 6%; top: 57%; gap: 10vw; }
  .k-symbol-art { width: clamp(90px, 32vw, 160px); height: clamp(90px, 32vw, 160px); }
  .k-symbol-link { gap: 18px; }
  .k-symbol-label { font-size: 11px; }
}
@media (max-width: 360px) {
  .k-direkt .k-end p { font-size: 1.05rem; margin-top: 18px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .contact-lab.k-direkt { --stage-h: 100svh; }
  .k-direkt .k-heading { top: 19%; font-size: 6vw; max-width: 52vw; }
  .k-direkt .k-end { top: 18%; width: 88vw; }
  .k-direkt .k-end h2 { font-size: clamp(2.25rem, 5.2vw, 3.1rem); }
  .k-direkt .k-end p { font-size: 1rem; margin-top: 12px; max-width: 62ch; }
  .k-contact-symbols { left: 15%; right: 15%; top: 57%; gap: 10vw; }
  .k-symbol-art { width: min(17vw, 22svh); height: min(17vw, 22svh); }
  .k-symbol-link { gap: 12px; }
  .k-symbol-label { font-size: 10px; }
  .k-chat-anchor {
    left: calc(50% + 11svh + 10px);
    right: auto;
    top: 0;
    bottom: 0;
    width: min(24vw, 220px);
    align-items: center;
  }
  .k-chat-bubble { max-width: 100%; padding: 9px 12px; font-size: 13px; }
}
html:not(.k-ready) .k-direkt .k-contact-symbols {
  position: static;
  width: min(100%, 600px);
  margin: 65px 0 0;
  opacity: 1;
  pointer-events: auto;
}
html:not(.k-ready) .k-direkt .k-symbol-label { opacity: 1; }
html:not(.k-ready) .k-direkt .k-end { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .k-chat-bubble, .k-phone-waves { transform: none; transition: none; }
  .k-symbol-phone:hover .k-phone-waves path { animation: none; opacity: 1; }
}