/* ==========================================================================
   Guet gfunde · Kontakt (kontakt.html), technische Schicht
   - Live Anzeige im Kreis: LED, «jetzt erreichbar» oder «wieder erreichbar ab …», Uhrzeit Zürich
   - Ursache und Wirkung beim Scrollen: das Quadrat richtet sich auf, der Amber Punkt landet
     als Nachricht auf seiner Ecke. Keine Mauseffekte.
   - Formular: nur im Aussehen behutsam (Feldnummern, Zuschnittmarken). Felder und Funktion unverändert.
   Hausbewegung cubic-bezier(.2,.7,.2,1).
   ========================================================================== */

/* Live Anzeige */
.kk__status { display: inline-flex; align-items: center; gap: .5em; margin-bottom: .9rem; padding: .38rem .7rem; border-radius: 0;
  background: rgba(5, 5, 5,.1); font: 600 .7rem/1.2 var(--ws-mono); letter-spacing: .04em; color: var(--navy-950); max-width: 100%; }
.kk__status[hidden], .kk__uhr[hidden] { display: none; }
.kk__led { flex: none; width: .62em; height: .62em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy-900); }
.kk__status.is-offen .kk__led { background: #3fbf64; box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 10px #3fbf64; }
.kk__uhr { display: block; margin-top: .85rem; font: 500 .7rem/1 var(--ws-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(5, 5, 5,.7); }
.kk__uhr b { font-weight: 600; letter-spacing: .06em; color: var(--navy-950); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .kk__status.is-offen .kk__led { animation: kkLed 2.4s var(--ws-haus) infinite; }
  @keyframes kkLed { 50% { box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 2px #3fbf64; } }
}

/* Ursache und Wirkung, gesteuert durch Scrollen (keine Mauseffekte):
   Beim Scrollen richtet sich das Quadrat auf, und der Amber Punkt landet als Nachricht auf seiner Ecke. */
.kk__punkt { display: grid; place-items: center; --px: 800%; --py: 125%; }
.kk__punkt::after { content: "1"; font: 700 .62rem/1 var(--ws-mono); color: var(--navy-950); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .kk__quadrat { animation: kkQuadratAuf linear both, kkQuadrat 1s var(--ease) .35s backwards; animation-timeline: scroll(root), auto; animation-range: 0 28vh, normal; }
    .kk__punkt { animation: kkPunktLandet linear both, kkPunkt .9s cubic-bezier(.34, 1.8, .64, 1) .8s backwards; animation-timeline: scroll(root), auto; animation-range: 2vh 30vh, normal; }
    .kk__punkt::after { animation: kkEins linear both; animation-timeline: scroll(root); animation-range: 26vh 32vh; }
    @keyframes kkQuadratAuf { to { rotate: 0deg; } }
    @keyframes kkPunktLandet { 0% { translate: 0 0; } 100% { translate: var(--px) var(--py); } }
    @keyframes kkEins { to { opacity: 1; } }
  }
}

@media (max-width: 860px) {
  .kk__status { margin-bottom: .55rem; padding: .3rem .6rem; font-size: .62rem; max-width: 21em; text-align: left; }
  .kk__uhr { order: -1; margin: 0 0 .5rem; font-size: .6rem; }
  .kk__punkt { --px: 900%; --py: 190%; }
  .kk__punkt::after { font-size: .55rem; }
}

/* Formular: Feldnummern in Maschinenschrift, Zuschnittmarken an den Ecken */
#formular .form { counter-reset: feld; }
#formular .form .field > label::before {
  counter-increment: feld; content: counter(feld, decimal-leading-zero) / "";
  display: inline-block; margin-right: .6em; font: 600 .68rem/1 var(--ws-mono); letter-spacing: .06em; color: var(--slate-500);
  transition: color .3s var(--ws-haus);
}
#formular .form .field:focus-within > label::before { color: var(--accent-text); }
#formular .form.card {
  --m: rgba(227, 6, 19,.5);
  background-image:
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: 10px 10px, 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
}
.kk__status > span { min-width: 0; white-space: normal; }
@media (max-width: 860px) {
  /* Mobil: Platz für Anzeige und Uhr, der Inhalt rückt etwas höher, weg vom Quadrat */
  .kk__kreis { padding-bottom: 31%; }
}