/* Newsletter-Formular: weisse Eckwinkel der Textfelder per CSS statt
   Image-Elementen, plus Fokus-Animation.
   Aufbau: zwei Ebenen auf dem Wrapper. ::before zeichnet die vier weissen
   Ecken (16 px, 1 px stark) mit acht Verlaeufen. ::after ist die gleiche
   Geometrie in Gelb, im Ruhezustand unsichtbar. Bei Fokus im Feld
   (:focus-within) wird ::after sichtbar und pro Ecke waechst EIN Schenkel im
   Uhrzeigersinn ueber die ganze Kante: oben links nach rechts, oben rechts
   nach unten, unten rechts nach links, unten links nach oben. Die vier
   Linien laufen gleichzeitig und ergeben zusammen die komplette gelbe
   Border. Die gelbe Border des Inputs aus Webflow schaltet erst danach
   (Delay), sonst waere die Animation nicht zu sehen.
   Verlaufsreihenfolge (Position / Groesse): TL waagerecht, TL senkrecht,
   TR waagerecht, TR senkrecht, BL waagerecht, BL senkrecht, BR waagerecht,
   BR senkrecht. */

.text-field-wrapper::before,
.text-field-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --l: 16px;       /* Eckschenkel */
  --tl-h: 16px;    /* oben links, waechst nach rechts */
  --tr-v: 16px;    /* oben rechts, waechst nach unten */
  --br-h: 16px;    /* unten rechts, waechst nach links */
  --bl-v: 16px;    /* unten links, waechst nach oben */
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-position:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right;
  background-size:
    var(--tl-h) 1px, 1px var(--l),
    var(--l) 1px,    1px var(--tr-v),
    var(--l) 1px,    1px var(--bl-v),
    var(--br-h) 1px, 1px var(--l);
  background-repeat: no-repeat;
}

.text-field-wrapper::before {
  z-index: 1;
  --c: #fff;
}

.text-field-wrapper::after {
  z-index: 2;
  --c: #ffcf03;
  opacity: 0;
  transition:
    background-size 450ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0s linear 450ms; /* erst ausblenden, wenn zurueckgelaufen */
}

.text-field-wrapper:focus-within::after {
  opacity: 1;
  --tl-h: 100%;
  --tr-v: 100%;
  --br-h: 100%;
  --bl-v: 100%;
  transition:
    background-size 450ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0s;
}

/* Input: gelbe Border aus Webflow erst nach der Eck-Animation, Tinting sofort
   und weich. Beim Verlassen springt die Border sofort zurueck auf Grau. */
.text-field {
  transition: border-color 0s, background-color 250ms ease;
}

.text-field:focus {
  transition: border-color 0s linear 450ms, background-color 250ms ease;
}

/* Submit-Button: solange das Formular nicht vollstaendig ist (Pflichtfelder
   leer, E-Mail ungueltig, Checkboxen nicht gesetzt), wirkt der Button inaktiv.
   Rein visuell ueber :invalid am Formular - er bleibt klickbar, damit die
   Browser-Validierung beim Klick die Meldung am betroffenen Feld zeigt. */
.register-form-inner .primary {
  transition: opacity 200ms ease;
}

.register-form-inner:invalid .primary {
  opacity: 0.4;
}