/* ==========================================================================
   Kontakt · Kopf (kontakt.html)
   Kurz und direkt, nach rosarot.ch: ein riesiger Amber Kreis (Telefon) und ein
   Navy Quadrat (Mail) als Kompositionsfläche. Beides ist der Link selbst.
   Bewegung nur beim Laden und leise beim Scrollen, nur ohne reduzierte Bewegung.
   ========================================================================== */
.kk {
  position: relative; overflow: hidden; overflow: clip;
  background: var(--paper); color: var(--navy-900);
  padding: calc(var(--nav-h) + clamp(2rem, 1rem + 3vw, 4rem)) 0 clamp(3rem, 2rem + 3vw, 5rem);
}
.kk__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto;
  grid-template-areas: "kopf buehne" "rest buehne"; column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center;
}
.kk__kopf { grid-area: kopf; align-self: end; }
.kk__rest { grid-area: rest; align-self: start; }
.kk__buehne { grid-area: buehne; }
.kk__text h1 { font-size: clamp(2.4rem, 1.7rem + 3.2vw, 4.5rem); max-width: 12ch; }
.kk__lead { margin-top: 1.5rem; font-size: var(--fs-lg); color: var(--slate-600); max-width: 34ch; }
.kk__text .btn-row { margin-top: 2rem; }

/* Bühne: Kreis oben rechts, Quadrat unten links, leicht verdreht */
.kk__buehne { position: relative; aspect-ratio: 1 / .96; width: 100%; max-width: 680px; justify-self: end; }
.kk__kreis, .kk__quadrat {
  position: absolute; display: flex; flex-direction: column; justify-content: center; text-decoration: none;
  transition: scale .5s var(--ease);
}
.kk__kreis {
  right: 0; top: 0; width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: var(--amber-500); color: var(--navy-950);
  align-items: center; text-align: center; padding: 0 10% 6% 14%;
}
.kk__quadrat {
  left: 0; bottom: 0; width: 47%; aspect-ratio: 1; border-radius: 24px; rotate: -6deg;
  background: var(--navy-900); color: #fff; padding: 9%; justify-content: flex-end;
}
.kk__kreis:hover, .kk__kreis:focus-visible { scale: 1.03; }
.kk__quadrat:hover, .kk__quadrat:focus-visible { scale: 1.04; }
.kk__kreis:focus-visible, .kk__quadrat:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 6px; }

.kk__label { font: 700 var(--fs-xs)/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.kk__kreis .kk__label { color: var(--navy-900); }
.kk__quadrat .kk__label { color: var(--amber-400); margin-bottom: auto; }
.kk__nummer { display: block; margin-top: .9rem; font: 800 clamp(2.2rem, 1rem + 3.4vw, 4.4rem)/1 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; }
.kk__mail { display: block; font: 800 clamp(1.5rem, .8rem + 1.6vw, 2.4rem)/1.05 var(--font-sans); }
.kk__mail span { display: block; }
.kk__mail span + span { font-style: normal; color: var(--amber-400); }
.kk__klein { display: block; margin-top: 1rem; font: 500 var(--fs-sm)/1.45 var(--font-sans); opacity: .85; max-width: 28ch; }
.kk__quadrat .kk__klein { margin-top: .8rem; color: #cfcfcf; max-width: none; }

/* Echo: dünner Ring neben dem Kreis, ein Amber Punkt wie die Nadel */
.kk__ring {
  position: absolute; right: 6%; top: 7%; width: 74%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(10, 10, 10,.28); z-index: -1; pointer-events: none;
}
.kk__buehne { isolation: isolate; }
.kk__punkt { position: absolute; left: 7%; bottom: 52%; width: 4.5%; aspect-ratio: 1; border-radius: 50%; background: var(--amber-500); pointer-events: none; }
.kk__witz {
  position: absolute; right: 0; bottom: 2%; width: 44%; margin: 0;
  font: 800 clamp(1.05rem, .8rem + .6vw, 1.4rem)/1.2 var(--font-sans); color: var(--slate-600); text-align: right;
}
.kk__witz em { display: block; color: var(--accent-display); }

/* Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .kk__kreis { animation: kkKreis 1.1s cubic-bezier(.34, 1.4, .64, 1) .1s backwards; }
  .kk__quadrat { animation: kkQuadrat 1s var(--ease) .35s backwards; }
  .kk__ring { animation: kkRing 1.4s var(--ease) .25s backwards; }
  .kk__punkt { animation: kkPunkt .9s cubic-bezier(.34, 1.8, .64, 1) .8s backwards; }
  .kk__witz, .kk__text > * { animation: kkSteig .9s var(--ease) backwards; }
  .kk__kopf > :nth-child(2) { animation-delay: .05s; }
  .kk__kopf > :nth-child(3) { animation-delay: .1s; }
  .kk__rest > :nth-child(1) { animation-delay: .18s; }
  .kk__rest > :nth-child(2) { animation-delay: .26s; }
  .kk__witz { animation-delay: 1s; }
  @keyframes kkKreis { from { scale: .35; opacity: 0; } }
  @keyframes kkQuadrat { from { translate: -40% 20%; rotate: -24deg; opacity: 0; } }
  @keyframes kkRing { from { scale: .8; opacity: 0; } }
  @keyframes kkPunkt { from { scale: 0; translate: 0 -260%; } }
  @keyframes kkSteig { from { translate: 0 24px; opacity: 0; } }

  /* Leise beim Scrollen: Kreis steigt, Quadrat dreht weiter (wo der Browser es kann) */
  @supports (animation-timeline: scroll()) {
    .kk__ring { animation: kkRing 1.4s var(--ease) .25s backwards, kkRingScroll linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 80vh; }
    .kk__kreis { animation: kkKreis 1.1s cubic-bezier(.34, 1.4, .64, 1) .1s backwards, kkKreisScroll linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 80vh; }
    @keyframes kkKreisScroll { to { translate: 0 -12%; } }
    @keyframes kkRingScroll { to { translate: 8% -2%; } }
  }
}

@media (max-width: 860px) {
  .kk { padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 3rem; }
  .kk__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "buehne" "rest"; row-gap: 1.75rem; }
  .kk__kopf .breadcrumb { margin-bottom: 1rem; }
  .kk__kopf .eyebrow { margin-bottom: .9rem; }
  .kk__text h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 3rem); max-width: 13ch; }
  .kk__lead { margin-top: 0; font-size: 1.0625rem; }
  .kk__buehne { justify-self: stretch; max-width: 460px; aspect-ratio: 1 / 1.18; margin-inline: auto; }
  .kk__kreis { width: 92%; right: -6%; padding: 0 12% 22% 14%; }
  .kk__ring { width: 92%; right: 0; top: 4%; }
  .kk__quadrat { width: 58%; bottom: 4%; border-radius: 0; padding: 8%; }
  .kk__nummer { font-size: clamp(2.1rem, 1rem + 5vw, 3rem); margin-top: .6rem; }
  .kk__mail { font-size: clamp(1.3rem, .7rem + 2.8vw, 1.9rem); }
  .kk__klein { font-size: .8125rem; margin-top: .6rem; }
  .kk__punkt { left: 4%; bottom: 60%; width: 5.5%; }
  .kk__witz { right: 0; bottom: 6%; width: 36%; font-size: 1rem; }
}