/* ==========================================================================
   Kontakt — die eigene Seite hinter /kontakt/ (js/components/contact.js).

   Erfindet so wenig wie die Datenschutzseite. Der Anfragebereich bringt sein
   ganzes Aussehen aus styles/sections/enquiry.css mit; diese Datei regelt nur
   zwei Dinge, die es allein hier gibt: dass die Seite unter dem festen Kopf
   beginnt, und dass hinter allem Rosen liegen.
   ========================================================================== */

.contact {
  position: relative;
  /* Der Bezug für die Rosen — sie liegen prozentual in dieser Fläche. */
  isolation: isolate;
}

/*
   Der Kopf ist fest, und diese Seite hat keinen Hero, der unter ihm anfangen
   dürfte. Die erste Zeile muss ihn also selbst freistellen — dasselbe Polster
   wie auf der Datenschutzseite, damit die zwei schlichten Seiten oben gleich
   beginnen.
*/
.page-contact .contact .enquiry {
  padding-block-start: calc(var(--section-y) + 3.5rem);
}

/* --------------------------------------------------------------- Rosen -- */

.contact__roses {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Nichts hier fängt einen Klick ab, der dem Formular gilt. */
  pointer-events: none;
  /*
     Eine Rose am unteren Rand ragt sonst in den Fuß und eine am oberen unter
     den Kopf. `clip` und nicht `hidden`: es soll beschnitten werden, nicht
     scrollbar sein.
  */
  overflow: clip;
}

.contact__petal {
  position: absolute;
  display: block;
  width: var(--w);
  opacity: var(--o);
  transform: translate(-50%, -50%) rotate(var(--a));
}

/*
   Die Rose ist ein Foto und kein Vektor: bei dieser Größe und Deckkraft
   zeigt sie sonst ihre Kanten. Eine Spur Weichzeichner nimmt sie zurück in
   den Grund, ohne dass die Blüte unkenntlich wird.
*/
.contact__rose {
  width: 100%;
  height: auto;
  filter: blur(0.4px) saturate(0.85);
}

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 640px) {
  .page-contact .contact .enquiry {
    padding-block-start: calc(var(--section-y) + 2rem);
  }

  /*
     Auf dem Telefon steht das Formular über die ganze Breite, und die Rosen
     lägen mitten darauf. Die Hälfte fällt weg, der Rest rückt an die Ränder
     und wird kleiner.
  */
  .contact__petal:nth-child(even) {
    display: none;
  }

  .contact__petal {
    width: calc(var(--w) * 0.62);
    opacity: calc(var(--o) * 0.8);
  }
}